/* ===========================================================================
   static/css/ci.css — Kanzleiakte CI, Ebene 2: Erscheinungsbild
   ---------------------------------------------------------------------------
   Diese Datei macht aus dem vorhandenen Bootstrap-4-Markup das Kanzleiakte-CI,
   ohne dass Templates geaendert werden muessen. Sie enthaelt

     Teil A   Grundlage (body, Ueberschriften, Links)
     Teil B   Bootstrap-4-Ueberschreibungen (Navigation, Buttons, Karten,
              Tabellen, Formulare, Badges, Alerts, Tabs, Paginierung)
     Teil C   eigene Bausteine (.ka-*) fuer neues Markup
     Teil C2  Rahmen: Seitenleiste, Kopfzeile, Inhaltsspalte
     Teil C3  Vorschau des Kanzlei-Erscheinungsbilds (Plattform-Verwaltung)
     Teil C4  Mandantenportal
     Teil C5  E-Mail (Vorlagen, Schreiben, Verlauf)
     Teil C6  Telefon, Tablet und Desktop (Tab-Leiste, Bereichsgruppen, Bereichsspalte, Sprungsuche)
     Teil C7  Feinschliff: Sprunglink, Fokus, Tabellen als Karten, Touch-Ziele, Fehlerzusammenfassung
     Teil C8  Handbuch (Hilfeseiten und eigenstaendige Handbuch-Seite)
     Teil C10 Kurzanlage der Akte (Schrittleiste, einklappbare Zusatzangaben)
     Teil C11 Hinweis vor der Abmeldung wegen Leerlauf (Personal)
     Teil C18 Vorschläge beim Tippen in Suchfeldern
     Teil D   Druck

   Regeln fuer diese Datei:
     * keine Farbwerte, nur var(--ka-*) aus tokens.css,
     * !important nur dort, wo eine Bootstrap-Utility-Klasse es erzwingt
       (bg-dark, text-muted, text-danger) — jede Stelle ist kommentiert.

   Die Navigationsleiste oben ist am 20.09.2026 durch die Seitenleiste ersetzt
   worden (Teil C2 und templates/base.html). Die .navbar-Regeln in Teil B
   bleiben trotzdem stehen: das Mandantenportal (client_portal/base.html,
/* ==========================================================================
   Teil C4) hat weiterhin eine obere Navigationsleiste und sieht dadurch
   gleich aus.

   In dieser Datei sind am 20.09.2026 ausserdem die sieben Regeln der
   aufgeloesten css/kanzleiakte.css aufgegangen: body-Schriftgroesse,
   .navbar-brand, .card-header, code, Tabellenzellen-Ausrichtung, Fusszeile.

   Referenz: docs/design/DESIGNSYSTEM.md
   =========================================================================== */

/* ===========================================================================
   Teil A — Grundlage
   =========================================================================== */

body {
  background: var(--ka-ground);
  color: var(--ka-ink);
  font-family: var(--ka-font-sans);
  font-size: var(--ka-fs-md);   /* ersetzt das 0.9rem aus kanzleiakte.css */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .ka-serif, .card-header {
  font-family: var(--ka-font-serif);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ka-ink);
}
h1 { font-size: var(--ka-fs-xl); }
h2 { font-size: var(--ka-fs-lg); }
h3, h4, h5 { font-size: var(--ka-fs-lg); }

a { color: var(--ka-primary); }
a:hover, a:focus { color: var(--ka-primary-h); }

/* Sichtbarer Fokus fuer Tastaturbedienung. Bootstrap 4 blendet den
   Browser-Outline teilweise aus; ohne Ersatz ist die Anwendung per Tastatur
   nicht mehr bedienbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ka-primary);
  outline-offset: 2px;
}

/* Bootstrap-Utility: #6C757D liegt bei 4.5:1 und wird auf hellem Grund in
   kleinen Groessen schwer lesbar. !important ist noetig, weil die
   Utility-Klasse selbst !important traegt. */
.text-muted { color: var(--ka-ink-muted) !important; }

/* Rot als Textfarbe bleibt fuer Formularfehler und Fristen zustaendig —
   beides ist "etwas stimmt nicht" und darf dieselbe Farbe tragen. */
.text-danger  { color: var(--ka-frist-text) !important; }
.text-warning { color: var(--ka-vorfrist-text) !important; }
.text-success { color: var(--ka-ok-text) !important; }
.text-primary { color: var(--ka-primary) !important; }

.bg-light { background-color: var(--ka-surface-muted) !important; }

code { color: var(--ka-primary); font-family: var(--ka-font-mono); }

/* ===========================================================================
   Teil B — Bootstrap-4-Ueberschreibungen
   =========================================================================== */

/* --- B1 Navigationsleiste ------------------------------------------------ */

/* bg-dark traegt !important, deshalb hier ebenfalls. */
.navbar.bg-dark { background-color: var(--ka-nav) !important; }
/* Anmeldeseite: dunkler Kartenkopf in der Navigationsfarbe. Die Ueberschrift
   darin braucht ausdruecklich Weiss, weil h1-h5 weiter oben eine eigene
   (dunkle) Farbe tragen und text-white sie nicht erreicht. */
.card-header.bg-dark { background-color: var(--ka-nav) !important; }
.card-header.bg-dark h1, .card-header.bg-dark h2, .card-header.bg-dark h3,
.card-header.bg-dark h4, .card-header.bg-dark h5 { color: #FFFFFF; }

.navbar { padding: .45rem 1.1rem; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }

.navbar-brand {
  font-family: var(--ka-font-serif);
  font-weight: 700;
  font-size: 17px;
  color: #FFFFFF;
}
.navbar-brand .fas { color: var(--ka-siegel); }

.navbar-dark .navbar-nav .nav-link {
  color: var(--ka-nav-text);
  font-size: var(--ka-fs-md);
  font-weight: 500;
  padding: .45rem .7rem;
  border-radius: var(--ka-radius);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #FFFFFF; background: var(--ka-nav-hover); }
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #FFFFFF; background: var(--ka-nav-active); font-weight: 600;
}
.navbar-dark .navbar-nav .nav-link .fas,
.navbar-dark .navbar-nav .nav-link .far { opacity: .85; margin-right: .15rem; }

.dropdown-menu {
  border: 1px solid #DDD7CC;
  border-radius: 9px;
  box-shadow: var(--ka-shadow-pop);
  padding: 6px;
  font-size: var(--ka-fs-md);
}
.dropdown-item { border-radius: var(--ka-radius); padding: 8px 11px; color: var(--ka-ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ka-primary-t); color: var(--ka-primary-h); }
.dropdown-divider { border-top-color: #EDE8DF; margin: 5px 8px; }

/* --- B2 Buttons ---------------------------------------------------------- */

.btn {
  border-radius: var(--ka-radius);
  font-weight: 600;
  font-size: var(--ka-fs-sm);
  padding: .45rem .9rem;
  line-height: 1.4;
  white-space: nowrap;   /* sonst bricht "+ Neue Akte" auf dem Telefon um */
}
.btn-lg { font-size: var(--ka-fs-md); padding: .6rem 1.15rem; min-height: var(--ka-control-h-lg); }
.btn-sm { font-size: 12px; padding: .3rem .65rem; }

.btn-primary {
  background-color: var(--ka-primary);
  border-color: var(--ka-primary);
  color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ka-primary-h);
  border-color: var(--ka-primary-h);
  color: #FFFFFF;
}

/* Nebenaktionen tragen Kontur auf Papier, nie eine Flaeche. */
.btn-outline-secondary, .btn-secondary {
  background-color: var(--ka-surface);
  border-color: #CFCABF;
  color: #1F2933;
}
.btn-outline-secondary:hover, .btn-secondary:hover,
.btn-outline-secondary:focus, .btn-secondary:focus {
  background-color: var(--ka-surface-muted);
  border-color: #BDB6A8;
  color: var(--ka-ink);
}
.btn-outline-primary { border-color: var(--ka-primary); color: var(--ka-primary); background: var(--ka-surface); }
.btn-outline-primary:hover { background: var(--ka-primary); border-color: var(--ka-primary); color: #FFFFFF; }
/* Gewaehlter Schalter einer Gruppe (Kalender: Tag, Woche, Monat): Blau-Ton und fette Schrift statt Bootstraps Standardblau. Die gefuellte
   Handlungsfarbe bleibt der einen Hauptaktion der Seite vorbehalten (Kanzlei-CI, Regel 3). */
.btn-outline-primary.active, .btn-outline-primary:not(:disabled):not(.disabled).active { background: var(--ka-primary-t); border-color: var(--ka-primary); color: var(--ka-primary); font-weight: 600; }
.btn-outline-primary.active:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover { background: var(--ka-primary); color: #FFFFFF; }

/* Rot gefuellt nur fuer Frist- und Sperrhandlungen. Fuer "Loeschen" in
   Listen ist .btn-outline-danger die richtige Wahl — siehe DESIGNSYSTEM.md. */
.btn-danger {
  background-color: var(--ka-frist);
  border-color: var(--ka-frist);
  color: #FFFFFF;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--ka-frist-text);
  border-color: var(--ka-frist-text);
  color: #FFFFFF;
}
.btn-outline-danger {
  background-color: var(--ka-surface);
  border-color: #E7C3BF;
  color: var(--ka-frist-text);
}
.btn-outline-danger:hover { background-color: var(--ka-frist); border-color: var(--ka-frist); color: #FFFFFF; }

.btn-success { background-color: var(--ka-ok); border-color: var(--ka-ok); color: #FFFFFF; }
.btn-warning { background-color: var(--ka-vorfrist); border-color: var(--ka-vorfrist); color: #FFFFFF; }

.btn:disabled, .btn.disabled {
  background-color: var(--ka-neutral-t);
  border-color: #C9CDD2;
  color: #7D848D;
  opacity: 1;              /* Bootstraps .65 macht den Text unlesbar */
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--ka-primary-t); }

/* --- B3 Karten ----------------------------------------------------------- */

.card {
  background: var(--ka-surface);
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-radius-lg);
  box-shadow: var(--ka-shadow);
}
.card-header {
  background: var(--ka-surface-muted);
  border-bottom: 1px solid var(--ka-line);
  font-size: var(--ka-fs-lg);
  padding: 11px 18px;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5 { margin: 0; font-size: var(--ka-fs-lg); }
.card-body { padding: 16px 18px; }
.card-footer { background: var(--ka-surface-muted); border-top-color: var(--ka-line); padding: 11px 18px; }
.card + .card { margin-top: var(--ka-space-4); }

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

.table { color: var(--ka-ink); font-size: var(--ka-fs-md); margin-bottom: 0; }
.table thead th {
  background: var(--ka-surface-muted);
  border-top: 0;
  border-bottom: 1px solid var(--ka-line);
  font-family: var(--ka-font-sans);
  font-size: var(--ka-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ka-ink-muted);
  padding: 9px 12px;
  white-space: nowrap;
}
.table td, .table th {
  border-top-color: var(--ka-line-soft);
  padding: var(--ka-row-py) 12px;
  vertical-align: middle;   /* war schon in kanzleiakte.css, hier bestaetigt */
}
.table-hover tbody tr:hover { background-color: #F7FAFC; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--ka-surface-muted); }
.card > .table, .card > .table-responsive > .table { border-radius: 0 0 var(--ka-radius-lg) var(--ka-radius-lg); }

/* --- B5 Formulare -------------------------------------------------------- */

.form-control, .custom-select, .custom-file-label {
  min-height: var(--ka-control-h);
  border-radius: var(--ka-radius);
  border-color: #CFCABF;
  font-size: var(--ka-fs-md);
  color: var(--ka-ink);
  background-color: var(--ka-surface);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--ka-primary);
  box-shadow: 0 0 0 3px var(--ka-primary-t);
}
.form-control::placeholder { color: #8D939C; }
.form-control:disabled, .form-control[readonly] { background-color: var(--ka-neutral-t); }

label, .col-form-label { font-weight: 600; font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.form-text { font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); }

.is-invalid, .form-control.is-invalid { border-color: var(--ka-frist); }
.invalid-feedback { color: var(--ka-frist-text); font-size: var(--ka-fs-sm); }

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ka-primary);
  border-color: var(--ka-primary);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ka-primary); }

.input-group-text {
  background: var(--ka-surface-muted);
  border-color: #CFCABF;
  color: var(--ka-ink-2);
  font-size: var(--ka-fs-sm);
}

/* Kombifeld: Freitext ODER Auswahl aus einer Liste (z. B. Rechtsgebiet). Ersetzt <input list>
   + <datalist>, das auf mobilen Browsern nur als nacktes Textfeld ohne jeden Hinweis auf
   Vorschlaege erscheint (live gemeldet 2026-09-26) - eigene Liste statt dessen, verhaelt sich auf
   jedem Geraet gleich. */
.ka-kombifeld { position: relative; }
.ka-kombifeld__liste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--ka-surface);
  border: 1px solid #CFCABF;
  border-radius: var(--ka-radius);
  box-shadow: 0 6px 16px rgba(12, 22, 32, .12);
}

/* --- B6 Badges: die Statussprache ---------------------------------------- */

.badge {
  font-family: var(--ka-font-sans);
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--ka-radius-pill);
  padding: .3em .75em;
  border: 1px solid transparent;
}
.badge-success   { color: var(--ka-ok-text);       background-color: var(--ka-ok-t);       border-color: var(--ka-ok-b); }
.badge-danger    { color: #FFFFFF;                 background-color: var(--ka-frist);      border-color: var(--ka-frist); }
.badge-warning   { color: var(--ka-vorfrist-text); background-color: var(--ka-vorfrist-t); border-color: var(--ka-vorfrist-b); }
.badge-info      { color: var(--ka-primary);       background-color: var(--ka-primary-t);  border-color: var(--ka-primary-b); }
.badge-primary   { color: #FFFFFF;                 background-color: var(--ka-primary);    border-color: var(--ka-primary); }
.badge-secondary { color: var(--ka-ink-2);         background-color: var(--ka-neutral-t);  border-color: var(--ka-neutral-b); }
.badge-light     { color: var(--ka-ink-2);         background-color: var(--ka-surface-muted); border-color: var(--ka-line); }
.badge-dark      { color: #FFFFFF;                 background-color: var(--ka-nav);        border-color: var(--ka-nav); }

/* --- B7 Alerts ------------------------------------------------------------
   Gilt fuer die Seitenmeldungen im Inhalt und fuer die randlosen Banner
   (.rounded-0) aus base.html gleichermassen. */

.alert {
  border-radius: var(--ka-radius-lg);
  border-width: 1px;
  font-size: var(--ka-fs-md);
  padding: 11px 14px;
}
.alert.rounded-0 { border-left: 0; border-right: 0; border-top: 0; }
.alert-danger    { color: #6E2A24;                 background-color: var(--ka-frist-t);    border-color: var(--ka-frist-b); }
.alert-warning   { color: var(--ka-vorfrist-text); background-color: var(--ka-vorfrist-t); border-color: var(--ka-vorfrist-b); }
.alert-success   { color: var(--ka-ok-text);       background-color: var(--ka-ok-t);       border-color: var(--ka-ok-b); }
.alert-info      { color: #1F2933;                 background-color: var(--ka-primary-t);  border-color: var(--ka-primary-b); }
.alert-secondary { color: var(--ka-ink-2);         background-color: var(--ka-neutral-t);  border-color: var(--ka-neutral-b); }
.alert strong { font-weight: 700; }
.alert .close { opacity: .6; text-shadow: none; }
.alert .close:hover { opacity: 1; }

/* --- B8 Tabs, Listen, Paginierung ---------------------------------------- */

.nav-tabs { border-bottom: 1px solid var(--ka-line); }
.nav-tabs .nav-link {
  border: 0;
  color: var(--ka-ink-2);
  font-weight: 500;
  font-size: var(--ka-fs-md);
  padding: 0 0 11px;
  margin-right: 22px;
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--ka-primary); }
.nav-tabs .nav-link.active {
  color: var(--ka-primary);
  font-weight: 600;
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--ka-primary);
}

.list-group-item { border-color: var(--ka-line); font-size: var(--ka-fs-md); padding: 11px 14px; }
.list-group-item.active { background-color: var(--ka-primary); border-color: var(--ka-primary); }

.page-link { color: var(--ka-primary); border-color: var(--ka-line); font-size: var(--ka-fs-sm); }
.page-item.active .page-link { background-color: var(--ka-primary); border-color: var(--ka-primary); }

.progress { background-color: var(--ka-neutral-t); border-radius: var(--ka-radius-pill); height: 6px; }
.progress-bar { background-color: var(--ka-primary); }

.breadcrumb { background: transparent; padding: 0; font-size: var(--ka-fs-sm); margin-bottom: var(--ka-space-3); }

footer.footer {
  background: var(--ka-surface-muted) !important;   /* bg-light traegt !important */
  border-top: 1px solid var(--ka-line);
  color: var(--ka-ink-muted);
}

/* ===========================================================================
   Teil C — Eigene Bausteine
   ---------------------------------------------------------------------------
   Nur fuer neues oder bewusst umgestelltes Markup. Icons kommen wie im
   restlichen Projekt aus Font Awesome 5 (<i class="fas fa-...">), nicht als
   Inline-SVG.
   =========================================================================== */

/* Aktenzeichen, Betraege, technische Kennungen */
.ka-az {
  font-family: var(--ka-font-mono);
  font-size: var(--ka-fs-sm);
  color: var(--ka-primary);
}

/* Kurzrubrum einer Akte (Vorschau in der Akte, 21.10.2026): mehrzeilig wie im Schreiben, linke Kante wie ein Zitat */
.ka-kurzrubrum {
  border-left: 3px solid var(--ka-line);
  padding-left: .75rem;
  line-height: 1.4;
}

/* Feldbeschriftung in Versalien */
.ka-label {
  font-size: var(--ka-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ka-ink-muted);
  display: block;
  margin-bottom: 6px;
}

/* Aktenkopf: traegt Aktenzeichen, Rubrum, Status und genau eine Hauptaktion */
.ka-aktenkopf {
  background: var(--ka-surface);
  border-bottom: 1px solid var(--ka-line);
  padding: 16px 0 0;
  margin-bottom: var(--ka-space-4);
}
.ka-aktenkopf__titel {
  font-family: var(--ka-font-serif);
  font-size: var(--ka-fs-2xl);
  font-weight: 700;
  margin: 7px 0 0;
}
.ka-aktenkopf__meta { font-size: var(--ka-fs-sm); color: var(--ka-ink-2); margin-top: 6px; }

/* Statuspille. Der Zustand kommt aus dem Modell, nie aus dem Anzeigetext. */
.ka-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--ka-radius-pill);
  padding: .3em .75em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ka-status--offen      { color: var(--ka-ok-text);       background: var(--ka-ok-t);       border-color: var(--ka-ok-b); }
.ka-status--frist      { color: var(--ka-frist-text);    background: var(--ka-frist-t);    border-color: var(--ka-frist-b); }
.ka-status--ungeprueft { color: #FFFFFF;                 background: var(--ka-frist);      border-color: var(--ka-frist); font-weight: 700; }
.ka-status--vorfrist   { color: var(--ka-vorfrist-text); background: var(--ka-vorfrist-t); border-color: var(--ka-vorfrist-b); }
.ka-status--info       { color: var(--ka-primary);       background: var(--ka-primary-t);  border-color: var(--ka-primary-b); }
.ka-status--neutral    { color: var(--ka-ink-2);         background: var(--ka-neutral-t);  border-color: var(--ka-neutral-b); }

/* Herkunft eines Posteingangs */
.ka-quelle {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
}
.ka-quelle--bea  { color: var(--ka-primary);       background: var(--ka-primary-t); }
.ka-quelle--fax  { color: var(--ka-vorfrist-text); background: var(--ka-vorfrist-t); }
.ka-quelle--scan { color: var(--ka-ok-text);       background: var(--ka-ok-t); }
.ka-quelle--mail { color: var(--ka-ink-2);         background: var(--ka-neutral-t); }
.ka-quelle--post { color: var(--ka-ink-2);         background: var(--ka-neutral-t); }

/* Fristenzeile mit Datumsblock */
.ka-frist-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--ka-line-soft);
}
.ka-frist-zeile.is-ungeprueft { background: #FDF6F4; }
/* Telefon: Avatare und Schaltflaechen rutschen unter den Text, statt die Seite breiter als den Bildschirm zu machen. */
@media (max-width: 575.98px) {
  .ka-frist-zeile { flex-wrap: wrap; }
  .ka-frist-zeile > .flex-grow-1 { flex-basis: calc(100% - 64px); min-width: 0; }
}
.ka-datum {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ka-ground);
  border: 1px solid var(--ka-line);
  color: var(--ka-ink);
}
.ka-datum--faellig { background: var(--ka-frist); border-color: var(--ka-frist); color: #FFFFFF; }
.ka-datum__tag  { font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.ka-datum__zahl { font-family: var(--ka-font-serif); font-size: 19px; font-weight: 700; line-height: 1; }

/* Hinweis auf ein nicht gebuchtes Modul: sperrt nie eine Seite */
.ka-modulhinweis {
  border: 1px dashed #C4BDB0;
  border-radius: 8px;
  background: var(--ka-surface-muted);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--ka-fs-sm);
  color: var(--ka-ink-2);
  line-height: 1.5;
}
.ka-modulhinweis .fas { color: var(--ka-ink-muted); margin-top: 2px; }

/* Seitenkopf einer Listenansicht */
.ka-seitenkopf {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;       /* auf schmalen Bildschirmen rutschen die Aktionen unter den Titel */
  gap: var(--ka-space-3) var(--ka-space-4);
  margin-bottom: var(--ka-space-4);
}
.ka-seitenkopf__titel { font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; margin: 0; }
.ka-seitenkopf__aktionen { margin-left: auto; display: flex; gap: var(--ka-space-2); }

/* Leerzustand einer Liste: sagt, was zu tun ist, statt nur "keine Daten" */
.ka-leer {
  text-align: center;
  padding: 40px 20px;
  color: var(--ka-ink-muted);
  font-size: var(--ka-fs-md);
}
.ka-leer .fas { font-size: 26px; color: #C4BDB0; display: block; margin-bottom: 10px; }
.ka-leer--kompakt { padding: 8px 0; }

/* Benachrichtigungszentrale (WP13): Zeilen der Liste und die Kachel "Heute" auf dem Dashboard. Farben nur ueber
   Tokens. Die Glocke mit Zaehler ist der Navigationspunkt "Benachrichtigungen" (Seitenleiste, Symbolleiste, "Mehr")
   und braucht keine eigene Gestaltung. */
.ka-benachrichtigung {
  display: flex;
  align-items: flex-start;
  gap: var(--ka-space-3);
  border-left: 3px solid transparent;
}
.ka-benachrichtigung--neu { border-left-color: var(--ka-primary); background: var(--ka-primary-t); }
.ka-benachrichtigung__symbol { flex: 0 0 24px; text-align: center; color: var(--ka-primary); padding-top: 2px; }
.ka-benachrichtigung__inhalt { flex: 1 1 auto; min-width: 0; }
.ka-benachrichtigung__titel { font-weight: 600; }
.ka-benachrichtigung__text { font-size: var(--ka-fs-md); color: var(--ka-ink-2); }
.ka-benachrichtigung__meta { font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-benachrichtigung__aktionen { flex: 0 0 auto; margin: 0; }
@media (max-width: 767.98px) {
  .ka-benachrichtigung { flex-wrap: wrap; }
  .ka-benachrichtigung__aktionen { flex: 1 0 100%; }
  .ka-benachrichtigung__aktionen .btn { min-height: 44px; }
}

.ka-heute__zeile { display: flex; align-items: flex-start; gap: var(--ka-space-3); }
.ka-heute__symbol { flex: 0 0 24px; text-align: center; color: var(--ka-primary); padding-top: 2px; }
.ka-heute__inhalt { flex: 1 1 auto; min-width: 0; }
.ka-heute__liste { margin-top: 4px; }
.ka-heute__aktion { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .ka-heute__zeile { flex-wrap: wrap; }
  .ka-heute__aktion { flex: 1 0 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* ===========================================================================
   Teil C2 — Rahmen: Seitenleiste statt oberer Navigationsleiste
   ---------------------------------------------------------------------------
   Ab 992 px steht die Navigation fest am linken Rand (240 px), der Inhalt
   rueckt entsprechend ein. Darunter klappt sie ueber die Kopfzeile auf —
   technisch derselbe Bootstrap-Collapse wie beim frueheren navbar-toggler.

   Hinweis zur Reihenfolge: .ka-sidebar setzt display:flex und wuerde damit
   Bootstraps .collapse{display:none} schlagen (gleiche Spezifitaet, spaeter
   im Stylesheet). Die Medienabfrage unten stellt das wieder gerade.
   =========================================================================== */

.ka-inhalt {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.ka-inhalt > .container-fluid { flex-grow: 1; }

/* Kopfzeile nur unterhalb von lg */
.ka-topbar {
  background: var(--ka-nav);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.ka-topbar__schalter {
  position: relative;
  background: var(--ka-nav-hover);
  border: 1px solid var(--ka-nav-line);
  border-radius: var(--ka-radius);
  color: #FFFFFF;
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ka-topbar__schalter:hover, .ka-topbar__schalter:focus { color: #FFFFFF; text-decoration: none; }
/* Zaehler der Glocke in der Telefon-Kopfzeile: dieselbe Plakette wie an Tab-Leiste und Symbolleiste. Die Wortmarke gibt
   Platz ab (Ellipse), damit drei Symbole auch bei 320 px nebeneinander passen. */
.ka-topbar__zahl {
  position: absolute; top: .125rem; right: .125rem;
  background: var(--ka-frist); color: var(--ka-surface);
  font-size: .594rem; font-weight: 700; line-height: 1;
  border-radius: var(--ka-radius-pill); padding: .125rem .3125rem;
}
.ka-topbar .ka-marke { min-width: 0; }
.ka-topbar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Desktop-Kopfleiste (WP17): nur ab 992 px, wo die Seitenleiste steht (die Sichtbarkeit setzen d-none d-lg-flex im Template - Telefon und
   Tablet haben ihre eigenen Leisten). Traegt allein das Hilfe-Symbol oben rechts im Inhaltsbereich; steht im Textfluss ueber dem Inhalt
   (nicht fixiert), 44 x 44 px Zielflaeche, sichtbarer Fokus, Farben nur ueber Tokens (folgt dem Erscheinungsbild der Kanzlei). */
.ka-desktopleiste {
  justify-content: flex-end;
  align-items: center;
  padding: 4px 16px;
  background: var(--ka-surface);
  border-bottom: 1px solid var(--ka-line);
}
.ka-desktopleiste__schalter {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: var(--ka-radius);
  color: var(--ka-ink-muted);
  font-size: 1.35rem;
  cursor: pointer;
}
.ka-desktopleiste__schalter:hover, .ka-desktopleiste__schalter:focus { background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-desktopleiste__schalter:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: -2px; }

.ka-sidebar {
  width: 246px;                 /* Register 385: Entwurf F5 (246 px), vorher 240 px */
  background: var(--ka-nav);
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
}
/* Strichsymbole der Navigation (apps.core.nav_symbole): Farbe aus dem Text, Masse je Stelle */
.ka-symbol { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.ka-marke {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
  color: #FFFFFF;
  font-family: var(--ka-font-serif);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
/* Seitenleiste (Entwurf F5): Wortmarke 15 px mit Kanzleiname darunter, 14/16/10 px Innenabstand */
.ka-sidebar .ka-marke { padding: 14px 16px 10px; font-size: 15px; line-height: 1.2; }
.ka-marke__text { display: flex; flex-direction: column; min-width: 0; }
.ka-marke__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-marke__zeichen { width: 21px; height: 21px; stroke: var(--ka-siegel); stroke-width: 1.6; }
.ka-symbolleiste .ka-marke__zeichen { width: 24px; height: 24px; }
.ka-marke:hover, .ka-marke:focus { color: #FFFFFF; text-decoration: none; }
.ka-marke .fas { color: var(--ka-siegel); font-size: 20px; }

/* Kanzlei-Logo (Erscheinungsbild je Kanzlei). Logos sind fuer helle Grunde
   gezeichnet - deshalb steht es auf einer hellen Plakette, gleich welche
   Navigationsfarbe die Kanzlei gewaehlt hat. */
.ka-logo {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--ka-surface);
  padding: 4px 6px;
  border-radius: var(--ka-radius);
}
.ka-topbar .ka-logo { height: 28px; }
/* Seitenleiste mit Logo: Logo oben ueber die Breite, Name darunter - nebeneinander wird es zu eng. */
.ka-marke--logo { flex-direction: column; align-items: flex-start; gap: 8px; }
.ka-marke--logo .ka-logo { height: auto; max-height: 46px; max-width: 100%; }
.ka-logo--gross { height: 56px; max-width: 220px; margin-bottom: 8px; }
.ka-marke small {
  display: block;
  font-family: var(--ka-font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ka-nav-label);
  letter-spacing: .02em;
}

/* Laufende Zeiterfassung: auf jeder Seite sichtbar, damit sie nicht vergessen wird.
   Bewusst keine Signalfarbe (Rot/Amber gehoeren Frist und Vorfrist), sondern die
   Navigationsfarbe. */
.ka-timer {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1035;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 9px 12px 9px 14px;
  background: var(--ka-nav);
  color: #FFFFFF;
  border-radius: var(--ka-radius-lg);
  box-shadow: var(--ka-shadow-pop);
  font-size: var(--ka-fs-sm);
}
.ka-timer a:not(.btn) { color: #FFFFFF; text-decoration: underline; }
.ka-timer__symbol { color: var(--ka-siegel); font-size: 18px; }
.ka-timer__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ka-timer__text time { font-variant-numeric: tabular-nums; font-weight: 600; }
.ka-timer__form { margin: 0; }
.ka-timer--pausiert .ka-timer__symbol { color: var(--ka-pause-hell); }
@media (max-width: 575.98px) {
  .ka-timer { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-wrap: wrap; row-gap: 6px; }
  .ka-timer__text { flex: 1 1 calc(100% - 40px); }
}

/* Suchfeld — ersetzt den frueheren Menuepunkt "Suche" */
.ka-sidebar .ka-suche { margin: 0 12px 8px; }
.ka-suche__symbol { width: 14px; height: 14px; color: var(--ka-nav-label); stroke-width: 1.9; }
.ka-suche {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--ka-nav-hover);
  border: 1px solid var(--ka-nav-line);
  border-radius: 7px;           /* Entwurf F5-Suche (Register 370): 34 px hoch, 7 px Radius */
  padding: 0 9px;
  height: 34px;
}
.ka-suche .fas { color: var(--ka-nav-label); font-size: 13px; }
.ka-suche input {
  flex-grow: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #FFFFFF;
  font-size: 12.5px;
}
.ka-suche input::placeholder { color: var(--ka-nav-label); }
.ka-suche input:focus { outline: none; }
.ka-suche:focus-within { border-color: var(--ka-nav-focus); }

.ka-nav { display: flex; flex-direction: column; }
/* Die Punkte scrollen allein; Zeiterfassung und Person bleiben unten (Register 385) */
.ka-sidebar__liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--ka-nav-line) transparent; }
.ka-nav__gruppe {
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ka-nav-label);
  padding: 0 8px 6px;
}

.ka-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 13px;   /* Entwurf F5: 16 px, davon 3 px Randstreifen */
  min-height: 32px;
  border-left: 3px solid transparent;
  color: var(--ka-nav-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  /* Auch als <button> (Hilfe zu dieser Seite) ohne die Standarddarstellung des Browsers: sonst helle Flaeche mit hellem Text. */
  background: transparent;
  border-top: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.ka-sidebar__link:hover, .ka-sidebar__link:focus {
  background: var(--ka-nav-hover);
  color: #FFFFFF;
  text-decoration: none;
}
.ka-sidebar__link.is-active, .ka-sidebar__link[aria-current="page"] {
  background: var(--ka-nav-active);
  border-left-color: var(--ka-siegel);
  color: #FFFFFF;
  font-weight: 600;
}
.ka-sidebar__link > .ka-sidebar__symbol { width: 17px; flex: 0 0 17px; display: flex; color: var(--ka-nav-label); }
.ka-sidebar__link:hover .ka-sidebar__symbol, .ka-sidebar__link:focus .ka-sidebar__symbol, .ka-sidebar__link[aria-current="page"] .ka-sidebar__symbol { color: #FFFFFF; }
.ka-sidebar__text { flex-grow: 1; min-width: 0; }
.ka-sidebar__link .fas, .ka-sidebar__link .far {
  width: 17px;
  text-align: center;
  opacity: .85;
  font-size: 14px;
}
.ka-sidebar__link > span { flex-grow: 1; }
.ka-sidebar__link > .badge { flex-grow: 0; }

.ka-sidebar__pfeil { font-size: 10px !important; opacity: .7; transition: transform .15s ease; }
.ka-sidebar__link--auf[aria-expanded="true"] .ka-sidebar__pfeil { transform: rotate(180deg); }
.ka-sidebar__link--unter {
  padding: 6px 10px 6px 37px;
  font-size: var(--ka-fs-sm);
  font-weight: 400;
  color: var(--ka-nav-label);
}
.ka-sidebar__link--unter:hover { color: #FFFFFF; }


.ka-sidebar__fuss { margin-top: auto; padding: 0 10px; }

/* Laufende Zeiterfassung unten in der Seitenleiste (Entwurf Main, Register 385). Grün nur der Punkt „läuft“; Ziffern in Mono. */
.ka-zeitkasten { margin: 8px 12px 6px; padding: 10px 11px; background: var(--ka-nav-hover); border: 1px solid var(--ka-nav-line); border-radius: 8px; color: #FFFFFF; }
.ka-zeitkasten__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ka-nav-count-text); }
.ka-zeitkasten__punkt { width: 7px; height: 7px; border-radius: var(--ka-radius-pill); background: var(--ka-ok-hell); }
.ka-zeitkasten__zeit { display: block; font-family: var(--ka-font-mono); font-size: 20px; font-weight: 500; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ka-zeitkasten__akte { font-size: 11.5px; color: var(--ka-nav-count-text); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-zeitkasten__akte a { color: #FFFFFF; text-decoration: underline; }
.ka-zeitkasten__knoepfe { display: flex; gap: 6px; }
.ka-zeitkasten__knoepfe form { flex: 1 1 0; margin: 0; display: flex; }
.ka-zeitkasten__knopf { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 5px;
  border: 1px solid var(--ka-nav-focus); background: transparent; color: #FFFFFF; font: 600 12px var(--ka-font-sans); text-decoration: none; cursor: pointer; }
.ka-zeitkasten__knopf--haupt { background: var(--ka-nav-active); }
/* Register 386: Stift (Bearbeiten) als schmaler Symbolknopf; pausiert: Punkt in Bernstein statt Grün, die Uhr steht (gedämpft). */
.ka-zeitkasten__knopf--symbol { flex: 0 0 30px; }
.ka-zeitkasten__knopf--symbol .ka-symbol { width: 14px; height: 14px; }
.ka-zeitkasten--pausiert .ka-zeitkasten__punkt { background: var(--ka-pause-hell); }
.ka-zeitkasten--pausiert .ka-zeitkasten__zeit { color: var(--ka-nav-count-text); }
.ka-zeitkasten__knopf:hover, .ka-zeitkasten__knopf:focus { background: var(--ka-nav-active); color: #FFFFFF; text-decoration: none; }
.ka-zeitkasten__knopf:focus-visible, .ka-zeitkasten a:focus-visible { outline: 2px solid var(--ka-nav-text); outline-offset: 1px; }
.ka-benutzer__mehr { width: 16px; height: 16px; fill: currentColor; stroke: none; color: var(--ka-nav-label); }
.ka-benutzer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: var(--ka-radius);
  color: #FFFFFF;
  text-decoration: none;
}
.ka-benutzer:hover, .ka-benutzer:focus { background: var(--ka-nav-hover); color: #FFFFFF; text-decoration: none; }
.ka-benutzer__zeichen {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--ka-radius-pill);
  background: var(--ka-siegel);
  color: var(--ka-siegel-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ka-benutzer__text {
  flex-grow: 1;
  min-width: 0;
  font-size: var(--ka-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ka-benutzer__text small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--ka-nav-label);
}
.ka-sidebar__fuss .dropdown-menu { width: 212px; }

@media (max-width: 991.98px) {
  /* Bootstrap-Collapse wieder wirksam machen (siehe Kopf dieses Abschnitts) */
  .ka-sidebar.collapse:not(.show) { display: none; }
  .ka-sidebar { width: auto; }
}

@media (min-width: 992px) {
  .ka-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 246px;
    overflow: hidden;           /* gescrollt wird nur .ka-sidebar__liste */
    z-index: 1030;
  }
  .ka-hat-seitenleiste .ka-inhalt { margin-left: 246px; }
  /* Die Zeiterfassung steht ab hier in der Seitenleiste (.ka-zeitkasten); die schwebende Plakette entfällt, Daria rückt nach unten. */
  .ka-timer { display: none; }
}

/* ===========================================================================
   Teil C3 — Vorschau des Kanzlei-Erscheinungsbilds (Plattform-Verwaltung)
   ---------------------------------------------------------------------------
   Eine Musterseite, deren Farben als Custom Properties am Container gesetzt
   werden (style-Attribut, nur aus geprueften Werten). Die Bausteine darin sind
   dieselben wie in der Anwendung - .btn, .badge, .ka-sidebar__link -, es
   gibt hier also keine zweite Gestaltung, die auseinanderlaufen koennte.
   =========================================================================== */

.ka-vorschau {
  display: flex;
  min-height: 320px;
  background: var(--ka-ground);
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-radius-lg);
  overflow: hidden;
}
.ka-vorschau__nav {
  width: 214px;
  flex-shrink: 0;
  background: var(--ka-nav);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ka-vorschau__inhalt { flex-grow: 1; min-width: 0; padding: 16px 18px; }
.ka-farbprobe {
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: middle;
  border: 1px solid var(--ka-line);
  border-radius: 4px;
}
.ka-farbwahl {
  width: 44px; height: var(--ka-control-h);
  padding: 2px;
  border: 1px solid var(--ka-line);
  border-left: 0;
  border-radius: 0 var(--ka-radius) var(--ka-radius) 0;
  background: var(--ka-surface);
}
.ka-vorschau__zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
@media (max-width: 575.98px) {
  .ka-vorschau { flex-direction: column; }
  .ka-vorschau__nav { width: auto; }
}

/* ===========================================================================
   Teil C4 — Mandantenportal
   ---------------------------------------------------------------------------
   Schmale, einspaltige Seiten fuer Mandanten - meist auf dem Telefon geoeffnet.
   Kopfleiste ist die Bootstrap-Navigationsleiste (Teil B1, Farbe --ka-nav und
   damit Kanzlei-CI); hier stehen nur Marke, Dokumentzeilen und Fusszeile.
   =========================================================================== */

.ka-portal { min-height: 100vh; display: flex; flex-direction: column; }
.ka-portal__inhalt { flex-grow: 1; max-width: 980px; padding-top: var(--ka-space-5); padding-bottom: var(--ka-space-5); }
.ka-portal__sprung:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; background: var(--ka-surface); padding: 8px 12px; border-radius: var(--ka-radius); }
.ka-portal__karte { margin-top: var(--ka-space-4); }
/* Aktenkopf im Portal als eigene Karte: im Personalbereich sitzt er buendig in der Seite, hier steht er im Rand. */
.ka-portal .ka-aktenkopf { padding: var(--ka-space-4); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); }
.ka-portal .ka-aktenkopf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2) var(--ka-space-3); }

/* Kopfleiste: Logo/Symbol, Kanzleiname, darunter "Mandantenportal"; Menue rechts, umbricht auf dem Telefon. */
.ka-portalkopf { flex-wrap: wrap; row-gap: var(--ka-space-2); }
.ka-portalkopf__marke { display: flex; align-items: center; gap: 10px; white-space: normal; }
.ka-portalkopf__marke span { line-height: 1.2; }
.ka-portalkopf__marke small {
  display: block;
  font-family: var(--ka-font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ka-nav-label);
  letter-spacing: .02em;
}
.ka-portalkopf__menue { gap: var(--ka-space-1); flex-wrap: wrap; }

/* Aktenliste */
.ka-akte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2) var(--ka-space-4); }
.ka-akte__link { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; color: var(--ka-ink); text-decoration: none; }
.ka-akte__link:hover, .ka-akte__link:focus { text-decoration: none; color: var(--ka-primary); }
.ka-akte__titel { font-weight: 600; overflow-wrap: anywhere; }
.ka-akte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2); font-size: var(--ka-fs-sm); }

/* Dokumentzeilen */
.ka-dokument { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ka-space-2) var(--ka-space-4); }
.ka-dokument__name { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.ka-dokument__meta { color: var(--ka-ink-muted); font-size: var(--ka-fs-sm); }

/* Zeitleiste "Was ist passiert?" (WP8): Symbol links, Titel mit Pillen, Text, Zeit. Ein ungelesener Eintrag traegt
   einen Balken in der Handlungsfarbe - Farbe ist nie das einzige Signal, die Pille "Neu" steht dazu. */
.ka-zeitleiste { margin: 0; padding: 0; list-style: none; }
.ka-ereignis { display: flex; gap: var(--ka-space-3); align-items: flex-start; border-left: 3px solid transparent; }
.ka-ereignis--neu { border-left-color: var(--ka-primary); background: var(--ka-surface-muted); }
.ka-ereignis__symbol {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ka-primary-t); color: var(--ka-primary); font-size: 14px;
}
.ka-ereignis__inhalt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ka-ereignis__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2); }
.ka-ereignis__text { margin: 4px 0 0; color: var(--ka-ink-2); }
.ka-ereignis__zeit { margin-top: 4px; color: var(--ka-ink-muted); font-size: var(--ka-fs-sm); font-variant-numeric: tabular-nums; }

/* Nachrichtenverlauf Kanzlei <-> Mandant (WP8): Absender und Zeit als Kopfzeile, Text darunter; Nachrichten der
   Kanzlei mit Balken in der Handlungsfarbe, die des Mandanten mit neutralem Balken - auf beiden Seiten gleich. */
.ka-nachrichten { margin: 0; padding: 0; list-style: none; }
.ka-nachricht { border-left: 3px solid var(--ka-line); }
.ka-nachricht--kanzlei { border-left-color: var(--ka-primary); }
.ka-nachricht__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2); margin-bottom: 4px; }
.ka-nachricht__zeit { color: var(--ka-ink-muted); font-size: var(--ka-fs-sm); font-variant-numeric: tabular-nums; }
.ka-nachricht__text { overflow-wrap: anywhere; }

/* Fragebogen im Startpaket (Paket W7): Antwortfelder und Schaltflaeche muessen auch am Telefon mit dem Finger zu treffen sein
   (Designsystem 8 und 11: mindestens 44 px unter 768 px; die Rahmenregeln dafuer gelten nur im Personalbereich, .ka-inhalt). */
@media (max-width: 767.98px) {
  .ka-fragebogen .btn, .ka-fragebogen .form-control { min-height: 44px; }
  .ka-fragebogen .btn { display: inline-flex; align-items: center; justify-content: center; }
  .ka-fragebogen .form-check { display: flex; align-items: center; min-height: 44px; padding-left: 0; }
  .ka-fragebogen .form-check-input { position: static; flex: 0 0 22px; width: 22px; height: 22px; margin: 0 var(--ka-space-2) 0 0; }
  .ka-fragebogen .form-check-label { flex: 1 1 auto; }
}

.ka-portalfuss {
  background: var(--ka-surface-muted);
  border-top: 1px solid var(--ka-line);
  color: var(--ka-ink-muted);
  font-size: var(--ka-fs-sm);
  padding: var(--ka-space-3) 0;
  text-align: center;
}

/* ===========================================================================
   Teil C5 — E-Mail (Vorlagen, Schreiben, Verlauf)
   ---------------------------------------------------------------------------
   Vorschau und Bearbeitung von HTML-E-Mails laufen in abgeschotteten Rahmen
   (iframe, ohne Skripte): die Formatierung einer Vorlage darf die Oberflaeche
   nie beeinflussen.
   =========================================================================== */

.ka-quelltext { font-family: var(--ka-font-mono); font-size: var(--ka-fs-sm); }
/* Pseudonymisierter Text einer KI-Anfrage zur Prüfung (KI-Freigaben): Umbrüche bleiben, lange Zeilen brechen um, die Höhe ist begrenzt. */
.ka-pruefblock {
  font-family: var(--ka-font-mono);
  font-size: var(--ka-fs-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 28rem;
  overflow: auto;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-radius);
  background: var(--ka-surface);
}
.ka-suchfeld { min-width: 22rem; max-width: 100%; }
.ka-mailvorschau {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-radius);
  background: var(--ka-surface);
}
.ka-mailtext { white-space: normal; overflow-wrap: anywhere; }
.ka-editor { border: 1px solid var(--ka-line); border-radius: var(--ka-radius); background: var(--ka-surface); }
.ka-editor__leiste { display: flex; flex-wrap: wrap; gap: var(--ka-space-1); padding: var(--ka-space-2); border-bottom: 1px solid var(--ka-line); background: var(--ka-surface-muted); }
.ka-editor__rahmen { display: block; width: 100%; height: 440px; border: 0; resize: vertical; }
.ka-anhangliste { max-height: 260px; overflow-y: auto; border: 1px solid var(--ka-line-soft); border-radius: var(--ka-radius); padding: var(--ka-space-3); }

/* Unterschrift im Mandantenportal (apps.signatures): Zeichenfeld, eingetippter Name, Codefeld. Die Tinte des Zeichenfelds
   ist die Schriftfarbe (`color`) - das Skript der Seite liest sie, im Erscheinungsbild der Kanzlei also deren Primaerfarbe. */
.ka-sigpad { max-width: 640px; border: 2px dashed var(--ka-line); border-radius: var(--ka-radius); background: var(--ka-surface); color: var(--ka-primary); }
.ka-sigpad canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.ka-sigtyped { font-family: var(--ka-font-serif); font-style: italic; font-size: 2rem; color: var(--ka-primary); min-height: 3rem; }
.ka-sigpad-leiste { max-width: 640px; }
.ka-portal .nav-pills .nav-link.active { background-color: var(--ka-primary); }
.ka-codefeld { max-width: 12rem; letter-spacing: .2em; }
.ka-vorformatiert { white-space: pre-line; }

/* ===========================================================================
   Teil C6 — Telefon, Tablet und Desktop
   Entwurf: docs/design/navigation.html · Ticket: docs/design/TICKET_MOBILNAVIGATION.md

   Unter 768 px traegt die Seitenleiste nicht mehr: An ihre Stelle tritt die
   Tab-Leiste am unteren Rand (vier Ziele und die Erfassen-Aktion), die Akte
   wird vom Reiterband zum Cockpit mit Bereichsgruppen, und aus dem
   Menue-Vorhang wird die Seite "Mehr".

   Alle Bausteine hier sind zusaetzlich: Ohne das zugehoerige Markup aendert
   sich an bestehenden Seiten nichts. Ab 768 px blendet sich die Tab-Leiste
   selbst aus.
   =========================================================================== */

/* --- Tab-Leiste ---------------------------------------------------------- */
.ka-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: stretch; height: 68px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--ka-surface); border-top: 1px solid var(--ka-line);
}
.ka-tabbar__eintrag {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem;
  color: var(--ka-ink-muted); font-size: .656rem; font-weight: 500; text-decoration: none;
}
.ka-tabbar__eintrag:hover, .ka-tabbar__eintrag:focus { color: var(--ka-primary); text-decoration: none; }
.ka-tabbar__eintrag .fas, .ka-tabbar__eintrag .far { font-size: 1.15rem; }
.ka-tabbar__eintrag[aria-current="page"] { color: var(--ka-primary); font-weight: 700; }
.ka-tabbar__zahl {
  position: absolute; top: .5rem; right: 1.1rem;
  background: var(--ka-frist); color: var(--ka-surface);
  font-size: .594rem; font-weight: 700; line-height: 1;
  border-radius: var(--ka-radius-pill); padding: .125rem .3125rem;
}
/* Mittlerer Platz: die Aktion, nicht ein Ziel. */
.ka-tabbar__erfassen {
  width: 54px; height: 54px; margin-top: -16px; flex-shrink: 0; align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ka-radius-pill); border: 0;
  background: var(--ka-primary); color: var(--ka-surface); font-size: 1.35rem;
  box-shadow: 0 3px 10px rgba(16, 42, 65, .30);
}
.ka-tabbar__erfassen:hover, .ka-tabbar__erfassen:focus { background: var(--ka-primary-h); color: var(--ka-surface); }
.ka-tabbar__mitte { flex: 1 1 0; display: flex; justify-content: center; align-items: flex-start; }
/* Damit die Leiste keinen Inhalt verdeckt. */
.ka-hat-tabbar .ka-inhalt { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 1rem); }

