/* Kontorkraft-Web — Farben und Schrift wie kontorkraft.de (site/src/styles/tokens.css) */

@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("fonts/archivo-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("fonts/archivo-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("fonts/archivo-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("fonts/archivo-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("fonts/archivo-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --brand: hsl(212 62% 34%);
  --brand-ink: hsl(212 58% 26%);
  --brand-soft: hsl(212 46% 95%);
  --on-brand: #fff;
  --paper: hsl(40 33% 97.5%);
  --surface: #fff;
  --sunk: hsl(35 24% 95%);
  --ink: hsl(30 14% 12%);
  --muted: hsl(35 8% 38%);
  --rule: hsl(35 14% 84%);
  --good: hsl(158 72% 28%);
  --warn: hsl(33 80% 33%);
  --critical: hsl(14 74% 40%);
  --radius: 10px;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: hsl(212 72% 62%);
    --brand-ink: hsl(212 66% 78%);
    --brand-soft: hsl(212 34% 16%);
    --on-brand: hsl(35 20% 10%);
    --paper: hsl(35 12% 8%);
    --surface: hsl(35 10% 12%);
    --sunk: hsl(35 10% 15%);
    --ink: hsl(35 20% 92%);
    --muted: hsl(35 8% 64%);
    --rule: hsl(35 8% 24%);
    --good: hsl(158 50% 55%);
    --warn: hsl(33 80% 62%);
    --critical: hsl(14 80% 64%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--brand); }
button, input, textarea, select { font: inherit; color: inherit; }

/* --- Rahmen ---------------------------------------------------------------- */
.rahmen { display: flex; flex-direction: column; min-height: 100dvh; }
.kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 5;
}
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--ink); }
.marke img { width: 28px; height: 28px; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
/* `min-height: 44px` gilt hier für **alle** Ziele im Kopf, nicht nur am Handy (Nachbesserung 30.09.2026): Gemessen waren
   sie 30 × 40 px bei 345 px und 34 × 40 px bei 390 px — unter den 44 px, die dieses Stylesheet drei Regeln weiter unten
   für `.browser-leiste .knopf` selbst verlangt. Die Höhe kostet keine Breite, also gibt es keinen Grund, sie zu sparen;
   `inline-flex` braucht es dafür (bei `inline` wirkt `min-height` nicht) und zentriert das Symbol gleich mit. */
.nav a, .nav button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--muted);
  background: none; border: 0; cursor: pointer; font-weight: 600;
}
.nav a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); }
.nav a:hover, .nav button:hover { color: var(--ink); }
/* Abmelden steht **abgesetzt**, mit einer feinen Linie davor. Gemessen am 30.09.2026: Bei 345 px endete „Einstellungen"
   bei x=309 und „Abmelden" begann bei x=309 — null Pixel dazwischen, beide 30 px breit, beide grau. Der Daumen traf in
   der bequemsten Ecke des Telefons das Abmelden — die folgenlose Nachbarschaft der teuersten Tat im Kopf. Der Abstand
   kommt aus dem Platz, den `.nav { margin-left: auto }` ohnehin frei ließ. */
.nav form { display: flex; margin: 0 0 0 6px; padding-left: 6px; border-left: 1px solid var(--rule); }
.hinweis-entwicklung {
  background: var(--warn); color: #fff; text-align: center; font-size: 14px; padding: 4px 12px;
}
.inhalt { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 860px; margin: 0 auto; }
.nav .kurz { display: none; }
/* Tablett hochkant (701–960 px): Dort stand der Kopf der Chat-Seite zweizeilig — 108 statt 63 px. Marke und
   Browser-Schalter tragen dort ihr Wort, und seit KK-065 sind es fünf Menüpunkte statt vier; zusammen passt das nicht
   mehr nebeneinander. Gemessen am 30.09.2026: ohne den Punkt „Meldungen" ging die eine Zeile bis rund 710 px hinunter,
   mit ihm erst ab rund 890 px. Also weichen hier zuerst Marke und Schalter auf ihr Symbol aus und die Menüpunkte
   rücken enger; ihre Worte bleiben, bis die Abfrage fürs Handy darunter greift.
   Mit dem **sechsten** Menüpunkt „Meine Verbindungen" (07.10.2026) wanderte die Grenze von 901 auf 961 px und der
   Innenabstand von 8 auf 6 px: Gemessen wurde der Kopf bei 901 und 930 px zweizeilig (113 statt 65 px) und bei
   701–709 px ebenfalls — beides ist damit weg. Dieselbe Bewegung wie bei KK-065, nur eine Stufe weiter: Ein Punkt
   mehr heißt, die Worte von Marke und Schalter geben früher auf. */
@media (max-width: 960px) {
  .marke span { display: none; }
  .browser-schalter .lang { display: none; }
  .browser-schalter + .nav { margin-left: 4px; }
  .nav a, .nav button { padding: 8px 6px; }
}
/* Handy und kleines Tablett (bis 700 px): Der Kopf trägt seit dem 07.10.2026 sechs Dinge — Marke, Browser-Schalter,
   Chat, „Meldungen <Zahl>" und **vier** Symbole (Meine Verbindungen kam hinzu). Damit das Wort „Meldungen"
   **nicht umbricht** (nowrap weiter unten), muss der Rest enger stehen: knappere Innenabstände, kleinerer Abstand
   zwischen Schalter und Leiste, und „Chat" weicht wie „Übersicht" auf sein Symbol aus. Zuletzt gemessen am
   30.09.2026 bei 345 · 360 · 390 · 414 · 640 · 700 · 701 · 900 · 901 · 1280 px, hell und dunkel, auf „/" (mit
   Schalter), „/meldungen" und „/uebersicht/akten" — 80 Messpunkte: überall eine Zeile, Kopf 65 px, nichts
   verschiebt sich waagerecht, die Zahl bleibt sichtbar (auch dreistellig). */
