/* ===========================================================================
   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 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);
}

/* 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; }

/* Vier-Augen-Anzeige: notiert von / geprueft von */
.ka-avatar {
  width: 25px; height: 25px;
  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-avatar--geprueft { background: var(--ka-ok-t); color: var(--ka-ok); }
.ka-avatar--offen {
  background: transparent;
  border: 1.5px dashed #C9857E;
  color: var(--ka-frist);
}

/* 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: 240px;
  background: var(--ka-nav);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ka-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  color: #FFFFFF;
  font-family: var(--ka-font-serif);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.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; }
@media (max-width: 575.98px) {
  .ka-timer { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .ka-timer__text { flex-grow: 1; }
}

/* Suchfeld — ersetzt den frueheren Menuepunkt "Suche" */
.ka-suche {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ka-nav-hover);
  border: 1px solid var(--ka-nav-line);
  border-radius: var(--ka-radius);
  padding: 0 10px;
  height: 38px;
}
.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: var(--ka-fs-sm);
}
.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; gap: 2px; }
.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: 9px 10px;
  border-radius: var(--ka-radius);
  color: var(--ka-nav-text);
  font-size: var(--ka-fs-md);
  font-weight: 500;
  text-decoration: none;
  /* Auch als <button> (Hilfe zu dieser Seite) ohne die Standarddarstellung des Browsers: sonst helle Flaeche mit hellem Text. */
  background: transparent;
  border: 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 {
  background: var(--ka-nav-active);
  color: #FFFFFF;
  font-weight: 600;
}
.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__count {
  margin-left: auto;
  background: var(--ka-nav-count);
  color: var(--ka-nav-count-text);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--ka-radius-pill);
}
.ka-sidebar__count--frist { background: var(--ka-frist); color: #FFFFFF; }

.ka-sidebar__fuss { margin-top: auto; }
.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: 240px;
    overflow-y: auto;
    z-index: 1030;
  }
  .ka-hat-seitenleiste .ka-inhalt { margin-left: 240px; }
}

/* ===========================================================================
   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); }

/* --- Kacheln der Seite "Mehr" -------------------------------------------- */
.ka-kachelgitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }
.ka-kachel {
  min-height: 86px; padding: .75rem .625rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4375rem;
  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: .781rem; font-weight: 600; line-height: 1.2;
  overflow-wrap: anywhere; hyphens: auto;
}
.ka-kachel:hover, .ka-kachel:focus { background: var(--ka-surface-muted); color: var(--ka-ink); text-decoration: none; }
.ka-kachel .fas, .ka-kachel .far { font-size: 1.3rem; color: var(--ka-primary); }

/* --- 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); }

/* --- Tablet: Dokument pruefen und unterschreiben ------------------------- */
.ka-pruefen { display: flex; min-height: 0; }
.ka-pruefen__dokument { flex-grow: 1; min-width: 0; background: var(--ka-lesegrund); display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem; overflow: auto; }
.ka-pruefen__blatt { background: var(--ka-surface); border: 1px solid var(--ka-lesegrund-rahmen); box-shadow: 0 2px 10px rgba(20, 25, 31, .10); }
.ka-pruefen__spalte { width: 374px; flex-shrink: 0; background: var(--ka-surface); border-left: 1px solid var(--ka-line); display: flex; flex-direction: column; gap: .875rem; padding: 1.125rem; }
.ka-pruefen__entscheidung { margin-top: auto; border-top: 1px solid var(--ka-line); padding-top: .875rem; }
.ka-werkzeugleiste { display: flex; align-items: center; gap: .5625rem; min-height: 56px; padding: 0 1.125rem; background: var(--ka-surface); border-top: 1px solid var(--ka-line); }

/* --- Desktop: gruppierte Seitenleiste und Bereichsspalte ----------------- */
.ka-sidebar__gruppe {
  padding: .875rem 1rem .3125rem;
  font-size: .656rem; 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); }

/* --- Sprungsuche (Strg K) ------------------------------------------------ */
.ka-sprung .modal-dialog { max-width: 680px; margin-top: 8.25rem; }
.ka-sprung .modal-content { border: 0; border-radius: 14px; box-shadow: 0 18px 48px rgba(12, 22, 32, .32); }
.ka-sprung__feld { display: flex; align-items: center; gap: .75rem; height: 62px; padding: 0 1.125rem; border-bottom: 1px solid var(--ka-line); }
.ka-sprung__feld input { flex-grow: 1; border: 0; background: transparent; font-size: 1.0625rem; color: var(--ka-ink); }
.ka-sprung__feld input:focus { outline: none; }
.ka-sprung__gruppe {
  padding: .6875rem 1.125rem .3125rem; background: var(--ka-surface-muted); border-top: 1px solid var(--ka-line-soft);
  font-size: .656rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ka-ink-muted);
}
.ka-sprung__treffer {
  display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: 0 1.125rem;
  background: var(--ka-surface); color: var(--ka-ink); text-decoration: none; border-left: 3px solid transparent;
}
.ka-sprung__treffer:hover, .ka-sprung__treffer:focus, .ka-sprung__treffer[aria-selected="true"] {
  background: var(--ka-primary-t); border-left-color: var(--ka-primary); color: var(--ka-ink); text-decoration: none;
}
.ka-sprung__ort { font-size: .719rem; color: var(--ka-ink-muted); }
.ka-sprung__fuss {
  display: flex; align-items: center; gap: .875rem; padding: .6875rem 1.125rem;
  background: var(--ka-surface-muted); border-top: 1px solid var(--ka-line); font-size: .719rem; color: var(--ka-ink-muted);
}
.ka-taste { font-family: var(--ka-font-mono); font-size: .656rem; border: 1px solid var(--ka-line); border-radius: 4px; padding: .0625rem .3125rem; }

/* --- Auftrag: gesprochen oder getippt, immer erst als Vorschlag ---------- */
.ka-auftrag__wortlaut { font-family: var(--ka-font-serif); font-size: .969rem; line-height: 1.55; color: var(--ka-ink-2); }
.ka-auftrag__schritte { list-style: none; margin: 0; padding: 0; }
.ka-auftrag__schritt { display: flex; gap: .6875rem; padding: .75rem .875rem; border-bottom: 1px solid var(--ka-line-soft); align-items: flex-start; }
.ka-auftrag__schritt:last-child { border-bottom: 0; }
.ka-auftrag__schritt input[type="checkbox"] { width: 20px; height: 20px; margin: .125rem 0 0; flex-shrink: 0; accent-color: var(--ka-primary); }
/* 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) {
  .container-fluid:has(> .ka-bereichsspalte) {
    position: relative;
    padding-left: 252px;
  }
  .container-fluid:has(> .ka-bereichsspalte) > .ka-bereichsspalte {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .container-fluid:has(> .ka-bereichsspalte) { padding-left: 236px; }
  .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; }
.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; }
}