/* --- Bereichsgruppen (Akte und Seite "Mehr") ----------------------------- */
.ka-gruppenliste { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); overflow: hidden; }
.ka-gruppenzeile {
  display: flex; align-items: center; gap: .6875rem; width: 100%;
  min-height: 56px; padding: .8125rem 1rem; text-align: left;
  background: var(--ka-surface); border: 0; border-bottom: 1px solid var(--ka-line-soft);
  color: var(--ka-ink); text-decoration: none;
}
.ka-gruppenzeile:last-child { border-bottom: 0; }
.ka-gruppenzeile:hover, .ka-gruppenzeile:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-gruppenzeile[aria-expanded="true"] { background: var(--ka-surface-muted); }
.ka-gruppenzeile__symbol {
  width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--ka-radius); background: var(--ka-primary-t); color: var(--ka-primary);
}
.ka-gruppenzeile__text { flex-grow: 1; min-width: 0; }
.ka-gruppenzeile__name { display: block; font-size: .938rem; font-weight: 600; }
.ka-gruppenzeile__inhalt { display: block; font-size: .75rem; color: var(--ka-ink-muted); margin-top: .125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-gruppenzeile__zahl { font-size: .75rem; color: var(--ka-ink-muted); font-variant-numeric: tabular-nums; }
/* Einzelner Bereich innerhalb einer aufgeklappten Gruppe */
.ka-bereichszeile {
  display: flex; align-items: center; gap: .625rem; min-height: 52px;
  padding: 0 1rem 0 2.875rem; background: var(--ka-surface);
  border-bottom: 1px solid var(--ka-line-soft); color: var(--ka-ink); text-decoration: none; font-size: .906rem;
}
.ka-bereichszeile:hover, .ka-bereichszeile:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }

/* --- Blatt von unten (Bereichswahl, Erfassen) ---------------------------- */
.ka-blatt .modal-dialog { margin: 0; position: absolute; left: 0; right: 0; bottom: 0; max-width: none; }
/* max-height + eigenes Scrollen auf .modal-content (statt auf .modal): noetig, damit Griff und Kopfzeile darin
   "sticky" bleiben - siehe .ka-blatt__griff/.modal-header weiter unten. Ohne das scrollte beim Blatt "Bereich
   waehlen" (Arbeitspaket 3) die automatische Sprungmarke zur zuletzt aktiven Gruppe die Kopfzeile mit dem
   Schliessen-Knopf aus dem Bild - das Blatt liess sich dann nur noch ueber einen Bereich-Tipp verlassen (live
   gemeldet, 2026-09-25). */
.ka-blatt .modal-content {
  border: 0; border-radius: var(--ka-radius-lg) var(--ka-radius-lg) 0 0; box-shadow: 0 -6px 24px rgba(12, 22, 32, .22);
  max-height: 85vh; overflow-y: auto;
}
.ka-blatt__griff {
  position: sticky; top: 0; z-index: 1;
  width: 38px; height: 4px; margin: .5rem auto .125rem; border-radius: var(--ka-radius-pill);
  background: var(--ka-griff);
}
.ka-blatt .modal-header { position: sticky; top: 4px; z-index: 1; background: var(--ka-surface); }

/* --- Schnellaktionen im Aktenkopf ---------------------------------------- */
.ka-schnellaktionen { display: flex; gap: .5625rem; }
.ka-schnellaktionen > * {
  flex: 1 1 0; min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius);
  color: var(--ka-ink); font-size: .719rem; font-weight: 600; text-decoration: none;
}
.ka-schnellaktionen > *:hover, .ka-schnellaktionen > *:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-schnellaktionen .fas, .ka-schnellaktionen .far { font-size: 1.1rem; color: var(--ka-primary); }

/* --- Desktop: gruppierte Seitenleiste und Bereichsspalte ----------------- */
.ka-sidebar__gruppe {
  padding: 13px 16px 4px;       /* Entwurf F5 */
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ka-nav-label);
}
/* Tritt in der Akte an die Stelle des Reiterbands: Ab 992 px sind alle
   Bereiche ohne Umbruch und ohne Klick sichtbar, gruppiert wie auf dem
   Telefon. */
.ka-bereichsspalte { display: none; width: 252px; flex-shrink: 0; background: var(--ka-surface); border-right: 1px solid var(--ka-line); }
/* Arbeitspaket 4, Abschnitt 5 "Zwischen 768 und 991px: die Symbolleiste": die Bereichsspalte beginnt jetzt schon
   bei 768px (neben der Symbolleiste statt der vollen Seitenleiste) und ist dort mit 236 statt 252px schmaler. */
@media (min-width: 768px) { .ka-bereichsspalte { display: block; } }
@media (min-width: 768px) and (max-width: 991.98px) { .ka-bereichsspalte { width: 236px; } }
.ka-bereichsspalte__gruppe {
  display: flex; align-items: center; gap: .5rem; padding: .8125rem .875rem .3125rem;
  font-size: .688rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-ink-muted);
}
.ka-bereichsspalte__gruppe .fas, .ka-bereichsspalte__gruppe .far { color: var(--ka-primary); }
.ka-bereichsspalte__punkt {
  display: flex; align-items: center; gap: .5rem; min-height: 32px; padding: .375rem .875rem;
  font-size: .844rem; color: var(--ka-ink); text-decoration: none; border-left: 3px solid transparent;
}
.ka-bereichsspalte__punkt:hover, .ka-bereichsspalte__punkt:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-bereichsspalte__punkt--aktiv { background: var(--ka-primary-t); color: var(--ka-primary); font-weight: 600; border-left-color: var(--ka-primary); }
.ka-bereichsspalte__zahl { margin-left: auto; font-size: .719rem; color: var(--ka-ink-muted); font-variant-numeric: tabular-nums; }
.ka-bereichsspalte__zahl--frist { color: var(--ka-frist-text); font-weight: 700; }

/* --- Tablet: Seitenleiste als Symbolleiste (768 bis 991 px) -------------- */
/* Im Hochformat blieben neben voller Seitenleiste und Bereichsspalte nur
   334 px Inhalt. Beschriftungen sind ueber die Wortmarke und ueber "Mehr"
   erreichbar - nie nur ueber :hover, das es auf dem Tablet nicht gibt. */
.ka-symbolleiste { width: 72px; flex-shrink: 0; background: var(--ka-nav); display: flex; flex-direction: column; align-items: stretch; }
.ka-symbolleiste__knopf {
  position: relative; width: 72px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ka-nav-text); text-decoration: none; background: transparent;
  border: 0; border-left: 3px solid transparent; cursor: pointer;
}
.ka-symbolleiste__knopf:hover, .ka-symbolleiste__knopf:focus { background: var(--ka-nav-hover); color: var(--ka-surface); text-decoration: none; }
.ka-symbolleiste__knopf[aria-current="page"] { background: var(--ka-nav-active); color: var(--ka-surface); border-left-color: var(--ka-siegel); }
.ka-symbolleiste__knopf .fas, .ka-symbolleiste__knopf .far { font-size: 1.2rem; }
.ka-symbolleiste__zahl {
  position: absolute; top: .25rem; right: .625rem;
  background: var(--ka-frist); color: var(--ka-surface); font-size: .594rem; font-weight: 700; line-height: 1;
  border-radius: var(--ka-radius-pill); padding: .0625rem .3125rem;
}
.ka-symbolleiste__trenner { border-bottom: 1px solid var(--ka-nav-line); }

/* Die Grenze des Auftrags: Vorschlag, kein Vollzug. Gelb, nicht rot - rot
   bleibt der Frist vorbehalten (DESIGNSYSTEM.md, Abschnitt 5). */
.ka-grenze {
  display: flex; gap: .5625rem; padding: .75rem .875rem;
  background: var(--ka-vorfrist-t); border: 1px solid var(--ka-vorfrist-b); border-radius: var(--ka-radius-lg);
  font-size: .781rem; line-height: 1.55; color: var(--ka-vorfrist-text);
}
.ka-grenze .fas, .ka-grenze .far { color: var(--ka-vorfrist-text); }

/* --- Aktenbereichsspalte statt Reiterband, ab 768px (Arbeitspaket 4, Ticket Abschnitt 5) -----------------
   Der "heikle Punkt" (Ticket-Auftrag Paket 4): die Bereichsspalte ist eine Spalte NEBEN dem Seiteninhalt, das
   Reiterband stand als Zeile DARUEBER - beide sitzen aber an derselben Stelle in ueber 40 Templates (direkte Kinder
   von .container-fluid, dem einzigen Wrapper von {% block content %} - siehe templates/base.html, Zeile ~377 -,
   per {% include "cases/_case_subnav.html" %} ohne eigenen zusaetzlichen Wrapper). Statt jedes dieser Templates
   um einen zweiten, schliessenden Wrapper zu ergaenzen (haette 40+ Dateien angefasst), macht CSS :has() aus
   .container-fluid selbst einen Rahmen fuer die Bereichsspalte GENAU DANN, wenn es eine .ka-bereichsspalte
   enthaelt. Angefasste Dateien bleiben zwei: diese Datei und templates/cases/_case_subnav.html.

   ZWEI FEHLER KORRIGIERT (beide live auf Stage aufgefallen, 2026-09-25):
   1. Der Selektor zielte zunaechst auf .ka-inhalt statt auf .container-fluid - dessen direktes Kind ist aber
      IMMER nur .container-fluid selbst (siehe oben), niemals .ka-bereichsspalte direkt. :has(> ...) griff deshalb
      nie, unabhaengig von der Regel darin.
   2. Die erste Fassung der Regel selbst nutzte ausserdem CSS-Grid mit grid-row: 1 / -1 auf der Bereichsspalte,
      damit sie ueber alle automatisch erzeugten Zeilen der Inhaltsseite "spannt". Das Problem: ist die
      Bereichsspalte (viele Bereiche) hoeher als die Summe der Inhalts-Zeilen (z. B. nur Breadcrumb + Aktenkopf +
      zwei Karten), muss das Grid den fehlenden Platz auf die automatischen Zeilen verteilen - und blaeht dabei
      die ERSTE Zeile (die Breadcrumb-Zeile) auf eine riesige Hoehe auf, statt den Inhalt einfach normal
      weiterlaufen zu lassen. Jetzt stattdessen absolute Positionierung: die Bereichsspalte liegt ueber dem linken
      Rand, der Inhalt bekommt stattdessen einen freien Rand per padding-left - normaler Blockfluss, keine
      Zeilenverteilung, keine Ueberraschung. */
@media (min-width: 768px) {
  /* Register 385: Spalte buendig von der Kopfleiste bis zum Fuss (ueber den Aussenabstaenden von main, mt-3, und footer, mt-5) und
     24 px Luft zum Inhalt (Entwurf 33). */
  .container-fluid:has(> .ka-bereichsspalte) {
    position: relative;
    padding-left: calc(252px + 24px);
  }
  .container-fluid:has(> .ka-bereichsspalte) > .ka-bereichsspalte {
    position: absolute;
    top: -1rem; left: 0; bottom: -3rem;
    overflow-y: auto;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .container-fluid:has(> .ka-bereichsspalte) { padding-left: calc(236px + 16px); }
  .container-fluid:has(> .ka-bereichsspalte) > .ka-bereichsspalte { width: 236px; }
}

/* --- Sichtbarkeit je Geraet ---------------------------------------------- */
@media (min-width: 768px) {
  .ka-tabbar, .ka-nur-telefon { display: none !important; }
  .ka-hat-tabbar .ka-inhalt { padding-bottom: 0; }
}
@media (max-width: 767.98px) {
  .ka-nur-ab-tablet { display: none !important; }
  /* Reiterbaender rutschen auf dem Telefon waagerecht weg: Das Cockpit
     (.ka-gruppenliste) tritt an ihre Stelle, siehe Ticket, Abschnitt 3. */
  .ka-inhalt .nav-tabs.ka-nur-ab-tablet { display: none !important; }
  .ka-schnellaktionen > * { font-size: .688rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Tablet: Dokument und Entscheidung nebeneinander, Spalte etwas schmaler. */
  .ka-pruefen__spalte { width: 320px; }
}
@media (max-width: 767.98px) {
  .ka-pruefen { flex-direction: column; }
  .ka-pruefen__spalte { width: auto; border-left: 0; border-top: 1px solid var(--ka-line); }
}
/* Nur auf dem Tablet sichtbar (768-991px): die Symbolleiste (Arbeitspaket 4) - unter 768px traegt die Tab-Leiste/
   das Cockpit, ab 992px die volle Seitenleiste samt Bereichsspalte. .ka-nur-ab-tablet bleibt daneben unveraendert
   bestehen (u.a. fuer die Dashboard-Kacheln, die auch auf dem Desktop sichtbar bleiben sollen). Das Reiterband
   selbst gibt es seit Arbeitspaket 4 nicht mehr (Cockpit und Bereichsspalte decken jetzt jede Breite ab) - deshalb
   hier keine nav-tabs-Sonderregel mehr. */
.ka-nur-tablet { display: none; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .ka-nur-tablet { display: block; }
  /* Wie die volle Seitenleiste ab 992px (siehe .ka-sidebar dort: position:fixed + .ka-inhalt margin-left) steht
     auch die Symbolleiste NICHT im normalen Textfluss - sonst schiebt ihre eigene Hoehe (ein Knopf je Punkt,
     hier leicht 600px+) den kompletten Seiteninhalt nach unten weg (live auf Stage aufgefallen, 2026-09-25). */
  .ka-symbolleiste.ka-nur-tablet {
    display: flex;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1030;
  }
  .ka-hat-seitenleiste .ka-inhalt { margin-left: 72px; }
  /* Die volle Seitenleiste hat hier keinen Aufklapp-Weg mehr (kein Hamburger, Auftrag Paket 4) und bleibt deshalb
     zusaetzlich explizit verborgen, statt sich nur auf das fehlende Bootstrap-Collapse-"show" zu verlassen. */
  .ka-sidebar { display: none !important; }
}
@media (min-width: 992px) {
  .ka-nur-tablet { display: none !important; }
}

/* ===========================================================================
   Teil C7 — Feinschliff: Bedienhilfen, Tabellen und Touch-Ziele auf dem Telefon (WP7)
   ---------------------------------------------------------------------------
   * .ka-sprunglink            "Zum Inhalt springen" als erstes Element der Seite
   * .ka-tabelle-karten        Tabelle, die unter 768 px als gestapelte Karten steht (Beschriftung je Zelle kommt
                               aus static/js/ka-oberflaeche.js oder aus data-label)
   * Tabellen ohne diese Klasse  scrollen unter 768 px innerhalb ihrer Karte, nicht mehr die ganze Seite
   * .ka-fehlerliste           Fehlerzusammenfassung ueber einem Formular (erzeugt ka-oberflaeche.js)
   * .ka-knopfreihe            Schaltflaechen einer Seite, die auf dem Telefon umbrechen statt ueberlaufen
   * .ka-hilfetext             Erklaerung unter einer Ueberschrift oder einem Feld (Nebentext, lesbar)
   * .ka-technik               zugeklappte "Technische Details fuer den Support" unter einer Fehlermeldung
   Farben nur ueber Tokens; Fokus in der dunklen Navigation ueber --ka-nav-text (der Justizblau-Rahmen waere
   auf --ka-nav unsichtbar).
   =========================================================================== */

/* Sprunglink: unsichtbar, bis er per Tab erreicht wird. */
.ka-sprunglink {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 2100;
  background: var(--ka-surface);
  color: var(--ka-primary);
  font-weight: 600;
  padding: 10px 14px;
  border: 2px solid var(--ka-primary);
  border-radius: var(--ka-radius);
}
.ka-sprunglink:focus { top: 8px; text-decoration: none; }
#ka-hauptinhalt:focus { outline: none; }   /* Sprungziel, kein Bedienelement */

/* Fokus dort, wo Bootstrap oder die Bausteine ihn nicht selbst zeigen. */
.list-group-item-action:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.close:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.ka-gruppenzeile:focus-visible,
.ka-kachel:focus-visible,
.ka-bereichszeile:focus-visible,
.ka-bereichsspalte__punkt:focus-visible,
.ka-tabbar__eintrag:focus-visible,
.ka-tabbar__erfassen:focus-visible {
  outline: 2px solid var(--ka-primary);
  outline-offset: 2px;
}
.custom-control-input:focus-visible ~ .custom-control-label::before {
  outline: 2px solid var(--ka-primary);
  outline-offset: 2px;
}
.ka-sidebar a:focus-visible,
.ka-sidebar button:focus-visible,
.ka-sidebar input:focus-visible,
.ka-symbolleiste a:focus-visible,
.ka-symbolleiste button:focus-visible,
.ka-topbar a:focus-visible,
.ka-topbar button:focus-visible {
  outline: 2px solid var(--ka-nav-text);
  outline-offset: -2px;
}
.form-control::placeholder { color: var(--ka-ink-muted); opacity: 1; }

.ka-hilfetext { color: var(--ka-ink-muted); font-size: var(--ka-fs-sm); }

/* Der Scrollbereich einer Tabelle ist auch Bezugspunkt fuer absolut positionierte Kinder (z. B. .sr-only-Beschriftungen):
   sonst ragen sie ausserhalb des Bereichs und machen die ganze Seite breiter. */
.table-responsive { position: relative; }

/* Fehlerzusammenfassung ueber einem Formular */
.ka-fehlerliste { scroll-margin-top: var(--ka-space-4); }
.ka-fehlerliste ul { margin: 6px 0 0; padding-left: 18px; }
.ka-fehlerliste a { color: inherit; font-weight: 600; text-decoration: underline; }
.ka-fehlerliste:focus { outline: 2px solid var(--ka-frist); outline-offset: 2px; }

/* Technische Details unter einer Fehlermeldung (templatetag ka_fehler): zugeklappt, in der Farbe der Meldung. */
.ka-technik { margin-top: var(--ka-space-2); font-size: var(--ka-fs-sm); }
.ka-technik > summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.ka-technik__liste { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--ka-space-3); margin: var(--ka-space-2) 0 0; }
.ka-technik__liste dt { font-weight: 600; }
.ka-technik__liste dd { margin: 0; overflow-wrap: anywhere; }

/* Absenden gesperrt (data-ka-sperren): nach dem ersten Klick keine zweite Ausfuehrung. */
[data-ka-gesendet="1"] .btn[aria-busy="true"] { cursor: progress; }

/* Schaltflaechenreihe: umbricht, statt die Seite breiter als den Bildschirm zu machen. */
.ka-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--ka-space-2); }