@media (max-width: 700px) {
  .kopf { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .nav { flex-wrap: nowrap; gap: 0; }
  /* 5 statt 8 px Innenabstand (bis zum 07.10.2026 waren es 8): Die Symbolziele werden damit 30 statt 36 px breit — genau
     das Maß, das vorher erst unter 381 px galt. Den Pixel brauchte der sechste Punkt „Meine Verbindungen": Mit 36 px
     schob der Kopf bei 390 px die Seite waagerecht (403 statt 390 px), mit 30 px bleibt bei 390 px dieselbe Luft wie
     vorher (19 px). „Meldungen" steht hier als **Wort** und braucht allein 118 px (so soll es sein, KK-065); vom Rest
     gehen 11 px an den Abstand vor „Abmelden" und 14 px bleiben als Vorrat für eine **dreistellige** Zahl (gemessen:
     „999" braucht 14 px mehr als „3" — und bei 100 ungelesenen Meldungen steht „99+"). Die Höhe bleibt überall 44 px;
     gespart wird nur Breite. Wer hier noch einen Pixel holen will, muss vorher nachmessen. */
  .nav a, .nav button { padding: 8px 5px; font-size: 16px; }
  .nav .lang { display: none; }
  .nav .kurz { display: inline-block; vertical-align: middle; }
  .marke span { display: none; }
  .browser-leiste .knopf { min-height: 44px; padding: 8px 14px; }
}
/* Noch schmaler als ein gewöhnliches Handy (345 px, aufgeklappte Falter und alte Geräte): Dort ist der Platz wirklich
   knapp, und der Abstand vor „Abmelden" hat Vorrang vor der Breite der Symbole. Was hier hereinkommt, kommt aus dem
   Rand des Kopfes und aus dem Zeichen: 4 statt 6 px Rand, 24 statt 28 px Marke — und seit dem sechsten Menüpunkt
   (07.10.2026) 3 statt 5 px Innenabstand, also 26 px breite Symbolziele. Das ist die Stufe, die diese Abfrage schon
   immer meinte: Breite gibt nach, der Abstand vor „Abmelden" und die Höhe von 44 px nicht. Gemessen bei 345 px: eine
   Zeile, Kopf 65 px, 14 px Luft (mit „99+" 3 px) — bei 320 px läuft der Kopf waagerecht über, dort tat er das aber
   schon vorher (324 px bei fünf Punkten, 330 px bei sechs). */
@media (max-width: 380px) {
  .kopf { gap: 3px; padding-left: 4px; padding-right: 4px; }
  .nav a, .nav button { padding: 8px 3px; }
  .nav form { margin-left: 5px; padding-left: 5px; }
  .marke img { width: 24px; height: 24px; }
}

/* --- Formulare und Knöpfe ----------------------------------------------------- */
.karte {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px; margin: 24px 16px;
}
.karte h1 { margin: 0 0 8px; font-size: 26px; font-weight: 700; }
.karte p { color: var(--muted); margin: 0 0 20px; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=email], select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper);
}
input:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  background: var(--brand); color: var(--on-brand); font-weight: 700; cursor: pointer; text-decoration: none;
}
.knopf:disabled { opacity: .55; cursor: default; }
.knopf.zweit { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.knopf.gut { background: var(--good); color: #fff; }
.knopf.breit { width: 100%; margin-top: 22px; }
.fehler { color: var(--critical); font-weight: 600; }

/* --- Chat ------------------------------------------------------------------- */
.verlauf { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.leer { color: var(--muted); text-align: center; margin: auto; max-width: 30em; }
.leer h2 { color: var(--ink); font-size: 22px; margin-bottom: 6px; }
.nachricht { max-width: 85%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.nachricht.nutzer { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.nachricht.nutzer a { color: inherit; }
.nachricht.kontorkraft { align-self: flex-start; background: var(--surface); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.nachricht.hinweis { align-self: center; background: var(--sunk); color: var(--ink); max-width: 95%; text-align: center; border-radius: 10px; }
.nachricht.hinweis.fehler-hinweis { color: var(--critical); }
.nachricht .autor { display: block; font-size: 13px; opacity: .75; margin-bottom: 2px; }
.nachricht .aktion { margin-top: 10px; }
/* Markdown in Antworten der Kontorkraft (KK-001, markdown.js). Die Blase hat `pre-wrap` für schlichten Text —
   hier gelten Absätze. Breites (Tabelle, Code) scrollt in sich, nie die Seite. */
.nachricht .text.md { white-space: normal; min-width: 0; }
.nachricht.kontorkraft { min-width: 0; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-tabelle { margin: 0 0 10px; }
.md h3 { font-size: 18px; font-weight: 700; margin: 16px 0 6px; line-height: 1.3; }
.md h4 { font-size: 17px; font-weight: 700; margin: 14px 0 4px; line-height: 1.3; }
.md ul, .md ol { padding-left: 1.35em; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0 4px; }
.md li > p { margin: 0 0 4px; }
.md code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: var(--sunk); border-radius: 5px; padding: 1px 5px; }
.md pre { background: var(--sunk); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; line-height: 1.45; }
.md pre code { background: none; padding: 0; font-size: 14.5px; }
.md blockquote { border-left: 3px solid var(--rule); padding: 2px 0 2px 12px; color: var(--muted); }
.md blockquote > :last-child { margin-bottom: 0; }
.md hr { border: 0; border-top: 1px solid var(--rule); margin: 14px 0; }
.md .md-tabelle { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.md table { border-collapse: collapse; font-size: 15.5px; }
.md th, .md td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.md th { font-weight: 700; white-space: nowrap; border-bottom-width: 2px; }
.md td { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.md td.md-lang { white-space: normal; min-width: 16em; }
.md tr:last-child td { border-bottom: 0; }
.md .md-rechts { text-align: right; }
.md .md-mitte { text-align: center; }
.taetigkeit { align-self: flex-start; color: var(--muted); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.punkte::after { content: "…"; animation: puls 1.2s infinite; }
@keyframes puls { 50% { opacity: .2; } }
.eingabe {
  display: flex; gap: 8px; padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--rule);
  position: sticky; bottom: 0;
}
.eingabe textarea {
  flex: 1; resize: none; min-height: 48px; max-height: 160px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--paper);
}
/* Stoppen (KK-059): Solange die Kontorkraft arbeitet, ist der Senden-Knopf der Stopp-Knopf — kein zusätzlicher Knopf in
   der Leiste. Die Farbe macht unmissverständlich, dass er etwas anderes tut als „Senden“; alarmierend ist er nicht. */
#senden.stopp { background: var(--warn); color: #fff; border-color: transparent; }

/* --- Browser ------------------------------------------------------------------ */
/* Zwei Plätze (KK-055 Teil B): Reiter „Arbeit“ | „Admin“ über der Leiste — nur für Administratoren in der Seite */
.browser-plaetze { display: flex; gap: 4px; padding: 8px 12px 0; background: var(--surface); }
.browser-platz {
  padding: 6px 16px; border: 1px solid var(--rule); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: var(--paper); color: var(--muted); font-weight: 600; cursor: pointer; min-height: 36px;
}
.browser-platz:hover { color: var(--ink); }
.browser-platz[aria-selected="true"] { color: var(--brand-ink); background: var(--brand-soft); border-color: transparent; }
.browser-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.zustand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-right: auto; }
.zustand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.zustand[data-z="mensch"]::before { background: var(--good); }
.zustand[data-z="agent"]::before { background: var(--brand); }
/* Der Rahmen hält, was über dem Bild schwebt — die Fläche selbst scrollt beim vergrößerten Zusehen (KK-017) */
.browser-rahmen { flex: 1; min-height: 0; min-width: 0; position: relative; display: flex; }
.browser-flaeche { flex: 1; position: relative; background: #333; min-height: 0; min-width: 0; overflow: hidden; }
.browser-flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Zusehen am Handy: Berührungen gehören der Fläche (wischen, zwei Finger, Doppeltipp), nicht noVNC — dort ist ohnehin
   nur Ansehen. Vergrößert hat der iframe feste Maße (browser.js) und die Fläche scrollt. */
.browser-flaeche.nur-bild { touch-action: pan-x pan-y; }
.browser-flaeche.nur-bild iframe { pointer-events: none; }
.browser-flaeche.vergroessert { overflow: auto; overscroll-behavior: contain; }
.browser-flaeche.vergroessert iframe { right: auto; bottom: auto; }
.lupe {
  position: absolute; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px 8px 12px;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / .28); background: rgb(24 24 24 / .82); color: #fff;
  font-weight: 600; font-size: 15px; cursor: pointer;
}
.lupe[aria-pressed="true"] .lupe-plus { display: none; }
/* Zwischenablage (KK-002): kleiner Hinweis über dem Bild — nur wenn der eigene Browser nicht von selbst mitspielt */
.zwischenablage {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 24px);
  padding: 7px 7px 7px 14px; border-radius: 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: 0 8px 28px rgb(0 0 0 / .35); font-size: 15px; line-height: 1.3;
}
.zwischenablage input { width: 12em; min-width: 0; flex: 1; padding: 8px 10px; font-size: 16px; }
.zwischenablage .symbol { flex: none; width: 34px; height: 34px; }
.browser-flaeche .aus {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: #eee; text-align: center; padding: 24px;
}
.browser-flaeche .aus p { max-width: 30em; margin: 0; }

/* --- Einstellungen ------------------------------------------------------------ */
/* Eine Seite je Bereich, mit Reitern wie die Übersicht (Rahmen .inhalt.breit); darunter eine Karte */
.einstellungen > .karte { margin: 18px 0 0; }
.karte h2 { margin: 22px 0 8px; font-size: 19px; font-weight: 700; }
.karte > h2:first-child { margin-top: 0; }
.karte .fliess { color: var(--ink); margin: 0 0 10px; line-height: 1.55; }
.karte .fliess.dezent, .dezent { color: var(--muted); }
.karte small { display: block; font-weight: 400; margin-top: 6px; line-height: 1.45; }
/* Der überschriebene Wortlaut unter „Wie es steht" (KK-065): dezent, der Knopf daneben — am Handy darunter */
.stand-vorher { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0 4px; }
.stand-vorher .fliess { flex: 1 1 240px; margin: 0; font-size: 15px; }
.stand-vorher form { margin: 0; }
.formular { margin-top: 10px; }
.formular button { margin-top: 18px; }
.knopf.klein { min-height: 36px; padding: 6px 12px; font-size: 15px; }
.meldung { padding: 10px 12px; border-radius: 8px; background: var(--sunk); margin: 0 0 16px; }
.meldung.fehler { color: var(--critical); }
.liste { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
.liste th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.liste td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.liste td.rechts { text-align: right; }
.liste form { margin: 0; }
@media (max-width: 640px) {
  .liste thead { display: none; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
  .liste tr { border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .liste td { border: 0; padding: 2px 0; }
  .liste td.rechts { text-align: left; margin-top: 8px; }
}
.marke-gut { color: var(--good); font-weight: 600; }

/* --- Chat: nur der Verlauf scrollt, Eingabe bleibt stehen (KK-006); Pfeil zu den neuesten (KK-007) ---- */
.rahmen.fest { height: 100dvh; min-height: 0; }
.rahmen.fest .inhalt { min-height: 0; }
.inhalt.chat { position: relative; }
.inhalt.chat .verlauf { min-height: 0; overscroll-behavior: contain; }
.nach-unten {
  position: absolute; right: 18px; bottom: 124px; z-index: 5;          /* über Eingabe und Statuszeile */
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.nach-unten.neu::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--brand); border: 2px solid var(--surface);
}

/* --- Arbeitsplatz: Chat und Browser in einer Ansicht (KK-005) ---------------------------------------
   data-ansicht = chat | beides | browser. Breit stehen beide nebeneinander, schmal zeigt „beides" nur den
   Browser — nebeneinander wäre am Handy nichts lesbar. */
.arbeitsplatz { flex: 1; min-height: 0; display: flex; }
.arbeitsplatz > .inhalt.chat { min-width: 0; }
.browser-bereich { display: none; flex: 1; min-width: 0; flex-direction: column; background: var(--surface); }
.trenner { display: none; flex: 0 0 9px; cursor: col-resize; position: relative; background: var(--paper); touch-action: none; }
.trenner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--rule); }
.trenner:hover::before, .trenner:focus-visible::before, .zieht .trenner::before { left: 3px; width: 3px; background: var(--brand); }
.trenner:focus-visible { outline: none; }
.zieht { user-select: none; cursor: col-resize; }
.zieht iframe { pointer-events: none; }
[data-ansicht="beides"] .browser-bereich, [data-ansicht="browser"] .browser-bereich { display: flex; }
[data-ansicht="browser"] > .inhalt.chat { display: none; }
@media (min-width: 1000px) {
  [data-ansicht="beides"] > .inhalt.chat {
    flex: 0 0 var(--chat-breite, clamp(360px, 34vw, 500px)); max-width: none; margin: 0;
  }
  [data-ansicht="beides"] > .trenner { display: block; }
}
@media (max-width: 999.98px) {
  [data-ansicht="beides"] > .inhalt.chat { display: none; }
}
.browser-bereich .browser-leiste { padding: 8px 12px; gap: 6px 8px; min-height: 53px; }
/* Der Zustand nimmt den Platz, der bleibt, und bricht notfalls um — die Knöpfe rutschen erst darunter, wenn es eng wird */
.browser-bereich .zustand { flex: 1 1 0; min-width: 11em; margin-right: 0; line-height: 1.25; }
.browser-bereich .zustand::before { flex: none; }
@media (max-width: 640px) { .browser-bereich .zustand { font-size: 15px; min-width: 0; flex-basis: calc(100% - 50px); } }

/* Schalter im Kopf: blendet den Browser ein und aus, der Punkt zeigt, ob gerade jemand darin arbeitet */
.browser-schalter {
  margin-left: auto; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--muted); font-weight: 600; cursor: pointer;
}
.browser-schalter:hover { color: var(--ink); }
.browser-schalter[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-soft); border-color: transparent; }
.browser-schalter::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--muted); display: none;
}
.browser-schalter[data-z="agent"]::after { display: block; background: var(--brand); animation: puls 1.6s infinite; }
.browser-schalter[data-z="mensch"]::after { display: block; background: var(--good); }
.browser-schalter + .nav { margin-left: 10px; }
@media (max-width: 700px) {
  /* Das Wort am Schalter ist schon ab 900 px weg (Abfrage oben bei der Hauptnavigation) */
  .browser-schalter { padding: 7px 9px; }
  .browser-schalter + .nav { margin-left: 2px; }
}

/* Kleine Knöpfe nur mit Symbol (Bereich groß, ausblenden, zurück zum Chat) */
.symbol {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.symbol:hover { color: var(--ink); background: var(--sunk); }
.symbol[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-soft); }
.symbol.neu::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--surface);
}
@media (min-width: 1000px) { .symbol.nur-schmal { display: none; } }
@media (max-width: 999.98px) { .symbol.nur-breit { display: none; } }