@media (max-width: 767.98px) {
  /* Touch-Ziele: kleine Schaltflaechen bleiben klein genug fuer die Zeile, aber treffbar (Designsystem 8/11). */
  .ka-inhalt .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ka-inhalt .btn-sm { min-width: 44px; }
  /* Auswahlkaestchen sind mit dem Finger sonst kaum zu treffen (Standardgroesse 13 px). */
  .ka-inhalt input[type="checkbox"]:not(.custom-control-input),
  .ka-inhalt input[type="radio"]:not(.custom-control-input) { width: 22px; height: 22px; }
  .ka-inhalt .form-check { padding-left: 2rem; min-height: 28px; }
  .ka-inhalt .form-check-input { margin-left: -2rem; margin-top: 0; }
  .ka-inhalt .form-control, .ka-inhalt .custom-select,
  .ka-inhalt .form-control-sm, .ka-inhalt .custom-select-sm { min-height: 44px; }
  .ka-inhalt .page-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* Gruppen aus Schaltflaechen duerfen umbrechen (Frist-Detail: 489 px breite Knopfgruppe). */
  .ka-inhalt .btn-group:not(.btn-group-toggle):not(.btn-group-vertical) { flex-wrap: wrap; gap: var(--ka-space-1); }
  .ka-inhalt .btn-group:not(.btn-group-toggle) > .btn { border-radius: var(--ka-radius); margin-left: 0; }
  .ka-inhalt .ka-seitenkopf__aktionen { flex-wrap: wrap; margin-left: 0; width: 100%; }
  /* Kopfzeilen aus Ueberschrift und Schaltflaeche (d-flex justify-content-between) umbrechen, statt die Seite zu verbreitern. */
  .ka-inhalt .d-flex.justify-content-between:not(.flex-nowrap) { flex-wrap: wrap; gap: var(--ka-space-2); }

  /* Rueckfall fuer jede Tabelle ohne eigene Kartenansicht: die Tabelle scrollt in ihrer Karte, die Seite nicht. */
  .ka-inhalt :not(.table-responsive) > .table:not(.ka-tabelle-karten) {
    display: block;
    position: relative;   /* verborgene Beschriftungen (.sr-only, absolut) bleiben im Scrollbereich statt die Seite zu verbreitern */
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Karten statt Spalten. */
  .table-responsive:has(> .ka-tabelle-karten) { overflow: visible; }
  .ka-tabelle-karten,
  .ka-tabelle-karten tbody,
  .ka-tabelle-karten tfoot,
  .ka-tabelle-karten tr,
  .ka-tabelle-karten td { display: block; width: 100%; }
  /* Kopfzeile bleibt fuer Screenreader erhalten, ist aber nicht mehr sichtbar. */
  .ka-tabelle-karten thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .ka-tabelle-karten tr {
    background: var(--ka-surface);
    border: 1px solid var(--ka-line);
    border-radius: var(--ka-radius);
    margin: 0 0 var(--ka-space-3);
    padding: var(--ka-space-2) var(--ka-space-3);
  }
  .card > .ka-tabelle-karten, .card > .table-responsive > .ka-tabelle-karten { padding: var(--ka-space-3); }
  .ka-tabelle-karten.table-hover tbody tr:hover,
  .ka-tabelle-karten.table-striped tbody tr:nth-of-type(odd) { background: var(--ka-surface); }
  .ka-tabelle-karten td {
    border: 0;
    padding: 4px 0;
    display: grid;
    grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
    gap: var(--ka-space-2);
    align-items: baseline;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .ka-tabelle-karten td::before {
    content: attr(data-label);
    font-size: var(--ka-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ka-ink-muted);
  }
  /* Zellen ohne Beschriftung (Aktionen, verbundene Zellen): volle Breite, ohne Beschriftungsspalte. */
  .ka-tabelle-karten td[data-label=""],
  .ka-tabelle-karten td:not([data-label]),
  .ka-tabelle-karten td[colspan] { display: block; }
  .ka-tabelle-karten td[data-label=""]::before,
  .ka-tabelle-karten td:not([data-label])::before,
  .ka-tabelle-karten td[colspan]::before { display: none; }
  .ka-tabelle-karten tbody th, .ka-tabelle-karten tfoot th { display: block; width: 100%; border: 0; padding: 4px 0; text-align: left; }
  .ka-tabelle-karten td[data-leer] { display: none; }
  .ka-tabelle-karten .text-nowrap { white-space: normal !important; }   /* !important, weil die Bootstrap-Utility selbst eines traegt */
  .ka-tabelle-karten td[data-label=""] { padding-top: var(--ka-space-2); }
  .ka-tabelle-karten td[data-label=""] > .btn,
  .ka-tabelle-karten td[data-label=""] > form { margin-right: var(--ka-space-1); margin-bottom: var(--ka-space-1); }
  .ka-tabelle-karten td[data-label=""] > form { display: inline-block; }
}

/* ===========================================================================
   Teil C8 — Handbuch (WP18)
   ---------------------------------------------------------------------------
   Seiten /hilfe/handbuch/ und /mandantenportal/hilfe/ sowie - unveraendert - die eigenstaendige Seite
   docs/handbuch/build/handbuch.html (scripts/build_handbuch.py liest den Block zwischen den beiden Marken und bettet ihn
   zusammen mit tokens.css ein; deshalb hier nur Tokens und keine Bootstrap-Abhaengigkeit).
   * .ka-hb-layout            Inhaltsverzeichnis links, Kapitel rechts (unter 992 px untereinander)
   * .ka-hb-toc               Kapitelliste, .ka-hb-toc__gruppe je Zielgruppe
   * .ka-hb-inhalt            "Auf dieser Seite": Abschnitte des Kapitels
   * .ka-hb-text              Lesefläche des Kapitels (Ueberschriften, Listen, Tabellen)
   * .ka-hb-bild              Bild mit Beschriftung
   * .ka-hb-hinweis--<art>    Hinweiskasten (hinweis, wichtig, tipp, voraussetzung, grenze)
   * .ka-hb-admin             Abschnitt, der nur fuer die Administration gilt
   =========================================================================== */
/* HANDBUCH-BEGIN */
.ka-hb-layout { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--ka-space-5); align-items: start; }
.ka-hb-toc {
  position: sticky; top: var(--ka-space-4); max-height: calc(100vh - 2 * var(--ka-space-4)); overflow-y: auto;
  background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg);
  padding: var(--ka-space-2) var(--ka-space-3) var(--ka-space-3); font-size: var(--ka-fs-md);
}
.ka-hb-toc__gruppe {
  font-size: var(--ka-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ka-ink-muted); margin: var(--ka-space-3) 0 var(--ka-space-1);
}
.ka-hb-toc ul { list-style: none; margin: 0; padding: 0; }
.ka-hb-toc a { display: block; padding: 5px 8px; border-radius: var(--ka-radius); color: var(--ka-ink-2); text-decoration: none; }
.ka-hb-toc a:hover { background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-hb-toc a[aria-current="page"] { background: var(--ka-primary-t); color: var(--ka-primary); font-weight: 600; }
.ka-hb-inhalt {
  background: var(--ka-surface-muted); border: 1px solid var(--ka-line-soft); border-radius: var(--ka-radius);
  padding: var(--ka-space-3) var(--ka-space-4); margin: 0 0 var(--ka-space-4); font-size: var(--ka-fs-md);
}
.ka-hb-inhalt__titel { font-size: var(--ka-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted); margin: 0 0 var(--ka-space-1); }
.ka-hb-inhalt ul { margin: 0; padding-left: var(--ka-space-4); columns: 2; column-gap: var(--ka-space-5); }
.ka-hb-inhalt li { break-inside: avoid; margin: 2px 0; }
.ka-hb-text {
  background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg);
  padding: var(--ka-space-5); font-size: var(--ka-fs-lg); line-height: 1.6; color: var(--ka-ink); max-width: 60rem;
}
.ka-hb-text h1 { font-family: var(--ka-font-serif); font-size: var(--ka-fs-2xl); margin: 0 0 var(--ka-space-4); }
.ka-hb-text h2 { font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); margin: var(--ka-space-5) 0 var(--ka-space-2); padding-top: var(--ka-space-3); border-top: 1px solid var(--ka-line-soft); }
.ka-hb-text h3 { font-size: var(--ka-fs-lg); font-weight: 600; margin: var(--ka-space-4) 0 var(--ka-space-2); }
.ka-hb-text h4 { font-size: var(--ka-fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ka-ink-2); margin: var(--ka-space-4) 0 var(--ka-space-1); }
.ka-hb-text p, .ka-hb-text li { margin-bottom: var(--ka-space-2); }
.ka-hb-text ul, .ka-hb-text ol { padding-left: var(--ka-space-5); margin-bottom: var(--ka-space-3); }
.ka-hb-text ol > li::marker { font-weight: 600; color: var(--ka-primary); }
.ka-hb-tabelle { font-size: var(--ka-fs-md); margin: var(--ka-space-3) 0; }
.ka-hb-tabelle th { background: var(--ka-surface-muted); white-space: nowrap; }
.ka-hb-bild { margin: var(--ka-space-4) 0; }
.ka-hb-bild__bild { max-width: 100%; height: auto; border: 1px solid var(--ka-line); border-radius: var(--ka-radius); box-shadow: var(--ka-shadow); }
.ka-hb-bild__unterschrift { font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); margin-top: var(--ka-space-2); }
.ka-hb-hinweis {
  margin: var(--ka-space-4) 0; padding: var(--ka-space-3) var(--ka-space-4); border-radius: var(--ka-radius);
  border-left: 4px solid var(--ka-primary-b); background: var(--ka-primary-t); font-size: var(--ka-fs-md);
}
.ka-hb-hinweis > :last-child { margin-bottom: 0; }
.ka-hb-hinweis--wichtig { border-left-color: var(--ka-vorfrist); background: var(--ka-vorfrist-t); }
.ka-hb-hinweis--tipp { border-left-color: var(--ka-ok); background: var(--ka-ok-t); }
.ka-hb-hinweis--voraussetzung { border-left-color: var(--ka-neutral-b); background: var(--ka-neutral-t); }
.ka-hb-hinweis--grenze { border-left: 4px dashed var(--ka-ink-muted); background: var(--ka-neutral-t); }
.ka-hb-admin { border-left: 3px solid var(--ka-primary-b); padding-left: var(--ka-space-4); margin: var(--ka-space-3) 0; }
.ka-hb-admin::before {
  content: "Nur für die Administration"; display: block; font-size: var(--ka-fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ka-primary);
}
.ka-hb-nachbarn { display: flex; justify-content: space-between; gap: var(--ka-space-3); margin-top: var(--ka-space-4); flex-wrap: wrap; }
@media (max-width: 991.98px) {
  .ka-hb-layout { grid-template-columns: minmax(0, 1fr); }
  .ka-hb-toc { position: static; max-height: none; }
  .ka-hb-inhalt ul { columns: 1; }
  .ka-hb-text { padding: var(--ka-space-4); }
}
@media print {
  .ka-hb-toc, .ka-hb-nachbarn { display: none !important; }
  .ka-hb-layout { display: block; }
  .ka-hb-text { border: 0; padding: 0; }
}
/* HANDBUCH-ENDE */

/* ===========================================================================
   Teil C9 — Kalender (W13, templates/agenda/calendar.html)
   ---------------------------------------------------------------------------
   Vorher ein <style>-Block mit festen Farbwerten im Template. Farbe kommt hier ausschliesslich ueber Tokens (tokens.css, Abschnitt "Kalender:
   Eintragsarten"). Im Template bleiben allein berechnete Masse als Wert: die Spaltenzahl und die Stundenhoehe (Eigenschaften --kal-spalten und
   --kal-stunde am Raster) sowie Lage und Groesse der einzelnen Eintraege (top, height, left, width).
   Die Klassennamen .ev-* kommen aus apps/agenda/entries.py (Art des Eintrags) und bleiben deshalb unveraendert.
   =========================================================================== */

.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2); margin-bottom: var(--ka-space-3); }
.cal-title { font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; margin: 0 var(--ka-space-2); }
.cal-scroll { overflow-x: auto; }

/* Legende: dieselben Klassen wie die Eintraege, damit Farbe und Erklaerung nicht auseinanderlaufen */
.cal-legend span { display: inline-block; margin-right: var(--ka-space-3); font-size: var(--ka-fs-sm); }
.cal-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; margin-right: var(--ka-space-1); }
.cal-legend i.ev-warning { border: 1px dotted var(--ka-vorfrist); }
.cal-legend i.ev-sub { background: var(--ka-ink-muted); border: 1px dashed var(--ka-ink); opacity: 1; }

/* Eintrag: Fuellfarbe nach Art, weisse Schrift; Vorfrist als helle Warnflaeche mit gepunktetem Streifen */
.ev {
  display: block; padding: 1px 5px; margin: 1px 0; border-radius: 3px;
  font-size: var(--ka-fs-sm); line-height: 1.25;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--ka-primary); border-left: 3px solid var(--ka-kal-rand);
}
a.ev, a.ev:hover, a.ev:focus { color: var(--ka-kal-schrift); text-decoration: none; }
a.ev:hover { filter: brightness(1.1); }
a.ev:focus-visible { outline: 2px solid var(--ka-ink); outline-offset: 1px; }
.ev-appointment { background: var(--ka-primary); }
.ev-court       { background: var(--ka-kal-gericht); }
.ev-internal    { background: var(--ka-ink-muted); }
.ev-meeting     { background: var(--ka-ok); }
.ev-deadline    { background: var(--ka-frist); }
.ev-notfrist    { background: var(--ka-kal-notfrist); font-weight: 700; }
.ev-followup    { background: var(--ka-kal-wiedervorlage); }
.ev-task        { background: var(--ka-kal-aufgabe); }
.ev-warning     { background: var(--ka-vorfrist-t); border-left: 3px dotted var(--ka-vorfrist); }
a.ev.ev-warning, a.ev.ev-warning:hover, a.ev.ev-warning:focus { color: var(--ka-vorfrist-text); }
.ev-overdue { outline: 2px solid var(--ka-frist); outline-offset: 1px; }
.ev-sub     { opacity: .8; border-left-style: dashed; }

/* Monatsansicht */
.cal-month { table-layout: fixed; width: 100%; border-collapse: collapse; min-width: 640px; }
.cal-month th { text-align: center; font-size: var(--ka-fs-sm); padding: var(--ka-space-1); background: var(--ka-surface-muted); border: 1px solid var(--ka-line); }
.cal-month td { vertical-align: top; height: 7.5rem; border: 1px solid var(--ka-line); padding: 2px; background: var(--ka-surface); }
.cal-month td.we    { background: var(--ka-surface-muted); }
.cal-month td.out   { background: var(--ka-ground); color: var(--ka-ink-muted); }
.cal-month td.today { background: var(--ka-primary-t); box-shadow: inset 0 0 0 2px var(--ka-primary); }
.cal-daynum { font-size: var(--ka-fs-sm); font-weight: 600; }
.cal-daynum a { color: inherit; }
.cal-more { font-size: var(--ka-fs-xs); }

/* Tages- und Wochenansicht: Spaltenzahl und Stundenhoehe kommen als Eigenschaften vom Template */
.cal-time {
  --kal-spalten: 7; --kal-stunde: 44px;
  display: grid; grid-template-columns: 48px repeat(var(--kal-spalten), minmax(0, 1fr));
  min-width: 720px; border: 1px solid var(--ka-line); background: var(--ka-surface);
}
.cal-time > div { min-width: 0; }
.cal-time .col-head { text-align: center; font-size: var(--ka-fs-sm); padding: var(--ka-space-1); background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line); border-left: 1px solid var(--ka-line); }
.cal-time .col-head.today { background: var(--ka-primary-t); }
.cal-time .allday { min-height: 1.6rem; padding: 2px; border-left: 1px solid var(--ka-line); border-bottom: 1px solid var(--ka-line); }
.cal-time .allday--kopf { border-left: 0; font-size: var(--ka-fs-xs); color: var(--ka-ink-muted); text-align: right; }
.cal-time .hours div { height: var(--kal-stunde); font-size: var(--ka-fs-xs); color: var(--ka-ink-muted); text-align: right; padding-right: var(--ka-space-1); border-top: 1px solid var(--ka-line-soft); }
.cal-time .daycol {
  position: relative; border-left: 1px solid var(--ka-line);
  background-image: repeating-linear-gradient(to bottom, var(--ka-line-soft) 0, var(--ka-line-soft) 1px, transparent 1px, transparent var(--kal-stunde));
}
.cal-time .daycol.we    { background-color: var(--ka-surface-muted); }
.cal-time .daycol.today { background-color: var(--ka-primary-t); }
.cal-time .slot { position: absolute; padding: 0 1px; }
.cal-time .slot .ev { height: 100%; white-space: normal; padding: 2px 4px; }

/* ===========================================================================
   Teil C10 — Kurzanlage der Akte (W6, templates/cases/case_create_quick.html)
   Schrittleiste mit drei Schritten und einklappbare Zusatzangaben (<details>).
   =========================================================================== */

.ka-schritte { display: flex; gap: var(--ka-space-2); list-style: none; margin: 0 0 var(--ka-space-4); padding: 0; }
.ka-schritte__eintrag {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--ka-space-2) var(--ka-space-1);
  border-bottom: 3px solid var(--ka-line);
  color: var(--ka-ink-muted);
  font-size: var(--ka-fs-sm);
}
.ka-schritte__eintrag--fertig { border-bottom-color: var(--ka-primary); }
.ka-schritte__eintrag--aktiv { border-bottom-color: var(--ka-primary); color: var(--ka-ink); font-weight: 600; }

.ka-weitere { border-top: 1px solid var(--ka-line-soft); margin-top: var(--ka-space-4); }
.ka-weitere > summary {
  cursor: pointer;
  min-height: 44px;                 /* Touch-Ziel */
  display: flex;
  align-items: center;
  gap: var(--ka-space-2);
  font-weight: 600;
  color: var(--ka-ink-2);
}
.ka-weitere > summary::-webkit-details-marker { display: none; }
.ka-weitere > summary::after {         /* Pfeil: zeigt, dass sich der Bereich aufklappen laesst */
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: var(--ka-fs-xs);
  margin-left: auto;
  color: var(--ka-ink-muted);
}
.ka-weitere[open] > summary::after { content: "\f077"; }
/* Entfernen-Kreuz in den Auswahllisten der Aktenanlage: Touch-Ziel ab 44 px (Mandanten, weitere Beteiligte, Ansprechpartner). */
#client-list .close, #other-party-list .close { min-width: 44px; min-height: 44px; }
.ka-weitere[open] > summary { margin-bottom: var(--ka-space-3); }
.ka-weitere__hinweis { font-weight: 400; color: var(--ka-ink-muted); font-size: var(--ka-fs-sm); }

/* ===========================================================================
   Teil C11 — Hinweis vor der Abmeldung wegen Leerlauf (Paket Z2, templates/base.html, static/js/ka-sitzung.js)
   Unten in der Mitte, ueber dem Inhalt und der Zeiterfassungs-Plakette (z-index 1035). Auf dem Telefon ueber der Tab-Leiste (68 px).
   Gelb (Vorfrist): es ist eine Warnung, noch kein Fehler.
   =========================================================================== */
.ka-sitzung {
  position: fixed; left: 50%; bottom: 16px; z-index: 1040;
  width: min(560px, calc(100vw - 32px)); transform: translateX(-50%);
}
.ka-sitzung[hidden] { display: none; }
.ka-sitzung__karte { box-shadow: var(--ka-shadow-pop); }
@media (max-width: 767.98px) {
  .ka-sitzung { bottom: calc(68px + 16px + env(safe-area-inset-bottom, 0px)); }
}

/* ===========================================================================
   Teil C12 — Breiten und kleine Hilfsklassen statt Inline-Stile (Paket Z13)
   Die Browser-Schutzregel (Content-Security-Policy) laesst style="" bisher noch zu (docs/13_server_installation.md,
   „Browser-Schutzregel“, dokumentierte Restgrenze); wiederkehrende, feste Angaben stehen deshalb hier und nicht
   im Template. Dynamische Werte (Fortschrittsbalken, Kalenderpositionen, Kanzleifarben) bleiben Inline-Stil.
   =========================================================================== */
.ka-breite-20 { max-width: 20rem; }
.ka-breite-30 { max-width: 30rem; }
.ka-breite-32 { max-width: 32rem; }
.ka-breite-34 { max-width: 34rem; }
.ka-breite-36 { max-width: 36rem; }
.ka-breite-40 { max-width: 40rem; }
.ka-breite-42 { max-width: 42rem; }
.ka-breite-44 { max-width: 44rem; }
.ka-breite-45 { max-width: 45rem; }
.ka-breite-46 { max-width: 46rem; }
.ka-breite-50 { max-width: 50rem; }
.ka-breite-52 { max-width: 52rem; }
.ka-breite-56 { max-width: 56rem; }
.ka-breite-60 { max-width: 60rem; }
.ka-mindestbreite-16 { min-width: 16rem; }
.ka-mindestbreite-18 { min-width: 18rem; }
.ka-mindestbreite-22 { min-width: 22rem; }
.ka-zeiger { cursor: pointer; }
.ka-umbruch-erhalten { white-space: pre-wrap; }
.ka-umbruch-ueberall { word-break: break-all; }
/* Farbmuster neben einem Farbwert (Briefpapier: vorgeschlagene Hausfarbe); die Farbe selbst ist ein dynamischer Wert im Template. */
.ka-farbmuster { display: inline-block; width: 1.2rem; height: 1.2rem; border: 1px solid currentColor; vertical-align: middle; }

/* ===========================================================================
   Teil D — Druck
   Akten werden ausgedruckt und zur Gerichtsakte genommen. Navigation,
   Schaltflaechen und Banner gehoeren nicht aufs Papier.
   =========================================================================== */

@media print {
  .navbar, .footer, .btn, .alert .close, .nav-tabs, .ka-seitenkopf__aktionen,
  .ka-sidebar, .ka-topbar, .ka-timer, .ka-portalkopf, .ka-portalfuss, .ka-sitzung, .ka-daria,
  .ka-tabbar, .ka-bereichsspalte, .ka-blatt, .ka-symbolleiste, .ka-desktopleiste {
    display: none !important;
  }
  /* Arbeitspaket 4: der Ausdruck einer Akte enthaelt weder Seitenleiste noch Bereichsspalte - der freie Rand
     dafuer (siehe Teil C6, :has()-Regel auf .container-fluid) wird dafuer auf dem Papier wieder aufgehoben. */
  .container-fluid { padding-left: 15px !important; }
  .ka-hat-seitenleiste .ka-inhalt { margin-left: 0; }
  body { background: #FFFFFF; font-size: 11pt; }
  .card { border-color: #BBBBBB; box-shadow: none; break-inside: avoid; }
  .card-header { background: #FFFFFF; }
  a[href]::after { content: ""; }   /* keine URLs im Fliesstext */
}

/* ===========================================================================
   Teil C13 — Chat-Fenster der Assistentin Daria (Paket D-2, templates/core/_daria.html, static/js/daria.js)
   Unten rechts, ueber der Zeiterfassungs-Plakette (.ka-timer, z-index 1035); auf dem Telefon ueber der Tab-Leiste (68 px).
   =========================================================================== */
.ka-daria { position: fixed; right: 16px; bottom: 84px; z-index: 1036; }
.ka-daria__start {
  display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; min-height: var(--ka-control-h-lg);
  background: var(--ka-nav); color: #FFFFFF; border: 1px solid var(--ka-nav-line); border-radius: var(--ka-radius-pill); box-shadow: var(--ka-shadow-pop);
  font-size: var(--ka-fs-md);
}
.ka-daria__start:hover { background: var(--ka-nav-hover); }
.ka-daria__start[hidden], .ka-daria__fenster[hidden] { display: none; }
.ka-daria__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ka-primary-t); flex: 0 0 auto; }
.ka-daria__fenster {
  display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100vh - 140px));
  box-shadow: var(--ka-shadow-pop); border-radius: var(--ka-radius-lg); overflow: hidden; background: var(--ka-surface);
}
.ka-daria__kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line); }
.ka-daria__titel { flex: 1 1 auto; line-height: 1.25; min-width: 0; }
.ka-daria__verlauf { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ka-daria__blase { max-width: 92%; padding: 8px 12px; border-radius: var(--ka-radius-lg); font-size: var(--ka-fs-md); overflow-wrap: anywhere; }
.ka-daria__blase--nutzer { align-self: flex-end; background: var(--ka-primary-t); border: 1px solid var(--ka-primary-b); }
.ka-daria__blase--daria { align-self: flex-start; background: var(--ka-surface-muted); border: 1px solid var(--ka-line); }
.ka-daria__eintrag { padding: 6px 0; border-top: 1px solid var(--ka-line-soft); }
.ka-daria__eintrag:first-child { border-top: 0; }
.ka-daria__link { display: inline-block; min-height: 24px; color: var(--ka-primary); text-decoration: underline; }
.ka-daria__link:focus { outline: 2px solid var(--ka-nav-focus); outline-offset: 2px; }
.ka-daria__auszug { color: var(--ka-ink-2); }
.ka-daria__bild { max-width: 100%; height: auto; border: 1px solid var(--ka-line); border-radius: 4px; }
/* Register 341: Karten „Fakten“ und „Entwurf“ (daria.js) - Beschriftung über dem Wert, eine Spalte (das Fenster ist schmal) */
.ka-daria__karte { width: 92%; }
.ka-daria__fakten { margin-top: 4px; }
.ka-daria__fakt-name { font-size: var(--ka-fs-sm); font-weight: 600; color: var(--ka-ink-2); margin-top: 6px; }
.ka-daria__fakt-wert { margin-left: 0; }
.ka-daria__uebernehmen { display: inline-block; }
.ka-daria__status { padding: 0 12px; min-height: 1.4em; }
.ka-daria__form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--ka-line); }
.ka-daria__form .form-control { min-width: 0; }
/* Paket D-8: Melden nicht gefundener Eingaben - Knopf unter jeder Antwort, Dialog im Fenster über dem Eingabefeld */
.ka-daria__melden-knopf { display: inline-block; margin-top: 6px; padding: 0; font-size: var(--ka-fs-sm); }
.ka-daria__melden { padding: 10px 12px; border-top: 1px solid var(--ka-line); background: var(--ka-surface); max-height: 70%; overflow-y: auto; }
.ka-daria__melden[hidden] { display: none; }
.ka-daria__melden .ka-grenze { margin-bottom: 8px; font-size: var(--ka-fs-md); font-weight: 600; }   /* gut sichtbar, kein Kleingedrucktes (Auftraggeber) */
.ka-daria__melden-aktionen { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.ka-daria__mikrofon--aktiv { background: var(--ka-frist-t); border-color: var(--ka-frist); color: var(--ka-frist-text); }
@media (max-width: 767.98px) {
  .ka-daria { bottom: calc(68px + 84px + env(safe-area-inset-bottom, 0px)); right: 12px; }
  .ka-daria__fenster { height: min(540px, calc(100vh - 68px - 120px)); }
  .ka-daria__start-text { display: none; }
  .ka-daria__start { padding-right: 4px; }
}

/* ==========================================================================
   Teil C13 - Gesetzessammlung (Register 315): Normzitate mit Hinweisfenster
   ========================================================================== */
.ka-norm { text-decoration: underline dotted; text-underline-offset: 3px; color: inherit; }
.ka-norm:hover, .ka-norm:focus { color: var(--ka-primary); }
.ka-normkarte {
  position: absolute; z-index: 1080; max-width: min(34rem, calc(100vw - 24px)); padding: 10px 12px;
  background: var(--ka-surface); color: var(--ka-ink); border: 1px solid var(--ka-line); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(20, 25, 31, .18); font-size: var(--ka-fs-sm, 13px); line-height: 1.45;
}
.ka-normkarte__titel { font-weight: 600; margin-bottom: 4px; }
.ka-normkarte__text { margin: 0 0 4px; }
.ka-normkarte__satz { margin: 0 0 4px; padding-left: 8px; border-left: 3px solid var(--ka-primary-b); background: var(--ka-primary-t); }
.ka-normkarte__fuss { color: var(--ka-ink-muted); font-size: var(--ka-fs-xs, 11px); margin: 0; }
.ka-normtext p { margin-bottom: .5rem; }

/* ==========================================================================
   Teil C14 - Lesefassung einer Entscheidung (Register 320, templates/caselaw/_lesetext.html)
   Normale Schrift, volle Breite, keine eigene Bildlaufleiste; Gliederungszeichen und Randnummern sichtbar.
   ========================================================================== */
.ka-lesetext { line-height: 1.6; overflow-wrap: anywhere; }
.ka-lesetext p { margin-bottom: .6rem; }
.ka-lesetext__gliederung { font-weight: 600; margin-right: .4em; }
.ka-lesetext__rn { color: var(--ka-ink-muted); font-size: var(--ka-fs-xs, 11px); margin: .8rem 0 .1rem; }
.ka-lesetext__mehr > summary { color: var(--ka-primary); cursor: pointer; margin-bottom: .6rem; }
.ka-lesetext mark { padding: 0 .1em; }
.ka-trefferausschnitt + .ka-trefferausschnitt { margin-top: .15rem; }

/* ==========================================================================
   Teil C15 - Kundenübersicht der Plattform (Register 322, templates/platform_admin/organization_list.html und _kennzahlen.html)
   Statusleiste über der Liste, einklappbare Statuskästen (<details>), sortierbare Spalten (data-ka-sortierbar, ka-oberflaeche.js Teil 6).
   ========================================================================== */
.ka-statusleiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ka-statusleiste a { text-decoration: none; }
.ka-aufklapp > summary { cursor: pointer; list-style-position: inside; }
.ka-aufklapp > summary::marker { color: var(--ka-ink-muted); }
.ka-aufklapp:not([open]) > summary { border-bottom: 0; }
.ka-sortierbar th[data-ka-sortiert] button { font-weight: 700; }
.ka-sortierbar th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; min-height: 0; }
.ka-sortierbar th button::after { content: " \2195"; color: var(--ka-ink-muted); font-size: var(--ka-fs-xs, 11px); }
.ka-sortierbar th[data-ka-sortiert="auf"] button::after { content: " \2191"; }
.ka-sortierbar th[data-ka-sortiert="ab"] button::after { content: " \2193"; }
.ka-summenzeile td { font-weight: 600; border-top: 2px solid var(--ka-line); }

/* ==========================================================================
   Teil C16 - Frage an die KI: Schritte und Zwischenstand (Register 325, templates/gesetze/_frage_an_die_ki.html, static/js/ka-ki-recherche.js)
   Offene Schritte gedämpft, der laufende mit Kreisel (Bootstrap .spinner-border), erledigte mit Haken in der Signalfarbe „ok“.
   ========================================================================== */
.ka-ki-schritte { margin-left: 0; }
.ka-ki-schritt { color: var(--ka-ink-muted); padding: 2px 0; }
.ka-ki-schritt .fa-check { color: var(--ka-ok); }
.ka-ki-schritt--aktiv { color: inherit; font-weight: 600; }
.ka-ki-schritt--erledigt { color: inherit; }
.ka-ki-zwischentext { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ka-ink-muted); }
.ka-ki-zwischentext:empty { display: none; }

/* ==========================================================================
   Teil C17 - Dateien ziehen (Register 334, static/js/ka-oberflaeche.js Teil 8)
   Ablagezone hinter jedem Dateifeld; ohne Skript gibt es sie nicht.
   ========================================================================== */
.ka-ziehzone {
  display: block; margin: var(--ka-space-2) 0 var(--ka-space-3); padding: var(--ka-space-3) var(--ka-space-4);
  border: 2px dashed var(--ka-line); border-radius: var(--ka-radius); background: var(--ka-surface-muted);
  color: var(--ka-ink-2); font-size: var(--ka-fs-sm); text-align: center; cursor: pointer;
}
.ka-ziehzone:hover, .ka-ziehzone:focus-visible { border-color: var(--ka-primary); color: var(--ka-ink); }
.ka-ziehzone--aktiv { border-color: var(--ka-primary); background: var(--ka-primary-t); color: var(--ka-ink); }
.ka-ziehzone--belegt { border-style: solid; }
.ka-ziehzone__text { display: block; }
.ka-ziehzone__namen { display: block; margin-top: var(--ka-space-1); font-weight: 600; overflow-wrap: anywhere; }
.ka-ziehzone__namen:empty, .ka-ziehzone__fehler:empty { display: none; }
.ka-ziehzone__fehler { display: block; margin-top: var(--ka-space-1); color: var(--ka-frist); font-weight: 600; overflow-wrap: anywhere; }
@media print { .ka-ziehzone { display: none; } }

/* ===================================================================
   Teil C18 - Vorschläge beim Tippen (Register 339, static/js/ka-oberflaeche.js Teil 9)
   Eine Liste unter (oder mit --oben über) dem Suchfeld; der Rahmen bekommt ka-vorschlaege-rahmen vom Skript.
   ========================================================================== */
.ka-vorschlaege-rahmen { position: relative; }
.ka-vorschlaege {
  position: absolute; z-index: 1050; left: 0; right: 0; top: 100%; min-width: 16rem; max-height: 20rem; overflow-y: auto;
  margin: 2px 0 0; padding: var(--ka-space-1) 0; list-style: none;
  background: var(--ka-surface); color: var(--ka-ink); border: 1px solid var(--ka-line); border-radius: var(--ka-radius); box-shadow: var(--ka-shadow-pop);
  font-size: var(--ka-fs-md); text-align: left;
}
.ka-vorschlaege[hidden] { display: none; }
.ka-vorschlaege--oben { top: auto; bottom: 100%; margin: 0 0 2px; }
.ka-vorschlaege__punkt { display: flex; align-items: baseline; gap: var(--ka-space-2); min-height: 36px; padding: 6px var(--ka-space-3); cursor: pointer; }
.ka-vorschlaege__punkt--aktiv { background: var(--ka-primary-t); }
.ka-vorschlaege__symbol { flex: 0 0 1.1em; color: var(--ka-ink-muted); text-align: center; }
.ka-vorschlaege__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ka-vorschlaege__zusatz { flex: 0 1 auto; max-width: 45%; color: var(--ka-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media print { .ka-vorschlaege { display: none; } }
/* Dateien einzeln hochladen (ka-oberflaeche.js, Teil 10; Paket UNTERLAGEN-VERTEILEN) */
.ka-upload-liste { margin: var(--ka-space-3) 0 0; padding-left: var(--ka-space-4); }
.ka-upload-liste__eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2); margin-bottom: var(--ka-space-1); }
.ka-upload-liste__name { flex: 1 1 14rem; overflow-wrap: anywhere; }
.ka-upload-liste__eintrag progress { flex: 0 0 8rem; }
.ka-upload-liste__stand { flex: 1 1 12rem; color: var(--ka-ink-2); }
.ka-upload-liste__eintrag--gut .ka-upload-liste__stand { color: var(--ka-ok-text); }
.ka-upload-liste__eintrag--fehler .ka-upload-liste__stand { color: var(--ka-frist-text); font-weight: 600; }
.ka-upload-zusammenfassung { margin: var(--ka-space-2) 0; font-weight: 600; }

/* Sammelablage (Register 349): Dateien auf das Daria-Fenster ziehen - sichtbarer Rahmen, solange Dateien darüber schweben (ka-oberflaeche.js, Teil 12). */
.ka-daria__fenster.ka-daria--abwurf { outline: 3px dashed var(--ka-primary); outline-offset: -3px; }

/* ==========================================================================
   Teil C19 - Sammelablage: Zuordnen mit Vorschau (Register 356, templates/document_catalog/sammel_zuordnen.html)
   Links die Vorschau im Rahmen, rechts die Aktionen; unter 992 px untereinander (Vorschau zuerst).
   ========================================================================== */
.ka-sammel-zuordnen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 992px) {
  .ka-sammel-zuordnen { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); }
}
.ka-sammel-zuordnen__rahmen {
  display: block;
  width: 100%;
  height: 75vh;
  min-height: 420px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-radius);
  background: var(--ka-surface);
}
.ka-sammel-rahmen { padding: 1rem; background: var(--ka-surface); }

/* ==========================================================================
   Teil C23 - Sprungsuche: ein Suchfeld mit wählbaren Bereichen (A34, A35, A49; Register 370; Entwurf F5-Suche und F5-Mobil-Suche)
   templates/globalsearch/_sprungsuche.html, static/js/sprungsuche.js. Ab 768 px ein Fenster über der Seite (Umschalter mit Kürzeln, Treffer
   nach Art getrennt); darunter eine ganze Seite mit Bereichsknopf im Feld und „Wo soll gesucht werden?“.
   ========================================================================== */
.ka-suche__taste {
  font-family: var(--ka-font-mono); font-size: 10px; color: var(--ka-nav-label); background: transparent; box-shadow: none;
  border: 1px solid var(--ka-nav-line); border-radius: 4px; padding: 1px 4px; white-space: nowrap;
}
body.ka-sprung-offen { overflow: hidden; }
.ka-sprung { position: fixed; inset: 0; z-index: 1060; display: flex; justify-content: center; align-items: flex-start; padding-top: 96px; }
.ka-sprung[hidden] { display: none; }
.ka-sprung__schleier { position: absolute; inset: 0; background: var(--ka-schleier); }
.ka-sprung__fenster {
  position: relative; display: flex; flex-direction: column; width: 760px; max-width: calc(100vw - 32px); max-height: calc(100vh - 128px);
  background: var(--ka-surface); border: 1px solid var(--ka-such-rahmen); border-radius: 14px; box-shadow: var(--ka-shadow-dialog); overflow: hidden;
}
.ka-sprung__kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ka-line); }
.ka-sprung__feld { display: flex; align-items: center; gap: 12px; flex-grow: 1; min-width: 0; margin: 0; }
.ka-sprung__feld > .fas { color: var(--ka-ink-muted); font-size: 17px; }
.ka-sprung__feld input {
  flex-grow: 1; min-width: 0; border: 0; background: transparent; color: var(--ka-ink); font-family: var(--ka-font-sans); font-size: 19px; outline: none;
}
.ka-sprung__feld input::placeholder { color: var(--ka-ink-muted); }
.ka-sprung__feld input:focus { outline: none; box-shadow: none; }
.ka-sprung__feld input::-webkit-search-cancel-button { display: none; }
.ka-sprung__taste {
  margin-left: auto; font-family: var(--ka-font-mono); font-size: 11px; color: var(--ka-ink-muted); background: transparent; box-shadow: none;
  border: 1px solid var(--ka-line); border-radius: 5px; padding: 2px 6px;
}
.ka-sprung__zurueck, .ka-sprung__bereichsknopf, .ka-sprung__auswahl { display: none; }
.ka-sprung__bereiche { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 20px; border-bottom: 1px solid var(--ka-line); }
.ka-sprung__chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: var(--ka-radius-pill); cursor: pointer;
  border: 1px solid var(--ka-chip-rahmen); background: var(--ka-surface); color: var(--ka-ink); font: 400 13px var(--ka-font-sans);
}
.ka-sprung__chip[aria-pressed="true"] { border-color: var(--ka-primary); background: var(--ka-primary); color: #FFFFFF; font-weight: 600; }
.ka-sprung__kuerzel { font-family: var(--ka-font-mono); font-size: 10.5px; color: var(--ka-ink-muted); font-weight: 400; }
.ka-sprung__chip[aria-pressed="true"] .ka-sprung__kuerzel { color: var(--ka-primary-b); }
.ka-sprung__liste { overflow-y: auto; }
.ka-sprung__ueberschrift, .ka-sprung__abschnitt {
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ka-ink-muted);
  padding: 13px 20px 6px; background: var(--ka-surface-muted);
}
.ka-sprung__zeile {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 20px; border: 0; border-bottom: 1px solid var(--ka-zeile-linie);
  background: var(--ka-surface); color: var(--ka-ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer;
}
.ka-sprung__gruppe .ka-sprung__zeile:last-child { border-bottom: 0; }
.ka-sprung__zeile:hover, .ka-sprung__zeile--aktiv { background: var(--ka-primary-t); color: var(--ka-ink); text-decoration: none; }
.ka-sprung__zeile:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: -2px; }
.ka-sprung__symbol {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px;
  color: var(--ka-primary); background: color-mix(in srgb, var(--ka-primary) 8%, var(--ka-surface));
}
.ka-sprung__zeile--inhalte .ka-sprung__symbol, .ka-sprung__zeile--daria .ka-sprung__symbol {
  color: var(--ka-akzent-inhalt); background: color-mix(in srgb, var(--ka-akzent-inhalt) 8%, var(--ka-surface));
}
.ka-sprung__zeile--rechtsprechung .ka-sprung__symbol {
  color: var(--ka-akzent-recht); background: color-mix(in srgb, var(--ka-akzent-recht) 8%, var(--ka-surface));
}
.ka-sprung__text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.ka-sprung__titel { font-size: var(--ka-fs-md); font-weight: 500; overflow-wrap: anywhere; }
.ka-sprung__titel .ka-sprung__kuerzel { margin-left: 7px; font-size: 11px; }
.ka-sprung__liste .ka-sprung__zeile--daria .ka-sprung__titel { font-weight: 400; }
.ka-sprung__detail { margin-top: 2px; font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-sprung__pfeil { flex-shrink: 0; color: var(--ka-ink-muted); font-size: 11px; }
.ka-sprung__leer { margin: 0; padding: 11px 20px; font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); background: var(--ka-surface); }
.ka-sprung__leeren { margin: 0; padding: 8px 20px; }
.ka-sprung__status { margin: 0; padding: 0 20px; font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); }
.ka-sprung__status:not(:empty) { padding: 11px 20px; }
.ka-sprung__fuss {
  display: flex; align-items: center; gap: 10px; padding: 11px 20px; background: var(--ka-surface-muted); border-top: 1px solid var(--ka-line);
  font-size: 11.5px; color: var(--ka-ink-muted);
}
.ka-sprung__fuss strong { font-weight: 700; }
.ka-sprung__alle { margin-left: auto; white-space: nowrap; }
@media (max-width: 767.98px) {
  .ka-sprung { padding: 0; align-items: stretch; }
  .ka-sprung__schleier, .ka-sprung__taste, .ka-sprung__bereiche { display: none; }
  .ka-sprung__fenster {
    width: 100%; max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--ka-ground); overflow-y: auto;
  }
  .ka-sprung__kopf { position: sticky; top: 0; z-index: 1; gap: 8px; padding: 10px 12px 12px; background: var(--ka-nav); border-bottom: 0; }
  .ka-sprung__zurueck {
    display: flex; align-items: center; flex-shrink: 0; width: 36px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ka-nav-text);
  }
  .ka-sprung__feld { gap: 8px; height: 44px; padding: 0 10px; border-radius: 10px; background: var(--ka-nav-hover); border: 1px solid var(--ka-nav-line); }
  .ka-sprung__feld > .fas { color: var(--ka-nav-label); font-size: 14px; }
  .ka-sprung__feld input { color: #FFFFFF; font-size: 15px; }
  .ka-sprung__feld input::placeholder { color: var(--ka-nav-label); }
  .ka-sprung__bereichsknopf {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 30px; padding: 0 9px; border-radius: var(--ka-radius-pill);
    border: 1px solid var(--ka-nav-focus); background: var(--ka-nav); color: #FFFFFF; font: 600 12px var(--ka-font-sans); white-space: nowrap; cursor: pointer;
  }
  .ka-sprung__bereichsknopf .fas { font-size: 10px; }
  .ka-sprung__auswahl--offen { display: block; }
  .ka-sprung__ueberschrift, .ka-sprung__abschnitt { padding: 15px 16px 9px; background: transparent; }
  .ka-sprung__block, .ka-sprung__gruppe { background: transparent; }
  .ka-sprung__block { border-top: 1px solid var(--ka-line); border-bottom: 1px solid var(--ka-line); }
  .ka-sprung__gruppe .ka-sprung__ueberschrift + .ka-sprung__zeile, .ka-sprung__gruppe .ka-sprung__ueberschrift + .ka-sprung__leer { border-top: 1px solid var(--ka-line); }
  .ka-sprung__gruppe .ka-sprung__zeile:last-child, .ka-sprung__leer { border-bottom: 1px solid var(--ka-line); }
  .ka-sprung__zeile { min-height: 56px; padding: 10px 16px; }
  .ka-sprung__block .ka-sprung__zeile:last-child { border-bottom: 0; }
  .ka-sprung__symbol { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
  .ka-sprung__titel { font-size: 14.5px; }
  .ka-sprung__block .ka-sprung__zeile[aria-pressed="true"] .ka-sprung__titel { color: var(--ka-primary); font-weight: 600; }
  .ka-sprung__leer { padding: 13px 16px; }
  .ka-sprung__leeren { padding: 12px 16px 0; }
  .ka-sprung__status:not(:empty) { padding: 12px 16px; }
  .ka-sprung__fuss { align-items: flex-start; padding: 13px 16px 16px; background: transparent; border-top: 0; line-height: 1.5; flex-wrap: wrap; }
}
/* ==========================================================================
   Teil C21 - Kontextwerkzeuge und Vorbelegung mit Quelle (UX-Konzept Fassung 5, A24/A25, Register 373;
   templates/legal_calc/_kontextwerkzeuge.html, _vorbelegung.html, _vorbelegt_marke.html). Die Rechner erscheinen als schliessbare Ueberlagerung
   (Bootstrap-Dialog) im heutigen Layout, keine rechte Spalte (A43 zurueckgestellt). Vorbelegung nach dem Entwurf F5-Daria-Formular.
   ========================================================================== */
.ka-werkzeuge__liste { list-style: none; margin: 0; padding: 0; }
.ka-werkzeuge__eintrag { display: flex; gap: var(--ka-space-3); padding: var(--ka-space-3) 0; border-bottom: 1px solid var(--ka-line-soft); }
.ka-werkzeuge__eintrag:last-child { border-bottom: 0; }
.ka-werkzeuge__symbol {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--ka-radius-pill); background: var(--ka-primary-t); color: var(--ka-primary);
}
.ka-werkzeuge__name { font-weight: 600; font-size: var(--ka-fs-md); display: inline-block; min-height: 24px; }
.ka-werkzeuge__text { margin: 2px 0 0; font-size: 12.5px; color: var(--ka-ink-2); line-height: 1.5; }
.ka-werkzeuge__uebernahme { margin: 4px 0 0; font-size: 12px; color: var(--ka-ink-muted); line-height: 1.5; }

.ka-vorbelegung {
  display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 20px; border-radius: var(--ka-radius-lg);
  background: var(--ka-daria-t); border: 1px solid var(--ka-daria-b);
}
.ka-vorbelegung__symbol {
  width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--ka-radius-pill); border: 1px solid var(--ka-line-strong); background: var(--ka-surface); color: var(--ka-daria-akzent);
}
.ka-vorbelegung__inhalt { flex-grow: 1; min-width: 0; }
.ka-vorbelegung__titel { margin: 0; font-size: var(--ka-fs-md); font-weight: 600; }
.ka-vorbelegung__text { margin: 4px 0 0; font-size: var(--ka-fs-sm); color: var(--ka-daria-text); line-height: 1.5; }
.ka-vorbelegung__aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.ka-vorbelegt__marke { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--ka-daria-akzent); }
.ka-vorbelegt .form-control, .ka-vorbelegt .custom-select { border-color: var(--ka-daria-feld-b); border-left: 3px solid var(--ka-daria-akzent); }
/* ==========================================================================
   Teil C20 - Briefpapier: Felder ziehen (Register 364, templates/organizations/letterhead.html, static/js/ka-briefpapier-felder.js)
   Erstseite als Bild im Seitenverhaeltnis A4; je Feld ein Rahmen. Lage und Groesse setzt das Skript als --ka-bp-x/-y/-w/-h (Prozent der Seite),
   die Hoehe der Ruecksendezone als --ka-bp-rs. Ohne Skript bleibt der Block verborgen (hidden).
   ========================================================================== */
.ka-bpfeld { max-width: 34rem; margin: 0 auto var(--ka-space-3); }
.ka-bpfeld[hidden] { display: none; }
.ka-bpfeld__blatt {
  position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden;
  border: 1px solid var(--ka-line); background: #FFFFFF; user-select: none; -webkit-user-select: none;
}
.ka-bpfeld__bild { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ka-bpfeld__rahmen {
  position: absolute; left: var(--ka-bp-x, 0); top: var(--ka-bp-y, 0); width: var(--ka-bp-w, 10%); height: var(--ka-bp-h, 2%);
  min-height: 6px; box-sizing: border-box; border: 2px solid var(--ka-primary); background: transparent;
  cursor: move; touch-action: none;
}
.ka-bpfeld__rahmen[hidden] { display: none; }
.ka-bpfeld__rahmen::before { content: ''; position: absolute; inset: -6px; }          /* groessere Greifflaeche fuer die schmalen Bezugszeichen */
.ka-bpfeld__rahmen:focus-visible { outline: 3px solid var(--ka-primary); outline-offset: 2px; z-index: 3; }
.ka-bpfeld__rahmen--aktiv { z-index: 2; border-width: 3px; }
.ka-bpfeld__rahmen--text { border-style: dashed; border-color: var(--ka-ink-muted); background: transparent; }
.ka-bpfeld__rahmen--ueberlappt { border-color: var(--ka-vorfrist); border-width: 3px; }
.ka-bpfeld__name {
  position: absolute; left: 0; bottom: 100%; padding: 0 3px; white-space: nowrap; font-size: 11px; line-height: 1.4;
  background: var(--ka-primary); color: #FFFFFF; pointer-events: none;
}
.ka-bpfeld__rahmen--text .ka-bpfeld__name { top: 0; bottom: auto; background: var(--ka-ink-muted); }
.ka-bpfeld__rahmen--address .ka-bpfeld__name { bottom: 0; }     /* im Feld: steht es oben an der Seite, bliebe die Beschriftung sonst unsichtbar */
.ka-bpfeld__rahmen--ueberlappt .ka-bpfeld__name { background: var(--ka-vorfrist-text); }
.ka-bpfeld__ruecksende {
  position: absolute; left: 0; right: 0; top: 0; height: var(--ka-bp-rs, 11%); border-bottom: 1px dotted var(--ka-primary);
  font-size: 9px; line-height: 1; padding: 1px 3px; color: var(--ka-ink-2); overflow: hidden; pointer-events: none;
}
.ka-bpfeld__ruecksende[hidden] { display: none; }
.ka-bpfeld__griff {
  position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ka-primary); border: 2px solid #FFFFFF; cursor: nwse-resize; touch-action: none;
}
@media (pointer: coarse) { .ka-bpfeld__griff { right: -14px; bottom: -14px; width: 28px; height: 28px; } }
.ka-bpfeld__warnung { min-height: 1.2em; margin: var(--ka-space-2) 0 0; color: var(--ka-vorfrist-text); font-weight: 600; }
.ka-bpfeld__warnung:empty { min-height: 0; margin: 0; }
@media print { .ka-bpfeld { display: none; } }

/* ==========================================================================
   Teil C20 - Akte: Phase, Abschnitt „Mandantenportal“, Besondere Lagen (Register 371, UX-Konzept Fassung 5, Teil IV und II;
   Entwurf F5-Akte von Claude Design). templates/cases/case_detail.html, _akte_portal.html, _case_subnav.html, case_list.html.
   Werte aus tokens.css; wo der Entwurf einen Ton ohne Token nutzt, gilt der nächste vorhandene Token (Grau der deaktivierten Zeile:
   --ka-ink-muted statt eines helleren Graus, damit der Text lesbar bleibt - DESIGNSYSTEM.md, kleinster zulässiger Grauwert).
   ========================================================================== */
.ka-kopfchips { display: flex; flex-wrap: wrap; gap: var(--ka-space-2); margin-top: 11px; }
.ka-kopfchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--ka-radius-pill);
  border: 1px solid var(--ka-neutral-b); background: var(--ka-surface); color: var(--ka-ink-muted); font-size: 12px; font-weight: 600;
}
.ka-kopfchip--phase { border-color: var(--ka-primary-b); background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-kopfchip--offen { border-color: var(--ka-ok-b); background: var(--ka-ok-t); color: var(--ka-ok-text); }
.ka-kopfchip--vorfrist { border-color: var(--ka-vorfrist-b); background: var(--ka-vorfrist-t); color: var(--ka-vorfrist-text); }

.ka-abschnitt { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); margin-bottom: 14px; overflow: hidden; }
.ka-abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ka-space-3); padding: 13px 18px 11px; border-bottom: 1px solid var(--ka-line); }
.ka-abschnitt__titel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-lg); font-weight: 600; }
.ka-abschnitt__meta { margin-left: auto; font-size: 12px; color: var(--ka-ink-muted); }
.ka-abschnitt__inhalt { padding: 14px 18px 16px; }
.ka-abschnitt__text { margin: 0; font-size: 13px; line-height: 1.55; }
.ka-abschnitt__hinweis { display: flex; gap: var(--ka-space-2); margin: 13px 0 0; font-size: 12px; line-height: 1.5; color: var(--ka-ink-muted); }
.ka-abschnitt__knoepfe { display: flex; flex-wrap: wrap; gap: var(--ka-space-2); margin-top: 13px; }

.ka-schritte { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.ka-schritte__balken { flex-grow: 1; height: 6px; border-radius: 3px; background: var(--ka-line); }
.ka-schritte__balken--erledigt { background: var(--ka-ok); }
.ka-schritte__text { font-size: 12px; color: var(--ka-ink-muted); white-space: nowrap; }

.ka-portal-aktion {
  display: flex; flex-wrap: wrap; gap: var(--ka-space-3); padding: 11px 13px; margin-bottom: var(--ka-space-3); border-radius: 8px;
  background: var(--ka-vorfrist-t); border: 1px solid var(--ka-vorfrist-b);
}
.ka-portal-aktion > .fas { color: var(--ka-vorfrist-text); margin-top: 2px; }
.ka-portal-aktion__text { flex-grow: 1; min-width: 12rem; }
.ka-portal-aktion__titel { margin: 0; font-size: var(--ka-fs-md); font-weight: 600; }
.ka-portal-aktion__neben { margin: 3px 0 0; font-size: 12px; color: var(--ka-ink-muted); }
/* „Das steht als Nächstes an“ in der Akte (Register 376, Entwurf F5-Akte): Zeile mit Titel, Kurzbegründung und Aktion; rot nur, wenn heute fällig oder überfällig. */
.ka-naechstes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-3); padding: 10px 0; border-top: 1px solid var(--ka-line-soft); }
.ka-naechstes:first-child { border-top: 0; padding-top: 0; }
.ka-naechstes__text { flex-grow: 1; min-width: 12rem; }
.ka-naechstes__titel { margin: 0; font-size: var(--ka-fs-md); font-weight: 600; }
.ka-naechstes__grund { margin: 3px 0 0; font-size: 12px; color: var(--ka-ink-muted); }
.ka-naechstes--dringend .ka-naechstes__grund { color: var(--ka-frist-text); }
.ka-portal-liste { list-style: none; margin: 13px 0 0; padding: 0; font-size: 13px; }
.ka-portal-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ka-space-2); padding: 5px 0; border-top: 1px solid var(--ka-line-soft); }

.ka-phasen { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--ka-space-2); margin-bottom: 13px; }
.ka-phasen__schritt {
  display: flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--ka-radius-pill);
  font-size: 12.5px; background: var(--ka-line-soft); color: var(--ka-ink-muted);
}
.ka-phasen__schritt--aktuell { background: var(--ka-primary); color: #FFFFFF; font-weight: 700; }
.ka-phasen__linie { width: 26px; height: 1px; background: var(--ka-lesegrund-rahmen); }
.ka-phasen__grund { margin: var(--ka-space-2) 0 0; font-size: 12px; color: var(--ka-ink-muted); }

/* Verfügbare Besondere Lage: aussehen wie ein Bereich, eigene Klasse, weil sie kein Bereich aus AKTENBEREICHE ist */
.ka-bereichsspalte__lage {
  display: flex; align-items: center; gap: .5rem; min-height: 32px; padding: .375rem .875rem;
  font-size: .844rem; color: var(--ka-ink); text-decoration: none; border-left: 3px solid transparent;
}
.ka-bereichsspalte__lage:hover, .ka-bereichsspalte__lage:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-bereichsspalte__gesperrt { padding: .4375rem .875rem .5625rem; border-left: 3px solid transparent; }
.ka-bereichsspalte__gesperrt-name { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .844rem; color: var(--ka-ink-muted); }
.ka-bereichsspalte__bedingung { display: block; margin: 2px 0 0 21px; font-size: 11.5px; line-height: 1.4; color: var(--ka-ink-muted); }
.ka-bereichszeile--gesperrt { color: var(--ka-ink-muted); }
.ka-bereichszeile--gesperrt .ka-bereichsspalte__bedingung { margin-left: 0; }

/* ==========================================================================
   Teil C21 - Freigaben (Register 369, templates/freigaben/uebersicht.html; Entwurf F5-Freigaben von Claude Design)
   Drei Abschnitte: heute fällig (roter Rahmen), wartet auf mich, wartet auf andere (ruhig). Je Eintrag Symbol, Titel, Herkunft, Sachtext,
   Wirkung (A11) und Regelhinweis; rechts die Aktionen des Moduls. Unter 768 px rutschen die Aktionen unter den Text.
   ========================================================================== */
.ka-freigaben__kopf { display: flex; align-items: center; gap: var(--ka-space-4); background: var(--ka-surface); border: 1px solid var(--ka-line);
  border-radius: var(--ka-radius-lg); padding: 17px 26px; margin-bottom: 18px; }
.ka-freigaben__titel { margin: 0; font-family: var(--ka-font-serif); font-size: 23px; font-weight: 700; }
.ka-freigaben__stand { margin: 4px 0 0; font-size: 13px; color: var(--ka-ink-muted); }
.ka-freigaben__gruppe { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); margin-bottom: 14px; overflow: hidden; }
.ka-freigaben__gruppe--heute { border-color: var(--ka-frist); }
.ka-freigaben__gruppe--andere { border-color: var(--ka-line-strong); }
.ka-freigaben__gruppenkopf { display: flex; align-items: baseline; gap: var(--ka-space-3); padding: 13px 18px 11px; border-bottom: 1px solid var(--ka-line); }
.ka-freigaben__gruppentitel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-lg); font-weight: 700; }
.ka-freigaben__anzahl { margin-left: auto; font-size: 12px; color: var(--ka-ink-muted); }
.ka-freigaben__leer { margin: 0; padding: 14px 18px; font-size: 13px; color: var(--ka-ink-muted); }
.ka-freigaben__unten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Im Entwurf steht rechts daneben „Löschung“ (58 : 42); solange die Löschentscheidung nicht gebaut ist (A14, E4), nimmt „wartet auf andere“ die volle Breite. */

.ka-freigabe { display: flex; gap: 14px; padding: 14px 18px; align-items: flex-start; border-bottom: 1px solid var(--ka-line); }
.ka-freigabe:last-child { border-bottom: 0; }
.ka-freigabe__symbol { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--ka-primary); background: color-mix(in srgb, var(--ka-primary) 8%, transparent); }
.ka-freigaben__gruppe--heute .ka-freigabe__symbol { color: var(--ka-frist); background: color-mix(in srgb, var(--ka-frist) 8%, transparent); }
.ka-freigaben__gruppe--andere .ka-freigabe__symbol { color: var(--ka-ink-muted); background: color-mix(in srgb, var(--ka-ink-muted) 8%, transparent); }
.ka-freigabe__symbol--regel, .ka-freigaben__gruppe .ka-freigabe__symbol--regel { color: var(--ka-regel-text); background: color-mix(in srgb, var(--ka-regel-text) 8%, transparent); }
.ka-freigabe__inhalt { flex-grow: 1; min-width: 0; }
.ka-freigabe__titel { margin: 0; font-family: var(--ka-font-sans); font-size: 14px; font-weight: 600; line-height: 1.35; }
.ka-freigabe__zeile { margin: 3px 0 0; font-size: 12px; color: var(--ka-ink-muted); }
.ka-freigabe__text { margin: 6px 0 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-3); line-height: 1.45; }
.ka-freigabe__wirkung { margin: 6px 0 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-3); line-height: 1.45; }
.ka-freigabe__wirkung-label, .ka-freigabe__status { font-weight: 600; }
.ka-freigabe__hinweis { margin: 7px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ka-regel-text);
  background: var(--ka-regel-t); border: 1px solid var(--ka-regel-b); border-radius: var(--ka-radius); padding: 3px 8px; }
.ka-freigabe__aktionen { display: flex; gap: var(--ka-space-2); align-items: center; flex-shrink: 0; }
.ka-freigabe__aktionen form { margin: 0; }
.ka-freigabe__knopf { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--ka-control-line);
  background: var(--ka-surface); color: var(--ka-ink); font: 600 var(--ka-fs-sm) var(--ka-font-sans); white-space: nowrap; cursor: pointer; text-decoration: none; }
.ka-freigabe__knopf:hover, .ka-freigabe__knopf:focus { color: var(--ka-ink); text-decoration: none; border-color: var(--ka-ink-muted); }
.ka-freigabe__knopf--haupt { border-color: var(--ka-primary); background: var(--ka-primary); color: #FFFFFF; }
.ka-freigabe__knopf--haupt:hover, .ka-freigabe__knopf--haupt:focus { background: var(--ka-primary-h); border-color: var(--ka-primary-h); color: #FFFFFF; }
.ka-freigabe__knopf--ruhig { border-color: transparent; background: var(--ka-ruhig-t); color: var(--ka-ink-muted); }
.ka-freigabe__knopf--ruhig:hover, .ka-freigabe__knopf--ruhig:focus { color: var(--ka-ink); border-color: var(--ka-line-strong); }
@media (max-width: 767.98px) {
  .ka-freigaben__kopf { padding: 14px 16px; }
  .ka-freigabe { flex-wrap: wrap; padding: 14px 16px; }
  .ka-freigabe__inhalt { flex-basis: calc(100% - 46px); }
  .ka-freigabe__aktionen { flex-wrap: wrap; width: 100%; padding-left: 46px; }
  .ka-freigabe__knopf { height: var(--ka-control-h-lg); }
}
/* Zähler „wartet auf mich“ am Menüpunkt Freigaben (Entwurf F5): rote Plakette in der Seitenleiste. */
.ka-sidebar__link > .ka-nav-zahl { flex-grow: 0; }
.ka-nav-zahl { margin-left: auto; font-size: 9.5px; font-weight: 700; border-radius: var(--ka-radius-pill); padding: 1px 6px; line-height: 1.4;
  background: var(--ka-nav-count); color: #FFFFFF; }   /* ruhig: Zahl ohne Handlungsbedarf (Register 385) */
.ka-nav-zahl--frist { background: var(--ka-frist); color: #FFFFFF; }

/* ==========================================================================
   Teil C22 - Daria: Reiter „Daria“ der Grundeinstellungen und die Stufe im Daria-Fenster (UX-Konzept Fassung 5, A46-A48, Register 373;
   templates/automation/daria_einstellungen.html, templates/core/_daria.html). Masse und Farben nach dem Entwurf F5-Daria-Einstellungen/F5-Daria.
   Die Stufenleiste ist eine Gruppe echter Optionsfelder (Tastatur, Bildschirmleser); nicht waehlbare Stufen sind Text, kein Feld.
   ========================================================================== */
.ka-daria-einst__kopf { align-items: center; gap: var(--ka-space-3); }
.ka-daria-einst__avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--ka-radius-pill); border: 1px solid var(--ka-line-strong); background: var(--ka-primary-t); }
.ka-daria-einst__titelblock { flex: 1 1 16rem; min-width: 0; }
.ka-daria-einst__titelblock .ka-seitenkopf__titel { font-size: 22px; }
.ka-daria-einst__unterzeile { margin: 2px 0 0; font-size: 13px; color: var(--ka-ink-muted); }
.ka-daria-einst__karte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); margin-bottom: 14px; overflow: hidden; }
.ka-daria-einst__kartenkopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ka-space-3); padding: 13px 18px 11px; border-bottom: 1px solid var(--ka-line); }
.ka-daria-einst__kartentitel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-lg); font-weight: 700; }
.ka-daria-einst__kartenzusatz { margin-left: auto; font-size: 12px; color: var(--ka-ink-muted); }
.ka-daria-einst__gruppe {
  padding: 11px 18px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-ink-muted);
  background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line);
}
.ka-daria-einst__zeile + .ka-daria-einst__gruppe { border-top: 1px solid var(--ka-line); }
.ka-daria-einst__zeile { padding: 13px 18px; border-bottom: 1px solid var(--ka-line); scroll-margin-top: 80px; }
.ka-daria-einst__zeile:last-child { border-bottom: 0; }
.ka-daria-einst__zeile.is-hervorgehoben, .ka-daria-einst__zeile:target { background: var(--ka-primary-t); box-shadow: inset 3px 0 0 var(--ka-primary); }
.ka-daria-einst__reihe { display: flex; flex-wrap: wrap; gap: var(--ka-space-3) 18px; align-items: flex-start; }
.ka-daria-einst__text { flex: 1 1 18rem; min-width: 0; }
.ka-daria-einst__name { display: block; margin: 0; font-size: var(--ka-fs-md); font-weight: 600; }
.ka-daria-einst__beschreibung { margin: 3px 0 0; font-size: 12px; color: var(--ka-ink-muted); line-height: 1.5; }
.ka-daria-einst__wahl { flex-shrink: 0; max-width: 100%; }
.ka-daria-einst__grund {
  margin: 9px 0 0; display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--ka-daria-text);
  background: var(--ka-daria-t); border: 1px solid var(--ka-daria-b); border-radius: var(--ka-radius); padding: 7px 10px;
}
.ka-daria-einst__grund .fas { margin-top: 3px; }
.ka-daria-einst__mehr { margin-top: 7px; font-size: 12px; color: var(--ka-ink-2); }
.ka-daria-einst__mehr summary { color: var(--ka-primary); cursor: pointer; min-height: 24px; }
.ka-daria-einst__mehr p, .ka-daria-einst__mehr ul { margin: 4px 0 0; }
.ka-daria-einst__fuss { margin: 2px 0 14px; display: flex; gap: 9px; font-size: 12px; color: var(--ka-ink-muted); line-height: 1.55; }
.ka-daria-einst__fuss .fas { margin-top: 3px; }

/* Schalter (Mikrofon, Melden): echtes Kontrollkaestchen mit role="switch" */
.ka-schalter {
  appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 25px; margin: 0; flex-shrink: 0; cursor: pointer;
  border-radius: var(--ka-radius-pill); background: var(--ka-line-strong); transition: background-color .15s;
}
.ka-schalter::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: var(--ka-radius-pill);
  background: var(--ka-surface); transition: transform .15s;
}
.ka-schalter:checked { background: var(--ka-schalter-an); }
.ka-schalter:checked::before { transform: translateX(19px); }
.ka-schalter:focus-visible { outline: 2px solid var(--ka-nav-focus); outline-offset: 2px; }
.ka-schalter:disabled { cursor: not-allowed; opacity: .55; }

/* Stufenleiste: vier Stufen, waehlbar nur die im Register erlaubten */
.ka-stufenwahl { display: flex; flex-wrap: wrap; margin: 0; padding: 0; min-width: 0; border: 1px solid var(--ka-line); border-radius: 7px; overflow: hidden; background: var(--ka-surface); }
.ka-stufenwahl__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ka-stufenwahl__stufe {
  margin: 0; padding: 6px 11px; font-size: 12px; white-space: nowrap; font-weight: 400; color: var(--ka-ink); background: transparent;
  border-right: 1px solid var(--ka-line); cursor: pointer;
}
.ka-stufenwahl__stufe:last-child { border-right: 0; }
.ka-stufenwahl__stufe--gesperrt { background: var(--ka-ground); color: var(--ka-ink-gesperrt); cursor: default; }
.ka-stufenwahl__stufe--aktiv, .ka-stufenwahl__radio:checked + .ka-stufenwahl__stufe { background: var(--ka-primary); color: #FFFFFF; font-weight: 700; }
.ka-stufenwahl__radio:focus-visible + .ka-stufenwahl__stufe { outline: 2px solid var(--ka-nav-focus); outline-offset: -2px; }
.ka-stufe-fest {
  display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 7px; border: 1px dashed var(--ka-line-strong);
  background: var(--ka-surface-muted); color: var(--ka-ink-muted);
}
.ka-stufe-fest__name { font-size: 12px; font-weight: 600; color: var(--ka-ink); }
.ka-stufe-fest__zusatz { font-size: 11.5px; }

/* Daria-Fenster: wirksame Stufe im Kopf, Erklaerung mit „Stufe aendern“ unter dem Eingabefeld (A48) */
.ka-daria__stufe {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; flex-shrink: 0; border-radius: var(--ka-radius-pill);
  background: var(--ka-daria-t); border: 1px solid var(--ka-daria-b); color: var(--ka-daria-akzent); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ka-daria__stufenhinweis { display: flex; gap: 7px; margin: 0; padding: 0 12px 10px; font-size: 11px; color: var(--ka-ink-muted); line-height: 1.5; }
.ka-daria__stufenhinweis .fas { margin-top: 3px; }
.ka-daria__stufenhinweis a { color: var(--ka-primary); }

/* ==========================================================================
   Teil C28 - Daria: Fenster, Auftrag und Plan (Register 384, UX-DARIA-AUFTRAG; Entwurf F5-Daria, Mobil-Auftrag, F5-Daria-Formular von Claude Design).
   templates/core/_daria.html, static/js/daria.js (Antworttyp „plan“), templates/core/daria_auftrag.html, daria_auftraege.html, _daria_hinweis.html.
   Den Rahmen des Fensters als Werkzeug rechts liefert das Navigationspaket (A43); hier nur Inhalt und Masse nach dem Entwurf. Werte aus tokens.css.
   ========================================================================== */
.ka-daria__fenster {
  width: min(428px, calc(100vw - 32px)); height: min(880px, calc(100vh - 140px)); border: 1px solid var(--ka-line-strong); border-radius: 14px;
  box-shadow: var(--ka-shadow-dialog);
}
.ka-daria__kopf { gap: 10px; padding: 14px 16px; background: var(--ka-surface); }
.ka-daria__kopf .ka-daria__avatar { width: 34px; height: 34px; border: 1px solid var(--ka-line-strong); }
.ka-daria__name { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-lg); font-weight: 700; line-height: 1.25; }
.ka-daria__kontext { margin: 1px 0 0; font-size: 11.5px; color: var(--ka-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-daria__klein { width: 30px; height: 30px; flex-shrink: 0; border: 0; background: transparent; color: var(--ka-ink-muted); font-size: 16px; cursor: pointer; border-radius: var(--ka-radius); }
.ka-daria__klein:focus-visible { outline: 2px solid var(--ka-nav-focus); outline-offset: 1px; }
.ka-daria__verlauf { padding: 14px 16px; gap: 12px; background: var(--ka-daria-verlauf); }
.ka-daria__blase { font-size: 13px; line-height: 1.45; }
.ka-daria__blase--nutzer { max-width: 300px; padding: 10px 13px; background: var(--ka-primary); border: 0; color: #FFFFFF; border-radius: 12px 12px 3px 12px; }
.ka-daria__meta { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: 10.5px; color: var(--ka-daria-meta); }
.ka-daria__blase--daria { max-width: 348px; padding: 12px 14px; background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px 12px 12px 3px; }
.ka-daria__plan { width: 100%; }
.ka-daria__plan-intro { margin: 0 0 2px; font-size: 13px; line-height: 1.5; }
.ka-daria__schritte { list-style: none; margin: 0; padding: 0; }
.ka-daria__schritt { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--ka-zeile-linie); }
.ka-daria__schritt:last-child { border-bottom: 0; }
.ka-daria__nr {
  flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: var(--ka-radius-pill);
  border: 1px solid var(--ka-line); font-size: 11.5px; font-weight: 700; color: var(--ka-ink-muted);
}
.ka-daria__schritt-inhalt { flex-grow: 1; min-width: 0; }
.ka-daria__schritt-text { margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.ka-daria__schritt-text .ka-daria__link { color: var(--ka-ink); text-decoration: none; }
.ka-daria__schritt-text .ka-daria__link:hover, .ka-daria__schritt-text .ka-daria__link:focus { text-decoration: underline; }
.ka-daria__stand { margin: 3px 0 0; font-size: 11.5px; font-weight: 600; }
.ka-daria__stand--ok { color: var(--ka-akzent-recht); }
.ka-daria__stand--frist { color: var(--ka-frist); }
.ka-daria__stand--neutral { color: var(--ka-ink-muted); }
.ka-daria__freigeben { margin-top: 6px; }
.ka-daria__grundlage {
  display: flex; gap: 7px; margin-top: 11px; padding: 9px 11px; border-radius: 8px; background: var(--ka-surface-muted); border: 1px solid var(--ka-line);
  font-size: 11.5px; color: var(--ka-ink-muted); line-height: 1.5;
}
.ka-daria__grundlage .fas { margin-top: 3px; }
.ka-daria__luecken {
  display: flex; gap: 7px; margin-top: 11px; padding: 9px 11px; border-radius: 8px; background: var(--ka-surface-muted); border: 1px solid var(--ka-line);
  font-size: 12px; color: var(--ka-ink); line-height: 1.5;
}
.ka-daria__luecken > .fas { margin-top: 4px; color: var(--ka-ink-muted); }
.ka-daria__luecken-inhalt { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.ka-daria__luecke + .ka-daria__luecke { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--ka-zeile-linie); }
.ka-daria__luecke-links { margin-top: 2px; font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-daria__plan-meldung { margin: 9px 0 0; font-size: 12.5px; font-weight: 600; }
.ka-daria__pseudo {
  display: flex; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--ka-daria-t); border: 1px solid var(--ka-daria-b);
  color: var(--ka-daria-akzent); font-size: 11.5px; line-height: 1.5;
}
.ka-daria__blase .ka-daria__pseudo { margin-top: 9px; }
.ka-daria__pseudo .fas { margin-top: 3px; }
.ka-daria__pseudo-text { margin: 0; color: var(--ka-daria-text); }
.ka-daria__mono { font-family: var(--ka-font-mono); overflow-wrap: anywhere; }
.ka-daria__ki-satz { margin: 0 0 4px; padding: 7px 9px; border-radius: var(--ka-radius); background: var(--ka-surface-muted); font-size: 12px; }
.ka-daria__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.ka-daria__meldungen {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ka-line); background: var(--ka-surface);
  color: var(--ka-ink); font-size: 12.5px; text-decoration: none; min-height: 44px;
}
.ka-daria__meldungen:hover { color: var(--ka-ink); border-color: var(--ka-line-strong); text-decoration: none; }
.ka-daria__meldungen .fas { color: var(--ka-frist); }
.ka-daria__meldungen-text { flex-grow: 1; }
.ka-daria__zahl { background: var(--ka-frist); color: #FFFFFF; font-size: 10px; font-weight: 700; border-radius: var(--ka-radius-pill); padding: 1px 6px; }
.ka-daria__fuss { border-top: 1px solid var(--ka-line); padding: 12px 16px; background: var(--ka-surface); }
.ka-daria__aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ka-daria__aktionen[hidden] { display: none; }
.ka-daria__aktionen .btn { height: 34px; padding: 0 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; }
.ka-daria__form {
  align-items: center; gap: 9px; height: 42px; padding: 0 5px 0 12px; border: 1px solid var(--ka-line); border-top: 1px solid var(--ka-line); border-radius: 10px;
  background: var(--ka-daria-verlauf);
}
.ka-daria__form:focus-within { border-color: var(--ka-nav-focus); }
.ka-daria__eingabe { flex-grow: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 12.5px; color: var(--ka-ink); outline: none; }
.ka-daria__eingabe::placeholder { color: var(--ka-ink-muted); }
.ka-daria__mikrofon {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ka-radius-pill);
  background: var(--ka-primary); color: #FFFFFF; cursor: pointer;
}
.ka-daria__mikrofon[hidden] { display: none; }
.ka-daria__mikrofon:focus-visible { outline: 2px solid var(--ka-nav-focus); outline-offset: 2px; }
.ka-daria__fuss .ka-daria__stufenhinweis { margin: 9px 0 0; padding: 0; }
.ka-daria__fuss .ka-daria__status { padding: 0 0 6px; }
@media (max-width: 767.98px) {
  .ka-daria__fenster { height: min(880px, calc(100vh - 68px - 120px)); }
  .ka-daria__blase--nutzer, .ka-daria__blase--daria { max-width: 100%; }
}

/* Vorbelegung im Formular aus einem Auftrag (F5-Daria-Formular): Avatar statt Symbol, leiser Knopf „Vorbelegung verwerfen“ */
.ka-vorbelegung__avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--ka-radius-pill); border: 1px solid var(--ka-line-strong); background: var(--ka-primary-t); }
.ka-btn-leise { border: 1px solid transparent; background: var(--ka-line-soft); color: var(--ka-ink-muted); font-weight: 600; }
.ka-btn-leise:hover { background: var(--ka-neutral-t); color: var(--ka-ink); }

/* Auftragsseite (Entwurf Mobil-Auftrag): Auftrag, So verstanden, Vorgeschlagene Schritte, Grenze, Knöpfe; auf breiten Bildschirmen dieselbe Seite schmal */
.ka-auftrag { max-width: 44rem; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.ka-auftrag > * { min-width: 0; }
/* Telefonbreite: lange Wörter (Aktenzeichen, Titel) und Knopftexte brechen um, statt die Seite breiter als den Bildschirm zu machen */
.ka-auftrag { overflow-wrap: anywhere; }
.ka-auftrag .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ka-auftrag__knoepfe > form { max-width: 100%; }
.ka-auftrag__karte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; overflow: hidden; }
.ka-auftrag__kopf { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--ka-primary-t); color: var(--ka-primary); font-size: 12px; font-weight: 700; }
.ka-auftrag__text { margin: 0; padding: 13px 14px; font-family: var(--ka-font-serif); font-size: 15.5px; line-height: 1.55; }
.ka-auftrag__abschnitt { padding: 13px 14px; }
.ka-auftrag__label { margin: 2px 2px 0; font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-ink-muted); }
.ka-auftrag__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ka-auftrag__chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; background: var(--ka-line-soft); border-radius: var(--ka-radius-pill); padding: 4px 10px; }
.ka-auftrag__chip--akte { font-weight: 600; color: var(--ka-primary); background: var(--ka-primary-t); }
.ka-auftrag__erklaerung { margin: 10px 0 0; font-size: 12.5px; color: var(--ka-ink-muted); line-height: 1.5; }
.ka-auftrag__schritte { list-style: none; margin: 0; padding: 0; }
.ka-auftrag__schritt { display: flex; flex-wrap: wrap; gap: 11px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--ka-neutral-t); }
.ka-auftrag__schritt:last-child { border-bottom: 0; }
.ka-auftrag__schritt input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ka-primary); }
.ka-auftrag__schritt label { flex: 1 1 0; min-width: 0; margin: 0; cursor: pointer; }
.ka-auftrag__schritt-text { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.ka-auftrag__schritt-zusatz { display: block; margin-top: 3px; font-size: 12px; color: var(--ka-ink-muted); line-height: 1.45; }
.ka-auftrag__schritt-aktion { flex-basis: 100%; min-width: 0; max-width: calc(100% - 31px); margin: 0 0 0 31px; display: flex; flex-wrap: wrap; gap: 8px; }
.ka-auftrag__grenze { background: var(--ka-vorfrist-t); border: 1px solid var(--ka-vorfrist-b); border-radius: 12px; padding: 12px 14px; color: var(--ka-vorfrist-text); }
.ka-auftrag__grenze p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.ka-auftrag__stufen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ka-vorfrist-b); font-size: 11px; }
.ka-auftrag__stufe { font-weight: 700; border-radius: var(--ka-radius-pill); padding: 2px 8px; }
.ka-auftrag__stufe--frei { color: var(--ka-ok-text); background: var(--ka-ok-t); }
.ka-auftrag__stufe--bestaetigung { color: var(--ka-vorfrist-text); background: var(--ka-surface); border: 1px solid var(--ka-vorfrist-b); }
.ka-auftrag__stufe--nie { font-weight: 400; color: var(--ka-ink-muted); background: var(--ka-line-soft); }
.ka-auftrag__knoepfe { display: flex; gap: 9px; flex-wrap: wrap; }
.ka-auftrag__knoepfe .btn-primary { flex-grow: 1; min-height: 50px; font-weight: 700; font-size: 15px; }
.ka-auftrag__knoepfe .btn-outline-secondary { min-height: 50px; }
.ka-auftrag__knoepfe .btn { display: inline-flex; align-items: center; justify-content: center; }   /* auch der Link-Knopf („Schritt für Schritt prüfen“) mittig */
.ka-auftrag__fuss { margin: 0 2px; font-size: 11.5px; color: var(--ka-ink-muted); line-height: 1.5; }