/* --- Übersicht: Meldungen, Aufgaben, Zeitpläne, Merkliste, Katalog ------------------------------------ */
.inhalt.breit { max-width: 860px; width: 100%; margin: 0 auto; padding: 0 16px 48px; display: block; }
.nav a { position: relative; }
/* Die Zahl am Menüpunkt „Meldungen" (KK-065, vorher ein Punkt an „Übersicht"): `.zahl` unten ist auf ein Flex-Kind
   im Reiter zugeschnitten — im Kopf steht sie in einem gewöhnlichen Link und braucht deshalb `inline-block`, sonst
   greifen Mindestbreite und Zeilenhöhe nicht. `[hidden]` sticht das mit `display: none !important` (ganz oben). */
.nav .zahl { display: inline-block; margin-left: 7px; vertical-align: 1px; }
/* Beide hier, nicht oben bei den anderen Kopf-Abfragen: Dort stünden sie **vor** der Grundregel und verlören gegen
   sie (gleiche Spezifität, spätere Zeile gewinnt) — genau die Falle, die weiter unten in dieser Datei steht. */
@media (max-width: 700px) { .nav .zahl { margin-left: 5px; } }
@media (max-width: 380px) { .nav .zahl { margin-left: 4px; } }
/* „Meldungen" bleibt **eine** Zeile. Ohne das brach der Anker am Handy um (345–390 px: 64 statt 40 px hoch, der Kopf
   85 statt 63 px) — und bei 345 px schob er die Seite zusätzlich waagerecht. Der Umbruch war die einzige Art, wie die
   Leiste bis dahin „passte"; Platz schafft die Abfrage oben, nicht der Umbruch. */