/* ===========================================================================
   Teil C-FR: Fristen & Termine (Paket UX-OPTIK-FRISTEN, Register 381, Entwurf Fristen.dc.html)
   Praefix .ka-fr-. Nur Tokens aus tokens.css; Signalfarben (Frist, Vorfrist, ok) sind nie uebersteuerbar, Handlung ueber --ka-primary*.
   Die Werkzeug-Karten (.ka-fr-karte) sind der Inhalt der Werkzeuge rechts (.ka-werkzeug, Teil C24, A43); Rahmen, Titel und Schliessen kommen von dort.
   =========================================================================== */
.ka-fr { display: flex; flex-direction: column; gap: 0; margin: -1rem -15px 0; }
.ka-fr-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; min-height: 62px; padding: 12px 26px;
  background: var(--ka-surface); border-bottom: 1px solid var(--ka-line);
}
.ka-fr-kopf__titel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; color: var(--ka-ink); }
.ka-fr-kopf__luecke { flex-grow: 1; }
.ka-fr-kopf__beschriftung { margin: 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); }
.ka-fr-kopf__haupt { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; font-size: var(--ka-fs-sm); font-weight: 600; }
.ka-fr-ansicht { display: flex; padding: 3px; background: var(--ka-ground); border: 1px solid var(--ka-neutral-b); border-radius: 8px; }
.ka-fr-ansicht__knopf {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: var(--ka-radius);
  font-size: var(--ka-fs-sm); font-weight: 500; color: var(--ka-ink-muted); text-decoration: none;
}
.ka-fr-ansicht__knopf:hover { color: var(--ka-ink); text-decoration: none; }
.ka-fr-ansicht__knopf--aktiv { background: var(--ka-surface); box-shadow: 0 1px 2px rgba(20, 25, 31, .08); color: var(--ka-ink); font-weight: 600; }
.ka-fr-auswahl {
  height: 36px; padding: 0 9px; border: 1px solid var(--ka-control-line); border-radius: var(--ka-radius);
  background: var(--ka-surface); font: 500 var(--ka-fs-sm) var(--ka-font-sans); color: var(--ka-ink);
}
.ka-fr-auswahl:focus-visible, .ka-fr-feld:focus-visible { outline: 2px solid var(--ka-nav-focus); outline-offset: 1px; }

/* Knoepfe der Zeilen und der Werkzeug-Karten (Entwurf: 33 px in der Zeile, 36 px im Kopf) */
.ka-fr-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 33px; padding: 0 10px;
  border: 1px solid var(--ka-control-line); border-radius: var(--ka-radius); background: var(--ka-surface);
  font: 600 12px var(--ka-font-sans); color: var(--ka-ink-3); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.ka-fr-knopf:hover { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-fr-knopf:focus-visible { outline: 2px solid var(--ka-nav-focus); outline-offset: 2px; }
.ka-fr-knopf:disabled, .ka-fr-knopf[aria-disabled="true"] { color: var(--ka-ink-muted); background: var(--ka-surface-muted); cursor: not-allowed; }
.ka-fr-kopf .ka-fr-knopf { min-height: 36px; font-size: var(--ka-fs-sm); }
.ka-fr-knopf--symbol { width: 36px; padding: 0; }
.ka-fr-knopf--haupt { background: var(--ka-primary); border-color: var(--ka-primary); color: #FFFFFF; }
.ka-fr-knopf--haupt:hover { background: var(--ka-primary-h); border-color: var(--ka-primary-h); color: #FFFFFF; }
.ka-fr-knopf--pruefen { background: var(--ka-frist); border-color: var(--ka-frist); color: #FFFFFF; }
.ka-fr-knopf--pruefen:hover { background: var(--ka-frist-text); border-color: var(--ka-frist-text); color: #FFFFFF; }
.ka-fr-knopf--breit { width: 100%; min-height: 42px; font-size: 13px; }

/* Hinweisbalken Vier-Augen-Kontrolle */
.ka-fr-hinweis {
  display: flex; align-items: center; gap: 11px; padding: 11px 26px;
  background: var(--ka-frist-t); border-bottom: 1px solid var(--ka-frist-b);
}
.ka-fr-hinweis__symbol { color: var(--ka-frist-text); flex-shrink: 0; }
.ka-fr-hinweis__text { flex-grow: 1; margin: 0; font-size: 13px; color: var(--ka-frist-text); }
.ka-fr-hinweis__text strong { font-size: var(--ka-fs-md); font-weight: 700; }

/* Filterzeile (Zeitraum, Herkunft) */
.ka-fr-filterzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 26px;
  background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line);
}
.ka-fr-filterzeile .form-control { width: auto; height: 36px; margin: 0 !important; font-size: var(--ka-fs-sm); }

/* Liste: Tagesgruppen und Zeilen */
.ka-fr-liste { background: var(--ka-surface); border-bottom: 1px solid var(--ka-line); }
.ka-fr-liste--aufgaben { margin-top: 18px; border-top: 1px solid var(--ka-line); }
.ka-fr-liste > .ka-leer { margin: 18px 24px; }
.ka-fr-gruppe {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 24px;
  background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line-soft); border-top: 1px solid var(--ka-line-soft);
  font-family: var(--ka-font-sans); font-size: var(--ka-fs-sm); line-height: 1.4;
}
.ka-fr-gruppe:first-child { border-top: 0; }
.ka-fr-gruppe__titel { font-weight: 700; color: var(--ka-ink-2); }
.ka-fr-gruppe__zahl { font-size: 12px; font-weight: 400; color: var(--ka-ink-muted); }
.ka-fr-gruppe--ueberfaellig .ka-fr-gruppe__titel, .ka-fr-gruppe--heute .ka-fr-gruppe__titel { color: var(--ka-frist-text); }
.ka-fr-gruppe--morgen .ka-fr-gruppe__titel { color: var(--ka-vorfrist-text); }
.ka-fr-zeilen { margin: 0; padding: 0; list-style: none; }
.ka-fr-zeile { display: flex; align-items: center; gap: 14px; padding: 13px 24px; border-bottom: 1px solid var(--ka-line-soft); }
.ka-fr-zeile:last-child { border-bottom: 0; }
.ka-fr-zeile--ungeprueft { background: var(--ka-frist-zeile); }
.ka-fr-zeile__datum { width: 64px; flex-shrink: 0; font-family: var(--ka-font-mono); font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-fr-datum--frist { color: var(--ka-frist-text); font-weight: 500; }
.ka-fr-datum--vorfrist { color: var(--ka-vorfrist-text); font-weight: 500; }
.ka-fr-zeile__inhalt { flex-grow: 1; min-width: 0; }
.ka-fr-zeile__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ka-fr-zeile__titel { font-size: var(--ka-fs-md); font-weight: 600; color: var(--ka-ink); }
a.ka-fr-zeile__titel:hover { color: var(--ka-primary); }
.ka-fr-zeile__meta { margin-top: 3px; font-size: 12px; color: var(--ka-ink-2); }
.ka-fr-zeile__meta .ka-az { text-decoration: none; }
.ka-fr-zeile__inhalt > .small { margin-top: 3px; }
.ka-fr-zeile__personen { width: 92px; flex-shrink: 0; display: flex; gap: 5px; }
.ka-fr-zeile__aktionen { display: flex; justify-content: flex-end; gap: 7px; flex-shrink: 0; min-width: 160px; }
.ka-fr-zeile__form { display: inline; margin: 0; }
/* Gruppenfrist (Register 395): eine Zeile für gleichartige Fristen aus einem Massenverfahren; „Aufteilen“ zeigt darunter die Einzelfristen
   eingerückt auf dem Grundton (nur Darstellung, jede Frist bleibt einzeln zu prüfen und zu erledigen). */
.ka-fr-einzeln { border-bottom: 1px solid var(--ka-line-soft); background: var(--ka-ground); }
.ka-fr-einzeln[hidden] { display: none; }
.ka-fr-einzeln > .ka-fr-zeilen { margin-left: 24px; border-left: 3px solid var(--ka-primary-b); }
.ka-fr-einzeln .ka-fr-zeile { padding-left: 21px; }

/* Abzeichen HAUPTFRIST / VORFRIST / TERMIN / NOTFRIST */
.ka-fr-abz {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; border: 1px solid;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.5;
}
.ka-fr-abz--frist { color: var(--ka-frist-text); background: var(--ka-frist-t); border-color: var(--ka-frist-b); }
.ka-fr-zeile--ungeprueft .ka-fr-abz--frist { background: var(--ka-surface); }
.ka-fr-abz--notfrist { color: #FFFFFF; background: var(--ka-frist); border-color: var(--ka-frist); }
.ka-fr-abz--vorfrist { color: var(--ka-vorfrist-text); background: var(--ka-vorfrist-t); border-color: var(--ka-vorfrist-b); }
.ka-fr-abz--info { color: var(--ka-primary); background: var(--ka-primary-t); border-color: var(--ka-primary-b); }

/* Kuerzel: notiert (blau), geprueft (gruen), Zweitpruefung fehlt (gestrichelt rot) */
.ka-fr-kuerzel {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--ka-radius-pill);
  font-size: 9.5px; font-weight: 700; background: var(--ka-primary-t); color: var(--ka-primary);
}
.ka-fr-kuerzel--geprueft { background: var(--ka-ok-t); color: var(--ka-ok-text); }
.ka-fr-kuerzel--fehlt { background: transparent; border: 1.5px dashed var(--ka-frist-b); color: var(--ka-frist); font-size: 12px; }

/* Status in Worten */
.ka-fr-status {
  width: 96px; flex-shrink: 0; padding: 3px 9px; border-radius: var(--ka-radius-pill); text-align: center;
  font-size: 11.5px; font-weight: 600; color: var(--ka-ink-2); background: var(--ka-neutral-t);
}
.ka-fr-status--geprueft { color: var(--ka-ok-text); background: var(--ka-ok-t); }
.ka-fr-status--ungeprueft { color: #FFFFFF; background: var(--ka-frist); font-weight: 700; }
.ka-fr-status--ueberfaellig { color: var(--ka-vorfrist-text); background: var(--ka-vorfrist-t); }
.ka-fr-status--leer { background: transparent; }

/* Werkzeug-Karten */
.ka-werkzeug .ka-fr-werkzeug__titel { font-family: var(--ka-font-serif); font-size: var(--ka-fs-lg); font-weight: 700; }
.ka-fr-karte { background: var(--ka-surface); }
.ka-fr-karte__unter { margin: 3px 0 0; font-size: 12px; color: var(--ka-ink-muted); }
.ka-fr-karte__rumpf { display: flex; flex-direction: column; gap: 11px; padding: 12px 0 0; }
.ka-fr-karte__rumpf .ka-label { display: block; margin-bottom: 5px; }
.ka-fr-karte__paar { display: flex; gap: 10px; }
.ka-fr-karte__breit { flex-grow: 1; min-width: 0; }
.ka-fr-karte__schmal { width: 150px; flex-shrink: 0; }
.ka-fr-feld {
  width: 100%; height: var(--ka-control-h); padding: 0 9px; border: 1px solid var(--ka-control-line); border-radius: var(--ka-radius);
  background: var(--ka-surface); font: 400 13px var(--ka-font-sans); color: var(--ka-ink);
}
.ka-fr-karte__regel { display: flex; gap: 9px; margin: 0; font-size: var(--ka-fs-sm); line-height: 1.4; color: var(--ka-ink-2); }
.ka-fr-karte__regel .fas { margin-top: 3px; color: var(--ka-primary); }
.ka-fr-karte__fuss { margin: 0; padding: 12px 0 0; font-size: 12px; }
.ka-fr-ergebnis { padding: 12px 13px; border: 1px solid var(--ka-primary-b); border-radius: 8px; background: var(--ka-ergebnis-t); }
.ka-fr-ergebnis[hidden], .ka-fr-ergebnis__fehler[hidden] { display: none; }
.ka-fr-ergebnis__zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ka-fr-ergebnis__etikett { font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-primary); }
.ka-fr-ergebnis__datum { font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; color: var(--ka-ink); }
.ka-fr-ergebnis__tag { font-size: 12px; color: var(--ka-ink-2); }
.ka-fr-ergebnis__vorfrist { margin-top: 9px; font-size: var(--ka-fs-sm); color: var(--ka-ink-3); }
.ka-fr-ergebnis__klein { display: block; font-size: var(--ka-fs-xs); color: var(--ka-ink-muted); }
.ka-fr-ergebnis__text { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ka-ink-2); }
.ka-fr-ergebnis__text:empty { display: none; }
.ka-fr-ergebnis__fehler { margin: 0; font-size: var(--ka-fs-sm); color: var(--ka-frist-text); }
.ka-fr-legende { margin: 0; padding: 0; list-style: none; }
.ka-fr-legende li { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-3); }
.ka-fr-legende__farbe { width: 11px; height: 11px; flex-shrink: 0; border-radius: 3px; }
.ka-fr-legende__farbe--frist { background: var(--ka-frist); }
.ka-fr-legende__farbe--vorfrist { background: var(--ka-vorfrist); }
.ka-fr-legende__farbe--ok { background: var(--ka-ok); }
.ka-fr-legende__farbe--info { background: var(--ka-primary); }

/* Schmal: Zeile bricht um, Ziele 44 px (Designsystem 11) */
@media (max-width: 991.98px) {
  .ka-fr { margin: -1rem -15px 0; }
  .ka-fr-kopf, .ka-fr-hinweis, .ka-fr-filterzeile { padding-left: 16px; padding-right: 16px; }
  .ka-fr-hinweis { flex-wrap: wrap; }
  .ka-fr-zeile { flex-wrap: wrap; padding: 12px 16px; gap: 8px 12px; }
  .ka-fr-zeile__inhalt { flex-basis: calc(100% - 80px); }
  .ka-fr-zeile__personen { width: auto; }
  .ka-fr-zeile__aktionen { min-width: 0; margin-left: auto; }
  .ka-fr-knopf, .ka-fr-kopf .ka-fr-knopf, .ka-fr-auswahl { min-height: 44px; }
  .ka-fr-gruppe { padding: 10px 16px; }
  .ka-fr-einzeln > .ka-fr-zeilen { margin-left: 8px; }
  .ka-fr-einzeln .ka-fr-zeile { padding-left: 13px; }
}

/* ===========================================================================
   Teil C-AA: Akte anlegen, Kurzanlage (Paket UX-OPTIK-FRISTEN, Register 381, Entwurf Akte-Anlegen.dc.html)
   Praefix .ka-aa-; Knoepfe wie Teil C-FR (.ka-fr-knopf). Die Seitenspalte (.ka-aa-seite) ist Inhalt dieser Seite, keine allgemeine rechte Spalte.
   =========================================================================== */
.ka-aa { margin: -1rem -15px 0; }
.ka-aa-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 62px; padding: 12px 26px;
  background: var(--ka-surface); border-bottom: 1px solid var(--ka-line);
}
.ka-aa-kopf__titel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; color: var(--ka-ink); }
.ka-aa-kopf__luecke { flex-grow: 1; }
.ka-aa-kopf__az { font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); }
.ka-aa-kopf__az .ka-az { color: var(--ka-primary); }
.ka-aa-schritte { display: flex; gap: 4px; margin: 0; padding: 3px; list-style: none; background: var(--ka-ground); border: 1px solid var(--ka-neutral-b); border-radius: 8px; }
.ka-aa-schritte__eintrag { padding: 5px 11px; border-radius: var(--ka-radius); font-size: var(--ka-fs-sm); font-weight: 500; color: var(--ka-ink-muted); }
.ka-aa-schritte__eintrag--fertig { color: var(--ka-ok-text); }
.ka-aa-schritte__eintrag--aktiv { background: var(--ka-surface); box-shadow: 0 1px 2px rgba(20, 25, 31, .08); color: var(--ka-ink); font-weight: 600; }
.ka-aa-raster { display: grid; grid-template-columns: minmax(0, 1fr) 386px; align-items: stretch; }
.ka-aa-haupt { padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ka-aa-haupt form { display: flex; flex-direction: column; gap: 16px; }
.ka-aa-karte { padding: 18px 18px 6px; border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); background: var(--ka-surface); }
.ka-aa-karte__titel { margin: 0 0 4px; font-family: var(--ka-font-serif); font-size: 17px; font-weight: 700; color: var(--ka-ink); }
.ka-aa-karte__schritt { margin: 0 0 12px; font-size: 12px; color: var(--ka-ink-muted); }
.ka-aa-karte__unter { margin: 14px 0 8px; font-size: var(--ka-fs-md); font-weight: 700; }
.ka-aa-karte__text { font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-aa-karte .form-group > label, .ka-aa-karte > .ka-label {
  display: block; margin-bottom: 5px; font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted);
}
.ka-aa-karte .form-control { height: 42px; border-color: var(--ka-control-line); font-size: var(--ka-fs-md); }
.ka-aa-karte textarea.form-control { height: auto; }
.ka-aa-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ka-aa-felder__breit { grid-column: 1 / -1; }
.ka-aa-mit { margin: 6px 0 12px; padding: 0; list-style: none; }
.ka-aa-mit__eintrag { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; }
.ka-aa-mit__eintrag > input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ka-primary); }
.ka-aa-mit__inhalt { flex-grow: 1; min-width: 0; }
.ka-aa-mit__inhalt > label { margin: 0; font-size: var(--ka-fs-md); color: var(--ka-ink); }
.ka-aa-mit__inhalt .form-group { margin: 8px 0 0; }
.ka-aa-mit__inhalt .form-group > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ka-aa-zusammen { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px; margin: 0 0 12px; font-size: var(--ka-fs-md); }
.ka-aa-zusammen dt { font-weight: 600; color: var(--ka-ink-muted); }
.ka-aa-zusammen dd { margin: 0; }
.ka-aa-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ka-aa-fuss__haupt { min-height: var(--ka-control-h-lg); padding: 0 22px; font-weight: 600; }
.ka-aa-seite { background: var(--ka-surface); border-left: 1px solid var(--ka-line); }
.ka-aa-seite__abschnitt { padding: 18px 20px; border-bottom: 1px solid var(--ka-line-soft); }
.ka-aa-seite__titel { margin: 0; font-family: var(--ka-font-serif); font-size: 17px; font-weight: 700; color: var(--ka-ink); }
.ka-aa-seite__text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ka-ink-2); }
.ka-aa-seite__klein { margin: 8px 0 0; font-size: 12px; color: var(--ka-ink-muted); }
.ka-aa-konflikt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ka-aa-treffer {
  padding: 2px 9px; border-radius: var(--ka-radius-pill); border: 1px solid var(--ka-vorfrist-b); background: var(--ka-vorfrist-t);
  font-size: 11.5px; font-weight: 700; color: var(--ka-vorfrist-text);
}
.ka-aa-konflikt__liste { margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--ka-line-soft); }
.ka-aa-konflikt__zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: var(--ka-fs-md); }
.ka-aa-konflikt__name { flex-grow: 1; font-weight: 500; }
.ka-aa-konflikt__ok { color: var(--ka-ok); }
.ka-aa-konflikt__warn { color: var(--ka-vorfrist); }
.ka-aa-konflikt__ergebnis { font-size: 12px; color: var(--ka-ink-muted); }
.ka-aa-konflikt__ergebnis--treffer { font-weight: 700; color: var(--ka-vorfrist-text); }
.ka-aa-konflikt__karte { margin-top: 12px; padding: 13px 15px; border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); font-size: 12.5px; }
.ka-aa-konflikt__karte-titel { margin: 0 0 6px; color: var(--ka-ink); }
.ka-aa-konflikt__faelle { margin: 0; padding-left: 16px; color: var(--ka-ink-2); }
.ka-aa-konflikt__stand { margin-top: 12px; font-size: 12px; color: var(--ka-ink-2); }
.ka-aa-konflikt__los { margin-top: 12px; width: 100%; min-height: 38px; }
.ka-aa-ordner { margin: 8px 0 0; padding: 0; list-style: none; }
.ka-aa-ordner li { padding: 3px 0; font-size: 12.5px; color: var(--ka-ink-3); }
@media (max-width: 1199.98px) {
  .ka-aa-raster { grid-template-columns: minmax(0, 1fr); }
  .ka-aa-seite { border-left: 0; border-top: 1px solid var(--ka-line); }
}
@media (max-width: 767.98px) {
  .ka-aa-kopf, .ka-aa-haupt { padding-left: 16px; padding-right: 16px; }
  .ka-aa-felder, .ka-aa-zusammen { grid-template-columns: minmax(0, 1fr); }
  .ka-aa-schritte { flex-wrap: wrap; }
}
.ka-aa-seite h2.ka-label { margin: 0; font-family: var(--ka-font-sans); }
/* Register 396 (UX-AKTE-ANLEGEN): Akte anlegen auf einer Seite - ein Formular ueber Haupt- und Seitenspalte, feste Beteiligtenfelder, Entscheidung
   der Konfliktpruefung, Knoepfe unten in der Seitenspalte (Entwurf Akte-Anlegen.dc.html). */
.ka-aa-vorab { padding: 22px 26px 0; }
form.ka-aa-raster { margin: 0; }
.ka-aa-felder--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ka-aa-feld { min-width: 0; margin-bottom: 13px; }
.ka-aa-feld__label {
  display: block; margin-bottom: 6px; font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted);
}
.ka-aa-feld__frei { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ka-aa-feld__liste:empty { display: none; }
.ka-aa-feld__liste { margin-top: 6px; }
.ka-aa-feld__neu { display: flex; gap: 12px; margin-top: 4px; }
.ka-aa-feld #client-search h6 { display: none; }
.ka-aa-link { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--ka-primary); cursor: pointer; }
.ka-aa-link:hover, .ka-aa-link:focus { color: var(--ka-primary-h); text-decoration: underline; }
.ka-aa-chip {
  display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 10px; border: 1px solid var(--ka-primary); border-radius: var(--ka-radius);
  background: var(--ka-primary-t);
}
.ka-aa-chip__name { flex-grow: 1; min-width: 0; font-size: var(--ka-fs-md); font-weight: 600; color: var(--ka-ink); }
.ka-aa-chip .close { min-width: 24px; min-height: 24px; }
.ka-aa-hilfe { margin: -10px 0 12px; }
.ka-aa-seite { display: flex; flex-direction: column; }
.ka-aa-seite__fuss {
  display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--ka-line-soft); background: var(--ka-surface-muted);
}
.ka-aa-seite__fuss .btn { width: 100%; min-height: 44px; font-weight: 600; }
.ka-aa-konflikt__leer { padding: 6px 0; font-size: 12.5px; color: var(--ka-ink-muted); }
.ka-aa-entscheidung { background: var(--ka-surface-muted); }
.ka-aa-wahl {
  display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg);
  background: var(--ka-surface); cursor: pointer;
}
.ka-aa-wahl:has(input:checked) { border-color: var(--ka-primary); background: var(--ka-primary-t); }
.ka-aa-wahl--ablehnen:has(input:checked) { border-color: var(--ka-frist); background: var(--ka-frist-t); }
.ka-aa-wahl > input { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; accent-color: var(--ka-primary); }
.ka-aa-wahl:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.ka-aa-wahl__text { flex-grow: 1; font-size: var(--ka-fs-md); }
.ka-aa-wahl__klein { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ka-ink-2); }
.ka-aa-begruendung { margin: 11px 0 0; }
.ka-aa-begruendung > label {
  display: block; margin-bottom: 6px; font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted);
}
/* Register 417: Angebot „Partneranwalt und Sekretariat aus der letzten Akte dieses Mandanten übernehmen“ (Karte Beteiligte) */
.ka-aa-angebot { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); background: var(--ka-surface-muted); }
.ka-aa-angebot[hidden] { display: none; }
.ka-aa-angebot--erledigt { border-color: var(--ka-primary); background: var(--ka-primary-t); }
.ka-aa-angebot__titel { margin: 0 0 4px; font-size: var(--ka-fs-md); font-weight: 600; color: var(--ka-ink); }
.ka-aa-angebot__quelle { margin: 0 0 8px; font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-aa-angebot__liste { margin: 0 0 10px; padding: 0; list-style: none; }
.ka-aa-angebot__eintrag { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: var(--ka-fs-md); }
.ka-aa-angebot__eintrag > input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--ka-primary); }
.ka-aa-angebot__rolle { display: block; font-size: 12px; color: var(--ka-ink-muted); }
@media (max-width: 1399.98px) {
  .ka-aa-felder--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .ka-aa-vorab { padding: 16px 16px 0; }
  .ka-aa-felder--vier { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
   Teil C-POST - Arbeitsplatz Posteingang (Paket UX-OPTIK-POST, Register 379, templates/mailroom/mail_list.html; Entwurf „02 · Posteingang“)
   Kopf mit Reitern, Filter und „Post erfassen“; darunter drei Spalten: Eingänge (384 px), Vorschau (Rest), „Zuordnen“ (372 px).
   Ab 992 px füllt der Arbeitsplatz die Fensterhöhe, jede Spalte rollt für sich; darunter stehen die Spalten untereinander.
   ========================================================================== */
.ka-pe { display: flex; flex-direction: column; background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); overflow: hidden; }
.ka-pe__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-height: 62px; padding: 10px 24px; border-bottom: 1px solid var(--ka-line); }
.ka-pe__titel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; color: var(--ka-ink); }
.ka-pe__luecke { flex-grow: 1; }
.ka-pe__reiter { display: flex; flex-wrap: wrap; background: var(--ka-ground); border: 1px solid var(--ka-neutral-b); border-radius: 8px; padding: 3px; }
.ka-pe__reiter-eintrag {
  border-radius: var(--ka-radius); padding: 6px 12px; font-size: var(--ka-fs-sm); font-weight: 500; color: var(--ka-ink-muted); text-decoration: none; white-space: nowrap;
}
.ka-pe__reiter-eintrag:hover { color: var(--ka-ink); text-decoration: none; }
.ka-pe__reiter-eintrag[aria-current="page"] { background: var(--ka-surface); color: var(--ka-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 25, 31, .08); }
.ka-pe__erfassen, .ka-pe__filterknopf { height: 36px; display: inline-flex; align-items: center; gap: 7px; font-size: var(--ka-fs-sm); font-weight: 600; }
.ka-pe__filter { position: relative; }
.ka-pe__filter > summary { list-style: none; cursor: pointer; }
.ka-pe__filter > summary::-webkit-details-marker { display: none; }
.ka-pe__filterknopf--aktiv { border-color: var(--ka-primary); color: var(--ka-primary); }
.ka-pe__punkt { width: 7px; height: 7px; border-radius: var(--ka-radius-pill); background: var(--ka-primary); }
.ka-pe__filterfeld {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; max-width: calc(100vw - 32px); padding: 14px 16px; background: var(--ka-surface);
  border: 1px solid var(--ka-line); border-radius: 8px; box-shadow: var(--ka-shadow-pop);
}
.ka-pe__filteraktionen { display: flex; align-items: center; gap: 12px; }
.ka-pe__filterlink { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ka-pe-zeile-linie); font-size: var(--ka-fs-sm); }
.ka-pe__feldname { display: block; margin: 0 0 6px; font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted); }
.ka-pe__suchhinweis { margin: 0; padding: 8px 24px; font-size: var(--ka-fs-sm); color: var(--ka-ink-2); background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-pe-zeile-linie); }

.ka-pe__spalten { display: flex; flex-direction: column; min-height: 0; }
.ka-pe__liste { display: flex; flex-direction: column; background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line); }
.ka-pe__vorschau { display: flex; flex-direction: column; min-width: 0; background: var(--ka-pe-lesegrund); }
.ka-pe__zuordnen { display: flex; flex-direction: column; background: var(--ka-surface); }
@media (min-width: 992px) {
  .ka-pe { height: calc(100vh - 150px); min-height: 620px; }
  .ka-pe__spalten { flex-direction: row; flex-grow: 1; }
  /* Entwurf: 384 px und 372 px; neben Seitenleiste und Bereichsspalte schrumpfen beide bis 280 px, damit die Vorschau lesbar bleibt */
  .ka-pe__liste { flex: 0 0 clamp(280px, 30%, 384px); border-bottom: 0; border-right: 1px solid var(--ka-line); overflow-y: auto; }
  .ka-pe__vorschau { flex-grow: 1; }
  .ka-pe__zuordnen { flex: 0 0 clamp(280px, 30%, 372px); border-left: 1px solid var(--ka-line); overflow-y: auto; }
}