#nav-meldungen { white-space: nowrap; }
/* „Meine Verbindungen" (KK-051) steht seit dem 07.10.2026 auch im Kopf (CR: „Da hätte ich sie ursprünglich erwartet").
   Zwei Wörter sind das Längste dort — 185 px gegen 44 px für das Symbol. Neben fünf weiteren Zielen tragen sie die
   Zeile erst ab 1100 px; darunter steht das Symbol, und der barrierefreie Name bleibt derselbe Wortlaut
   (`aria-label` in basis.html). Es ist dieselbe Ausweiche wie bei „Chat" und „Übersicht", nur früher — gemessen wurde
   der Kopf mit dem Wort bei 701–1024 px zweizeilig (113 statt 65 px), ab 1100 px einzeilig mit 25 px Luft (mit
   „99+"; mit „3" sind es 39 px). */
#nav-verbindungen .lang { display: none; }
#nav-verbindungen .kurz { display: inline-block; vertical-align: middle; }
@media (min-width: 1100px) { #nav-verbindungen .lang { display: inline; } #nav-verbindungen .kurz { display: none; } }
/* Neun Reiter unter Einstellungen (seit KK-049) passen am PC nicht mehr in 860 px: Die Leiste scrollt waagerecht (nie die Seite),
   ein Pfeil mit Verlauf am Rand zeigt, dass es weitergeht (reiter.html); der aktuelle Reiter rückt in die Mitte */
.reiter-leiste { position: relative; }
.reiter-pfeil {
  position: absolute; top: 14px; bottom: 11px; width: 52px; display: flex; align-items: center; padding: 0 12px; border: 0;
  font: inherit; font-size: 24px; font-weight: 700; line-height: 1; color: var(--brand); cursor: pointer;
}
.reiter-pfeil.links { left: -16px; justify-content: flex-start; background: linear-gradient(to right, var(--paper) 55%, transparent); }
.reiter-pfeil.rechts { right: -16px; justify-content: flex-end; background: linear-gradient(to left, var(--paper) 55%, transparent); }
.reiter-pfeil:hover { color: var(--brand-ink); }
.reiter {
  display: flex; gap: 0; margin: 14px -16px 0; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: 16px;
}
.reiter a:hover { color: var(--ink); }
.reiter a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); }
/* Seit KK-065 trägt nur noch der Menüpunkt „Meldungen" eine Zahl (`.nav .zahl` weiter oben) — die Reiterleiste hat
   keine mehr. Die Grundregel bleibt hier stehen, damit eine spätere Zahl am Reiter wieder gleich aussieht. */
.zahl {
  min-width: 21px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--on-brand);
  font-size: 13px; line-height: 21px; text-align: center; font-weight: 700;
}
.zahl.hilfe { background: var(--critical); color: #fff; }
.bereich-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 14px; }
.bereich-kopf p { margin: 0; flex: 1 1 16em; }
.bereich-kopf .rechts { display: flex; gap: 8px; }
.bereich-kopf form { margin: 0; }
.inhalt.breit > .meldung { margin: 16px 0 0; }
.meldung.gut { color: var(--good); }

.eintrag {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 10px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  color: inherit; text-decoration: none;
}
a.eintrag:hover { border-color: var(--brand); }
.eintrag .haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eintrag strong { font-weight: 700; overflow-wrap: anywhere; }
.eintrag .text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.eintrag .text.zusatz { margin-top: 1.5em; }     /* Zusatz nur für Vorgesetzte (Tagesbericht: Verbrauch) — abgesetzt wie ein Absatz im Text */
.eintrag .text.kurz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); white-space: normal; }
.eintrag .dezent { font-size: 14.5px; }
.eintrag.gelesen { background: transparent; }
.eintrag.gelesen strong { font-weight: 600; }
.eintrag.meldung-hilfe { border-color: var(--critical); }
.eintrag.laufend { border-color: var(--brand); }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.aktionen form { margin: 0; }
.art { flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--muted); }
.art.erfolg { background: var(--good); }
.art.warnung { background: var(--warn); }
.art.hilfe { background: var(--critical); }
.art.info { background: var(--brand); }

.abzeichen {
  flex: none; display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: var(--sunk); color: var(--muted); white-space: nowrap; margin-top: 2px;
}
.abzeichen.erledigt { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.abzeichen.laeuft { background: var(--brand-soft); color: var(--brand-ink); }
.abzeichen.hilfe, .abzeichen.prio-1 { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
.abzeichen.fehler, .abzeichen.prio-2 { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.abzeichen.laeuft::after { content: " …"; animation: puls 1.2s infinite; }
/* Von der Kontorkraft vorgeschlagen (KK-016): Zeitplan-Vorschlag, Eintrag auf der Merkliste — dezent, keine Warnfarbe */
.abzeichen.vorschlag { background: var(--brand-soft); color: var(--brand-ink); }
.eintrag.vorschlag { border-style: dashed; border-color: var(--brand); }

/* Akten (KK-061): Der Baum wird eingerückt, nicht in Spalten gelegt — bei 390 px bleibt so eine Spalte und nichts
   scrollt waagerecht. Der Pfad bricht um, statt überzulaufen. */
.eintrag.akte-ebene-2 { margin-left: 16px; }
.eintrag.akte-ebene-3 { margin-left: 32px; }
.akte-pfad { overflow-wrap: anywhere; }
.akte-pfad a { color: inherit; }
.akte-kosten { margin: 18px 0 0; }
h2.akte-abschnitt, h2.abschnitt { font-size: 19px; font-weight: 700; margin: 26px 0 10px; }
/* Was die Kontorkraft weiß (KK-062): Abschnittsüberschrift mit Abzeichen „gepflegt" / „errechnet" rechts daneben */
h2.abschnitt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
h2.abschnitt .abzeichen { font-size: 13px; }
/* Der echte Vorspann, wortgleich: feste Schrittweite, damit Einrückungen und Leerzeilen stehen, wie sie stehen */
.karte .fliess.vorspann { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.5; }
details.notiz-aendern { margin: -4px 0 12px; }
details.notiz-aendern summary { font-size: 14.5px; }
details.notiz-aendern .gemerkt-neu { margin-top: 8px; }

details.neu { margin: 0 0 16px; }
details.neu > summary { list-style: none; cursor: pointer; }
details.neu > summary::-webkit-details-marker { display: none; }
details.neu[open] > summary { background: var(--surface); color: var(--ink); border-color: var(--rule); }
details.neu .formular {
  margin-top: 10px; padding: 4px 18px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); resize: vertical; }
label textarea, label input, label select { margin-top: 6px; font-weight: 500; }
fieldset.tage { border: 0; padding: 0; margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
fieldset.tage legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.tag { margin: 0; cursor: pointer; }
.tag input { position: absolute; opacity: 0; pointer-events: none; }
.tag span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--muted); font-weight: 600;
}
.tag input:checked + span { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.tag input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

.leer-bereich { text-align: center; color: var(--muted); padding: 48px 12px; max-width: 32em; margin: 0 auto; }
.leer-bereich h2 { color: var(--ink); font-size: 21px; margin: 0 0 6px; }
.leer-bereich p { margin: 0; }
.zurueck { text-decoration: none; font-weight: 600; }
.karte.flach { margin: 0; }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kopfzeile h1 { margin: 0; flex: 1 1 12em; font-size: 23px; overflow-wrap: anywhere; }
.karte .ergebnis { white-space: pre-wrap; overflow-wrap: anywhere; }
.karte .meldung { margin: 14px 0 0; }
.schritte { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--rule); }
.schritte li { position: relative; padding: 3px 0 3px 16px; color: var(--muted); font-size: 15.5px; overflow-wrap: anywhere; }
.schritte li.text { color: var(--ink); white-space: pre-wrap; padding-top: 8px; padding-bottom: 8px; }
.schritte li::before { content: ""; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.schritte li.text::before { background: var(--brand); top: 17px; }
/* Vermerk (KK-065): was die Kontorkraft dabei dauerhaft festgehalten hat — an der Stelle des Ablaufs, an der es geschah.
   Eine Spur, keine Warnung: dieselbe Größe wie die Tätigkeiten, nur kursiv und mit offenem statt gefülltem Punkt. */
.schritte li.vermerk { color: var(--ink); font-style: italic; }
.schritte li.vermerk::before { background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand); }   /* die Liste steht in .karte */
.schritte li.jetzt { color: var(--brand-ink); }
details.mehr summary { cursor: pointer; color: var(--brand); font-weight: 600; width: fit-content; }
details.mehr .text { margin-top: 8px; }
.beispiele { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.beispiele li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; background: var(--sunk); border-radius: 8px; }
.beispiele li span { flex: 1 1 18em; font-style: italic; }
@media (max-width: 640px) {
  .reiter { gap: 0; }
  .reiter a { padding: 8px 11px; font-size: 16px; }
  .eintrag { flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; }
  .eintrag > .abzeichen { margin-top: 0; }
  .eintrag > .haupt { flex-basis: 100%; }
  .eintrag > .art + .haupt { flex-basis: 0; }
  .inhalt.breit { padding-bottom: 32px; }
}

/* --- Post und Auftraggeber ---------------------------------------------------------------------------- */
.abzeichen.kanal { min-width: 62px; text-align: center; }
.eintrag .folge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; font-size: 14.5px; }
.eintrag .folge .abzeichen { margin-top: 0; }
.kennung { display: flex; align-items: center; gap: 4px; margin: 0; }
.kennung .symbol { width: 30px; height: 30px; font-size: 14px; }
.zuordnen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin: 0 0 8px; background: var(--sunk); border-radius: 8px; }
.zuordnen > span { flex: 1 1 16em; }
.zuordnen select { width: auto; min-width: 11em; padding: 8px 10px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.schalter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.schalter-zeile p { flex: 1 1 18em; margin: 0; }
/* Tagesbericht (KK-018): Uhrzeit, darunter „per E-Mail", darunter Speichern — drei ruhige Zeilen, am PC wie am Handy */
.tagesbericht { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 4px; }
.tagesbericht label { display: flex; align-items: center; gap: 8px; margin: 0; }
.tagesbericht label.per-mail { flex: 1 1 100%; font-weight: 400; overflow-wrap: anywhere; }
.tagesbericht label input { margin: 0; }
.tagesbericht input[type=time] { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); font: inherit; }
.tagesbericht input[type=checkbox] { flex: none; width: 20px; height: 20px; accent-color: var(--brand); }

/* --- Personen (KK-020): eine Zeile je Person, Seltenes hinter „Ändern" ---------------------------------- */
.person { padding: 12px 14px; margin: 0 0 8px; background: var(--sunk); border-radius: 8px; }
.person .kopfzeile { gap: 6px 10px; }
.person .abzeichen { margin: 0 0 0 auto; background: var(--surface); }
.person .abzeichen.erledigt { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.person .abzeichen.fehler { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); }
.person > .dezent { display: block; font-size: 15px; overflow-wrap: anywhere; }
.person .kennung { font-size: 15px; }
.person details.mehr { margin-top: 6px; }
.person details.mehr small { margin-top: 10px; }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
/* Persönliche Verbindungen (KK-051): je Anbieter eine Karte wie bei Personen; Rechte als kurze Liste, Portal-Schritte aufklappbar */
.verbindungen .karte > h2:first-child { margin-top: 0; }
.person .darf, .person .schritte { margin: 4px 0 6px; padding-left: 1.3em; line-height: 1.5; }
.person .schritte li { margin: 0 0 6px; }
.person .fliess { margin: 8px 0 4px; }
details.anleitung-portal { margin-top: 12px; }
.zeile input, .zeile select { flex: 1 1 13em; width: auto; min-width: 0; padding: 8px 10px; }
.weitergeben { padding: 14px 16px; margin: 0 0 16px; border: 1px solid var(--good); border-radius: 8px; }