/* Eingangsliste */
.ka-pe__auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: var(--ka-primary-t); border-bottom: 1px solid var(--ka-pe-zeile-linie); }
.ka-pe__auswahl input[type="checkbox"], .ka-pe-zeile input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--ka-primary); }
.ka-pe__auswahl-text { margin: 0; white-space: nowrap; font-size: var(--ka-fs-sm); font-weight: 600; color: var(--ka-primary); }
.ka-pe__klein {
  display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 5px; border: 1px solid var(--ka-pe-auswahl-linie); background: var(--ka-surface);
  color: var(--ka-primary); font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.ka-pe__klein:hover { text-decoration: none; background: var(--ka-primary-t); }
.ka-pe__klein:disabled { opacity: .55; cursor: not-allowed; }
.ka-pe__klein--hell { flex-shrink: 0; height: 30px; padding: 0 10px; border-color: var(--ka-pe-knopf-linie); color: var(--ka-ink); font-size: 12px; }
.ka-pe-zeile { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--ka-pe-zeile-linie); border-left: 3px solid transparent; }
.ka-pe-zeile input[type="checkbox"] { margin-top: 3px; }
.ka-pe-zeile--aktiv { background: var(--ka-surface); border-left-color: var(--ka-primary); }
.ka-pe-zeile__text { display: block; flex-grow: 1; min-width: 0; color: var(--ka-ink); text-decoration: none; }
.ka-pe-zeile__text:hover { color: var(--ka-ink); text-decoration: none; }
.ka-pe-zeile__text:hover .ka-pe-zeile__betreff { text-decoration: underline; }
a.ka-pe-zeile--portal { color: var(--ka-ink); text-decoration: none; }
.ka-pe-zeile__oben { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.ka-pe .ka-quelle { text-transform: none; }
.ka-pe-zeile__zeit { font-size: 11px; color: var(--ka-ink-muted); }
.ka-pe-plakette { font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.ka-pe-plakette--frist { color: var(--ka-frist-text); background: var(--ka-frist-t); }
.ka-pe-zeile__betreff { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ka-pe-zeile__unter { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ka-ink-muted); overflow-wrap: anywhere; }
.ka-pe-zeile__zusatz { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ka-pe__fuss { padding: 12px 14px; font-size: 12px; color: var(--ka-ink-muted); text-align: center; }
.ka-pe__fuss .pagination { justify-content: center; margin: 8px 0 0; }
.ka-pe__liste > .ka-leer, .ka-pe__blattflaeche > .ka-leer, .ka-pe__zuordnen .ka-leer { margin: 24px 16px; }

/* Vorschau */
.ka-pe__werkzeug {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; flex-shrink: 0; padding: 6px 16px; background: var(--ka-pe-werkzeug);
  border-bottom: 1px solid var(--ka-pe-werkzeug-linie);
}
.ka-pe__dateiname { min-width: 0; flex: 0 1 auto; font-size: var(--ka-fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) { .ka-pe__werkzeug { flex-wrap: nowrap; } }
.ka-pe__anhaenge { display: flex; gap: 4px; }
.ka-pe__anhaenge a { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--ka-pe-knopf-linie); background: var(--ka-surface); font-size: 11.5px; text-align: center; line-height: 22px; color: var(--ka-ink-2); text-decoration: none; }
.ka-pe__anhaenge a[aria-current="true"] { background: var(--ka-primary); border-color: var(--ka-primary); color: #FFFFFF; }
.ka-pe__zoomknopf {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ka-pe-knopf-linie); border-radius: 5px;
  background: var(--ka-surface); color: var(--ka-pe-blatt-schrift); font-size: 13px; cursor: pointer; text-decoration: none;
}
.ka-pe__zoomknopf:hover { color: var(--ka-ink); text-decoration: none; background: var(--ka-surface-muted); }
.ka-pe__zoomwert { width: 42px; flex-shrink: 0; white-space: nowrap; font-size: 12px; color: var(--ka-ink-2); text-align: center; }
.ka-pe__blattflaeche { display: flex; flex-grow: 1; justify-content: center; align-items: flex-start; min-height: 0; padding: 22px; overflow: auto; }
.ka-pe__rahmen {
  display: block; width: 100%; height: 100%; min-height: 520px; border: 1px solid var(--ka-pe-blatt-linie); background: var(--ka-surface);
  box-shadow: 0 2px 10px rgba(20, 25, 31, .08);
}
.ka-pe__blatt {
  width: 452px; max-width: 100%; padding: 40px 44px; background: var(--ka-surface); border: 1px solid var(--ka-pe-blatt-linie);
  box-shadow: 0 2px 10px rgba(20, 25, 31, .08); font-family: var(--ka-font-serif); color: var(--ka-pe-blatt-schrift);
}
.ka-pe__blatt-absender { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ka-pe__blatt-datum { margin: 2px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--ka-neutral-b); font-size: 11.5px; color: var(--ka-ink-2); }
.ka-pe__blatt-titel { margin: 18px 0 10px; font-family: var(--ka-font-serif); font-size: 15px; font-weight: 700; }
.ka-pe__blatt-text { font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
  .ka-pe__blatt { padding: 24px 20px; }
  .ka-pe__rahmen { height: 70vh; min-height: 420px; }
}

/* Zuordnen */
.ka-pe__formular { display: flex; flex-direction: column; flex-grow: 1; margin: 0; }
.ka-pe__panelkopf { padding: 14px 18px 12px; border-bottom: 1px solid var(--ka-pe-zeile-linie); }
.ka-pe__paneltitel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-lg); font-weight: 700; }
.ka-pe__panelhinweis { margin: 3px 0 0; font-size: 12px; color: var(--ka-ink-muted); }
.ka-pe__panelinhalt { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px; }
.ka-pe__gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.ka-pe__gruppe .form-control { height: 38px; border-color: var(--ka-pe-feld-linie); border-radius: var(--ka-radius); font-size: 13px; }
.ka-pe__leerhinweis { margin: 0 0 8px; font-size: 12px; color: var(--ka-ink-muted); }
/* Kategorie und Ablage nebeneinander (Register 394, Entwurf: zwei Auswahlfelder in einer Zeile); unter 400 px untereinander. */
.ka-pe__ablage { display: flex; flex-wrap: wrap; gap: 12px; }
.ka-pe__ablage[hidden] { display: none; }
.ka-pe__ablage > .ka-pe__gruppe { flex: 1 1 140px; }
.ka-pe__ablage-grund { flex-basis: 100%; margin: -6px 0 0; font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-pe-akte {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--ka-line); border-radius: 8px; font-weight: 400; cursor: pointer;
}
.ka-pe-akte:has(input:checked) { border: 1.5px solid var(--ka-primary); background: var(--ka-pe-gewaehlt); padding: 9.5px 11.5px; }
.ka-pe-akte input { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ka-primary); }
.ka-pe-akte__text { flex-grow: 1; min-width: 0; }
.ka-pe-akte__az { display: block; font-family: var(--ka-font-mono); font-size: 13px; color: var(--ka-primary); }
.ka-pe-akte:has(input:checked) .ka-pe-akte__az { font-weight: 500; }
.ka-pe-akte__titel { display: block; margin-top: 2px; font-size: var(--ka-fs-sm); font-weight: 600; color: var(--ka-ink); }
.ka-pe-akte__grund { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-pe-akte__grund--sicher { color: var(--ka-ok); font-weight: 600; }
.ka-pe__suchen {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border-radius: var(--ka-radius); border: 1px dashed var(--ka-pe-gestrichelt);
  background: var(--ka-surface); color: var(--ka-primary); font-size: var(--ka-fs-sm); font-weight: 600; text-decoration: none;
}
.ka-pe__suchen:hover { text-decoration: none; background: var(--ka-pe-gewaehlt); }
.ka-pe-frist { padding: 12px 13px; border: 1px solid var(--ka-frist-b); border-radius: 8px; background: var(--ka-pe-frist-t); }
.ka-pe-frist__titel { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font-size: var(--ka-fs-sm); font-weight: 700; color: var(--ka-frist-text); }
.ka-pe-frist__werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; font-size: 12px; color: var(--ka-pe-blatt-schrift); }
.ka-pe-frist__werte dt { font-size: 11px; font-weight: 400; color: var(--ka-ink-muted); }
.ka-pe-frist__werte dd { margin: 0; }
.ka-pe-frist__haupt { font-weight: 700; }
.ka-pe-frist__haken { display: flex; align-items: flex-start; gap: 9px; margin: 11px 0 0; font-size: var(--ka-fs-sm); font-weight: 400; line-height: 1.4; cursor: pointer; }
.ka-pe-frist__haken input { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--ka-frist); }
.ka-pe-frist__rechner { margin: 8px 0 0; font-size: 11.5px; }
.ka-pe__panelfuss { display: flex; gap: 9px; margin-top: auto; padding: 13px 18px; border-top: 1px solid var(--ka-pe-zeile-linie); background: var(--ka-surface-muted); }
.ka-pe__hauptknopf { flex-grow: 1; height: 42px; font-size: var(--ka-fs-md); font-weight: 600; }
.ka-pe__spaeter { height: 42px; display: inline-flex; align-items: center; padding: 0 14px; font-size: var(--ka-fs-md); font-weight: 600; border-color: var(--ka-pe-feld-linie); }
/* Sammelablage „Zuordnen mit Vorschau“ im selben Aufbau (Vorschau und Kasten „Zuordnen“, ohne Eingangsliste) */
.ka-pe-akte--knopf { width: 100%; text-align: left; background: var(--ka-surface); color: var(--ka-ink); font: inherit; }
.ka-pe-akte--knopf:hover, .ka-pe-akte--knopf:focus-visible { border-color: var(--ka-primary); background: var(--ka-pe-gewaehlt); }
.ka-pe-akte__aktion { align-self: center; font-size: 12px; font-weight: 600; color: var(--ka-primary); white-space: nowrap; }
.ka-pe__zeilenfeld { display: flex; gap: 8px; }
.ka-pe__zeilenfeld .form-control { flex-grow: 1; min-width: 0; }
.ka-pe__panelfuss form { margin: 0; }

/* ==========================================================================
   Teil C-AKTEN - Akten: Aktenliste und Akte nach dem Entwurf von Claude Design (Register 380, UX-OPTIK-AKTEN; Entwürfe Aktenliste, Akte-Uebersicht,
   F5-Akte, Akte-Dokumente). templates/cases/case_list.html, case_detail.html, case_documents.html, static/js/ka-aktenliste.js.
   Eigener Präfix je Baustein (ka-aktenliste, ka-aktentabelle, ka-filterpille, ka-sammelleiste, ka-fristpille, ka-akteseite …), parallele Pakete
   schreiben eigene Teile. Werte aus tokens.css; Entwurfstöne ohne Token: nächster Token (Kontrast mindestens 4,5:1).
   ========================================================================== */
/* --- Aktenliste: weiße Fläche über die volle Inhaltsbreite ---------------- */
.ka-aktenliste { margin: -1rem -15px 0; background: var(--ka-surface); min-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.ka-aktenliste__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-height: 62px; padding: 12px 24px; border-bottom: 1px solid var(--ka-line); }
.ka-aktenliste__titel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; }
.ka-aktenliste__zahl { font-size: 13px; color: var(--ka-ink-muted); }
.ka-aktenliste__suche { margin-left: auto; display: flex; align-items: center; gap: 9px; width: 320px; max-width: 100%; height: 36px; padding: 0 12px;
  background: var(--ka-ground); border: 1px solid var(--ka-neutral-b); border-radius: 8px; color: var(--ka-ink-muted); }
.ka-aktenliste__suche:focus-within { border-color: var(--ka-primary); box-shadow: 0 0 0 2px var(--ka-primary-b); }
.ka-aktenliste__suche input { flex-grow: 1; min-width: 0; border: 0; background: transparent; font: 400 13px var(--ka-font-sans); color: var(--ka-ink); outline: none; }
.ka-aktenliste__suche input::placeholder { color: var(--ka-ink-muted); }
.ka-aktenliste__knoepfe { display: flex; align-items: center; gap: var(--ka-space-2); }
.ka-aktenliste__haupt { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; font-size: var(--ka-fs-sm); font-weight: 600; }
.ka-aktenliste__knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--ka-radius); border: 1px solid var(--ka-line-strong);
  background: var(--ka-surface); color: var(--ka-ink); font: 600 var(--ka-fs-sm) var(--ka-font-sans); white-space: nowrap; cursor: pointer; text-decoration: none; }
.ka-aktenliste__knopf:hover, .ka-aktenliste__knopf:focus { border-color: var(--ka-ink-muted); color: var(--ka-ink); text-decoration: none; }
.ka-aktenliste__knopf--symbol { height: 36px; width: 36px; justify-content: center; padding: 0; color: var(--ka-ink-2); }
.ka-aktenliste__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px 24px; border-bottom: 1px solid var(--ka-zeile-linie); }
.ka-aktenliste__luecke { flex-grow: 1; }
.ka-aktenliste__zuruecksetzen { font-size: 12px; color: var(--ka-primary); }
.ka-aktenliste__filterfeld { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 24px 14px; background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-zeile-linie); }
.ka-aktenliste__feld { flex: 0 1 190px; min-width: 150px; }
.ka-aktenliste__feld label { display: block; margin-bottom: 4px; font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted); }
.ka-aktenliste__feld .form-control { min-height: 34px; height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.ka-aktenliste__feld--knopf { flex: 0 0 auto; min-width: 0; }
.ka-aktenliste__feld--knopf .ka-aktenliste__knopf { height: 34px; }
.ka-aktenliste__fuss { margin-top: auto; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 24px; border-top: 1px solid var(--ka-line); background: var(--ka-surface-muted); }
.ka-aktenliste__fuss .pagination { margin: 0; }
.ka-aktenliste__treffer { font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-aktenliste > .table-responsive, .ka-aktenliste > form > .table-responsive { flex-grow: 0; }

/* Filterpillen: gesetzter Filter mit „entfernen“; „+ Filter“ öffnet das Filterfeld */
.ka-filterpille { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--ka-radius-pill);
  background: var(--ka-primary-t); border: 1px solid var(--ka-primary-b); color: var(--ka-primary); font-size: var(--ka-fs-sm); font-weight: 600; white-space: nowrap; }
.ka-filterpille--stark { background: var(--ka-primary); border-color: var(--ka-primary); color: #FFFFFF; }
.ka-filterpille__weg { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: inherit; font-size: 11px; text-decoration: none; }
.ka-filterpille__weg:hover, .ka-filterpille__weg:focus { color: inherit; opacity: .8; }
.ka-filterpille--neu { border: 1px dashed var(--ka-line-strong); background: var(--ka-surface); color: var(--ka-ink-2); padding: 0 12px; cursor: pointer; font-family: var(--ka-font-sans); }
.ka-filterpille--neu:hover, .ka-filterpille--neu:focus { border-color: var(--ka-ink-muted); color: var(--ka-ink); }

/* Spaltenwahl und Dichte (Kompakt/Komfort) */
.ka-spaltenwahl { min-width: 220px; padding: 10px 14px; }
.ka-spaltenwahl__titel { margin: 0 0 6px; font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted); }
.ka-spaltenwahl .custom-control { min-height: 28px; font-size: 13px; }
.ka-spalte-aus { display: none !important; }
.ka-dichte { display: inline-flex; padding: 2px; background: var(--ka-ground); border: 1px solid var(--ka-neutral-b); border-radius: var(--ka-radius); }
.ka-dichte__wahl { border: 0; border-radius: 4px; background: transparent; color: var(--ka-ink-muted); font: 500 11.5px var(--ka-font-sans); padding: 4px 9px; cursor: pointer; }
.ka-dichte__wahl[aria-pressed="true"] { background: var(--ka-surface); color: var(--ka-ink); font-weight: 600; box-shadow: var(--ka-shadow); }

/* Sammelaktionsleiste: erscheint bei Auswahl */
.ka-sammelleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 24px; background: var(--ka-primary-t); border-bottom: 1px solid var(--ka-primary-b); }
.ka-sammelleiste[hidden] { display: none; }
.ka-sammelleiste__zahl { font-size: var(--ka-fs-sm); font-weight: 700; color: var(--ka-primary); }
.ka-sammelleiste:not(.ka-sammelleiste--aktiv) .ka-sammelleiste__zahl { font-weight: 600; color: var(--ka-ink-muted); }
.ka-sammelleiste__knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 5px; border: 1px solid #A9C3D9;
  background: var(--ka-surface); color: var(--ka-primary); font: 600 12px var(--ka-font-sans); cursor: pointer; white-space: nowrap; }
.ka-sammelleiste__knopf:disabled { opacity: .55; cursor: not-allowed; }
.ka-sammelleiste__knopf--leise { border-color: transparent; background: transparent; text-decoration: underline; padding: 0 4px; }
.ka-sammelleiste__hinweis { font-size: 12px; color: var(--ka-ink-muted); }

/* Aktentabelle */
.ka-aktentabelle { margin: 0; font-size: 13px; }
.ka-aktentabelle thead th { background: var(--ka-surface-muted); border-top: 0; border-bottom: 1px solid var(--ka-line); padding: 9px 12px 9px 0;
  font-size: var(--ka-fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ka-ink-muted); font-weight: 700; }
.ka-aktentabelle td { padding: var(--ka-row-py) 12px var(--ka-row-py) 0; border-top: 0; border-bottom: 1px solid var(--ka-line-soft); }
.ka-aktentabelle th:first-child, .ka-aktentabelle td:first-child { padding-left: 24px; }
.ka-aktentabelle th:last-child, .ka-aktentabelle td:last-child { padding-right: 24px; }
.ka-aktentabelle__wahl { width: 42px; }
.ka-aktentabelle__wahl input { width: 15px; height: 15px; accent-color: var(--ka-primary); vertical-align: middle; }
.ka-aktentabelle__az { width: 138px; white-space: nowrap; }
.ka-aktentabelle__az .ka-az { font-weight: 500; text-decoration: none; }
.ka-aktentabelle__zeile:hover, .ka-aktentabelle__zeile.is-gewaehlt { background: #F7FAFC; }
.ka-aktentabelle__titel { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ka-aktentabelle__titel > a { font-weight: 600; color: var(--ka-ink); text-decoration: none; }
.ka-aktentabelle__titel > a:hover, .ka-aktentabelle__titel > a:focus { color: var(--ka-primary); text-decoration: underline; }
.ka-aktentabelle__unterzeile { margin-top: 2px; font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-aktentabelle__schloss { color: var(--ka-frist); font-size: 11px; }
.ka-aktentabelle__leise { color: var(--ka-ink-2); }
.ka-aktentabelle__leer { color: var(--ka-ink-muted); }
.ka-aktentabelle td.text-right.ka-aktentabelle__leise { color: var(--ka-ink-muted); font-size: var(--ka-fs-sm); white-space: nowrap; }
.ka-aktentabelle__zeile--ruhig .ka-az { color: var(--ka-ink-muted); }
.ka-aktentabelle__zeile--ruhig .ka-aktentabelle__titel > a { color: var(--ka-ink-2); }
.ka-aktentabelle .ka-status { border-color: transparent; padding: 3px 9px; line-height: 1.35; }
.ka-verfahrensmarke { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--ka-vorfrist-text); background: var(--ka-vorfrist-t);
  border: 1px solid var(--ka-vorfrist-b); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.ka-verfahrensmarke--ruhig { color: var(--ka-ink-2); background: var(--ka-neutral-t); border-color: var(--ka-neutral-b); }
.ka-bearbeiter { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ka-bearbeiter__zeichen { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--ka-radius-pill); background: #E8EEF4; color: var(--ka-primary);
  font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ka-aktentabelle__zeile--ruhig .ka-bearbeiter__zeichen { background: var(--ka-neutral-t); color: var(--ka-ink-muted); }
.ka-bearbeiter__name { color: var(--ka-ink-2); font-size: var(--ka-fs-sm); }
/* Nächste Frist: rot ab dem Fälligkeitstag, gelb ab der Vorfrist, sonst ruhig (Rot heißt Frist) */
.ka-fristpille { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ka-radius-pill); padding: 3px 9px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.ka-fristpille--frist { background: var(--ka-frist-t); border-color: var(--ka-frist-b); color: var(--ka-frist-text); }
.ka-fristpille--vorfrist { background: var(--ka-vorfrist-t); border-color: var(--ka-vorfrist-b); color: var(--ka-vorfrist-text); }
@media (max-width: 991.98px) {
  .ka-aktenliste__suche { order: 5; width: 100%; margin-left: 0; }
  .ka-aktenliste__knoepfe { margin-left: auto; }
  /* Tablet (Entwurf Tablet-Akte: 526 px Inhalt): Rechtsgebiet und Aktivität treten zurück, das Rubrum behält Platz */
  .ka-aktentabelle [data-ka-spalte="rechtsgebiet"], .ka-aktentabelle [data-ka-spalte="aktivitaet"] { display: none; }
  .ka-aktentabelle__rubrum { min-width: 190px; }
}
@media (max-width: 767.98px) {
  .ka-aktenliste { margin: -1rem -15px 0; }
  .ka-aktenliste__kopf, .ka-aktenliste__filter, .ka-aktenliste__filterfeld, .ka-sammelleiste, .ka-aktenliste__fuss { padding-left: 16px; padding-right: 16px; }
  .ka-aktenliste__haupt, .ka-aktenliste__knopf, .ka-filterpille, .ka-sammelleiste__knopf { min-height: 44px; }
  .ka-aktentabelle th:first-child, .ka-aktentabelle td:first-child { padding-left: 12px; }
}

/* --- Aktenübersicht (Entwurf F5-Akte: Kopf; Akte-Uebersicht: zwei Spalten) ------------------------------------------- */
.ka-akteseite__kopf { margin: -1rem -15px 18px; padding: 16px 26px 14px; background: var(--ka-surface); border-bottom: 1px solid var(--ka-line); }
.ka-akteseite__pfad { margin: 0 0 4px; padding: 0; background: transparent; font-size: 12px; color: var(--ka-ink-muted); }
.ka-akteseite__pfad .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--ka-ink-muted); }
.ka-akteseite__pfad a { color: var(--ka-ink-muted); }
.ka-akteseite__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ka-akteseite__titel { margin: 0; flex: 1 1 22rem; min-width: 0; font-family: var(--ka-font-serif); font-size: 23px; font-weight: 700; line-height: 1.25; }
.ka-akteseite__az { font-family: var(--ka-font-serif); }
.ka-akteseite__aktionen { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ka-akteseite__aktionen > .btn, .ka-akteseite__mehr { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 7px; font-size: var(--ka-fs-sm); font-weight: 600; }
.ka-akteseite__mehr { width: 34px; padding: 0; justify-content: center; }
.ka-akteseite__menue { min-width: 15rem; padding: 6px 0; }
.ka-akteseite__menue .dropdown-item { font-size: 13px; padding: 8px 16px; }
.ka-akteseite__menue form { margin: 0; }
.ka-akteseite__menue > .btn { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--ka-ink); font-size: 13px; font-weight: 400; padding: 8px 16px; height: auto; }
.ka-akteseite__menue > .btn:hover, .ka-akteseite__menue > .btn:focus { background: var(--ka-surface-muted); }
.ka-akteseite__menue-gefahr { color: var(--ka-frist-text); font-weight: 600; }
.ka-akteseite__status { height: 26px; font-size: 12px; }
.ka-kopfchip--gesperrt { border-color: var(--ka-frist-b); background: var(--ka-frist-t); color: var(--ka-frist-text); }
a.ka-kopfchip:hover, a.ka-kopfchip:focus { text-decoration: none; filter: brightness(.97); }
.ka-akteseite__meta { margin: 9px 0 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-akteseite__kopf .small { margin-top: 6px; }
.ka-akteseite__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 348px); gap: 18px; align-items: start; }
.ka-akteseite__seite .ka-abschnitt__inhalt { padding: 12px 16px 14px; }
.ka-abschnitt__meta--stark { font-weight: 600; color: var(--ka-primary); }
.ka-abschnitt__meta--frist { font-weight: 600; color: var(--ka-frist-text); }
a.ka-abschnitt__meta { color: var(--ka-primary); font-weight: 600; }
.ka-abschnitt--blitz { box-shadow: 0 0 0 2px var(--ka-primary); }
@media (max-width: 1199.98px) { .ka-akteseite__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .ka-akteseite__kopf { padding: 14px 16px; }
  .ka-akteseite__aktionen > .btn, .ka-akteseite__mehr { height: 44px; }
  .ka-akteseite__mehr { width: 44px; }
}

/* Stammdaten als ruhige Zweispaltenliste */
.ka-stammdaten { display: grid; grid-template-columns: minmax(9rem, 34%) minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 13px; }
.ka-stammdaten dt { font-weight: 400; color: var(--ka-ink-muted); }
.ka-stammdaten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ka-stammdaten__text { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ka-line-soft); }
@media (max-width: 575.98px) { .ka-stammdaten { grid-template-columns: minmax(0, 1fr); } .ka-stammdaten dd { margin-bottom: 6px; } }

/* Aktenverlauf: Zeitspalte, Symbol auf der Linie, Inhalt */
.ka-verlaufwahl { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.ka-verlaufwahl__chip { height: 28px; padding: 0 11px; border-radius: var(--ka-radius-pill); border: 1px solid var(--ka-line-strong); background: var(--ka-surface);
  color: var(--ka-ink-2); font: 500 12px var(--ka-font-sans); cursor: pointer; }
.ka-verlaufwahl__chip[aria-pressed="true"] { background: var(--ka-primary); border-color: var(--ka-primary); color: #FFFFFF; font-weight: 600; }
.ka-verlauf { list-style: none; margin: 0; padding: 0; }
.ka-verlauf__eintrag { display: grid; grid-template-columns: 64px 28px minmax(0, 1fr); gap: 0 12px; }
.ka-verlauf__eintrag[hidden] { display: none; }
.ka-verlauf__wann { text-align: right; padding-top: 4px; }
.ka-verlauf__tag { display: block; font-size: 12.5px; font-weight: 600; color: var(--ka-ink); }
.ka-verlauf__zeit { display: block; font-size: 11.5px; color: var(--ka-ink-muted); font-variant-numeric: tabular-nums; }
.ka-verlauf__spur { position: relative; display: flex; justify-content: center; }
.ka-verlauf__spur::after { content: ""; position: absolute; top: 30px; bottom: 0; left: 50%; width: 1px; background: var(--ka-line); }
.ka-verlauf__eintrag:last-child .ka-verlauf__spur::after { display: none; }
.ka-verlauf__symbol { position: relative; z-index: 1; width: 26px; height: 26px; margin-top: 2px; border-radius: var(--ka-radius-pill); display: flex; align-items: center; justify-content: center;
  font-size: 11px; background: var(--ka-primary-t); color: var(--ka-primary); border: 1px solid var(--ka-primary-b); }
.ka-verlauf__symbol--note { background: var(--ka-neutral-t); color: var(--ka-ink-2); border-color: var(--ka-neutral-b); }
.ka-verlauf__inhalt { padding: 3px 0 18px; min-width: 0; }
.ka-verlauf__titel { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: var(--ka-fs-md); font-weight: 600; }
.ka-verlauf__text { margin-top: 2px; font-size: 13px; color: var(--ka-ink-3); }
.ka-verlauf__zeile { margin-top: 2px; font-size: 12.5px; color: var(--ka-ink-muted); }
.ka-verlauf__keine { margin: 0 0 12px; font-size: 13px; color: var(--ka-ink-muted); }
@media (max-width: 575.98px) { .ka-verlauf__eintrag { grid-template-columns: 52px 26px minmax(0, 1fr); gap: 0 8px; } }

/* Beteiligte, Dokumente, Kosten & Zeiten, Team & Zugriff (rechte Spalte) */
.ka-beteiligtenliste, .ka-dokumentkurz { list-style: none; margin: 0; padding: 0; }
.ka-beteiligter { display: flex; align-items: flex-start; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--ka-line-soft); }
.ka-beteiligter:last-child { border-bottom: 0; }
.ka-beteiligter__zeichen { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--ka-radius-pill); display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; background: var(--ka-neutral-t); color: var(--ka-ink-2); }
.ka-beteiligter__zeichen--client { background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-beteiligter__zeichen--opponent { background: var(--ka-frist-t); color: var(--ka-frist-text); }
.ka-beteiligter__text { flex-grow: 1; min-width: 0; }
.ka-beteiligter__name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ka-ink); overflow-wrap: anywhere; }
.ka-beteiligter__rolle { margin-top: 1px; font-size: 12px; color: var(--ka-ink-muted); }
.ka-beteiligter__korrektur { margin-top: 3px; font-size: 12px; }
.ka-beteiligter__haupt { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ka-primary);
  background: var(--ka-primary-t); border-radius: 4px; padding: 2px 6px; }
.ka-dokumentkurz__zeile { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--ka-line-soft); font-size: 13px; }
.ka-dokumentkurz__zeile:last-child { border-bottom: 0; }
.ka-dokumentkurz__zeile > .far { color: var(--ka-ink-muted); }
.ka-dokumentkurz__symbol--offen { color: var(--ka-vorfrist) !important; }
.ka-dokumentkurz__titel { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-dokumentkurz__datum { font-size: 12px; color: var(--ka-ink-muted); }
.ka-dokumentkurz__marke { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px;
  background: var(--ka-neutral-t); color: var(--ka-ink-2); }
.ka-dokumentkurz__marke--vorfrist { background: var(--ka-vorfrist-t); color: var(--ka-vorfrist-text); }
.ka-dokumentkurz__marke--offen { background: var(--ka-ok-t); color: var(--ka-ok-text); }
.ka-kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.ka-kennzahlen dt { font-size: 12px; font-weight: 400; color: var(--ka-ink-muted); }
.ka-kennzahlen dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ka-teamzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ka-teamzeile__zeichen { width: 28px; height: 28px; border-radius: var(--ka-radius-pill); display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-teamzeile__zahl { margin-left: 4px; font-size: 12.5px; color: var(--ka-ink-muted); }

/* Platz für „Das steht als Nächstes an“ (Entwurf F5-Akte; Inhalt baut UX-NACHTRAG) */
.ka-naechstes__eintrag { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--ka-line); }
.ka-naechstes__eintrag:last-child { border-bottom: 0; }
.ka-naechstes__symbol { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--ka-primary); background: color-mix(in srgb, var(--ka-primary) 8%, transparent); }
.ka-naechstes__symbol--frist { color: var(--ka-frist); background: color-mix(in srgb, var(--ka-frist) 8%, transparent); }
.ka-naechstes__text { flex-grow: 1; min-width: 0; }
.ka-naechstes__titel { margin: 0; font-size: 14px; font-weight: 600; }
.ka-naechstes__zeile { margin: 3px 0 0; font-size: 12.5px; color: var(--ka-ink-muted); }
.ka-naechstes__aktion { flex-shrink: 0; }
/* Neben der Bereichsspalte (Rahmen Register 385: 24 px Luft, 768-991 px 16 px) reichen die weißen Köpfe bündig an die Spalte. */
@media (min-width: 992px) {
  .container-fluid:has(> .ka-bereichsspalte) > .ka-aktenliste,
  .container-fluid:has(> .ka-bereichsspalte) > .ka-akteseite > .ka-akteseite__kopf { margin-left: -24px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .container-fluid:has(> .ka-bereichsspalte) > .ka-aktenliste,
  .container-fluid:has(> .ka-bereichsspalte) > .ka-akteseite > .ka-akteseite__kopf { margin-left: -16px; }
}

/* --- Dokumente der Akte (Entwurf Akte-Dokumente): Ordnerplan links, Dokumentliste rechts ---------------------------------- */
.ka-dokseite__titel { margin: 0; flex: 1 1 22rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-family: var(--ka-font-serif); font-size: var(--ka-fs-xl); font-weight: 700; }
.ka-dokseite__titel .ka-az { font-size: 13px; font-weight: 500; }
.ka-dokseite__titel .ka-status { font-family: var(--ka-font-sans); }
.ka-dokseite__trenner { color: var(--ka-ink-muted); font-weight: 400; font-size: 14px; }
.ka-dokseite__raster { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.ka-dokseite__liste { min-width: 0; }
.ka-ordnerplan { background: var(--ka-surface-muted); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); padding: 12px 10px 12px; }
.ka-ordnerplan__kopf { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px; }
.ka-ordnerplan__titel { font-size: var(--ka-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ka-ink-muted); }
.ka-ordnerplan__link { font-size: 12px; }
.ka-ordnerplan__pfad, .ka-ordnerplan__liste { list-style: none; margin: 0; padding: 0; }
.ka-ordnerplan__ordner { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--ka-ink); text-decoration: none; }
.ka-ordnerplan__ordner .fas { color: var(--ka-ink-muted); width: 14px; }
a.ka-ordnerplan__ordner:hover, a.ka-ordnerplan__ordner:focus { background: var(--ka-surface); color: var(--ka-ink); text-decoration: none; }
.ka-ordnerplan__ordner--aktiv { background: var(--ka-primary); color: #FFFFFF; font-weight: 600; }
.ka-ordnerplan__ordner--aktiv .fas { color: #FFFFFF; }
.ka-ordnerplan__ordner--unter { padding-left: 22px; }
.ka-ordnerplan__papierkorb { margin-top: 8px; border-top: 1px solid var(--ka-line); border-radius: 0; padding-top: 10px; color: var(--ka-ink-2); }
.ka-ordnerplan__zahl { margin-left: auto; font-size: 11px; color: var(--ka-ink-muted); }
.ka-ordnerplan__stand { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 10px; background: var(--ka-surface); border: 1px solid var(--ka-line);
  border-radius: 8px; font-size: 12px; font-weight: 600; }
.ka-ordnerplan__punkt { width: 7px; height: 7px; border-radius: var(--ka-radius-pill); background: var(--ka-ok); }
.ka-dokliste__titel { margin: 0; font-size: 13px; font-weight: 600; }
.ka-doktabelle { font-size: 13px; }
.ka-doktabelle thead th { background: var(--ka-surface-muted); border-top: 0; }
.ka-doktabelle td { border-top: 0; border-bottom: 1px solid var(--ka-line-soft); }
.ka-doktabelle__ordnerzeile { display: none; }
.ka-doktabelle__datei { color: var(--ka-ink-muted); margin-right: 4px; }
.ka-doktabelle__name { font-weight: 600; font-size: 13.5px; }
.ka-doktabelle .badge-success { background: var(--ka-ok-t); color: var(--ka-ok-text); }
.ka-doktabelle .badge-light { background: var(--ka-neutral-t); color: var(--ka-ink-2); }
@media (max-width: 991.98px) { .ka-dokseite__raster { grid-template-columns: minmax(0, 1fr); } }
.ka-doktabelle__wahl { width: 40px; }
.ka-doktabelle__dokument { display: flex; gap: 10px; align-items: flex-start; }
.ka-doktabelle__dokument > .far { margin-top: 3px; }
.ka-doktabelle__zeile { font-size: 12px; color: var(--ka-ink-muted); }
.ka-doktabelle__version { white-space: nowrap; color: var(--ka-ink-2); font-size: 12.5px; }
.ka-doktabelle__freigabe { margin-top: 4px; font-size: 12px; }
.ka-doktabelle__versionszahl { display: inline-block; min-width: 22px; font-family: var(--ka-font-mono); font-size: 11.5px; color: var(--ka-ink-2); text-decoration: none; }
.ka-doktabelle__versionszahl:hover, .ka-doktabelle__versionszahl:focus { color: var(--ka-primary); text-decoration: underline; }
.ka-doktabelle__freigabe-stand { display: inline-block; margin-left: 4px; text-align: center; font-size: 11px; font-weight: 700; text-decoration: none; }
.ka-doktabelle__freigabe-stand:hover, .ka-doktabelle__freigabe-stand:focus { text-decoration: underline; }
/* Register 398: „Daria fragen“ im Aktenkopf (öffnet das Fenster von Daria mit Aktenbezug, static/js/daria.js [data-daria-aufruf]). */
.ka-akteseite__daria { display: inline-flex; align-items: center; gap: 7px; }
.ka-akteseite__daria img { border-radius: 999px; }
/* Register 401: ab 992 px steht „Daria fragen“ nur in der Kopfleiste; der Knopf im Aktenkopf bleibt für Telefon und Tablet. */
@media (min-width: 992px) { .ka-akteseite__daria { display: none !important; } }
.ka-doktabelle__aktionen { white-space: nowrap; }
/* Register 401: bei 1440 px lief die Tabelle rechts über („Ansehen“/„⋯“ abgeschnitten) - lange Dateinamen ohne Leerzeichen gaben der Spalte
   „Dokument“ ihre volle Länge. Ab 768 px (darunter stehen die Zeilen als Karten) feste Breiten für Auswahl, Freigabe, Portal und Aktionen; die
   Spalte „Dokument“ nimmt den Rest und bricht lange Namen um. Unter 1400 px steht der Ordnerplan über der Liste (neben Seitenleiste,
   Bereichsspalte und Ordnerplan bliebe der Tabelle sonst zu wenig Breite) und die beiden Knöpfe stehen untereinander. Kein waagerechtes Scrollen. */
.ka-doktabelle__name, .ka-doktabelle__zeile { overflow-wrap: anywhere; }
@media (max-width: 1399.98px) { .ka-dokseite__raster { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) {
  .ka-doktabelle { table-layout: fixed; }
  .ka-doktabelle__sp-version { width: 124px; }
  .ka-doktabelle__sp-portal { width: 136px; }
  .ka-doktabelle__sp-aktionen { width: 100px; }
  .ka-doktabelle td { overflow-wrap: anywhere; }
  .ka-doktabelle thead th { white-space: normal; }
  .ka-doktabelle__version { white-space: normal; }
  .ka-doktabelle__freigabe-stand { margin-left: 0; white-space: nowrap; }
  .ka-doktabelle__aktionen { white-space: normal; }
  .ka-doktabelle__aktionen > * { margin: 0 0 4px 4px; }
}
@media (min-width: 1400px) {
  .ka-doktabelle__sp-aktionen { width: 148px; }
  .ka-doktabelle__aktionen { white-space: nowrap; }
}




/* ==========================================================================
   Teil C24 - Massenverfahren: Verfahrensgruppe, Stapellauf, Einrichtungsassistent (UX-OPTIK-MASSEN, Register 382;
   Entwürfe „Massenverfahren“, „Stapellauf“, „Wizard-Angaben“, „Wizard-Veroeffentlichen“ von Claude Design). Präfix .ka-mv-.
   Seitenleiste und Rahmen bleiben unverändert: die Köpfe reichen nur über die Breite der Inhaltsspalte (Rand von .container-fluid ausgeglichen).
   Rot nur für Fristen, Sperren und Fehler; „mit Hinweis“ trägt die Vorfrist-Töne, „bereit“ das Grün.
   ========================================================================== */
.ka-mv-kopf { margin: -1rem -15px 20px; padding: 15px 26px 16px; background: var(--ka-surface); border-bottom: 1px solid var(--ka-line); }
.ka-mv-kopf__pfad { display: flex; align-items: center; gap: 8px; font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); margin-bottom: 8px; }
.ka-mv-kopf__pfad a { text-decoration: none; }
.ka-mv-kopf__pfad .fas { font-size: 9px; color: var(--ka-ink-muted); }
.ka-mv-kopf__pfad [aria-current] { color: var(--ka-ink); font-weight: 600; }
.ka-mv-kopf__zeile { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.ka-mv-kopf__text { flex: 1 1 420px; min-width: 0; }
.ka-mv-kopf__titel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-2xl); font-weight: 700; letter-spacing: -0.01em; }
.ka-mv-kopf__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-mv-kopf__meta strong { font-weight: 600; color: var(--ka-ink-2); }
.ka-mv-kopf__stark { font-weight: 600; color: var(--ka-ink); }
.ka-mv-kopf__punkt { color: var(--ka-line-strong); }
.ka-mv-kopf__aktionen { display: flex; flex-wrap: wrap; gap: 9px; flex-shrink: 0; }
.ka-mv-kopf__aktionen .btn { height: 40px; display: inline-flex; align-items: center; gap: 7px; }
.ka-mv-kopf__plakette { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ka-vorfrist-text);
  background: var(--ka-vorfrist-t); border: 1px solid var(--ka-vorfrist-b); border-radius: var(--ka-radius-pill); padding: 5px 11px; }