/* --- Zugangsdaten (KK-041): Zeilen wie bei den Personen, im Formular eine Wahl per Knopf ------------------------------ */
.zugang .kopfzeile > span:not(.abzeichen) { color: var(--muted); overflow-wrap: anywhere; }
.zugang code { font-size: 15px; }
fieldset.wahl { border: 0; padding: 0; margin: 14px 0 0; }
fieldset.wahl legend { font-weight: 600; padding: 0; margin: 0 0 2px; }
label.waehlen { display: flex; align-items: center; gap: 10px; font-weight: 500; margin: 8px 0 0; cursor: pointer; }
label.waehlen input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
label input[type=file] { display: block; margin: 6px 0 8px; font-size: 15px; max-width: 100%; }
/* Fähigkeiten-Werkstatt (KK-046): Zugang wartet auf Bestätigung, nur lesen; je System ein Block mit Steckbrief und Fähigkeiten;
   die Seite einer Fähigkeit mit Anleitung (Markdown), Prüfläufen und Freigabe */
.person .abzeichen + .abzeichen { margin-left: 0; }
.zugang .bestaetigen { margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--critical); border-radius: 8px; background: var(--surface); }
.zugang .bestaetigen .fliess { margin: 0; }
.zugang .bestaetigen form { margin: 8px 0 0; }
.adressen { margin: 6px 0 0; padding-left: 1.2em; overflow-wrap: anywhere; }
.schalter-zeile.nur-lesen { margin: 8px 0 0; }
.schalter-zeile.nur-lesen small { flex: 1 1 18em; margin: 0; }
.system { margin: 22px 0 0; }
.system > .kopfzeile h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.system details.steckbrief { margin: 0 0 10px; }
a.person.faehigkeit { display: block; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
a.person.faehigkeit:hover { border-color: var(--brand); }
a.person.faehigkeit strong { color: var(--brand-ink); overflow-wrap: anywhere; }
.anleitung { margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper);
  overflow-wrap: anywhere; min-width: 0; line-height: 1.5; }
.anleitung.roh { white-space: pre-wrap; }
.karte .anleitung p, .anleitung li { color: var(--ink); }
.karte .anleitung p { margin: 0 0 10px; }
.faehigkeit-seite > details.steckbrief { margin-top: 18px; }
.zurueck-zeile { margin: 16px 0 0; }
.faehigkeit-seite .kopf-angaben { margin: 6px 0 12px; font-size: 15px; overflow-wrap: anywhere; }
.faehigkeit-seite .meldung a { font-weight: 600; }
.pruefungen { margin: 12px 0 0; }
.pruefung .kopfzeile > .dezent { font-size: 14.5px; }
.karte .pruefung p { margin: 6px 0; }
.karte .pruefung .ergebnis { margin: 8px 0 6px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.karte .pruefung .ergebnis.md { white-space: normal; }          /* gerendert von markdown.js (KK-046 Teil 3) */
.karte .pruefung .ergebnis.md p { margin: 0 0 6px; }
.pruefung > .dezent { display: block; font-size: 14.5px; }
/* Prüfläufe zu früheren Fassungen der Anleitung (0.16.3): getrennt, aufklappbar, gedämpft — Abzeichen ohne Farbe */
.pruefung.alt { opacity: .75; background: transparent; border: 1px dashed var(--rule); }
details.fruehere { margin: 14px 0 0; }
details.fruehere > .fliess { margin: 8px 0 10px; }
.pruefung details.gefragt { margin: 6px 0 0; }
.pruefung details.gefragt summary { font-size: 14.5px; }
.pruefung ol.fragen { margin: 6px 0 2px; padding-left: 1.4em; overflow-wrap: anywhere; }
.pruefung ol.fragen li { margin: 2px 0; }
.katalog-abschnitt { margin: 22px 0 10px; font-size: 19px; font-weight: 700; }
.bereich-kopf + .katalog-abschnitt { margin-top: 4px; }
.eintrag.eingerichtet { border-color: var(--brand); }

/* Sicherung (KK-042) und Werkszustand (KK-043) */
.sicherung .kopfzeile > span.dezent { overflow-wrap: anywhere; }
#sicherung-hoch .formular button { margin-top: 8px; }
.knopf.gefahr { background: var(--critical); color: #fff; }
.weitergeben .fliess { margin: 6px 0 0; }
.weitergeben input { font-size: 15px; }

/* Durchsicht eines Stapel-Imports (KK-089): je Domäne eine Gruppe, die als Ganzes angekreuzt werden kann. Der Rahmen hat
   keinen eigenen Rand — die Karte darum trägt ihn schon; es zählt nur, dass die Gruppen auseinanderfallen. */
.durchsicht { border-color: var(--rule); }
.durchsicht fieldset.domaene { border: 0; border-top: 1px solid var(--rule); margin: 14px 0 0; padding: 10px 0 0; min-width: 0; }
.durchsicht fieldset.domaene > legend { padding: 0; width: 100%; }
.durchsicht fieldset.domaene label.waehlen { margin-left: 26px; font-weight: 400; }
.durchsicht fieldset.domaene > legend label.waehlen { margin: 0; font-weight: 600; }
.durchsicht fieldset.domaene .dezent { font-weight: 400; overflow-wrap: anywhere; }

/* --- Arbeitsweise (KK-013): drei Stufen zur Wahl, eine gesperrte bleibt sichtbar und grau ---------------------- */
fieldset.stufen { border: 0; padding: 0; margin: 0 0 12px; }
fieldset.stufen + .knopf { margin-bottom: 16px; }
.stufe { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 8px; background: var(--sunk); border-radius: 8px; cursor: pointer; }
.stufe input { margin: 4px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--brand); }
.stufe > span { flex: 1 1 auto; min-width: 0; }
.stufe small { color: var(--muted); }
.stufe:has(input:checked) { background: var(--brand-soft); }
.stufe.gesperrt { cursor: default; }
.stufe.gesperrt strong, .stufe.gesperrt small { color: var(--muted); opacity: .75; }
.stufe.gesperrt small.hinweis-gesperrt { opacity: 1; font-weight: 600; }

/* --- Chat: Kopieren an der Antwort (KK-012) ------------------------------------------------------------------
   Ruhig: am PC erst bei Berührung mit der Maus oder Tastatur sichtbar, am Handy (kein Hover) dezent immer. */
.nachricht.kontorkraft { position: relative; }
.kopieren {
  border: 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: opacity .12s;
  /* Mit Maus: liegt über der unteren rechten Ecke und braucht keinen Platz — unsichtbar belegte er unter jeder
     Antwort einen leeren Streifen (Bildschirmfoto 18.09.2026) */
  position: absolute; right: 6px; bottom: 5px; padding: 2px 8px; border-radius: 6px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule); opacity: 0;
}
.kopieren:hover { color: var(--ink); }
.kopieren.erledigt { color: var(--good); opacity: 1; }
.nachricht.kontorkraft:hover .kopieren, .kopieren:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 640px) {
  /* Ohne Maus (Handy): dezent immer sichtbar, als eigene Zeile unter dem Text — dort verdeckt er nichts. Zusätzlich
     nach Breite: Ob ein Gerät „hover: none" meldet, ließ sich in der Emulation nicht prüfen — unsichtbar wäre der
     Knopf am Handy nicht zu finden. */
  .kopieren { position: static; display: block; margin: 6px 0 -2px auto; padding: 2px 0; background: none; box-shadow: none; opacity: .75; }
}