.ka-mv-abschnittskopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 11px; }
.ka-mv-abschnitt { margin: 0; font-family: var(--ka-font-serif); font-size: 17px; font-weight: 700; }
h2.ka-mv-abschnitt { margin-top: 0; }
.ka-mv-abschnittskopf__hinweis { font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); }

/* Töne für Schrift, Symbol und Punkt */
.ka-mv-ton--frist, .ka-mv-text--frist { color: var(--ka-frist-text); font-weight: 600; }
.ka-mv-ton--warn { color: var(--ka-vorfrist-text); font-weight: 600; }
.ka-mv-ton--info { color: var(--ka-primary); font-weight: 600; }
.ka-mv-ton--ok { color: var(--ka-ok-text); font-weight: 600; }
.ka-mv-ton--ruhig { color: var(--ka-ink-muted); }

/* Phasen der Gruppe */
.ka-mv-phasen { margin-bottom: 18px; }
.ka-mv-phasen__gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ka-mv-phase { display: block; background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); padding: 13px 14px;
  color: var(--ka-ink); text-decoration: none; }
.ka-mv-phase:hover, .ka-mv-phase:focus { color: var(--ka-ink); text-decoration: none; border-color: var(--ka-control-line); }
.ka-mv-phase--aktiv { background: color-mix(in srgb, var(--ka-primary-t) 45%, var(--ka-surface)); border: 1.5px solid var(--ka-primary); }
.ka-mv-phase__titel { display: block; font-size: 11.5px; font-weight: 600; color: var(--ka-ink-2); }
.ka-mv-phase--aktiv .ka-mv-phase__titel { color: var(--ka-primary); font-weight: 700; }
.ka-mv-phase__zahl { display: block; font-family: var(--ka-font-serif); font-size: 27px; font-weight: 700; margin: 5px 0 3px; line-height: 1.2; }
.ka-mv-phase__hinweis { display: block; font-size: 11.5px; }
.ka-mv-balken { display: block; height: 4px; border-radius: var(--ka-radius-pill); background: var(--ka-neutral-t); overflow: hidden; margin-bottom: 7px; }
.ka-mv-balken__wert { display: block; height: 4px; background: var(--ka-nav-label); }
.ka-mv-phase--aktiv .ka-mv-balken { background: var(--ka-primary-b); }
.ka-mv-phase--aktiv .ka-mv-balken__wert { background: var(--ka-primary); }

/* Karten, Zeilen „Was den Lauf aufhält“, Kennzahlen, Stapelläufe */
.ka-mv-unten { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.ka-mv-gruende { flex: 1 1 auto; min-width: 0; }
.ka-mv-seite { flex: 0 0 340px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ka-mv-karte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); overflow: hidden; }
.ka-mv-karte--innen { padding: 14px 16px; }
.ka-mv-karte__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 13px 18px 12px; border-bottom: 1px solid var(--ka-line); }
.ka-mv-karte__titel { margin: 0; font-family: var(--ka-font-serif); font-size: 16.5px; font-weight: 700; }
.ka-mv-karte--innen .ka-mv-karte__titel { margin-bottom: 11px; }
.ka-mv-karte__zusatz { margin-left: auto; font-size: 12px; color: var(--ka-ink-muted); }
.ka-mv-karte__link { margin-left: auto; font-size: var(--ka-fs-sm); font-weight: 600; text-decoration: none; }
.ka-mv-karte__fuss { padding: 11px 18px; font-size: 12px; color: var(--ka-ink-muted); background: var(--ka-surface-muted); border-top: 1px solid var(--ka-line); }
.ka-mv-plakette { font-size: 12px; font-weight: 700; border-radius: var(--ka-radius-pill); padding: 2px 9px; }
.ka-mv-plakette--frist { color: var(--ka-frist-text); background: var(--ka-frist-t); }
.ka-mv-leer { margin: 0; padding: 16px 18px; font-size: 13px; color: var(--ka-ink-muted); }
.ka-mv-grund { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--ka-line-soft); }
.ka-mv-grund:last-of-type { border-bottom: 0; }
.ka-mv-symbol { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ka-mv-symbol--frist { background: var(--ka-frist-t); color: var(--ka-frist-text); }
.ka-mv-symbol--warn { background: var(--ka-vorfrist-t); color: var(--ka-vorfrist-text); }
.ka-mv-symbol--info { background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-mv-symbol--ruhig { background: var(--ka-neutral-t); color: var(--ka-ink-2); }
.ka-mv-symbol--ok { background: var(--ka-ok-t); color: var(--ka-ok-text); }
.ka-mv-grund__text { flex-grow: 1; min-width: 0; }
.ka-mv-grund__titel { font-size: var(--ka-fs-md); font-weight: 600; }
.ka-mv-grund__zeile { font-size: 12px; color: var(--ka-ink-2); margin-top: 2px; }
.ka-mv-grund__zahl { font-family: var(--ka-font-serif); font-size: 20px; font-weight: 700; width: 56px; text-align: right; flex-shrink: 0; }
.ka-mv-grund__knopf { flex-shrink: 0; min-width: 0; }
.ka-mv-grund .btn-sm { height: 34px; display: inline-flex; align-items: center; }
.ka-mv-kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; }
.ka-mv-kennzahlen dt { font-size: 11px; font-weight: 400; color: var(--ka-ink-muted); }
.ka-mv-kennzahlen dd { margin: 0; font-size: 16px; font-weight: 600; }
.ka-mv-lauf { padding: 11px 16px; border-bottom: 1px solid var(--ka-line-soft); }
.ka-mv-lauf:last-child { border-bottom: 0; }
.ka-mv-lauf--aktiv { background: color-mix(in srgb, var(--ka-primary-t) 45%, var(--ka-surface)); }
.ka-mv-lauf__kopf { display: flex; align-items: center; gap: 8px; }
.ka-mv-lauf__titel { flex-grow: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ka-ink); text-decoration: none; }
.ka-mv-lauf__titel:hover, .ka-mv-lauf__titel:focus { color: var(--ka-primary); }
.ka-mv-lauf__stand { font-size: 11.5px; font-weight: 700; color: var(--ka-vorfrist-text); }
.ka-mv-lauf__datum { font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-mv-lauf__zeile { font-size: 11.5px; color: var(--ka-ink-2); margin-top: 4px; }
.ka-mv-punkt { width: 8px; height: 8px; border-radius: var(--ka-radius-pill); flex-shrink: 0; background: var(--ka-ink-muted); }
.ka-mv-punkt--ok { background: var(--ka-ok); }
.ka-mv-punkt--warn { background: var(--ka-vorfrist); }
.ka-mv-punkt--frist { background: var(--ka-frist); }
.ka-mv-zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ka-mv-fliesstext { font-size: var(--ka-fs-md); color: var(--ka-ink-2); }
.ka-mv-fliesstext p:last-child { margin-bottom: 0; }

/* Stapellauf: Schrittleiste, drei Prüfkarten, Blockaden, Stichprobe, rechte Spalte, Fußleiste */
.ka-mv-schritte { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; list-style: none; margin: -20px -15px 20px; padding: 12px 26px;
  background: var(--ka-surface); border-bottom: 1px solid var(--ka-line); }
.ka-mv-schritte__eintrag { display: flex; align-items: center; gap: 10px; padding-right: 22px; }
.ka-mv-schritte__eintrag + .ka-mv-schritte__eintrag::before { content: ""; width: 34px; height: 1px; background: var(--ka-line-strong); margin-right: 12px; }
.ka-mv-schritte__marke { width: 25px; height: 25px; border-radius: var(--ka-radius-pill); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--ka-surface); border: 2px solid var(--ka-line-strong); color: var(--ka-ink-muted); }
.ka-mv-schritte__eintrag--fertig .ka-mv-schritte__marke { background: var(--ka-ok); border-color: var(--ka-ok); color: #FFFFFF; font-size: 11px; }
.ka-mv-schritte__eintrag--aktiv .ka-mv-schritte__marke { background: var(--ka-primary); border-color: var(--ka-primary); color: #FFFFFF; }
.ka-mv-schritte__titel { display: block; font-size: 13px; font-weight: 600; }
.ka-mv-schritte__zusatz { display: block; font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-mv-schritte__eintrag--aktiv .ka-mv-schritte__titel, .ka-mv-schritte__eintrag--aktiv .ka-mv-schritte__zusatz { color: var(--ka-primary); }
.ka-mv-schritte__eintrag--aktiv .ka-mv-schritte__titel { font-weight: 700; }
.ka-mv-schritte__eintrag--offen .ka-mv-schritte__titel { color: var(--ka-ink-muted); }
.ka-mv-lauf-raster { display: flex; gap: 20px; align-items: flex-start; }
.ka-mv-lauf-haupt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ka-mv-lauf-seite { flex: 0 0 348px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ka-mv-pruefung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ka-mv-pruefkarte { border-radius: var(--ka-radius-lg); padding: 14px 16px; border: 1px solid; }
.ka-mv-pruefkarte--ok { background: var(--ka-ok-t); border-color: var(--ka-ok-b); color: var(--ka-ok-text); }
.ka-mv-pruefkarte--warn { background: var(--ka-vorfrist-t); border-color: var(--ka-vorfrist-b); color: var(--ka-vorfrist-text); }
.ka-mv-pruefkarte--frist { background: var(--ka-frist-t); border: 1.5px solid var(--ka-frist-b); color: var(--ka-frist-text); }
.ka-mv-pruefkarte__titel { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.ka-mv-pruefkarte__zahl { display: block; font-family: var(--ka-font-serif); font-size: 32px; font-weight: 700; margin: 5px 0 2px; color: var(--ka-ink); line-height: 1.15; }
.ka-mv-pruefkarte__text { font-size: 12px; }
.ka-mv-block { display: flex; align-items: center; gap: 13px; padding: 11px 18px; border-bottom: 1px solid var(--ka-line-soft); }
.ka-mv-block:last-child { border-bottom: 0; }
.ka-mv-block__text { flex-grow: 1; min-width: 0; }
.ka-mv-block__titel { font-size: 13px; font-weight: 600; }
.ka-mv-block__zeile { font-size: 11.5px; color: var(--ka-ink-muted); margin-top: 2px; }
.ka-mv-block__zahl { font-size: 13px; font-weight: 700; width: 34px; text-align: right; flex-shrink: 0; }
.ka-mv-stichprobe { display: flex; gap: 18px; padding: 14px 18px; }
.ka-mv-blatt { flex: 0 0 300px; min-width: 0; background: var(--ka-surface); border: 1px solid var(--ka-lesegrund-rahmen); box-shadow: var(--ka-shadow);
  padding: 16px; font-family: var(--ka-font-serif); font-size: 12px; line-height: 1.6; overflow: hidden; }
.ka-mv-blatt__kopf { font-size: 11px; color: var(--ka-ink-muted); padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid var(--ka-neutral-b); }
.ka-mv-blatt__kopf strong { color: var(--ka-ink); }
.ka-mv-blatt__betreff { font-family: var(--ka-font-serif); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ka-mv-blatt__text { white-space: pre-wrap; max-height: 260px; overflow: hidden; }
.ka-mv-stichprobe__steuerung { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.ka-mv-stichprobe__text { margin: 5px 0 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-2); line-height: 1.55; max-width: 560px; }
.ka-mv-stichprobe__wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.ka-mv-stichprobe__wahl .nav-link { height: 34px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: var(--ka-radius);
  border: 1px solid var(--ka-control-line); background: var(--ka-surface); color: var(--ka-ink); font-size: var(--ka-fs-sm); font-weight: 600; }
.ka-mv-stichprobe__wahl .nav-link.active { background: var(--ka-primary); border-color: var(--ka-primary); color: #FFFFFF; }
.ka-mv-bestaetigung { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; background: var(--ka-surface-muted); border: 1px solid var(--ka-line);
  border-radius: 8px; padding: 11px 13px; font-size: var(--ka-fs-sm); line-height: 1.45; cursor: pointer; font-weight: 400; }
.ka-mv-bestaetigung input { width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; accent-color: var(--ka-primary); }
.ka-mv-ablauf { list-style: none; margin: 0; padding: 0; counter-reset: ablauf; }
.ka-mv-ablauf li { display: flex; gap: 11px; padding-bottom: 11px; font-size: var(--ka-fs-sm); line-height: 1.45; counter-increment: ablauf; }
.ka-mv-ablauf li:last-child { padding-bottom: 0; }
.ka-mv-ablauf li::before { content: counter(ablauf); width: 21px; height: 21px; flex-shrink: 0; border-radius: var(--ka-radius-pill); background: var(--ka-primary-t);
  color: var(--ka-primary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ka-mv-schaetzung { background: var(--ka-surface-muted); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); padding: 13px 15px; }
.ka-mv-schaetzung__titel { font-family: var(--ka-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ka-ink-muted); margin: 0 0 9px; }
.ka-mv-schaetzung .ka-mv-kennzahlen dd { font-size: var(--ka-fs-sm); }
.ka-mv-randtext { margin: 0; font-size: 12px; color: var(--ka-ink-2); line-height: 1.55; }
.ka-mv-fussleiste { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 20px -26px 0; padding: 14px 26px;
  background: var(--ka-surface); border-top: 1px solid var(--ka-line); }
.ka-mv-fussleiste__text { flex: 1 1 260px; min-width: 0; }
.ka-mv-fussleiste__titel { font-size: var(--ka-fs-md); font-weight: 600; }
.ka-mv-fussleiste__zeile { font-size: 12px; color: var(--ka-ink-muted); margin-top: 2px; }
.ka-mv-fussleiste .btn { height: var(--ka-control-h-lg); display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; }
.ka-mv-fussleiste .form-check { margin: 0; }

/* Einrichtungsassistent: dunkles Band mit Schrittfolge, Inhalt mittig, Fußleiste */
.ka-mv-assistent__band { margin: -1rem -15px 0; padding: 14px 28px 13px; background: var(--ka-nav); }
.ka-mv-assistent__bandzeile { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.ka-mv-assistent__bandtext { flex-grow: 1; min-width: 0; }
.ka-mv-assistent__titel { margin: 0; font-family: var(--ka-font-serif); font-size: 17px; font-weight: 700; color: #FFFFFF; }
.ka-mv-assistent__untertitel { font-size: 12px; color: var(--ka-nav-label); margin-top: 2px; }
.ka-mv-assistent__bandknopf { height: 36px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--ka-nav-line); background: transparent; color: var(--ka-nav-text);
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; }
.ka-mv-assistent__bandknopf:hover, .ka-mv-assistent__bandknopf:focus { color: #FFFFFF; background: var(--ka-nav-hover); text-decoration: none; }
.ka-mv-assistent__schritte { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; margin: 13px 0 0; padding: 0; }
.ka-mv-assistent__schritt { display: flex; align-items: center; gap: 9px; font-size: var(--ka-fs-sm); color: var(--ka-nav-label); }
.ka-mv-assistent__schritt + .ka-mv-assistent__schritt::before { content: ""; width: 26px; height: 1px; background: var(--ka-nav-line); margin: 0 10px; }
.ka-mv-assistent__schritt a { color: var(--ka-nav-text); text-decoration: none; display: flex; align-items: center; gap: 9px; }
.ka-mv-assistent__schritt a:hover, .ka-mv-assistent__schritt a:focus { color: #FFFFFF; text-decoration: underline; }
.ka-mv-assistent__marke { width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--ka-radius-pill); border: 1px solid var(--ka-nav-line); display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ka-nav-label); }
.ka-mv-assistent__schritt--fertig .ka-mv-assistent__marke { background: var(--ka-nav-active); border-color: var(--ka-nav-focus); color: #FFFFFF; font-size: 10px; }
.ka-mv-assistent__schritt--aktiv { color: #FFFFFF; font-weight: 700; }
.ka-mv-assistent__schritt--aktiv .ka-mv-assistent__marke { background: var(--ka-siegel); border-color: var(--ka-siegel); color: var(--ka-siegel-ink); }
.ka-mv-assistent__inhalt { max-width: 940px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 22px; }
.ka-mv-assistent__inhalt--breit { max-width: 1120px; }
.ka-mv-assistent__frage { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-fs-2xl); font-weight: 700; }
.ka-mv-assistent__einleitung { margin: -15px 0 0; font-size: 14.5px; color: var(--ka-ink-2); line-height: 1.6; max-width: 70ch; }
.ka-mv-assistent__teil { margin: 0; font-family: var(--ka-font-serif); font-size: 17px; font-weight: 700; }
.ka-mv-assistent__teiltext { margin: 3px 0 11px; font-size: 13px; color: var(--ka-ink-muted); line-height: 1.55; }
.ka-mv-assistent__fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 26px -15px 0; padding: 14px 28px; background: var(--ka-surface);
  border-top: 1px solid var(--ka-line); position: sticky; bottom: 0; z-index: 5; }
.ka-mv-assistent__fuss .ka-mv-luecke { flex-grow: 1; }
.ka-mv-assistent__fuss .btn { height: var(--ka-control-h-lg); display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; }
.ka-mv-assistent__fuss form { margin: 0; }
.ka-mv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ka-mv-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--ka-radius-pill); background: var(--ka-ruhig-t);
  color: var(--ka-ink-2); font-size: 13px; }
.ka-mv-chip .fas { color: var(--ka-ok-text); font-size: 11px; }
.ka-mv-vorschlag { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px dashed var(--ka-control-line); border-radius: var(--ka-radius-pill);
  background: var(--ka-surface); color: var(--ka-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.ka-mv-vorschlag:hover, .ka-mv-vorschlag:focus { border-style: solid; border-color: var(--ka-primary); color: var(--ka-primary); text-decoration: none; }
.ka-mv-fragen { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; overflow: hidden; }
.ka-mv-frage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--ka-neutral-t); }
.ka-mv-frage__nr { width: 22px; color: var(--ka-ink-muted); font-size: 13px; flex-shrink: 0; }
.ka-mv-frage__name { flex: 1 1 220px; min-width: 0; font-size: 14px; font-weight: 600; }
.ka-mv-frage__art { width: 176px; font-size: 13px; color: var(--ka-ink-2); }
.ka-mv-frage__pflicht { width: 92px; font-size: 13px; color: var(--ka-ink-2); }
.ka-mv-frage__aktionen { display: flex; gap: 6px; }
.ka-mv-fragen__fuss { padding: 13px 16px; }
.ka-mv-fachleute { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; padding: 14px 16px; }
.ka-mv-fachleute > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ka-primary); }
.ka-mv-fachleute__text { margin: 9px 0 0; font-size: 13px; color: var(--ka-ink-2); line-height: 1.6; }
.ka-mv-wege { display: flex; gap: 28px; align-items: flex-start; }
.ka-mv-wege__liste { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ka-mv-weg { border: 1px solid var(--ka-line-strong); border-radius: 12px; background: var(--ka-surface); padding: 15px 16px; }
.ka-mv-weg--empfohlen { border-color: var(--ka-primary); box-shadow: 0 0 0 1px var(--ka-primary); background: color-mix(in srgb, var(--ka-primary-t) 35%, var(--ka-surface)); }
.ka-mv-weg__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.ka-mv-weg__kopf .fas { color: var(--ka-primary); }
.ka-mv-weg__titel { margin: 0; font-family: var(--ka-font-sans); font-size: 16px; font-weight: 600; }
.ka-mv-weg__marke { font-size: 11px; font-weight: 700; color: var(--ka-ok-text); background: var(--ka-ok-t); border-radius: var(--ka-radius-pill); padding: 2px 9px; }
.ka-mv-weg__text { margin: 6px 0 0; font-size: 13.5px; color: var(--ka-ink-2); line-height: 1.6; }
.ka-mv-weg__inhalt { margin: 13px 0 0 26px; }
.ka-mv-weg__klein { margin: 9px 0 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); line-height: 1.55; }
.ka-mv-adresse { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.ka-mv-adresse__wert { font-family: var(--ka-font-mono); font-size: 14px; color: var(--ka-ink-2); }
.ka-mv-erledigt { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--ka-fs-sm); }
.ka-mv-erledigt li { display: flex; align-items: center; gap: 6px; }
.ka-mv-vorschau { flex: 0 0 380px; min-width: 0; }
.ka-mv-vorschau__titel { margin: 0 0 11px; font-family: var(--ka-font-serif); font-size: 16px; font-weight: 700; }
.ka-mv-vorschau__fenster { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; overflow: hidden; }
.ka-mv-vorschau__leiste { background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line); padding: 9px 14px; display: flex; align-items: center; gap: 9px; }
.ka-mv-vorschau__adresse { flex-grow: 1; min-width: 0; font-family: var(--ka-font-mono); font-size: 12px; color: var(--ka-ink-2); overflow-wrap: anywhere; }
.ka-mv-vorschau__seite { padding: 18px 20px; }
.ka-mv-vorschau__kanzlei { font-family: var(--ka-font-serif); font-size: 14px; font-weight: 700; }
.ka-mv-vorschau__name { font-family: var(--ka-font-serif); font-size: 20px; font-weight: 700; margin-top: 12px; line-height: 1.3; }
.ka-mv-vorschau__unter { font-size: var(--ka-fs-sm); color: var(--ka-ink-2); margin-top: 7px; line-height: 1.55; }
.ka-mv-vorschau__formular { display: flex; gap: 8px; margin-top: 13px; }
.ka-mv-vorschau__feld { height: 34px; flex-grow: 1; border: 1px solid var(--ka-line); border-radius: var(--ka-radius); background: var(--ka-surface-muted); }
.ka-mv-vorschau__knopf { height: 34px; width: 120px; border-radius: var(--ka-radius); background: var(--ka-primary); }
.ka-mv-vorschau__hinweis { margin: 11px 0 0; font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-mv-vorschau__fuss { margin: 13px 2px 0; font-size: var(--ka-fs-sm); color: var(--ka-ink-muted); line-height: 1.6; }

@media (max-width: 1199.98px) {
  .ka-mv-unten, .ka-mv-lauf-raster, .ka-mv-wege { flex-direction: column; align-items: stretch; }
  .ka-mv-seite, .ka-mv-lauf-seite, .ka-mv-vorschau { flex-basis: auto; }
}
@media (max-width: 767.98px) {
  .ka-mv-kopf, .ka-mv-schritte, .ka-mv-fussleiste, .ka-mv-assistent__band, .ka-mv-assistent__fuss { padding-left: 16px; padding-right: 16px; }
  .ka-mv-pruefung { grid-template-columns: minmax(0, 1fr); }
  .ka-mv-grund, .ka-mv-block { flex-wrap: wrap; }
  .ka-mv-grund__text, .ka-mv-block__text { flex-basis: calc(100% - 110px); }
  .ka-mv-stichprobe { flex-direction: column; }
  .ka-mv-blatt { flex-basis: auto; }
  .ka-mv-weg__inhalt { margin-left: 0; }
  .ka-mv-frage__art, .ka-mv-frage__pflicht { width: auto; }
  .ka-mv-kopf__aktionen .btn, .ka-mv-grund .btn-sm { height: var(--ka-control-h-lg); }
}
/* Rumpf der Seiten: Innenabstand wie im Entwurf (26 px zur Seitenleiste), Überschriften der vorhandenen Werkzeugblöcke in der Serifenzeile */
.ka-mv-rumpf { padding: 0 11px; }
.ka-mv-rumpf h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 24px 0 10px; font-family: var(--ka-font-serif); font-size: 17px; font-weight: 700; }
@media (max-width: 767.98px) { .ka-mv-rumpf { padding: 0; } .ka-mv-fussleiste { margin-left: -15px; margin-right: -15px; } }

/* ==========================================================================
   Teil C26 - Rahmen nach der Navigationsentscheidung „Seitenleiste + Bereichsspalte“ (Register 385, A42/A43; Entwürfe 24-30, 33, Mobil)
   templates/core/_seitenleiste.html, _bereichsspalte.html, base.html (Symbolleiste, Tab-Leiste), static/js/ka-rahmen.js.
   * Bereichsspalte einer Seitenfamilie: dieselbe .ka-bereichsspalte wie in der Akte (Teil C6/C20), dazu das Feld „Bereich suchen“ und eine
     Statusangabe in der Gruppenüberschrift (Entwurf 33).
   * Symbolleiste 72 px (768-991 px) und Tab-Leiste (unter 768 px) mit denselben Strichsymbolen wie die Seitenleiste.
   * Werkzeuge rechts (.ka-werkzeug, A43): nur auf Zuruf; unter 1600 px über dem Inhalt (höchstens eines, ka-rahmen.js), ab 1600 px daneben.
   ========================================================================== */
.ka-bereichsspalte [hidden] { display: none !important; }
.ka-bereichsspalte__suche {
  display: flex; align-items: center; gap: 7px; height: 32px; margin: 13px 14px 0; padding: 0 9px;
  border: 1px solid var(--ka-line); border-radius: 7px; background: var(--ka-surface-muted); color: var(--ka-ink-muted);
}
.ka-bereichsspalte__suche .fas { font-size: 12px; }
.ka-bereichsspalte__suche input { flex-grow: 1; min-width: 0; border: 0; background: transparent; font-size: 12px; color: var(--ka-ink); }
.ka-bereichsspalte__suche input::placeholder { color: var(--ka-ink-muted); opacity: 1; }
.ka-bereichsspalte__suche input:focus { outline: none; }
.ka-bereichsspalte__suche:focus-within { border-color: var(--ka-primary); box-shadow: 0 0 0 2px var(--ka-primary-t); }
.ka-bereichsspalte__gruppenname { flex-grow: 1; }
.ka-bereichsspalte__status { font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ka-bereichsspalte__name { flex-grow: 1; min-width: 0; }
.ka-bereichsspalte__punkt .fas, .ka-bereichsspalte__punkt .far { width: 14px; text-align: center; font-size: 12px; color: var(--ka-ink-muted); }
.ka-bereichsspalte__punkt--aktiv .fas, .ka-bereichsspalte__punkt--aktiv .far { color: var(--ka-primary); }
.ka-bereichsspalte nav, nav.ka-bereichsspalte { padding-bottom: 14px; }

/* Symbolleiste (Entwurf Tablet-Akte): Marke 60 px, Suche 52 px mit Trennlinie, Punkte 56 px */
.ka-symbolleiste__knopf--marke { height: 60px; }
.ka-symbolleiste__knopf--suche { height: 52px; border-bottom: 1px solid var(--ka-nav-line); }
.ka-symbolleiste__knopf .ka-symbol { width: 21px; height: 21px; }
.ka-symbolleiste__knopf--suche .ka-symbol { width: 20px; height: 20px; stroke-width: 1.9; }
.ka-symbolleiste__zahl { font-size: 9.5px; padding: 1px 5px; top: 4px; right: 10px; line-height: 1.4; }

/* Tab-Leiste (Entwurf Mobil): 68 px, Beschriftung 10,5 px, Erfassen 54 px rund und angehoben */
.ka-tabbar__eintrag .ka-symbol { width: 21px; height: 21px; }
.ka-tabbar__eintrag[aria-current="page"] .ka-symbol { stroke-width: 2; }
.ka-tabbar__erfassen .ka-symbol { width: 26px; height: 26px; stroke-width: 2.1; }

/* --- Werkzeuge rechts (A43) ----------------------------------------------------------------------------------------------------- */
/* Ohne Skript: ein normaler Abschnitt im Inhalt. Mit Skript (ka-werkzeug--bereit): verborgen bis zum Aufruf, dann rechts. */
.ka-werkzeug { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); margin-bottom: 16px; }
.ka-werkzeug[hidden] { display: none; }
.ka-werkzeug__kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ka-line); }
.ka-werkzeug__titel { flex-grow: 1; margin: 0; font-size: var(--ka-fs-md); font-weight: 600; font-family: var(--ka-font-sans); }
.ka-werkzeug__titel:focus { outline: none; }
.ka-werkzeug__inhalt { padding: 12px 16px 16px; overflow-y: auto; }
.ka-werkzeug__zu { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ka-radius);
  background: transparent; color: var(--ka-ink-muted); font-size: 1.25rem; cursor: pointer; }
.ka-werkzeug__zu:hover, .ka-werkzeug__zu:focus { background: var(--ka-surface-muted); color: var(--ka-ink); }
.ka-werkzeug__zu:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: 1px; }
.ka-werkzeug.ka-werkzeug--bereit {
  position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 1037; width: min(400px, calc(100vw - 24px)); margin: 0;
  display: flex; flex-direction: column; box-shadow: var(--ka-shadow-pop);
}
.ka-werkzeug.ka-werkzeug--bereit[hidden] { display: none; }
@media (max-width: 767.98px) {
  .ka-werkzeug.ka-werkzeug--bereit { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 85vh; border-radius: var(--ka-radius-lg) var(--ka-radius-lg) 0 0; }
}
/* Ab 1600 px darf das Werkzeug neben dem Inhalt stehen: der Inhalt rückt ein, statt verdeckt zu werden (Daria eingeschlossen). */
@media (min-width: 1600px) {
  body.ka-werkzeug-offen .ka-inhalt { margin-right: 424px; }
  .ka-werkzeug.ka-werkzeug--bereit { top: 0; right: 0; bottom: 0; width: 424px; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; }
}

/* Daria ist ein Werkzeug rechts (A43): ab 992 px steht ihr Aufruf oben rechts in der Kopfleiste neben der Hilfe (Entwurf F5-Akte: „Daria fragen“
   im Seitenkopf) statt schwebend über dem Inhalt; ihr Fenster liegt rechts über dem Inhalt, ab 1600 px daneben (ka-rahmen.js zählt es als Werkzeug). */
@media (min-width: 992px) {
  .ka-daria { position: absolute; top: 7px; right: 68px; bottom: auto; z-index: 1038; }   /* über einem offenen Werkzeug: Daria öffnen schliesst es */
  .ka-daria__start { min-height: 38px; padding: 2px 12px 2px 3px; background: var(--ka-surface); color: var(--ka-ink); border-color: var(--ka-control-line);
    box-shadow: none; font-size: var(--ka-fs-sm); font-weight: 600; }
  .ka-daria__start:hover, .ka-daria__start:focus { background: var(--ka-surface-muted); color: var(--ka-ink); }
  .ka-daria__start .ka-daria__avatar { width: 32px; height: 32px; }
  .ka-daria__fenster { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(428px, calc(100vw - 24px)); height: auto; z-index: 1037; }
}
@media (min-width: 1600px) {
  .ka-daria__fenster { top: 0; right: 0; bottom: 0; width: 424px; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; }
}
/* Telefon: die schwebende Zeiterfassung steht über der Tab-Leiste statt auf ihr (vorher verdeckte sie Heute/Akten/Post); Daria bleibt darüber (Teil C13). */
@media (max-width: 767.98px) {
  .ka-hat-tabbar .ka-timer { bottom: calc(68px + 8px + env(safe-area-inset-bottom, 0px)); }
}
/* Unter 992 px schwebt der Daria-Knopf über dem Inhalt (Telefon: 84 px über der Tab-Leiste, Tablet: 84 px über dem Rand, je 44 px hoch).
   Der Inhalt bekommt unten so viel Abstand, dass Tab-Leiste und schwebende Knöpfe nie den letzten Inhalt verdecken (Auftragsseite: „Schritt für Schritt prüfen“). */
@media (min-width: 768px) and (max-width: 991.98px) {
  body:has(#ka-daria) .ka-inhalt { padding-bottom: calc(84px + var(--ka-control-h-lg) + 12px); }
}
@media (max-width: 767.98px) {
  .ka-hat-tabbar:has(#ka-daria) .ka-inhalt { padding-bottom: calc(68px + 84px + var(--ka-control-h-lg) + 12px + env(safe-area-inset-bottom, 0px)); }
}
/* Eingeklappte Bereichsspalte (Register 385, Arbeitsplatz des Posteingangs, Wunsch UX-OPTIK-POST): 48 px Leiste mit „Bereiche“; aufgeklappt
   252 px über dem Inhalt, der Inhalt behält seine Breite. Gilt nur mit Skript (ka-rahmen.js setzt --klappbar). */
.ka-bereichsspalte__klapper[hidden] { display: none; }
@media (min-width: 768px) {
  .container-fluid:has(> .ka-bereichsspalte--klappbar) { padding-left: calc(48px + 16px); }
  .container-fluid:has(> .ka-bereichsspalte--klappbar) > .ka-bereichsspalte--klappbar { width: 48px; overflow: visible; }
  .ka-bereichsspalte--klappbar .ka-bereichsspalte__innen { display: none; }
  .ka-bereichsspalte__klapper {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 47px; padding: 14px 0; border: 0; background: transparent;
    color: var(--ka-ink-muted); font-size: 10px; font-weight: 700; letter-spacing: 0; cursor: pointer;
  }
  .ka-bereichsspalte__klapper:hover, .ka-bereichsspalte__klapper:focus { color: var(--ka-primary); background: var(--ka-surface-muted); }
  .ka-bereichsspalte__klapper:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: -2px; }
  .ka-bereichsspalte__klapper .fas { font-size: 15px; }
  .ka-bereichsspalte--offen .ka-bereichsspalte__klapper { color: var(--ka-primary); }
  .ka-bereichsspalte--offen .ka-bereichsspalte__innen {
    display: block; position: absolute; top: 0; left: 48px; bottom: 0; width: 252px; z-index: 1020; overflow-y: auto;
    background: var(--ka-surface); border-right: 1px solid var(--ka-line); box-shadow: var(--ka-shadow-pop);
  }
}

/* ==========================================================================
   Teil C25 - „Mein Tag“: Startseite ab Tablet (Register 378, templates/core/dashboard.html und core/_mein_tag.html, static/js/ka-mein-tag.js;
   Entwurf „01 · Mein Tag“ von Claude Design). Werte aus dem Entwurf als Tokens (tokens.css, Abschnitt „Mein Tag“). Rot nur für Fristen.
   ========================================================================== */
.ka-meintag-kopf { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ka-meintag-kopf__text { flex-grow: 1; min-width: 0; }
.ka-meintag-kopf__titel { margin: 0; font-family: var(--ka-font-serif); font-size: var(--ka-mt-fs-titel); font-weight: 700; letter-spacing: -.01em; color: var(--ka-ink); }
.ka-meintag-kopf__zeile { margin: 4px 0 0; font-size: var(--ka-fs-md); color: var(--ka-ink-muted); }
.ka-meintag-kopf__aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ka-meintag-kopf__link { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ka-primary); display: inline-flex; align-items: center; gap: 5px; }
.ka-meintag-kopf__link .fas { font-size: 10px; }
.ka-meintag-kopf__link:hover, .ka-meintag-kopf__link:focus { color: var(--ka-primary-h); }

.ka-kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (min-width: 1200px) { .ka-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ka-kennzahl {
  display: flex; flex-direction: column; padding: 14px 16px; border-radius: var(--ka-radius-lg);
  background: var(--ka-surface); border: 1px solid var(--ka-line); color: var(--ka-ink); text-decoration: none;
}
.ka-kennzahl:hover, .ka-kennzahl:focus { text-decoration: none; color: var(--ka-ink); border-color: var(--ka-primary-b); }
.ka-kennzahl__kopf { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ka-primary); }
.ka-kennzahl__kopf .fas, .ka-kennzahl__kopf .far { font-size: 13px; }
.ka-kennzahl__zahl { font-family: var(--ka-font-serif); font-size: var(--ka-mt-fs-zahl); font-weight: 700; line-height: 1.1; margin: 6px 0 2px; }
.ka-kennzahl__unter { font-size: 12px; color: var(--ka-ink-muted); }
.ka-kennzahl--frist { background: var(--ka-frist-t); border-color: var(--ka-frist-b); }
.ka-kennzahl--frist .ka-kennzahl__kopf, .ka-kennzahl--frist .ka-kennzahl__unter { color: var(--ka-frist-text); font-weight: 500; }
.ka-kennzahl--frist .ka-kennzahl__kopf { font-weight: 600; }
.ka-kennzahl--vorfrist { background: var(--ka-vorfrist-t); border-color: var(--ka-vorfrist-b); }
.ka-kennzahl--vorfrist .ka-kennzahl__kopf, .ka-kennzahl--vorfrist .ka-kennzahl__unter { color: var(--ka-vorfrist-text); font-weight: 500; }
.ka-kennzahl--vorfrist .ka-kennzahl__kopf { font-weight: 600; }

.ka-meintag { display: flex; gap: 20px; align-items: flex-start; }
.ka-meintag__haupt { flex: 1 1 61%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ka-meintag__seite { flex: 1 1 39%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1199.98px) {
  .ka-meintag { flex-direction: column; align-items: stretch; }
}

.ka-karte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); overflow: hidden; }
.ka-karte__kopf { display: flex; align-items: center; gap: 12px; padding: 13px 18px 11px; border-bottom: 1px solid var(--ka-mt-linie-kopf); }
.ka-karte__kopf--reiter { padding: 14px 18px 0; border-bottom: 0; }
.ka-karte__titel { margin: 0; flex-grow: 1; font-family: var(--ka-font-serif); font-size: 17px; font-weight: 700; color: var(--ka-ink); }
.ka-karte__titel--klein { font-size: var(--ka-fs-lg); }
.ka-karte__link { font-size: var(--ka-fs-sm); font-weight: 600; text-decoration: none; color: var(--ka-primary); white-space: nowrap; }
.ka-karte__link:hover, .ka-karte__link:focus { color: var(--ka-primary-h); }
.ka-karte__link--ruhig { font-weight: 400; font-size: 12px; color: var(--ka-ink-muted); }
.ka-karte__fuss { display: flex; align-items: center; gap: 9px; padding: 11px 18px; background: var(--ka-surface-muted); font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-karte__fuss .fas { color: var(--ka-frist-text); }

.ka-reiter { display: flex; gap: 18px; padding: 10px 18px 0; border-bottom: 1px solid var(--ka-mt-linie-kopf); flex-wrap: wrap; }
.ka-reiter__eintrag { padding: 0 0 9px; font-size: 13px; font-weight: 500; color: var(--ka-ink-muted); text-decoration: none; }
.ka-reiter__eintrag:hover, .ka-reiter__eintrag:focus { color: var(--ka-primary); text-decoration: none; }
.ka-reiter__eintrag--frist { color: var(--ka-frist-text); }
.ka-reiter__eintrag[aria-selected="true"] { font-weight: 600; color: var(--ka-primary); box-shadow: inset 0 -2px 0 var(--ka-primary); }
.ka-reiter__eintrag:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: 2px; }

.ka-fristzeile { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--ka-line-soft); }
.ka-fristzeile--offen { background: var(--ka-mt-zeile-offen); }
.ka-datumsblock {
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ka-ground); border: 1px solid var(--ka-line); color: var(--ka-mt-ink-knopf);
}
.ka-datumsblock span { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--ka-ink-muted); }
.ka-datumsblock strong { font-family: var(--ka-font-serif); font-size: 19px; font-weight: 700; line-height: 1; }
.ka-datumsblock--frist { background: var(--ka-frist); border-color: var(--ka-frist); color: #FFFFFF; }
.ka-datumsblock--frist span { color: #FFFFFF; }
.ka-fristzeile__text { flex-grow: 1; min-width: 0; }
.ka-fristzeile__titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.ka-fristzeile__titel a { color: var(--ka-ink); }
.ka-fristzeile__akte { font-size: var(--ka-fs-sm); color: var(--ka-ink-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-fristzeile__personen { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ka-fristzeile__aktionen { display: flex; gap: 7px; flex-shrink: 0; }
.ka-fristzeile__aktionen form { margin: 0; }
.ka-fristzeile__aktionen, .ka-postzeile__aktionen { align-items: center; }
.ka-fristzeile__aktionen .btn, .ka-postzeile__aktionen .btn { height: 34px; display: inline-flex; align-items: center; }
.ka-postzeile__aktionen .btn { height: 32px; }
@media (max-width: 991.98px) {
  .ka-fristzeile { flex-wrap: wrap; }
  .ka-fristzeile__aktionen { width: 100%; justify-content: flex-end; }
}

.ka-plakette {
  display: inline-block; font-size: 11px; font-weight: 600; border-radius: var(--ka-radius-pill); padding: 1px 8px; line-height: 1.5;
  border: 1px solid var(--ka-primary-b); background: var(--ka-primary-t); color: var(--ka-primary); white-space: nowrap;
}
.ka-plakette--frist { color: var(--ka-frist-text); background: var(--ka-frist-t); border-color: var(--ka-frist-b); }
.ka-plakette--offen { color: var(--ka-frist-text); background: var(--ka-surface); border-color: var(--ka-frist-b); }

.ka-kuerzel {
  width: 25px; height: 25px; border-radius: var(--ka-radius-pill); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; background: var(--ka-mt-kuerzel-t); color: var(--ka-primary);
}
.ka-kuerzel--geprueft { background: var(--ka-ok-t); color: var(--ka-ok); }
.ka-kuerzel--fehlt { background: transparent; border: 1.5px dashed var(--ka-mt-kuerzel-fehlt); color: var(--ka-frist); font-size: 13px; }

.ka-meintag-leer { padding: 16px 18px; font-size: 13px; color: var(--ka-ink-2); }
.ka-meintag-mehr { padding: 9px 18px; font-size: var(--ka-fs-sm); border-bottom: 1px solid var(--ka-line-soft); }

.ka-zuletztzeile { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--ka-mt-linie-zeile); color: var(--ka-ink); text-decoration: none; }
.ka-zuletztzeile:last-child { border-bottom: 0; }
.ka-zuletztzeile:hover, .ka-zuletztzeile:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-zuletztzeile__az { width: 132px; flex-shrink: 0; font-size: var(--ka-fs-sm); }
.ka-zuletztzeile__titel { flex-grow: 1; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-zuletztzeile__gebiet { width: 150px; flex-shrink: 0; font-size: 12px; color: var(--ka-ink-muted); text-align: right; }

.ka-kachelzeile { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--ka-mt-linie-zeile); font-size: 13px; }
.ka-kachelzeile:last-child { border-bottom: 0; }
.ka-kachelzeile__name { width: 170px; flex-shrink: 0; font-weight: 600; }
.ka-kachelzeile__text { flex-grow: 1; min-width: 0; color: var(--ka-ink-2); font-size: 12.5px; }

/* „Karten anpassen“ (Register 387): kleiner Schalter statt der Karte „Weitere Kacheln“, geöffnet die übrigen Kacheln und der Weg zu „Dashboard anpassen“. */
.ka-meintag-anpassen { margin-top: 4px; }
.ka-meintag-anpassen__schalter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--ka-fs-sm); color: var(--ka-ink-2); cursor: pointer; list-style: none; border: 1px solid var(--ka-line-soft); border-radius: var(--ka-radius-pill); }
.ka-meintag-anpassen__schalter::-webkit-details-marker { display: none; }
.ka-meintag-anpassen__schalter:hover, .ka-meintag-anpassen__schalter:focus { color: var(--ka-ink); background: var(--ka-surface-muted); }
.ka-meintag-anpassen__zahl { color: var(--ka-ink-muted); }
.ka-meintag-anpassen__inhalt { margin-top: 8px; border: 1px solid var(--ka-line-soft); border-radius: var(--ka-radius-lg); background: var(--ka-surface); }
.ka-meintag-anpassen__fuss { margin: 0; padding: 9px 18px; font-size: var(--ka-fs-sm); }

.ka-postzeile { padding: 12px 16px; border-bottom: 1px solid var(--ka-mt-linie-zeile); }
.ka-postzeile:last-child { border-bottom: 0; }
.ka-postzeile__kopf { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.ka-postzeile__zeit { font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-postzeile__betreff { font-size: 13px; font-weight: 600; line-height: 1.35; }
.ka-postzeile__vorschlag { font-size: 12px; color: var(--ka-ink-2); margin: 5px 0 9px; }
.ka-postzeile__grund { color: var(--ka-ink-muted); }
.ka-postzeile__aktionen { display: flex; gap: 7px; }
.ka-postzeile__aktionen form { margin: 0; }
.ka-kanal { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; border-radius: 4px; padding: 2px 6px; background: var(--ka-neutral-t); color: var(--ka-ink-2); }
.ka-kanal--bea, .ka-kanal--email { background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-kanal--fax { background: var(--ka-vorfrist-t); color: var(--ka-vorfrist-text); }
.ka-kanal--scan { background: var(--ka-ok-t); color: var(--ka-ok); }

.ka-aufgabe { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ka-mt-linie-zeile); }
.ka-aufgabe:last-child { border-bottom: 0; }
.ka-aufgabe form { margin: 0; }
.ka-abhaken {
  width: 16px; height: 16px; margin-top: 2px; padding: 0; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid var(--ka-mt-ink-knopf); border-radius: 3px; background: var(--ka-surface);
}
.ka-abhaken:hover, .ka-abhaken:focus { border-color: var(--ka-primary); background: var(--ka-primary-t); }
.ka-abhaken:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: 2px; }
.ka-aufgabe__titel { flex-grow: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ka-ink); }
.ka-aufgabe__faellig { font-size: 11.5px; color: var(--ka-ink-muted); white-space: nowrap; }
.ka-aufgabe__faellig--frist { color: var(--ka-frist-text); font-weight: 600; }

.ka-punktzeile { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ka-mt-linie-zeile); font-size: 13px; }
.ka-punktzeile:last-child { border-bottom: 0; }
.ka-punktzeile__symbol { color: var(--ka-primary); width: 16px; margin-top: 3px; text-align: center; }
.ka-punktzeile__text { flex-grow: 1; min-width: 0; }
.ka-punktzeile__hinweis { font-size: 12px; color: var(--ka-ink-muted); margin-top: 2px; }

.ka-meldungshinweis { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border: 1px dashed var(--ka-mt-linie-gestrichelt); border-radius: var(--ka-radius-lg); font-size: var(--ka-fs-sm); color: var(--ka-ink-2); }
.ka-meldungshinweis span { flex-grow: 1; }
.ka-meldungshinweis a { font-weight: 600; text-decoration: none; }

/* ===========================================================================
   Teil C27 - UX-OPTIK-MOBIL (Register 383): Inhalte der Telefon-Seiten (Heute, Akte, Bereich wählen, Mehr), Auftrag mit Vorschau,
   Prüfen am Tablet und die Seite „Pakete“ - nach den Entwürfen von Claude Design. Eigener Präfix .ka-mo-; Farben nur über Tokens.
   Tab-Leiste, Kopfzeile und Seitenleiste gehören dem Navigationspaket und stehen hier nicht.
   =========================================================================== */

/* --- Heute: Umschalter (Anker zu den Abschnitten) ---------------------------------------------------------------------- */
.ka-mo-segment {
  display: flex; margin: 0 0 14px; padding: 3px;
  background: var(--ka-ground); border: 1px solid var(--ka-neutral-b); border-radius: 9px;
}
.ka-mo-segment__teil {
  flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--ka-radius); color: var(--ka-ink-muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ka-mo-segment__teil:first-child { background: var(--ka-surface); color: var(--ka-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 25, 31, .08); }
.ka-mo-segment__teil:hover, .ka-mo-segment__teil:focus { color: var(--ka-ink); text-decoration: none; }
.ka-mo-segment__teil:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: -2px; }

/* --- Abschnittsüberschrift (Heute, Akte, Mehr): kleine Versalien wie im Entwurf ---------------------------------------- */
.ka-mo-abschnitt {
  margin: 18px 2px 8px; font-family: var(--ka-font-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ka-ink-muted);
}
.ka-mo-heute > .ka-mo-segment + .ka-mo-abschnitt { margin-top: 4px; }
.ka-mo-leer { font-size: 12.5px; color: var(--ka-ink-muted); margin: 0 2px 12px; }

/* --- Karte mit farbigem Kopf (Fristen, Termine, Post, Aufgaben) -------------------------------------------------------- */
.ka-mo-karte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.ka-mo-karte--frist { border-color: var(--ka-frist-b); }
.ka-mo-karte__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px;
  background: var(--ka-surface-muted); color: var(--ka-ink-2); font-size: 12px; font-weight: 700;
}
.ka-mo-karte__kopf > span + span { font-weight: 400; white-space: nowrap; }
.ka-mo-karte__kopf .fas, .ka-mo-karte__kopf .far { margin-right: 4px; }
.ka-mo-karte__kopf--frist { background: var(--ka-frist-t); color: var(--ka-frist-text); }
.ka-mo-karte__kopf--info { background: var(--ka-primary-t); color: var(--ka-primary); }
.ka-mo-karte__inhalt { padding: 13px 14px; }
.ka-mo-karte__titel { margin: 0; font-family: var(--ka-font-sans); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ka-ink); }
.ka-mo-karte__meta { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ka-ink-2); }
.ka-mo-karte__meta .ka-az { font-family: var(--ka-font-mono); color: var(--ka-primary); }
.ka-mo-karte__inhalt > .small { margin-top: 8px; }
.ka-mo-karte__aktionen { display: flex; gap: 9px; margin-top: 12px; }
.ka-mo-karte__aktionen > form { display: flex; flex-grow: 1; margin: 0; }
.ka-mo-karte__aktionen .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; border-radius: 8px; }
.ka-mo-karte__aktionen > form .btn, .ka-mo-karte__aktionen > .btn:first-child { flex-grow: 1; }
.ka-mo-karte__aktionen > .btn-outline-secondary:not(:first-child) { flex-grow: 0; padding: 0 16px; background: var(--ka-surface); color: var(--ka-ink); }

/* --- Gestrichelte Zusatzaktion am Ende der Seite ----------------------------------------------------------------------- */
.ka-mo-gestrichelt {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 4px 0 12px;
  border: 1.5px dashed var(--ka-line-strong); border-radius: var(--ka-radius-lg);
  color: var(--ka-primary); font-size: 13px; font-weight: 600; text-decoration: none;
}
.ka-mo-gestrichelt:hover, .ka-mo-gestrichelt:focus { background: var(--ka-surface); color: var(--ka-primary-h); text-decoration: none; }

/* --- Akte am Telefon: Kopfkarte und Schnellaktionen ------------------------------------------------------------------- */
.ka-mo-aktenkarte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; padding: 14px 16px 16px; margin-bottom: 12px; }
.ka-mo-aktenkarte__zeile { display: flex; align-items: center; gap: 8px; }
.ka-mo-aktenkarte__zeile .ka-az { font-family: var(--ka-font-mono); font-size: 13px; color: var(--ka-primary); }
.ka-mo-aktenkarte__titel { margin: 8px 0 0; font-family: var(--ka-font-serif); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ka-ink); overflow-wrap: anywhere; }
.ka-mo-aktenkarte__meta { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ka-ink-2); }
.ka-mo-schnell { display: flex; gap: 8px; margin-top: 14px; }
.ka-mo-schnell__knopf {
  flex: 1 1 0; min-width: 0; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--ka-surface); border: 1px solid var(--ka-line-strong); border-radius: 8px;
  color: var(--ka-ink); font-size: 11.5px; font-weight: 600; text-decoration: none;
}
.ka-mo-schnell__knopf .fas, .ka-mo-schnell__knopf .far { font-size: 17px; color: var(--ka-primary); }
.ka-mo-schnell__knopf:hover, .ka-mo-schnell__knopf:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-mo-frist { display: flex; align-items: center; gap: 12px; }
.ka-mo-frist__text { flex-grow: 1; min-width: 0; }
.ka-mo-frist .btn { min-height: 44px; font-weight: 600; border-radius: 8px; }

/* --- Gruppenliste mit Zustand und Pfeil (Akte, Bereich wählen, Mehr) -------------------------------------------------- */
.ka-mo-pille {
  flex-shrink: 0; padding: 2px 8px; border-radius: var(--ka-radius-pill); background: var(--ka-frist-t); color: var(--ka-frist-text);
  font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.ka-mo-pille--neutral { background: var(--ka-neutral-t); color: var(--ka-ink-2); }
.ka-mo-pfeil { flex-shrink: 0; font-size: 11px; color: var(--ka-ink-muted); }
.ka-mo-gruppen .ka-gruppenzeile { min-height: 64px; gap: 12px; }
.ka-mo-gruppen .ka-gruppenzeile__symbol { width: 40px; height: 40px; border-radius: 8px; font-size: 16px; }
.ka-mo-gruppen .ka-gruppenzeile__zahl { min-width: 12px; text-align: right; }
.ka-gruppenzeile .ka-mo-pfeil, .ka-bereichszeile .ka-mo-pfeil { margin-left: 2px; }
.ka-bereichszeile .ka-mo-pfeil { margin-left: auto; }
.ka-bereichszeile .ka-mo-pille + .ka-mo-pfeil { margin-left: 8px; }
.ka-bereichszeile .ka-mo-pille { margin-left: auto; }

/* --- Blatt von unten im Entwurfsstil (Bereich wählen; Erfassen nur über die Klasse .ka-blatt) --------------------------- */
.ka-blatt .modal-title, .ka-mo-blatt__kopf .modal-title { font-family: var(--ka-font-serif); font-size: 18px; font-weight: 700; }
.ka-mo-blatt__kopf { display: block; border-bottom: 0; padding: 8px 16px 4px; }
.ka-mo-blatt__unterzeile { margin: 2px 0 0; font-size: 12px; color: var(--ka-ink-muted); }
.ka-mo-blatt__unterzeile .ka-az { font-family: var(--ka-font-sans); color: inherit; }
.ka-mo-blatt__suche { position: relative; padding: 8px 16px 12px; border-bottom: 1px solid var(--ka-line); }
.ka-mo-blatt__suche .fas { position: absolute; left: 30px; top: 50%; transform: translateY(-60%); color: var(--ka-ink-muted); font-size: 14px; }
.ka-mo-blatt__suche .form-control { height: 46px; padding-left: 42px; background: var(--ka-surface-muted); border-color: var(--ka-line-strong); border-radius: 8px; }
.ka-mo-akkordeon .ka-bereich-gruppe { border-bottom: 1px solid var(--ka-line-soft); }
.ka-mo-akkordeon__kopf {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; cursor: pointer; list-style: none;
  color: var(--ka-ink); font-size: 15px;
}
.ka-mo-akkordeon__kopf::-webkit-details-marker { display: none; }
.ka-mo-akkordeon__kopf > .fas:first-child, .ka-mo-akkordeon__kopf > .far:first-child { width: 20px; text-align: center; color: var(--ka-primary); font-size: 16px; }
.ka-mo-akkordeon__name { flex-grow: 1; font-weight: 700; }
.ka-mo-akkordeon__kopf .ka-mo-pfeil { transform: rotate(-90deg); transition: transform .15s; }
.ka-bereich-gruppe[open] > .ka-mo-akkordeon__kopf { background: var(--ka-surface-muted); }
.ka-bereich-gruppe[open] > .ka-mo-akkordeon__kopf .ka-mo-pfeil { transform: none; }
.ka-mo-akkordeon__kopf:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: -2px; }
.ka-mo-akkordeon .ka-bereichszeile { padding-left: 48px; }
.ka-mo-akkordeon .ka-bereich-gruppe .ka-bereichszeile:last-child { border-bottom: 0; }
.ka-mo-blatt__fuss { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ka-surface); border-top: 1px solid var(--ka-line); }
.ka-mo-blatt__fuss .btn { min-height: 48px; font-weight: 600; border-radius: 8px; }
/* Blatt „Erfassen“ (Inhalt in templates/base.html, Navigationspaket): Pfeil am Zeilenende wie im Entwurf, rein über CSS. */
#kaErfassen .ka-gruppenzeile::after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; color: var(--ka-ink-muted); margin-left: auto; }
#kaErfassen .ka-gruppenzeile__symbol { width: 40px; height: 40px; border-radius: 8px; }

/* --- Seite „Mehr“ (und Überlagerung am Tablet): Suchkarte, Kacheln mit Zähler, Gruppen mit Symbol ---------------------- */
.ka-mo-suchkarte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; padding: 14px 14px 12px; }
.ka-mo-suchkarte__feld { position: relative; }
.ka-mo-suchkarte__feld .fas { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ka-ink-muted); font-size: 14px; }
.ka-mo-suchkarte__feld .form-control { height: 48px; padding-left: 42px; background: var(--ka-surface-muted); border-color: var(--ka-line-strong); border-radius: 8px; }
.ka-mo-suchkarte__hinweis { margin: 8px 2px 0; font-size: 12px; color: var(--ka-ink-muted); }
.ka-mo-kacheln-block:not(:has(.ka-mo-kachel)) { display: none; }

.ka-mo-kachel__zahl { font-size: 11px; font-weight: 700; color: var(--ka-frist-text); }
.ka-mo-mehr__gruppe { min-height: 56px; }
.ka-mo-mehr__symbol { width: 20px; text-align: center; font-size: 16px; color: var(--ka-primary); flex-shrink: 0; }
.ka-mo-mehr .ka-gruppenzeile__name { font-weight: 700; }
.ka-mo-mehr .ka-bereichszeile { padding-left: 46px; }
.ka-mo-mehr .ka-bereichszeile > .fas:first-child:not(.ka-mo-pfeil), .ka-mo-mehr .ka-bereichszeile > .far:first-child:not(.ka-mo-pfeil) { margin-left: -26px; width: 16px; color: var(--ka-primary); }
.ka-mo-mehr--konto .ka-bereichszeile::after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; color: var(--ka-ink-muted); margin-left: auto; }
.ka-mo-mehr .ka-bereichszeile:last-child, .ka-mo-mehr form:last-child .ka-bereichszeile { border-bottom: 0; }

/* --- Auftrag mit Vorschau (automation/_vorschau.html, Entwurf „Mobil-Auftrag“) ---------------------------------------- */
.ka-mo-auftrag { max-width: 46rem; }
.ka-mo-auftrag__karte { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.ka-mo-auftrag__karte--innen { padding: 14px 16px; }
.ka-mo-auftrag__kopf { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--ka-primary-t); color: var(--ka-primary); font-size: 12px; font-weight: 700; }
.ka-mo-auftrag__wortlaut { margin: 0; padding: 14px 16px; font-size: 17px; font-weight: 600; }
.ka-mo-auftrag__liste { margin: 0; padding-left: 1.1rem; font-size: 13px; line-height: 1.5; color: var(--ka-ink-2); }
.ka-mo-auftrag__liste li + li { margin-top: 4px; }
.ka-mo-auftrag .ka-auftrag__schritt { font-size: 13.5px; line-height: 1.45; }
.ka-mo-auftrag__haken {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  background: var(--ka-primary); color: var(--ka-surface); font-size: 11px;
}
.ka-mo-auftrag__grenze { margin-bottom: 12px; }
.ka-mo-auftrag__grenze .ka-mo-auftrag__liste { color: var(--ka-vorfrist-text); font-size: inherit; }
.ka-mo-auftrag__stufen { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ka-vorfrist-b); }
.ka-mo-auftrag__fuss { margin: 0 2px 6px; font-size: 12px; line-height: 1.5; color: var(--ka-ink-muted); }
.ka-mo-auftrag__knoepfe .btn { min-height: 48px; font-weight: 600; border-radius: 8px; }
@media (max-width: 767.98px) {
  .ka-mo-auftrag__knoepfe { display: flex; gap: 10px; }
  .ka-mo-auftrag__knoepfe .btn-primary { flex-grow: 1; }
  .ka-mo-auftrag__knoepfe .btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* --- Prüfen und freigeben (document_workflow/workflow_detail.html, Entwurf „Tablet-Pruefen“) ---------------------------- */
.ka-mo-pruefen { display: block; }
@media (min-width: 1100px) {
  .ka-mo-pruefen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
  .ka-mo-pruefen__seite { position: sticky; top: 16px; }
}
.ka-mo-pruefen__titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ka-mo-pruefen__titel { margin: 0; font-family: var(--ka-font-serif); font-size: 20px; font-weight: 700; color: var(--ka-ink); overflow-wrap: anywhere; }
.ka-mo-pruefen__unterzeile { margin: 4px 0 14px; font-size: 12.5px; color: var(--ka-ink-muted); }
.ka-mo-pruefen__unterzeile .ka-az { font-family: var(--ka-font-mono); color: var(--ka-primary); }
.ka-mo-pruefen__lesegrund { background: var(--ka-lesegrund); border: 1px solid var(--ka-lesegrund-rahmen); border-radius: var(--ka-radius-lg); padding: 20px; margin-bottom: 16px; }
.ka-mo-pruefen__blatt { max-width: 520px; margin: 0 auto; background: var(--ka-surface); box-shadow: var(--ka-shadow-pop); padding: 24px 26px; font-size: 13.5px; color: var(--ka-ink-2); }
.ka-mo-pruefen__blattkopf { margin: 0 0 14px; font-family: var(--ka-font-mono); font-size: 11.5px; color: var(--ka-ink-muted); }
.ka-mo-pruefen__seite { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); padding: 16px; }
.ka-mo-pruefen__seite .ka-mo-abschnitt:first-child { margin-top: 0; }
.ka-mo-anmerkungen { list-style: none; margin: 0 0 12px; padding: 0; }
.ka-mo-anmerkung { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ka-line-soft); }
.ka-mo-anmerkung__zeichen {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--ka-radius-pill); background: var(--ka-primary-t); color: var(--ka-primary);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.ka-mo-anmerkung__wer { display: block; font-size: 12.5px; font-weight: 600; color: var(--ka-ink); }
.ka-mo-anmerkung__text { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ka-ink-2); }
.ka-mo-pruefen__entscheidung { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ka-line); }
.ka-mo-pruefen__entscheidung .btn { min-height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 8px; }
.ka-mo-pruefen__entscheidung .btn + .btn { margin-top: 10px; }
.ka-mo-pruefen__hinweis { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ka-ink-muted); }
/* Tablet (768-1279 px, Paket UX-TABLET-PRUEFUNG, Register 397): eingebettete Vorschau, Anmerkung ohne Statuswechsel, „Freigeben und unterschreiben“.
   Desktop (ab 1280 px) und Telefon zeigen weiter nur die bisherigen Teile (.ka-mo-pruefen__nur-desktop). */
.ka-mo-pruefen__nur-tablet { display: none; }
@media (min-width: 768px) and (max-width: 1279.98px) {
  .ka-mo-pruefen__nur-tablet { display: block; }
  .ka-mo-pruefen__nur-desktop { display: none !important; }
  .ka-mo-pruefen__lesegrund { padding: 14px; }
  .ka-mo-pruefen__blatt { max-width: none; padding: 14px 16px; box-shadow: none; border: 1px solid var(--ka-lesegrund-rahmen); }
  .ka-mo-pruefen__seite { padding: 18px; }
  .ka-mo-pruefen__entscheidung .btn + .btn, .ka-mo-pruefen__entscheidung form + .btn { margin-top: 10px; }
  /* Entwurf „Tablet-Pruefen“: Dokument und Entscheidung füllen die Fläche - die Aktenspalte tritt hier zurück („Zur Akte“ im Kopf). */
  .container-fluid:has(> .ka-mo-pruefen) > .ka-bereichsspalte { display: none; }
  .container-fluid:has(> .ka-mo-pruefen) { padding-left: 20px; }
  .ka-mo-pruefen__zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 600; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Hochformat: Dokument, dann Entscheidung, dann der Verlauf (sonst stünde die Entscheidung unter dem ganzen Verlauf). */
  .ka-mo-pruefen { display: flex; flex-direction: column; }
  .ka-mo-pruefen__haupt { display: contents; }
  .ka-mo-pruefen__seite { order: 1; margin-bottom: 16px; }
  .ka-mo-pruefen__verlauf { order: 2; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ka-mo-pruefen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
  .ka-mo-pruefen__seite { position: sticky; top: 16px; }
}
.ka-mo-pruefen__einbettung { margin-bottom: 14px; }
.ka-mo-pruefen__rahmen {
  display: block; width: 100%; height: 60vh; min-height: 480px; border: 1px solid var(--ka-lesegrund-rahmen);
  background: var(--ka-surface); box-shadow: var(--ka-shadow-pop);
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .ka-mo-pruefen__rahmen { height: calc(100vh - 230px); } }
.ka-mo-pruefen__anmerkung-neu { margin: 0 0 4px; }
.ka-mo-pruefen__anmerkung-knopf {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px dashed var(--ka-line-strong); border-radius: 9px;
  background: var(--ka-surface); color: var(--ka-primary); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
}
.ka-mo-pruefen__anmerkung-knopf::-webkit-details-marker { display: none; }
.ka-mo-pruefen__anmerkung-neu[open] > .ka-mo-pruefen__anmerkung-knopf { margin-bottom: 10px; }
.ka-mo-pruefen__anmerkung-neu form .btn { min-height: 44px; margin-top: 10px; font-weight: 600; border-radius: 8px; }
.ka-mo-pruefen__feldname { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--ka-ink); }
.ka-mo-pruefen__bestaetigung { margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ka-ink-2); }
.ka-mo-pruefen__entscheidung .ka-mo-pruefen__hauptknopf { min-height: 52px; font-size: 15px; font-weight: 700; }
.ka-mo-pruefen__entscheidung form { margin: 0; }

/* --- Seite „Pakete“ (billing/subscription_list.html, Entwurf „Verwaltung-Module“) -------------------------------------- */
@media (min-width: 1200px) {
  .ka-mo-pakete { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .ka-mo-pakete__seite { position: sticky; top: 16px; }
}
.ka-mo-modulgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ka-mo-modul { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); padding: 14px 16px; }
.ka-mo-modul--gebucht { border-color: var(--ka-ok-b); }
.ka-mo-modul--gewaehlt { border-color: var(--ka-primary); box-shadow: 0 0 0 1px var(--ka-primary); }
.ka-mo-modul__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.ka-mo-modul__wahl { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.ka-mo-modul__wahl input { width: 20px; height: 20px; accent-color: var(--ka-primary); }
.ka-mo-modul__zustand { font-size: 12px; font-weight: 600; color: var(--ka-primary); }
.ka-mo-modul__preis { font-size: 12px; color: var(--ka-ink-muted); white-space: nowrap; }
.ka-mo-modul__name { margin: 6px 0 4px; font-family: var(--ka-font-sans); font-size: 15px; font-weight: 600; }
.ka-mo-modul__text { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--ka-ink-2); }
.ka-mo-bestellung { background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg); margin-bottom: 16px; overflow: hidden; }
form.ka-mo-bestellung { border-color: var(--ka-primary); }
.ka-mo-bestellung__kopf { padding: 14px 16px; background: var(--ka-surface-muted); border-bottom: 1px solid var(--ka-line); font-size: 12px; color: var(--ka-ink-muted); }
.ka-mo-bestellung__titel { margin: 0; font-family: var(--ka-font-serif); font-size: 16px; font-weight: 700; color: var(--ka-ink); }
.ka-mo-bestellung__inhalt { padding: 14px 16px; }
.ka-mo-bestellung__zeilen { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ka-mo-bestellung__zeilen li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.ka-mo-bestellung__zeilen:not(:empty) { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ka-line); }
.ka-mo-bestellung__summe { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0 0 6px; font-size: 13px; }
.ka-mo-bestellung__summe dt { font-weight: 400; color: var(--ka-ink-2); }
.ka-mo-bestellung__summe dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ka-mo-bestellung__brutto { margin-top: 6px; font-weight: 700 !important; color: var(--ka-ink) !important; }
dd.ka-mo-bestellung__brutto { font-family: var(--ka-font-serif); font-size: 20px; }
.ka-mo-bestellung .btn { min-height: 44px; font-weight: 600; }
.ka-mo-bestellung__hinweis { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ka-ink-muted); }
.ka-mo-mehr__symbol.ka-symbol { width: 20px; height: 20px; color: var(--ka-primary); }
.ka-mo-kachel__symbol.ka-symbol { width: 22px; height: 22px; color: var(--ka-primary); }
.ka-mo-gruppensymbol.ka-symbol { width: 20px; height: 20px; color: var(--ka-primary); }
.ka-mo-kachelgitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ka-mo-kachel {
  min-height: 86px; padding: 12px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--ka-surface); border: 1px solid var(--ka-line); border-radius: var(--ka-radius-lg);
  color: var(--ka-ink); text-decoration: none; font-size: 12.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto;
}
.ka-mo-kachel:hover, .ka-mo-kachel:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-mo-kachel:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: 2px; }