/* --- Chat: Statuszeile mit dem einen Menü (KK-008, KK-009) -----------------------------------------------------
   Feste Höhe, eine Zeile — trifft der Stand ein, springt nichts. Die Eingabe gibt ihren unteren Rand an sie ab. */
.inhalt.chat .eingabe { padding-bottom: 6px; border-bottom: 0; }
.stand-zeile {
  position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 16px;
  box-sizing: content-box; padding-bottom: max(4px, env(safe-area-inset-bottom));
  background: var(--surface); color: var(--muted); font-size: 13.5px;
}
.stand-text {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit;
  font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stand-text:hover { color: var(--ink); }
.stand-zeile.warnung #stand-fuell { color: var(--warn); font-weight: 700; }
.stand-zeile .symbol { width: 32px; height: 28px; flex: none; }
.chat-menue, .stand-einzelheiten {
  position: absolute; bottom: calc(100% + 4px); z-index: 8; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.chat-menue { right: 8px; min-width: 232px; padding: 6px; display: flex; flex-direction: column; }
.chat-menue button {
  padding: 11px 12px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.chat-menue button:hover, .chat-menue button:focus-visible { background: var(--sunk); outline: none; }
.chat-menue button:disabled { color: var(--muted); opacity: .6; cursor: default; background: none; }
.chat-menue hr { width: 100%; border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }
.stand-einzelheiten { left: 12px; right: 12px; padding: 12px 14px; color: var(--ink); font-size: 14.5px; }
.stand-einzelheiten p { margin: 0 0 6px; }
.stand-einzelheiten p:last-child { margin-bottom: 0; }

/* --- Chat: mehrere Gespräche (KK-010) — eine ruhige Zeile über dem Verlauf, die Liste klappt darüber auf ----------- */
.gespraeche-leiste {
  position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 10px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.gespraech-wahl {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-align: left;
}
.gespraech-wahl:hover, .gespraech-wahl[aria-expanded="true"] { background: var(--sunk); }
.gespraech-wahl .titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gespraech-wahl svg { flex: none; color: var(--muted); }
.gespraech-wahl .punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.gespraeche-liste {
  position: absolute; top: calc(100% + 4px); left: 8px; right: 8px; z-index: 9; max-height: min(60dvh, 520px); overflow-y: auto;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); overscroll-behavior: contain;
}
@media (min-width: 641px) { .gespraeche-liste { right: auto; width: min(460px, calc(100% - 16px)); } }
.gespraech-eintrag {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0; border-radius: 7px; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.gespraech-eintrag:hover, .gespraech-eintrag:focus-visible { background: var(--sunk); outline: none; }
.gespraech-eintrag .titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gespraech-eintrag .dezent { font-size: 14px; }
/* Akte (KK-061): in der Gesprächsliste der Name, über der Auswahl „In welcher Akte?" eine ruhige Zeile */
.gespraech-eintrag .akte-name { font-weight: 600; }
.gespraeche-liste .listen-kopf { padding: 8px 12px 4px; font-size: 14px; }
.gespraech-eintrag .dezent .abzeichen { margin: 0 2px 0 0; vertical-align: middle; font-size: 12.5px; padding: 1px 8px; }
.gespraech-wahl .abzeichen { margin-left: 8px; vertical-align: middle; }
/* Akte des Gesprächs (KK-061): ein ruhiger Zusatz neben dem Titel — bei 390 px gekürzt, nie umbrechend */
.gespraech-wahl .akte-marke {
  flex: 0 1 auto; min-width: 0; max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-weight: 600; font-size: 14.5px;
}
.gespraech-wahl .akte-marke::before { content: "· "; }
/* Einrichtungsgespräch (KK-053): sichtbar gekennzeichnet — in der Liste und in der Zeile über dem Verlauf */
.abzeichen.einrichtung { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); font-weight: 700; }
.gespraech-wahl .abzeichen.einrichtung { flex: none; }
.aktionen .einrichten, td .einrichten { display: inline-block; }
.gespraech-eintrag.aktuell { background: var(--brand-soft); }
.gespraech-eintrag.aktuell .titel { color: var(--brand-ink); }
.gespraech-eintrag.ungelesen .titel { font-weight: 800; }
.gespraech-eintrag.ungelesen .titel::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--brand); vertical-align: middle;
}
.gespraech-eintrag .arbeitet { color: var(--brand-ink); }

/* --- Fenster: umbenennen, entfernen, Hinweis vor dem Kopieren -------------------------------------------------------- */
.fenster {
  width: min(720px, calc(100vw - 24px)); max-height: min(86dvh, 900px); padding: 0; border: 1px solid var(--rule);
  border-radius: 14px; background: var(--paper); color: var(--ink); overflow: hidden;
}
.fenster[open] { display: flex; flex-direction: column; }
.fenster::backdrop { background: rgba(0, 0, 0, .45); }
.fenster-kopf { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 16px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.fenster-kopf h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenster-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.fenster-inhalt > p { margin: 0 0 14px; }
.fenster-inhalt textarea { margin-top: 10px; font-size: 14px; }
.fenster-fuss { padding: 8px 16px; font-size: 14px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--rule); text-align: center; }
/* Notizen und errechnete Einträge als schlichte Liste (KK-016, seit KK-062 auf der Seite „Was die Kontorkraft
   weiß"): je Zeile ein Satz, daneben „Vergessen", darunter das Formular zum Ändern bzw. Anlegen */
.gemerkt-titel { font-size: 16px; font-weight: 700; margin: 18px 0 8px; }
.eintrag.gemerkt { align-items: center; padding: 10px 12px; margin-bottom: 8px; }
.eintrag.gemerkt .haupt { overflow-wrap: anywhere; }
.gemerkt-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 8px; }
.gemerkt-neu input[type="text"], .gemerkt-neu select { flex: 1 1 16em; width: auto; min-width: 0; }
.gemerkt-neu .gemerkt-alle { flex: 1 1 100%; font-size: 15px; font-weight: 400; margin: 0; }
.gemerkt-neu .gemerkt-alle input { margin: 0 6px 0 0; vertical-align: middle; }
.nachricht .aktion.dezent { font-size: 14.5px; }
/* Mitteilungen aufs Handy (KK-015): eine ruhige Zeile über den Meldungen, der Rest im selben Fenster wie das Gemerkte */
.mitteilungen-zeile { margin: -6px 0 14px; font-size: 14.5px; line-height: 1.5; }
.mitteilungen-zeile strong { font-weight: 600; }
.text-knopf { padding: 0; border: 0; background: none; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.text-knopf:hover { color: var(--brand-ink); }
.fenster.schmal { width: min(520px, calc(100vw - 24px)); }
.fenster.schmal .aktionen { margin: 0 0 14px; }
.fenster.schmal .meldung { margin: 0 0 4px; }
.eintrag.frueher { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.eintrag.frueher:hover { border-color: var(--brand); }
.verlauf.nur-lesen { padding: 0; overflow: visible; }

/* --- Dateien im Chat (KK-018): Büroklammer, Vorgemerktes über dem Feld, Abzeichen an der Nachricht ------------------
   Ruhig: ein Symbol links vom Feld; die Leiste mit vorgemerkten Dateien gibt es nur, solange etwas vorgemerkt ist. */
.eingabe { flex-wrap: wrap; }
.eingabe .klammer { width: 44px; height: 48px; flex: none; align-self: flex-end; margin: 0 -4px 0 -8px; }
.anhaenge { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.datei-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nachricht .text[hidden] + .datei-marken { margin-top: 0; }
.datei-marke {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px;
  background: var(--sunk); color: var(--ink); font-size: 14.5px; line-height: 1.5; white-space: nowrap;
}
.datei-marke svg { flex: none; opacity: .7; }
.datei-marke .name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.datei-marke .groesse { color: var(--muted); flex: none; }
.datei-marke.laedt { opacity: .7; }
.datei-marke.fehler .groesse { color: var(--critical); font-weight: 600; }
.datei-marke .weg { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 0 0 2px; }
.datei-marke .weg:hover { color: var(--ink); }
.nachricht.nutzer .datei-marke { background: color-mix(in srgb, var(--on-brand) 18%, transparent); color: inherit; }
.nachricht.nutzer .datei-marke .groesse { color: inherit; opacity: .8; }
.inhalt.chat.datei-ziel::after {
  content: "Datei hier ablegen"; position: absolute; inset: 8px; z-index: 9; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--brand); border-radius: 14px; background: color-mix(in srgb, var(--brand-soft) 88%, transparent);
  color: var(--brand-ink); font-weight: 700; pointer-events: none;
}
/* Karte zu einer Datei (KK-004): in die Ablage gelegt oder von der Kontorkraft zurückgegeben */
.nachricht.datei-karte .aktion { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nachricht.datei-karte .datei-marke { background: var(--surface); }

/* --- Ablage (KK-004): Suche, Liste, Vorschau ------------------------------------------------------------------------- */
.ablage-suche { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ablage-suche input[type=search] { flex: 1 1 14em; min-width: 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.ablage-suche select { width: auto; flex: 0 1 12em; padding: 8px 10px; background: var(--surface); }
.ablage-titel { color: inherit; text-decoration: none; }
.ablage-titel:hover { color: var(--brand); }
.belegt { font-size: 14.5px; white-space: nowrap; }
.ablage-vorschau { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 18px; min-width: 0; }
.ablage-vorschau iframe { width: 100%; height: min(78dvh, 900px); border: 1px solid var(--rule); border-radius: 8px; background: var(--sunk); }
.ablage-vorschau img, .ablage-vorschau video { display: block; max-width: 100%; max-height: 78dvh; margin: 0 auto; border-radius: 8px; }
.ablage-vorschau audio { width: 100%; }
.ablage-vorschau pre {
  margin: 0; padding: 12px 14px; background: var(--sunk); border-radius: 8px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.5;
}
.ablage-vorschau .md { overflow-wrap: anywhere; }
.nur-schmal-vorschau { display: none; }
@media (max-width: 640px) {
  .nur-breit-vorschau { display: none; }
  .nur-schmal-vorschau { display: block; }
  .ablage-suche select { flex: 1 1 8em; }
}

/* --- Drucker (KK-049): Zeilen wie bei den Personen; „Im Netz gefunden“ mit Namensfeld und Aufnehmen -------------------------- */
.drucker-eintrag .drucker-hinweis { display: block; color: var(--warn); font-size: 15px; }
ul.gefunden { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul.gefunden li { padding: 12px 14px; background: var(--sunk); border-radius: 8px; }
ul.gefunden li > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
ul.gefunden li .dezent { font-size: 15px; }
ul.gefunden .zeile { margin-top: 8px; }
.drucker-erneut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 8px; }
.drucker-erneut small { flex: 1 1 16em; }
#drucker-neu-suchen { margin: 10px 0 16px; }
.drucker-suche { margin: 0; }

/* --- Mitschnitt beim Vormachen (KK-075/KK-076) ---------------------------------------------- */
/* Der Balken steht fest über Chat und Browser, nicht nur im Browserbereich: Solange der Debug-Port für die Aufnahme
   offen ist, muss das in **jeder** Ansicht zu sehen sein — auch wenn am Handy gerade nur der Chat sichtbar ist
   (Entwurf §8.2: „sichtbar, befristet und vom Menschen selbst ausgelöst"). Seine Lage misst mitschnitt.js am Kopf. */
.mitschnitt-balken {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 9px 16px; background: #7f1d1d; color: #fff; font-size: 15px; line-height: 1.3;
  box-shadow: 0 6px 18px rgb(0 0 0 / .3);
}
.mitschnitt-balken .sage { flex: 1 1 14em; min-width: 0; font-weight: 600; }
.mitschnitt-balken .punkt {
  flex: none; width: 11px; height: 11px; border-radius: 999px; background: #fecaca;
  animation: kk-pocht 1.6s ease-in-out infinite;
}
.mitschnitt-balken.aussetzt { background: #44403c; }
.mitschnitt-balken.aussetzt .punkt { animation: none; background: #a8a29e; }
.mitschnitt-balken .knopf { min-height: 36px; padding: 6px 12px; font-size: 15px; }
.mitschnitt-balken .knopf.zweit { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
@keyframes kk-pocht { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mitschnitt-balken .punkt { animation: none; } }

/* Die Seite, auf der die Mitschrift gelesen wird */
.mitschrift {
  margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mitschnitt-bilder { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.mitschnitt-bilder a { display: block; width: 220px; text-decoration: none; }
.mitschnitt-bilder img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; }
.mitschnitt-bilder span { display: block; margin-top: 4px; font-size: 13px; }
/* Titel und System vor dem Vormachen — zwei schmale Felder, am Handy untereinander */
.vormachen-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.vormachen-formular label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 14em; font-size: 15px; }
.vormachen-formular input { padding: 8px 10px; font-size: 16px; }
.vormachen-formular button { margin-top: 0; }
.mitschnitt-hinweis p:last-child { margin-bottom: 0; }