/* Cockpit: Seitenleiste, Kachelraster und Kachelinhalte.
 *
 * HELL, im Gegensatz zum Rest der Website. Nur Navigationsleiste und Fusszeile bleiben
 * dunkel, beide bringen ihre Flaeche selbst mit (.navbar und .footer in style.css).
 *
 * Die hellen Farben sind KEINE Erfindung, sondern der Hausfarbsatz aus dem
 * Foliendesign (IT-LV_Folien): Titel 0F0F1E, Kartentitel 242438, Fliesstext 505050,
 * gedaempft 7878A0, Kartenrand E4E4EE, helle Flaeche EEF0F5, Akzente 2B75FF und 9809FF.
 * Damit sieht das Cockpit aus wie unsere Unterlagen, nicht wie eine dritte Welt.
 *
 * Alle hellen Werte haengen an .ck. Das Kachelraster erbt sie von dort, damit derselbe
 * Baustein spaeter auch auf einer dunklen Seite verwendet werden kann.
 *
 * Aufbau: links eine feste Leiste mit Bereichen, Vorgaengen und Gespraechen, rechts der
 * Inhalt. Unter 900 px wird die Leiste zur Schublade, die ueber den Inhalt faehrt.
 */

/* ── Helle Insel in einer dunklen Website ───────────────────────────── */

/* --ck-kopf  = Unterkante der Navigationsleiste beim Seitenanfang (Streifen plus Leiste)
   --ck-klebe = reine Hoehe der Leiste, wenn sie beim Scrollen oben klebt
   Beide setzt JavaScript nach dem Laden auf :root, weil navbar.js die Leiste erst
   baut und ihre Hoehe von der Fensterbreite abhaengt. Die Werte hier sind nur
   Rueckfallwerte fuer den Moment davor. */
:root { --ck-kopf: 105px; --ck-klebe: 72px; }

/* Die Farbwerte stehen bewusst in einer eigenen Regel, die .ck UND .ck-blatt
   nennt. Ein Blatt haengt direkt am <body>, also ausserhalb von .ck. Stuenden
   die Variablen nur auf .ck, waeren sie im Blatt leer, und jede Regel, die sie
   benutzt, fiele lautlos aus. Genau das war am 23.09.2026 der Fall: 48 Felder
   in den Blaettern hatten keinen Rahmen, weil
       border: 1px solid var(--ck-rand)
   mit leerer Variable ungueltig wird und der Browser auf "kein Rahmen"
   zurueckfaellt. Die Regel stand da und tat nichts.

   Die Layouteigenschaften bleiben unten bei .ck allein: Ein Blatt ist ein
   Ueberzug, kein Flexkasten. */
.ck,
.ck-blatt {
  --ck-flaeche:   #ffffff;   /* Karten und Seitenleiste */
  --ck-grund:     #f7f7fa;   /* Flaeche dahinter */
  --ck-rand:      #e6e6ee;
  --ck-linie:     #e9e9f0;
  --ck-titel:     #18181f;
  --ck-kartentitel: #242438;
  --ck-text:      #3f3f50;
  --ck-gedaempft: #5e5e74;
  --ck-blau:      #2b75ff;
  /* Dieselbe Hausfarbe eine Stufe dunkler, ausschliesslich fuer Text.
     #2b75ff liegt auf Weiss bei 4,12:1 und reicht damit fuer Raender und
     Fokusringe (3:1), nicht aber fuer Fliesstext (4,5:1). #1b5fd6 kommt auf
     5,75:1 und ist daneben kaum zu unterscheiden. */
  --ck-blau-text: #1b5fd6;
  --ck-violett:   #6B1FD1;
}

.ck {
  --ck-leiste: 264px;

  display: flex;
  min-height: calc(100vh - var(--ck-kopf));
  align-items: stretch;
  background: var(--ck-grund);
  color: var(--ck-text);
}

/* Die Seitenleiste ist nur einen Bildschirm hoch und bleibt beim Scrollen stehen.
   Darunter waere die linke Spalte grau, was wie ein abgeschnittener Kasten aussieht.
   Ein Pseudoelement malt die weisse Spalte samt Trennlinie ueber die volle Hoehe.
   Bewusst KEIN Verlauf als Hintergrund: Ein Verlauf kann seine Breite nicht weich
   animieren, die Kante wuerde beim Einklappen springen, waehrend die Leiste gleitet. */
.ck { position: relative; }
.ck::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--ck-leiste);
  background: var(--ck-flaeche);
  border-right: 1px solid var(--ck-rand);
  transition: width .2s ease;
  pointer-events: none;
}
@media (max-width: 900px) { .ck::before { display: none; } }

/* Die Navigationsleiste ist zu 92 Prozent deckend mit Weichzeichner dahinter. Ueber
   dunklem Inhalt faellt das nicht auf, ueber hellem wuerde sie beim Scrollen aufhellen
   und fleckig wirken. Auf dieser Seite deshalb voll deckend. */
.navbar {
  background: #14142c;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ck-leiste {
  width: var(--ck-leiste);
  flex: 0 0 var(--ck-leiste);
  border-right: 1px solid var(--ck-rand);
  background: var(--ck-flaeche);
  padding: 20px 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: var(--ck-klebe);
  height: calc(100vh - var(--ck-klebe));
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: width .2s ease, flex-basis .2s ease, padding .2s ease;
}

.ck-haupt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 26px 30px 70px;
}

@media (max-width: 1100px) { .ck-haupt { padding: 22px 20px 60px; } }

@media (max-width: 900px) {
  .ck-leiste {
    position: fixed;
    left: 0;
    top: var(--ck-kopf);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(15, 15, 30, .22);
  }
  .ck-leiste.offen { transform: translateX(0); }
  .ck-haupt { padding: 18px 16px 60px; }
}

/* Abdunkeln hinter der Schublade */
.ck-schatten {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(15, 15, 30, .38);
  z-index: 55;
}
.ck-schatten.offen { display: block; }
@media (min-width: 901px) { .ck-schatten { display: none !important; } }

.ck-leiste-knopf {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 8px;
  color: var(--ck-kartentitel);
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .ck-leiste-knopf { display: inline-flex; } }

/* ── Seitenleiste: Kopfzeile und Umschalter ─────────────────────────── */

.ck-leiste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}
/* Der Name des Hauses steht unter der Marke, nicht daneben: Er ist laenger
   als "Vergabe-Cockpit" und wuerde sonst die Zeile sprengen. Bei
   eingeklappter Leiste faellt er weg, dort ist kein Platz fuer ihn. */
.ck-haus { display: block; margin-top: 2px; font-size: 12px; font-style: normal;
  font-weight: 500; color: var(--ck-gedaempft); letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ck-marke {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ck-titel);
  padding-left: 8px;
}
.ck-klapp {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; border-radius: 8px;
  background: none;
  color: var(--ck-gedaempft);
  cursor: pointer;
  transition: background .13s, color .13s;
}
.ck-klapp:hover { background: rgba(107, 31, 209, .08); color: var(--ck-titel); }

/* ── Seitenleiste: Inhalte ──────────────────────────────────────────── */

.ck-neu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  background: var(--gradient);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}
.ck-neu:hover { filter: brightness(1.08); }

.ck-gruppe > h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ck-gedaempft);
  margin: 0 0 8px 8px;
}

.ck-nav { display: flex; flex-direction: column; gap: 2px; }

/* Die frühere Sammelregel ".ck-nav a, .ck-nav button { width: 100% }" ist ENTFERNT.
   Sie war spezifischer (0,1,1) als die neuen Klassenregeln (0,1,0) und hat dem
   Aufklapp-Pfeil die volle Zeilenbreite gegeben; der Link daneben blieb 14 px breit
   und die Beschriftung verschwand. Gemessen am 20.09.2026. Was die Zeilen heute
   aussehen lässt, steht ausschliesslich weiter unten unter ".ck-zeile". */
.ck-nav .ck-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-nav .ck-zahl {
  margin-left: auto;
  font-size: 12px;
  color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums;
}

.ck-leer { font-size: 14px; color: var(--ck-gedaempft); padding: 4px 10px 0; }

.ck-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ck-linie);
  font-size: 12px;
  color: var(--ck-gedaempft);
}
.ck-avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
/* Der Text bekommt den Platz, das Abzeichen nur das Noetige. Ohne flex:1
   teilte sich beides die Breite gleichmaessig, und dann stand unten links
   "ruben.zi..." und "145 Token..." (gemessen am 23.09.2026). */
.ck-fuss-text { min-width: 0; flex: 1 1 auto; }
.ck-fuss strong { display: block; color: var(--ck-kartentitel); font-weight: 600; margin-bottom: 1px; }
.ck-fuss strong, .ck-fuss-text > span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Eingeklappt: nur noch Symbole ──────────────────────────────────── */
/* Wie im Vorbild bleibt eine schmale Schiene stehen. Die Listen mit Vorgaengen und
   Gespraechen verschwinden ganz, sie bestehen nur aus Text und waeren als Symbol
   nicht unterscheidbar. Was bleibt, traegt einen Tooltip. */

/* Der eingeklappte Zustand gilt NUR am grossen Bildschirm. Unter 900 px ist die Leiste
   eine Schublade; wer am Rechner eingeklappt hat, bekaeme sonst auf dem Telefon eine
   58 Pixel breite Schublade, in der nichts steht. */
@media (min-width: 901px) {
  .ck.schmal { --ck-leiste: 58px; }
  .ck.schmal .ck-leiste { padding: 20px 9px 24px; gap: 16px; }
  .ck.schmal .ck-text,
  .ck.schmal .ck-zahl,
  .ck.schmal .ck-nur-breit,
  .ck.schmal .ck-gruppe > h2 { display: none; }
  .ck.schmal .ck-leiste-kopf { justify-content: center; }
  .ck.schmal .ck-neu {
    width: 40px; height: 40px;
    padding: 0;
    margin: 0 auto;
    border-radius: 10px;
  }
  .ck.schmal .ck-nav a,
  .ck.schmal .ck-nav button { justify-content: center; padding: 10px 0; }
  .ck.schmal .ck-fuss { justify-content: center; border-top: none; padding-top: 12px; }
}

/* In der Schublade waere ein Einklappknopf sinnlos, sie schliesst sich ohnehin ganz. */
@media (max-width: 900px) { .ck-klapp { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ck-leiste, .ck::before { transition: none; }
}

/* ── Kopfzeile des Inhalts ──────────────────────────────────────────── */

/* Kippschalter fuer die Netzrecherche im Nerd. Sieht aus wie der Modellwaehler
   daneben, traegt aber einen Zustand. Aus ist der Normalfall und deshalb
   zurueckhaltend; an wird deutlich, weil es Geld und Laufzeit kostet. */
.nd-netz { cursor: pointer; }
/* .nd-chip:hover ist mit 0-2-0 hoeher spezifiziert als eine einzelne Klasse und
   hat die Farbe ueberschrieben, sobald der Zeiger darauf stand. Deshalb hier
   ebenfalls zwei Klassen, und der Hover-Fall ausdruecklich mit. */
.nd-chip.nd-netz.an,
.nd-chip.nd-netz.an:hover {
  border-color: rgba(43, 117, 255, .5);
  background: rgba(43, 117, 255, .10);
  color: #1D5FBF;
}
.nd-chip.nd-netz.an svg { color: #1D5FBF; }
@media (max-width: 620px) {
  .nd-netz span { display: none; }
}

/* ── Wertungsmatrix ─────────────────────────────────────────────────── */
/* Nutzt dieselbe Tabelle wie der Angebotsvergleich, samt stehender erster
   Spalte. Der Unterschied steht im Kopf: hier werden Punkte gesetzt. */
.vf-wert-t th span { display: block; font-size: 12px; font-weight: 400; color: #55556A; }
.vf-wert-t th b { display: block; font-size: 12px; color: #8A4B00; }
.vf-wert-feld {
  width: 68px; padding: 5px 8px; text-align: center;
  border: 1px solid #e4e4ee; border-radius: 7px; font: inherit; font-size: 14px;
}
.vf-wert-feld:focus { outline: none; border-color: #2b75ff; box-shadow: 0 0 0 3px rgba(43,117,255,.12); }
.vf-wert-feld.fehlt { border-color: #b45309; background: #fff8ec; }
.vf-wert-von { display: block; font-size: 12px; color: #55556A; margin-top: 3px; }
.vf-wert-neu { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.vf-wert-neu input {
  padding: 8px 11px; border: 1px solid #e4e4ee; border-radius: 8px; font: inherit;
  font-size: 14px;
}
.vf-wert-neu input:first-child { flex: 1 1 220px; }
.vf-wert-neu input:not(:first-child) { width: 116px; }

/* Vorschau der Auskunft. Zugeklappt, damit das Blatt nicht erschlaegt, aber
   erreichbar: Wer etwas an zehn Unternehmen schickt, will es vorher lesen. */
.vf-aus-vorschau { margin: 0 0 14px; }
.vf-aus-vorschau summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: #55556A;
  padding: 4px 0;
}
.vf-aus-vorschau summary:focus-visible { outline: 2px solid #2b75ff; outline-offset: 2px; }
.vf-aus-vorschau pre {
  margin: 8px 0 0; padding: 12px 14px; max-height: 260px; overflow: auto;
  background: #f7f7fa; border: 1px solid #e4e4ee; border-radius: 9px;
  font-size: 12px; line-height: 1.6; color: #55556A;
  white-space: pre-wrap; word-break: break-word;
}

/* ── Vergabeunterlagen in der Akte ──────────────────────────────────── */
.vf-u-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.vf-u-liste li {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 2px 10px;
  align-items: center;
  padding: 9px 11px; border: 1px solid #e4e4ee; border-radius: 10px; background: #fff;
}
.vf-u-name { font-size: 14px; font-weight: 600; color: #17171F; }
.vf-u-text { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: #55556A; }
.vf-u-meta { font-size: 12px; color: #55556A; white-space: nowrap; }
.vf-u-neu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .vf-u-liste li { grid-template-columns: 1fr auto; }
}

/* ── Vergabeunterlagen auf der Bieterseite ──────────────────────────── */
.ag-unterlagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-unterlagen li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 2px 12px;
  align-items: center;
  padding: 10px 12px; border: 1px solid var(--ck-rand); border-radius: 10px;
  background: var(--ck-flaeche);
}
.ag-u-name { font-size: 14px; font-weight: 600; color: var(--ck-kartentitel); }
.ag-u-text { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--ck-gedaempft); }
.ag-u-meta { font-size: 12px; color: var(--ck-gedaempft); white-space: nowrap; }
@media (max-width: 560px) {
  .ag-unterlagen li { grid-template-columns: 1fr; }
  .ag-unterlagen li .kc-knopf { justify-self: start; }
}

/* ── Eigene Erkundungen, Liste und Blatt ────────────────────────────── */
.mk-eigen-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.mk-eigen-kopf h2 { font-size: 16px; color: #17171F; margin: 0; flex: 0 0 auto; }
.mk-eigen-kopf .pr-suche { flex: 1 1 240px; min-width: 180px; }
#mkEigene {
  background: #ffffff; border: 1px solid #e4e4ee; border-radius: 14px;
  padding: 16px 18px; margin: 0 0 18px;
}
.mk-liste { display: grid; gap: 2px; }
.mk-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 9px 10px; border-radius: 9px; width: 100%;
  border: 1px solid transparent; background: none;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.mk-zeile:hover { background: rgba(43, 117, 255, .05); border-color: #e4e4ee; }
.mk-zeile:focus-visible { outline: 2px solid #2b75ff; outline-offset: 2px; }
.mk-titel { font-size: 14px; font-weight: 600; color: #17171F; }
.mk-datum { font-size: 12px; color: #55556A; text-align: right; white-space: nowrap; }
.mk-akte { grid-column: 1 / -1; font-size: 12px; color: #55556A; }
.mk-akte.frei { color: #8A4B00; }
.mk-zuordnen { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #e9e9f0; }
.mk-seg { margin: 0 0 14px; }
.mk-seg h4 { font-size: 14px; color: #17171F; margin: 0 0 5px; }
.mk-seg ul { margin: 0; padding-left: 18px; }
.mk-seg li { font-size: 14px; line-height: 1.6; color: #55556A; }

/* ── Leiste: Arbeit oben, Werkzeuge hinter "Mehr" ───────────────────── */
/* Bis 23.09.2026 standen 13 Werkzeuge gleichzeitig da. Wer das Cockpit oeffnete,
   sah zuerst, was das Produkt kann, und nicht, woran er arbeitet. */

/* Die Kopfzeile eines Zweiges traegt keinen Ziehgriff: Verfahren und Gespraeche
   stehen fest, sortierbar sind nur die Werkzeuge. */
.ck-kopfzeile { cursor: default; }
.ck-arbeit { margin-top: 2px; }
.ck-arbeit .ck-zweig + .ck-zweig { margin-top: 2px; }

/* Punkt an einem Verfahren, dessen Frist in hoechstens sieben Tagen endet.
   Dieselbe Schwelle und dieselbe Farbe wie in der Liste und auf der Kachel.
   Die Farbe traegt die Aussage nicht allein, der Titel nennt sie im Klartext. */
.ck-eilig {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: #c2410c; margin-right: 7px;
}
.ck-unterzeile.ck-alle a { color: #55556A; font-style: italic; }

/* Der Aufklapppfeil zeigt nach unten, wenn offen, und zur Seite, wenn zu. */
.ck-pfeil.zu svg, .ck-zweig.zu .ck-pfeil svg { transform: rotate(-90deg); }
.ck-pfeil svg { transition: transform .16s ease; }
@media (prefers-reduced-motion: reduce) { .ck-pfeil svg { transition: none; } }

/* "Mehr" sieht aus wie eine Zeile, verhaelt sich aber wie ein Schalter. */
.ck-mehr-block { margin-top: 6px; }
.ck-mehr { width: 100%; justify-content: flex-start; }
.ck-mehr .ck-pfeil {
  margin-left: auto; display: inline-flex; align-items: center;
  border: 0; background: none; color: inherit; padding: 0;
}
.ck-mehr .ck-pfeil svg { transform: rotate(-90deg); }
.ck-mehr.offen .ck-pfeil svg { transform: rotate(0deg); }
.ck.schmal .ck-mehr .ck-pfeil { display: none; }

/* ── Profil unten links, ruhiger ───────────────────────────────────────── */
/* Der Tarif wandert als Abzeichen in die eingeklappte Zeile, der Tokenstand
   bekommt eine eigene einzeilige Angabe. Vorher war er ein auffaelliger
   Zweizeiler mitten im Menue. */
/* Zweite Zeile der Fusszeile: Tarif als Abzeichen, daneben der Tokenstand. */
.ck-fuss-zeile2 {
  display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px;
}
.ck-fuss-zeile2 > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-fuss-marke {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(107, 31, 209, .12); color: #6B1FD1;
  white-space: nowrap;
}
.ck.schmal .ck-fuss-marke { display: none; }

.ck-kontomenue [role="menuitem"] em {
  margin-left: auto; font-style: normal;
  font-size: 12px; color: #55556A; font-weight: 600;
}

/* ── Gruss mit Strich, wie in der KI-Suche des Archivs ──────────────── */
/* Vorlage: archiv.html, .cl-greet und .cl-uline. Georgia statt der Hausschrift
   und ein handgezeichneter Strich darunter. Der Strich ist geschwungen, deshalb
   ein SVG und kein border-bottom. Farbe #D97757, dieselbe wie dort. */
.ck-hallo {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif"Times New Roman", serif;
  font-weight: 400; font-size: 2rem; line-height: 1.1;
  color: var(--ck-titel, #0f0f1e);
  letter-spacing: -.01em;
  margin: 2px 0 20px;
  position: relative; display: inline-block;
}
.ck-hallo-strich {
  position: absolute; left: 0; bottom: -7px;
  width: 100%; height: 13px; color: #A3241B;
}
/* Mittig gesetzt, wo ein Gespraech beginnt. */
.ck-hallo-mitte { display: block; text-align: center; margin-bottom: 24px; }
.ck-hallo-mitte .ck-hallo { display: inline-block; }
.ck-hallo-mitte p {
  max-width: 62ch; margin: 16px auto 0;
  font-size: 14px; line-height: 1.65; color: var(--ck-text, #505050);
}
.ck-voll-mitte { text-align: center; margin: -8px 0 22px; }
@media (max-width: 620px) {
  .ck-hallo { font-size: 24px; }
  .ck-hallo-mitte p { font-size: 14px; }
}

.ck-gruss {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.ck-gruss h1 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--ck-titel);
  margin: 0;
}
.ck-gruss p { font-size: 14px; color: var(--ck-gedaempft); margin: 3px 0 0; }

.ck-abzeichen {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--ck-rand);
  background: var(--ck-flaeche);
  color: var(--ck-gedaempft);
}
.ck-abzeichen.pro       { background: rgba(43, 117, 255, .09);  color: #1D5FBF; border-color: rgba(43, 117, 255, .28); }
.ck-abzeichen.unlimited { background: rgba(107, 31, 209, .09);   color: #6B1FD1; border-color: rgba(107, 31, 209, .28); }

/* ── Kachelraster ───────────────────────────────────────────────────── */

.wg {
  display: grid;
  width: 100%;
  grid-auto-rows: minmax(150px, auto);
}

.wg-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wg-item {
  position: relative;
  min-width: 0;
  border-radius: 16px;
  outline: none;
  /* Der Uebergang traegt die FLIP-Animation. Wird beim Ziehen abgeschaltet. */
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.wg-item:focus-visible { box-shadow: 0 0 0 2px var(--ck-violett); }

.wg-card {
  /* 'size' statt 'inline-size', damit auch die Hoehe abgefragt werden kann. Das ist
     hier gefahrlos: Die Hoehe kommt vom Raster, nie vom Inhalt. */
  container-type: size;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  box-shadow: 0 1px 2px rgba(15, 15, 30, .05);
  transition: border-color .2s, box-shadow .25s;
}
.wg-item:hover .wg-card {
  border-color: #d5d5e6;
  box-shadow: 0 4px 14px -4px rgba(15, 15, 30, .1);
}

/* Ziehen: die Kachel hebt ab, der Rest rutscht darunter weg. */
.wg .wg-item.is-drag { z-index: 30; cursor: grabbing; }
.wg .wg-item.is-drag .wg-card {
  box-shadow: 0 24px 48px -12px rgba(15, 15, 30, .26), 0 8px 20px -8px rgba(15, 15, 30, .16);
  border-color: #cfcfe4;
}
.wg .wg-item.is-gelandet { z-index: 10; }
.wg .wg-item.is-gelandet .wg-card { box-shadow: 0 0 0 2px rgba(107, 31, 209, .4); }

/* Waehrend eines Zuges darf nichts markiert werden. */
.wg.wg-zieht { user-select: none; }
.wg.wg-zieht .wg-item { cursor: grabbing; }

/* Finger: senkrecht scrollen bleibt erlaubt, bis die Kachel abhebt. */
.wg-item { touch-action: pan-y pinch-zoom; -webkit-touch-callout: none; }
.wg-item a, .wg-item img { -webkit-user-drag: none; }

@media (prefers-reduced-motion: reduce) {
  .wg-item { transition: none; }
}

/* ── Kachelinhalt: gemeinsame Bausteine ─────────────────────────────── */

.kc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 18px;
}
.kc-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ck-gedaempft);
  font-weight: 700;
  line-height: 1;
}
.kc-kopf .kc-meta { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; }

.kc-gross {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 7px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--ck-titel);
  font-variant-numeric: tabular-nums;
}
/* Ohne eigenen Abstand klebte die Einheit an der Zahl ("1.542.633Verfahren"), und auf
   schmalen Kacheln wurde sie abgeschnitten. Jetzt rutscht sie notfalls in die naechste
   Zeile statt zu verschwinden. */
.kc-gross .kc-einheit { font-size: 14px; font-weight: 500; color: var(--ck-gedaempft); letter-spacing: 0; }
.kc-unten { margin-top: auto; }

.kc-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 3px 0;
}
.kc-zeile .kc-name { color: var(--ck-kartentitel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-zeile .kc-wert { margin-left: auto; color: var(--ck-gedaempft); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
a.kc-zeile:hover .kc-name { color: var(--ck-blau-text); }

/* Zeile mit Frist: Titel oben mit Ellipse, Datum darunter, Restlauf rechts.
   min-width: 0 ist Pflicht, sonst wirkt in einem Flex-Kind keine Ellipse. */
.kc-zeile.kc-frist { align-items: flex-start; padding: 5px 0; }
.kc-frist .kc-name { min-width: 0; white-space: normal; overflow: visible; }
.kc-frist .kc-titel { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.kc-frist .kc-name em { display: block; margin-top: 1px; font-style: normal;
  font-size: 12px; color: var(--ck-gedaempft); font-variant-numeric: tabular-nums; }
/* Drei Tage und weniger. Ab da faengt man an, Termine zu verschieben. */
.kc-frist .kc-wert.knapp { color: #A3241B; font-weight: 600; }

.kc-balken { height: 4px; border-radius: 2px; background: var(--ck-linie); overflow: hidden; }
.kc-balken > i { display: block; height: 100%; border-radius: 2px; background: var(--gradient); }
.kc-balken.voll > i { background: #ef4444; }

.kc-punkt { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: #b9b9cd; }
.kc-punkt.gut    { background: #00b98c; }
.kc-punkt.warn   { background: #f59e0b; }
.kc-punkt.fehler { background: #ef4444; }
.kc-punkt.laeuft { background: var(--ck-blau); animation: kc-puls 1.4s ease-in-out infinite; }
@keyframes kc-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .kc-punkt.laeuft { animation: none; } }

.kc-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--ck-rand);
  border-radius: 8px;
  background: var(--ck-flaeche);
  color: var(--ck-kartentitel);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.kc-knopf:hover:not(:disabled) { border-color: rgba(43, 117, 255, .45); background: rgba(43, 117, 255, .06); color: var(--ck-blau-text); }
/* Abgeschaltet muss man sehen. Gemessen am 22.09.2026: abgeschalteter und
   eingeschalteter Knopf hatten dieselbe Farbe und dieselbe Deckkraft. */
/* Gesperrt heisst: sichtbar da, aber erkennbar nicht bereit (Befund 7, 29.09.2026).
   Vorher 45 % Deckkraft, das sah nach Darstellungsfehler aus. */
.kc-knopf:disabled { opacity: 1; cursor: not-allowed; color: #55556A; background: #f4f5f9; border-color: #e3e5ee; }
.kc-knopf:disabled.betont { filter: none; background: #ebe7f6; color: #55556A; border-color: transparent; }
/* Sichtbarer Fokus fuer die Tastatur. Vorher hatte kein Knopf im Cockpit eine eigene
   Regel, der Ring des Browsers verschwand hinter dem Hausdesign. */
.kc-knopf:focus-visible, .ck-feedback:focus-visible, .nw-an:focus-visible,
.av-ico:focus-visible, .bb-kopieren:focus-visible {
  outline: 2px solid var(--ck-blau); outline-offset: 2px;
}
.kc-knopf.voll { width: 100%; }
.kc-knopf.betont { background: var(--gradient); border-color: transparent; color: #fff; }
.kc-knopf.betont:hover { filter: brightness(1.08); background: var(--gradient); color: #fff; }

.kc-leer { font-size: 14px; color: var(--ck-gedaempft); line-height: 1.5; }

/* Eingabefeld in der Nerd-Kachel */
.kc-frage {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ck-rand);
  border-radius: 10px;
  padding: 7px 8px 7px 12px;
  background: #fafbfd;
  transition: border-color .15s, box-shadow .15s;
}
.kc-frage:focus-within {
  border-color: rgba(43, 117, 255, .5);
  box-shadow: 0 0 0 3px rgba(43, 117, 255, .1);
}
.kc-frage input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--ck-titel);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.kc-frage input::placeholder { color: var(--ck-gedaempft); }
.kc-frage button {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; border-radius: 7px;
  background: var(--gradient);
  color: #fff; cursor: pointer;
}

/* Nicht die Zahl der Felder entscheidet ueber den Inhalt, sondern die gemessene Breite.
   Eine 2x1-Kachel ist auf dem Telefon schmaler als eine 1x1-Kachel am grossen Monitor.
   Gemessen: bei zwei Spalten liefen die Generatoren zweispaltig und schnitten die
   Bezeichnungen ab. */
.kc-spalten { display: grid; grid-template-columns: 1fr; column-gap: 22px; }

.kc-ab-2, .kc-ab-4 { display: none; }

@container (min-width: 300px) {
  .kc-ab-2 { display: flex; }
}
/* Erklaertexte verschwinden auf flachen Kacheln, statt den Knopf darunter abzuschneiden.
   An ihrer Stelle erscheint eine Kurzfassung, sonst klafft dort eine Luecke. */
.kc-kurz { display: none; }
@container (max-height: 200px) {
  .kc-lang { display: none; }
  .kc-kurz { display: block; }
}
@container (min-width: 390px) {
  .kc-spalten { grid-template-columns: 1fr 1fr; }
  .kc-ab-4 { display: flex; }
}

/* Schmale Kacheln bekommen weniger Luft und kleinere Zahlen. */
@container (max-width: 240px) {
  .kc { padding: 15px; gap: 10px; }
  .kc-gross { font-size: 24px; }
  .kc-zeile { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Vergabe-Nerd: Gespraechsseite
   Der Inhaltsbereich ist hier KEINE scrollende Seite, sondern eine feste Hoehe mit
   scrollender Mitte und stehendem Eingabefeld unten. Sonst wandert das Eingabefeld
   beim Tippen aus dem Bild.
   ══════════════════════════════════════════════════════════════════════════ */

.ck-voll { height: calc(100vh - var(--ck-kopf)); min-height: 0; }
.ck-voll .ck-leiste { height: 100%; top: 0; }
/* Auf der Gespraechsseite scrollt NUR die Nachrichtenbahn. Scrollt die Seite selbst,
   wandert das Eingabefeld aus dem Bild, und der schmale Streifen ueber der
   Navigationsleiste verschwindet, wodurch die gemessene Kopfhoehe nicht mehr stimmt. */
body.nd-fest { overflow: hidden; }

/* Leeres Gespraech: Begruessung und Eingabefeld stehen ZUSAMMEN in der Mitte, wie im
   Vorbild. Erreicht ueber zwei automatische Aussenabstaende in der Flex-Spalte, das
   drueckt beide als Paar in die Mitte. Sobald eine Nachricht da ist, wandert das
   Eingabefeld nach unten und die Bahn nimmt den Rest. */
body.nd-leer .nd-bahn { flex: 0 0 auto; margin-top: auto; overflow: visible; }
body.nd-leer .nd-fuss { margin-bottom: auto; }
body.nd-leer .nd-start { margin-top: 0; margin-bottom: 20px; }

.ck-haupt.nd {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 0;
}
.ck-haupt.nd .ck-leiste-knopf { margin: 14px 0 0 16px; }

.nd-bahn {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 24px 4px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .nd-bahn { scroll-behavior: auto; } }

.nd-start { max-width: 720px; margin: 9vh auto 24px; text-align: center; }
.nd-start h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800; letter-spacing: -.6px;
  color: var(--ck-titel); margin: 0 0 10px;
}
.nd-start p { font-size: 14px; color: var(--ck-gedaempft); margin: 0; }

.nd-verlauf {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 10px;
}

.nd-zeile { display: flex; }
.nd-zeile.ich { justify-content: flex-end; }
.nd-zeile.ich .nd-blase {
  max-width: 78%;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 16px 16px 4px 16px;
  padding: 11px 15px;
}
.nd-zeile.er .nd-blase { max-width: 100%; width: 100%; }

.nd-blase { font-size: 14px; line-height: 1.7; color: var(--ck-text); min-width: 0; }
.nd-blase > *:first-child { margin-top: 0; }
.nd-blase > *:last-child { margin-bottom: 0; }
.nd-blase p { margin: 0 0 11px; color: inherit; }
.nd-blase h3, .nd-blase h4, .nd-blase h5, .nd-blase h6 {
  color: var(--ck-titel); margin: 20px 0 8px; line-height: 1.35;
}
.nd-blase h3 { font-size: 16px; font-weight: 700; }
.nd-blase h4 { font-size: 16px; font-weight: 700; }
.nd-blase h5, .nd-blase h6 { font-size: 14px; font-weight: 700; }
.nd-blase ul, .nd-blase ol { margin: 0 0 12px; padding-left: 22px; }
.nd-blase li { margin: 3px 0; }
.nd-blase strong { color: var(--ck-titel); font-weight: 650; }
.nd-blase a { color: var(--ck-blau-text); text-decoration: underline; text-underline-offset: 2px; }
.nd-blase code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em; background: #f1f2f7; border: 1px solid var(--ck-linie);
  border-radius: 5px; padding: 1px 5px;
}
.nd-code {
  background: #f7f8fb; border: 1px solid var(--ck-rand); border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; margin: 0 0 12px;
}
.nd-code code { background: none; border: none; padding: 0; font-size: 14px; line-height: 1.6; }
.nd-tabelle { overflow-x: auto; margin: 0 0 14px; }
.nd-tabelle table { border-collapse: collapse; width: 100%; font-size: 14px; }
.nd-tabelle th, .nd-tabelle td {
  border: 1px solid var(--ck-rand); padding: 7px 10px; text-align: left; vertical-align: top;
}
.nd-tabelle th { background: #f5f6fa; color: var(--ck-titel); font-weight: 650; }

.nd-warn {
  background: #fff8e8; border: 1px solid #f3d9a0; border-radius: 10px;
  padding: 10px 13px; color: #8A4B00; font-size: 14px; margin: 6px 0 0;
}

/* Arbeitsanzeige: drei Punkte, davor was gerade passiert */
.nd-tut {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--ck-gedaempft);
}
.nd-tut i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: nd-punkt 1.1s ease-in-out infinite;
}
.nd-tut i:nth-child(2) { animation-delay: .16s; }
.nd-tut i:nth-child(3) { animation-delay: .32s; }
.nd-tut:not(:first-child) { margin-left: 2px; }
@keyframes nd-punkt { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nd-tut i { animation: none; opacity: .6; } }

/* ── Eingabebereich ─────────────────────────────────────────────────── */

.nd-fuss { flex: 0 0 auto; padding: 6px 24px 16px; }

.nd-feld {
  max-width: 760px; margin: 0 auto;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 18px;
  padding: 10px 12px 8px;
  box-shadow: 0 2px 10px -4px rgba(15, 15, 30, .1);
  transition: border-color .15s, box-shadow .15s;
}
.nd-feld:focus-within {
  border-color: rgba(43, 117, 255, .45);
  box-shadow: 0 0 0 3px rgba(43, 117, 255, .09);
}
.nd-feld textarea {
  display: block; width: 100%;
  border: none; outline: none; background: none; resize: none;
  font: inherit; font-size: .94rem; line-height: 1.6;
  color: var(--ck-titel);
  /* style.css setzt global textarea { height: 140px }. Ohne diese Zeile ist das
     Eingabefeld 140 px hoch, auch wenn nur eine Zeile darin steht. Gemessen. */
  height: auto;
  min-height: 30px;
  max-height: 220px;
  padding: 3px 4px 6px;
  /* style.css gibt textarea:focus einen eigenen Rahmen und Schatten. Der zeichnete
     einen zweiten Kasten IM Eingabefeld. Den Fokus zeigt der aeussere Kasten. */
  box-shadow: none;
  border-radius: 0;
}
.nd-feld textarea::placeholder { color: var(--ck-gedaempft); }

.nd-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nd-links { display: flex; align-items: center; gap: 10px; min-width: 0; }

.nd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--ck-rand); border-radius: 999px;
  background: none; color: var(--ck-text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.nd-chip:hover { border-color: rgba(107, 31, 209, .4); color: var(--ck-titel); background: rgba(107, 31, 209, .05); }

.nd-modell { position: relative; }
.nd-menue {
  display: none;
  position: absolute; bottom: calc(100% + 8px); left: 0;
  min-width: 232px; z-index: 40;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 12px;
  box-shadow: 0 14px 34px -10px rgba(15, 15, 30, .22);
  padding: 6px; 
}
.nd-menue.offen { display: block; }
.nd-menue button {
  display: block; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; font: inherit;
}
.nd-menue button:hover { background: rgba(107, 31, 209, .07); }
.nd-menue strong { display: block; font-size: 14px; color: var(--ck-titel); font-weight: 650; }
.nd-menue span { display: block; font-size: 12px; color: var(--ck-gedaempft); }

.nd-stand { font-size: 12px; color: var(--ck-gedaempft); white-space: nowrap; }
.nd-stand.leer { color: #A3241B; font-weight: 600; }

.nd-ab {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: none; border-radius: 10px;
  background: var(--gradient); color: #fff; cursor: pointer;
  transition: filter .14s, opacity .14s;
}
.nd-ab:hover:not(:disabled) { filter: brightness(1.1); }
.nd-ab:disabled { opacity: .32; cursor: default; }

.nd-schnell {
  max-width: 760px; margin: 12px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.nd-schnell button {
  padding: 7px 13px; border: 1px solid var(--ck-rand); border-radius: 999px;
  background: var(--ck-flaeche); color: var(--ck-text);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.nd-schnell button:hover { border-color: rgba(43, 117, 255, .45); color: var(--ck-blau-text); }

.nd-klein {
  max-width: 760px; margin: 10px auto 0;
  text-align: center; font-size: 12px; color: var(--ck-gedaempft); line-height: 1.5;
}

@media (max-width: 900px) {
  .nd-bahn { padding: 18px 16px 4px; }
  .nd-fuss { padding: 6px 14px 12px; }
  .nd-start { margin-top: 6vh; }
  .nd-schnell button { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Seitenleiste, zweiter Aufbau
   Nach dem Vorbild: eine schlichte Zeilenliste statt eines farbigen Knopfes, die
   Gespraeche als aufklappbarer Zweig unter dem Nerd, unten ein Konto-Knopf mit
   Menue. Diese Regeln stehen ABSICHTLICH am Dateiende und ueberschreiben damit die
   erste Fassung weiter oben.
   ══════════════════════════════════════════════════════════════════════════ */

.ck-leiste { gap: 14px; }

/* Eine Zeile, egal ob Link oder Knopf. */
.ck-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ck-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.ck-zeile:hover { background: rgba(107, 31, 209, .07); color: var(--ck-titel); }
.ck-zeile.aktiv { background: rgba(107, 31, 209, .1); color: var(--ck-titel); font-weight: 600; }
.ck-zeile > svg { flex: 0 0 auto; opacity: .55; }
.ck-zeile:hover > svg, .ck-zeile.aktiv > svg { opacity: 1; color: var(--ck-violett); }

/* Der Nerd traegt rechts den Pfeil fuer den Zweig, deshalb zwei Kinder. */
.ck-zeile.ck-mit-pfeil { padding: 0; gap: 0; }
.ck-zeile.ck-mit-pfeil > a {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
  padding: 8px 4px 8px 10px;
  color: inherit; text-decoration: none; font: inherit; font-weight: inherit;
}
.ck-zeile.ck-mit-pfeil > a > svg { flex: 0 0 auto; opacity: .55; }
.ck-zeile.aktiv.ck-mit-pfeil > a > svg { opacity: 1; color: var(--ck-violett); }
.ck-pfeil {
  flex: 0 0 auto;
  width: 26px; min-width: 26px; height: 26px;
  display: grid; place-items: center;
  margin-right: 5px;
  border: none; border-radius: 6px;
  background: none; color: var(--ck-gedaempft); cursor: pointer;
  transition: transform .18s ease, background .13s;
}
.ck-pfeil:hover { background: rgba(15, 15, 30, .06); color: var(--ck-titel); }
.ck-zweig.zu .ck-pfeil { transform: rotate(-90deg); }
.ck-zweig.zu .ck-unter { display: none; }

/* Gespraeche unter dem Nerd */
.ck-unter {
  margin: 2px 0 2px 19px;
  padding-left: 9px;
  border-left: 1px solid var(--ck-linie);
  display: flex; flex-direction: column; gap: 1px;
}
.ck-unterzeile { display: flex; align-items: center; border-radius: 7px; }
.ck-unterzeile > a {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 6px 6px 9px;
  font-size: 14px;
  color: var(--ck-text);
  text-decoration: none;
}
.ck-unterzeile:hover { background: rgba(107, 31, 209, .06); }
.ck-unterzeile.aktiv { background: rgba(107, 31, 209, .1); }
.ck-unterzeile.aktiv > a { color: var(--ck-titel); font-weight: 600; }
.ck-unterzeile .ck-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ck-weg {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  margin-right: 3px;
  border: none; border-radius: 6px;
  background: none; color: var(--ck-gedaempft);
  cursor: pointer; opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}
.ck-unterzeile:hover .ck-weg, .ck-weg:focus-visible { opacity: 1; }
.ck-weg:hover { color: #A3241B; background: rgba(239, 68, 68, .1); }

/* Ruecksicherung statt Systemdialog: die Zeile fragt selbst nach. */
.ck-unterzeile.fragt {
  gap: 6px; padding: 5px 6px 5px 9px;
  background: rgba(239, 68, 68, .07);
  font-size: 12px; color: var(--ck-kartentitel);
}
.ck-unterzeile.fragt .ck-text { flex: 1 1 auto; }
.ck-unterzeile.fragt button {
  flex: 0 0 auto;
  border: 1px solid var(--ck-rand); border-radius: 6px;
  background: var(--ck-flaeche); color: var(--ck-kartentitel);
  font: inherit; font-size: .75rem; font-weight: 600;
  padding: 3px 9px; cursor: pointer;
}
.ck-unterzeile.fragt .ck-ja { border-color: rgba(239, 68, 68, .4); color: #A3241B; }
.ck-unterzeile.fragt .ck-ja:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ── Konto unten ────────────────────────────────────────────────────── */

.ck-konto { position: relative; margin-top: auto; }

.ck-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  margin: 0;
  border: none;
  border-top: 1px solid var(--ck-linie);
  border-radius: 0 0 8px 8px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .13s;
}
.ck-fuss:hover { background: rgba(107, 31, 209, .06); }
.ck-fuss strong { font-size: 14px; color: var(--ck-kartentitel); font-weight: 600; }
.ck-fuss-text > span { font-size: 12px; color: var(--ck-gedaempft); }
.ck-fuss-pfeil { flex: 0 0 auto; color: var(--ck-gedaempft); display: flex; }

.ck-kontomenue {
  display: none;
  position: absolute;
  left: 4px; right: 4px; bottom: calc(100% + 6px);
  z-index: 70;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 12px;
  box-shadow: 0 16px 38px -12px rgba(15, 15, 30, .28);
  padding: 6px;
}
.ck-kontomenue.offen { display: block; }
.ck-kontokopf { padding: 8px 10px 10px; border-bottom: 1px solid var(--ck-linie); margin-bottom: 6px; }
.ck-kontokopf strong { display: block; font-size: 14px; color: var(--ck-titel); }
.ck-kontokopf span { display: block; font-size: 12px; color: var(--ck-gedaempft);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-kontomenue button, .ck-kontomenue a {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  border: none; border-radius: 8px; background: none;
  color: var(--ck-text); font: inherit; font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer;
}
.ck-kontomenue button:hover, .ck-kontomenue a:hover { background: rgba(107, 31, 209, .07); color: var(--ck-titel); }
.ck-kontomenue svg { flex: 0 0 auto; opacity: .6; }
.ck-kontomenue em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ck-gedaempft); }
.ck-menue-strich { height: 1px; background: var(--ck-linie); margin: 6px 4px; }

/* Eingeklappt: nur Symbole, Zweig und Konto schrumpfen mit. */
@media (min-width: 901px) {
  .ck.schmal .ck-zeile { justify-content: center; padding: 9px 0; }
  .ck.schmal .ck-zeile.ck-mit-pfeil > a { justify-content: center; padding: 9px 0; }
  .ck.schmal .ck-pfeil, .ck.schmal .ck-unter { display: none; }
  .ck.schmal .ck-fuss { justify-content: center; padding: 10px 0; border-top: none; }
  .ck.schmal .ck-fuss-pfeil { display: none; }
  .ck.schmal .ck-kontomenue { left: 4px; right: auto; width: 240px; }
}

/* ── Gruppen und verschiebbare Zeilen in der Leiste ──────────────────── */

.ck-menue { margin-top: 12px; }
.ck-block + .ck-block { margin-top: 12px; }
.ck-block-titel {
  font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ck-gedaempft); margin: 0 0 4px 10px;
}
/* Auch eine leere Gruppe muss eine Zeile aufnehmen koennen, sonst laesst sich der
   letzte Eintrag nicht mehr aus ihr herausziehen und nie wieder hinein. */
.ck-block-liste { display: flex; flex-direction: column; gap: 2px; min-height: 6px; }
.ck-posten { position: relative; touch-action: pan-y; }

/* Der Griff ist nur ein Hinweis, gezogen wird die ganze Zeile. Deshalb nimmt er keine
   Zeigerereignisse an, sonst fuehrte ein Klick darauf ins Leere. */
.ck-griff {
  margin-left: auto; flex: 0 0 auto; display: inline-flex;
  color: var(--ck-gedaempft); opacity: 0; pointer-events: none;
  transition: opacity .12s;
}
.ck-zeile:hover .ck-griff, .ck-posten:focus-within .ck-griff { opacity: .75; }
.ck-zeile.ck-mit-pfeil .ck-griff { margin-left: 0; }
.ck-posten.zieht { opacity: .3; }
.ck-flug {
  position: fixed; z-index: 1200; pointer-events: none;
  border: 1px solid var(--ck-rand); border-radius: 8px; background: var(--ck-flaeche);
  box-shadow: 0 14px 30px -10px rgba(15, 15, 30, .4);
}
.ck-flug .ck-unter, .ck-flug .ck-pfeil, .ck-flug .ck-griff { display: none; }
.ck-leiste.zieht-gerade { touch-action: none; }
.ck-leiste.zieht-gerade .ck-block-liste {
  outline: 1px dashed transparent; outline-offset: 3px; border-radius: 8px;
}
.ck-leiste.zieht-gerade .ck-block-liste:empty { min-height: 34px; outline-color: var(--ck-rand); }

/* Ansage fuer Hilfsmittel: sichtbar nur fuer die Vorlesefunktion. */
.ck-ansage {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ck.schmal .ck-block-titel { display: none; }
.ck.schmal .ck-menue { margin-top: 8px; }
.ck.schmal .ck-block + .ck-block {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ck-linie);
}

/* ── Verfahrensakte ──────────────────────────────────────────────────── */

.vf-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.vf-filter .bb-klein { margin: 0; margin-left: auto; }

.vf-tabelle {
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); border-radius: 16px;
  padding: 4px 16px 10px; overflow-x: auto;
}
.vf-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.vf-t th {
  text-align: left; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ck-gedaempft); font-weight: 700; padding: 12px 10px 8px;
  border-bottom: 1px solid var(--ck-linie); white-space: nowrap;
}
.vf-t td { padding: 11px 10px; border-bottom: 1px solid var(--ck-linie); vertical-align: top; }
.vf-t tbody tr { cursor: pointer; }
.vf-t tbody tr:hover td { background: rgba(107, 31, 209, .05); }
.vf-t tbody tr:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: -2px; }
.vf-t tbody tr:last-child td { border-bottom: none; }
.vf-titel { display: block; color: var(--ck-kartentitel); font-weight: 600; }
.vf-az { display: block; font-size: 12px; color: var(--ck-gedaempft);
         font-variant-numeric: tabular-nums; margin-top: 2px; }
.vf-art { color: var(--ck-text); }
.vf-zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--ck-gedaempft); }
.vf-rest { display: block; font-size: 12px; color: var(--ck-gedaempft); margin-top: 2px; }
/* Sieben Tage oder weniger: Das ist die Zahl, auf die eine Vergabestelle schaut. */
/* Geerbte Uhrzeit. Bernstein, nicht rot: Die Frist ist in Ordnung, nur ihre
   Uhrzeit stammt aus dem Umstieg und nicht aus einer Entscheidung. Rot wuerde
   einen Fehler behaupten, den es nicht gibt. */
.vf-pruefen { display: inline-block; margin-top: 3px; padding: 1px 7px;
  border: 1px solid #fcd34d; border-radius: 999px; background: #fffbeb;
  color: #8A4B00; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  cursor: help; }

.vf-eilig { color: #A3241B; font-weight: 600; }
.vf-eilig .vf-rest { color: #A3241B; }

.vf-marke {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  border-radius: 7px; padding: 3px 9px; white-space: nowrap;
  background: #f0f1f7; color: var(--ck-gedaempft);
}
.vf-marke.blau { background: rgba(43, 117, 255, .12); color: #1D5FBF; }
.vf-marke.violett { background: rgba(107, 31, 209, .12); color: #6B1FD1; }
.vf-marke.gut { background: rgba(0, 185, 140, .14); color: #12715B; }
.vf-marke.warn { background: #fff1d6; color: #8A4B00; }
.vf-marke.fehler { background: #ffe4e4; color: #A3241B; }

/* ── Die Akte selbst ─────────────────────────────────────────────────── */

.vf-akte-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vf-akte-kopf .bb-klein { margin: 0; }
.vf-raster {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
@media (max-width: 1100px) { .vf-raster { grid-template-columns: minmax(0, 1fr); } }
.vf-zwischen { margin-top: 22px !important; }
/* Befund 6 (29.09.2026): eine Abschnittsgroesse fuer alle Reiter der Akte. */
#vfAkte h2 { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em;
  color: #17171F; text-transform: none; margin: 0 0 6px; }
#vfAkte h2.vf-zwischen { margin-top: 34px !important; padding-top: 22px; border-top: 1px solid #e7e7ef; }

.vf-feld { display: block; margin-bottom: 12px; }
.vf-feld > span {
  display: block; font-size: 12px; font-weight: 600; color: var(--ck-gedaempft);
  margin-bottom: 4px;
}
.vf-feld input, .vf-feld select, .vf-feld textarea {
  width: 100%; box-sizing: border-box; display: block;
  border: 1px solid var(--ck-rand); border-radius: 9px; background: #fafbfd;
  color: var(--ck-titel); font: inherit; font-size: 14px; line-height: 1.5;
  padding: 9px 11px; height: auto; min-height: 0; box-shadow: none; outline: none;
  max-width: none;
}
.vf-feld textarea { resize: vertical; min-height: 62px; }

/* Erklaersatz unter einem Feld, wenn die Eingabe eine Folge ausserhalb des
   Formulars hat. Bisher nur an der Angebotsfrist: deren Uhrzeit muss mit der
   Aufforderung uebereinstimmen, sonst laesst sich ein verspaetetes Angebot
   nicht sauber ausschliessen. Bewusst 12,5px und #63638c (5,68:1), nicht
   kleiner: der Satz traegt eine Rechtsfolge. */
/* Einheit neben dem Feld. Der Platzhalter "Euro" verschwand, sobald jemand
   etwas eintippte, und dann stand dort eine Zahl ohne Waehrung. */
/* .vf-feld > span setzt display:block und ist mit 0-1-1 hoeher spezifiziert als
   eine einzelne Klasse. Deshalb hier ebenfalls ueber den Elternselektor, sonst
   bricht die Einheit in die naechste Zeile (gemessen am Telefon, 23.09.2026). */
.vf-feld > .vf-mit-einheit { display: flex; align-items: stretch; }
/* width:auto ist noetig: .vf-feld input steht auf 100 Prozent, und damit
   schob der Flex-Kasten die Einheit in die naechste Zeile. */
.vf-mit-einheit input {
  flex: 1 1 auto; width: auto; min-width: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.vf-mit-einheit > span {
  display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--ck-rand, #e4e4ee); border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #f7f7fa; color: #55556A;
  font-size: 14px; white-space: nowrap;
}

.vf-hinweis {
  display: block; font-style: normal; font-size: 12px; line-height: 1.5;
  color: #55556A; margin-top: 5px;
}
.vf-feld input:focus, .vf-feld select:focus, .vf-feld textarea:focus {
  border-color: var(--ck-blau); box-shadow: 0 0 0 3px rgba(43, 117, 255, .12);
}
.vf-feld input:disabled, .vf-feld select:disabled, .vf-feld textarea:disabled {
  background: #f3f4f8; color: var(--ck-gedaempft); cursor: default;
}
.vf-form-fuss { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.vf-form-fuss .bb-klein { margin: 0; }

.vf-erg { list-style: none; margin: 0; padding: 0; }
.vf-erg li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--ck-linie); font-size: 14px;
}
.vf-erg li:last-child { border-bottom: none; }
/* Aeltere Fassungen eines Dokuments, aufklappbar (Befund 14, 29.09.2026). */
.vf-erg-alt { flex: 1 1 100%; margin: 2px 0 0; font-size: 12px; }
.vf-erg-alt summary { cursor: pointer; color: var(--ck-gedaempft); width: max-content; }
.vf-erg-alt summary:hover { color: var(--ck-titel); }
.vf-erg-alt ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.vf-erg-alt li { display: inline; padding: 0; border: 0; font-size: 12px; }
.vf-erg-art { font-weight: 600; color: var(--ck-kartentitel); flex: 0 0 auto; }
.vf-erg-titel { color: var(--ck-text); flex: 1 1 140px; min-width: 0; }
.vf-erg-meta { font-size: 12px; color: var(--ck-gedaempft); flex: 0 0 auto; }

.vf-werkzeuge { display: flex; flex-direction: column; gap: 6px; }
.vf-werkzeug {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--ck-rand); border-radius: 10px; padding: 10px 12px;
  color: var(--ck-kartentitel); text-decoration: none; font-size: 14px;
  transition: border-color .13s, background .13s;
}
.vf-werkzeug:hover { border-color: rgba(43, 117, 255, .45); background: rgba(43, 117, 255, .04); }
.vf-werkzeug:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 2px; }
.vf-werkzeug em {
  margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700;
  color: #12715B; background: rgba(0, 185, 140, .12); border-radius: 7px; padding: 2px 8px;
}

.vf-mit { list-style: none; margin: 0; padding: 0; }
.vf-mit li {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--ck-linie); font-size: 14px; color: var(--ck-text);
}
.vf-mit li:last-child { border-bottom: none; }
.vf-mit em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ck-gedaempft); }
.vf-mit li.vf-mit-extern { align-items: center; }
.vf-mit-extern b { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; font-size: 12px;
  font-weight: 600; text-align: center; color: #6B1FD1; background: #f3ecff; border-radius: 999px; }
.vf-mit-knopf { margin-left: 10px; padding: 5px 11px !important; font-size: 12px !important; }

@media (max-width: 760px) {
  /* Seit Schritt D hat die Tabelle acht Spalten und eine andere Reihenfolge.
     Am Telefon bleiben Stern, Verfahren, Frist und Stand; Aktenzeichen, Zahl
     der Unterlagen, letzter Bearbeiter und naechster Schritt fallen weg. Die
     Nummern von frueher haetten jetzt die Bezeichnung versteckt. */
  .vf-t th:nth-child(3), .vf-t td:nth-child(3),
  .vf-t th:nth-child(6), .vf-t td:nth-child(6),
  .vf-t th:nth-child(7), .vf-t td:nth-child(7),
  .vf-t th:nth-child(8), .vf-t td:nth-child(8) { display: none; }
}

/* ── Beteiligte, Adressbuch, Vorlagen ────────────────────────────────── */

.vf-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .vf-paar { grid-template-columns: 1fr; } }

.vf-bet { list-style: none; margin: 0; padding: 0; }
.vf-bet li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--ck-linie);
}
.vf-bet li:last-child { border-bottom: none; }
.vf-bet-wer { flex: 1 1 180px; min-width: 0; }
.vf-bet-name { display: block; font-size: 14px; font-weight: 600; color: var(--ck-kartentitel); }
.vf-bet-kontakt { display: block; font-size: 12px; color: var(--ck-gedaempft);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-bet-rolle {
  flex: 0 0 auto; max-width: 190px; padding: 6px 10px; height: auto;
  border: 1px solid var(--ck-rand); border-radius: 8px; background: var(--ck-flaeche);
  color: var(--ck-kartentitel); font: inherit; font-size: 12px; display: inline-block;
  width: auto;
}
.vf-bet .kc-knopf { padding: 6px 10px; font-size: 12px; }
.vf-bet .ck-weg { opacity: 0; flex: 0 0 auto; }
.vf-bet li:hover .ck-weg, .vf-bet .ck-weg:focus-visible { opacity: 1; }
.vf-bet-neu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vf-bet-neu .bb-wahl { flex: 1 1 200px; max-width: none; }

/* Das Blatt fuer Vorlagen und Anschreiben braucht mehr Platz als ein Hinweis. */
.vo-kasten { width: min(760px, 100%); max-height: min(88vh, 940px); overflow-y: auto; }
.vo-kasten textarea { font-family: inherit; }

/* ── Protokollansicht ────────────────────────────────────────────────── */

.pr-zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.pr-zahl {
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.pr-zahl span { font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
                color: var(--ck-gedaempft); font-weight: 700; }
.pr-zahl strong { font-size: 20px; color: var(--ck-titel); }
.pr-zahl.warn { border-color: #f0c9a4; background: #fff8f2; }
.pr-zahl.warn strong { color: #A3241B; }

.pr-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.pr-filter label { font-size: 12px; color: var(--ck-gedaempft); font-weight: 600; }
.pr-auto { display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
           color: var(--ck-kartentitel); }
.pr-auto input { width: auto; margin: 0; flex: none; }
.pr-suche {
  flex: 1 1 220px; min-width: 180px; max-width: 360px;
  border: 1px solid var(--ck-rand); border-radius: 8px; background: var(--ck-flaeche);
  color: var(--ck-titel); font: inherit; font-size: 14px; padding: 8px 12px; height: auto;
}
.pr-suche:focus { outline: none; border-color: var(--ck-blau);
                  box-shadow: 0 0 0 3px rgba(43, 117, 255, .12); }

.pr-tabelle {
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); border-radius: 16px;
  padding: 6px 16px 14px; overflow-x: auto;
}
.pr-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.pr-t th {
  text-align: left; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ck-gedaempft); font-weight: 700; padding: 12px 10px 8px;
  border-bottom: 1px solid var(--ck-linie); white-space: nowrap;
}
.pr-t td { padding: 9px 10px; border-bottom: 1px solid var(--ck-linie);
           vertical-align: top; color: var(--ck-text); }
.pr-t tr:last-child td { border-bottom: none; }
.pr-t tr.fehler td { background: #fff8f2; }
.pr-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ck-gedaempft); }
.pr-dauer { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-wer { color: var(--ck-kartentitel); word-break: break-word; }
.pr-was { color: var(--ck-kartentitel); font-weight: 600; }
.pr-meldung { line-height: 1.55; }
.pr-meldung b { color: #A3241B; }
.pr-det { display: block; font-size: 12px; color: var(--ck-gedaempft); margin-top: 3px; }

/* Die Art als Marke, damit man Anmeldungen, Laeufe und Fehler auseinanderhaelt. */
.pr-marke {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; border-radius: 6px; padding: 2px 7px; margin-right: 6px;
  background: #f0f1f7; color: var(--ck-gedaempft); white-space: nowrap;
}
.pr-anmeldung { background: rgba(43, 117, 255, .1); color: #1D5FBF; }
.pr-lauf { background: rgba(107, 31, 209, .1); color: #6B1FD1; }
.pr-konto { background: rgba(0, 185, 140, .12); color: #12715B; }
.pr-ki { background: #fff1d6; color: #8A4B00; }
.pr-fehler { background: #ffe4e4; color: #A3241B; }

@media (max-width: 760px) {
  .pr-tabelle { padding: 4px 10px 12px; }
  .pr-t th:nth-child(4), .pr-t td:nth-child(4) { display: none; }
}

/* ── Blatt fuer den Tokenkauf ───────────────────────────────────────── */
/* Kein Systemdialog (kein confirm, kein alert): eine eigene Flaeche, die sich
   schliessen laesst und erklaert, was passiert. */

.ck-blatt {
  /* Ueber der Kopfleiste, die z-index 1000 hat. Mit 200 lag das Blatt darunter: Titel
     und Schliessknopf des Lesers steckten hinter der Leiste, am Telefon war vom
     Dateinamen nur das Ende zu sehen (gemessen am 22.09.2026). */
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15, 15, 30, .45);
  display: grid; place-items: center;
  padding: 20px;
  /* Der Overlay scrollt mit. Ohne das ragte ein hohes Blatt (vmStelleBlatt hat acht
     Felder, einen Merken-Block und zwei Knoepfe) unter 780 px Fensterhoehe oben und
     unten heraus, und weder Titel noch Speichern-Knopf waren erreichbar. */
  overflow-y: auto;
}
.ck-blatt-kasten {
  width: min(560px, 100%);
  /* Hoeher als das Fenster darf der Kasten nicht werden, sonst laeuft er oben
     hinaus und der Titel ist weg. Was nicht passt, scrollt im Kasten. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4e4ee;
  box-shadow: 0 30px 70px -20px rgba(15, 15, 30, .4);
  padding: 26px 26px 22px;
  color: #55556A;
}
/* Solange ein Blatt offen ist, schwebt die Meldebox darueber. Vorher lag sie im
   Seitenfluss unter dem Overlay (z-index 1100): Ein fehlgeschlagenes Speichern
   im Blatt meldete sich in eine Flaeche, die niemand sehen konnte.
   :has() statt einer Klasse, damit keine Aufrufstelle davon wissen muss. */
body:has(.ck-blatt:not([hidden])) .bb-meldung {
  position: fixed; z-index: 1200;
  left: 50%; transform: translateX(-50%);
  top: calc(var(--ck-klebe, 72px) + 14px);
  width: min(560px, calc(100% - 40px));
  box-shadow: 0 18px 40px -16px rgba(15, 15, 30, .45);
}

/* Rueckfall fuer Browser ohne inert: die stillgelegte Flaeche nimmt keine Klicks. */
[inert] { pointer-events: none; user-select: none; }

.ck-blatt-kasten h2 { font-size: 20px; color: #17171F; margin: 0 0 10px; }
.ck-blatt-kasten p { font-size: 14px; line-height: 1.65; margin: 0 0 16px; color: #55556A; }
.ck-blatt-kasten strong { color: #17171F; }
.ck-pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 520px) { .ck-pakete { grid-template-columns: 1fr; } }
.ck-paket {
  border: 1px solid #e4e4ee; border-radius: 12px; padding: 14px 12px; text-align: center;
}
.ck-paket.empfohlen { border-color: rgba(107, 31, 209, .45); background: rgba(107, 31, 209, .04); }
.ck-paket strong { display: block; font-size: 14px; color: #17171F; }
.ck-paket span { display: block; font-size: 1.25rem; font-weight: 700; color: #17171F; margin: 4px 0 2px; }
.ck-paket em { display: block; font-style: normal; font-size: 12px; color: #55556A; }
/* Das Attribut hidden muss staerker sein als jede eigene display-Regel. Ohne diese
   Zeile schlaegt .bb-frage-weg { display: inline-flex } die Browservorgabe, und die rote
   Loeschrueckfrage im Bieterfragen-Bob steht dauerhaft offen. Am 22.09.2026 an der
   Live-Seite gemessen: Attribut gesetzt, display flex, Hoehe groesser null. */
[hidden] { display: none !important; }

.ck-blatt-klein { font-size: 12px !important; color: #55556A !important; }

/* Pruefliste im Bestaetigungsblatt vor der Angebotsoeffnung. Bewusst eine
   Beschreibungsliste und keine Tabelle: es sind fuenf Paare, und eine Tabelle
   braeuchte Koepfe, die hier nichts erklaeren. Die Beschriftung bleibt auch
   am Telefon neben dem Wert, weil sie kurz ist. */
/* Die Kennzahl "n Fragen offen" ist jetzt eine Schaltflaeche. Sie muss wie die
   uebrigen Kennzahlen aussehen, sich aber als bedienbar zu erkennen geben. */
#vfStand button.achtung {
  font: inherit; text-align: inherit; cursor: pointer;
  border: 1px solid transparent;
}
#vfStand button.achtung:hover { border-color: rgba(138, 100, 18, .4); }
#vfStand button.achtung:focus-visible { outline: 2px solid #2b75ff; outline-offset: 2px; }

/* Das Protokollfeld zeigte acht von rund dreissig Zeilen. Fuer ein Dokument,
   das man vor dem Uebernehmen pruefen soll, ist das zu klein. */
.sb-prot { min-height: 420px; }
@media (max-height: 820px) { .sb-prot { min-height: 300px; } }

/* D3: Die Feedback-Blase lag ueber dem Inhalt. Am Telefon verdeckte sie das
   Auswahlfeld "Stand", am Rechner die untere rechte Ecke der Vergleichstabelle.
   Der Seitenfuss bekommt deshalb Platz fuer sie, und auf schmalen Schirmen
   rueckt sie in die Ecke, wo kein Formular liegt. */
.ck-inhalt, .ck main { padding-bottom: 86px; }
@media (max-width: 760px) {
  .ck-feedback { right: 14px; bottom: 14px; height: 42px; }
}

/* D10: Am Telefon standen zwei Menues uebereinander, der Website-Burger und
   darunter der Knopf fuer die Cockpit-Leiste. Der zweite rueckt in die
   Kopfzeile des Inhalts statt darunter und traegt jetzt seinen Zweck im Namen. */
@media (max-width: 900px) {
  .ck-leiste-knopf { margin-bottom: 4px; }
}

/* Ein Endzustand darf nicht aussehen wie ein Zwischenstand. "Zuschlag erteilt"
   trug dasselbe helle Gruen wie jede andere gute Nachricht. Jetzt gefuellt. */
.vf-marke.ende {
  background: #63638c; color: #ffffff; border-color: #63638c;
}
.vf-marke.gut.ende { background: #0a6b53; color: #ffffff; border-color: #0a6b53; }
.vf-marke.fehler.ende { background: #b91c1c; color: #ffffff; border-color: #b91c1c; }

/* ── Strecke des Verfahrens, oben in der Akte ───────────────────────── */
/* Drei Phasen als Band, darunter die offenen Schritte als Sprungmarken.
   Bewusst zurueckhaltend: Das ist eine Auskunft, kein Alarm. Nur die offenen
   Punkte tragen Farbe. */
.vf-strecke {
  background: #ffffff; border: 1px solid #e4e4ee; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px;
}
.vf-phasen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  list-style: none; margin: 0 0 14px; padding: 0; counter-reset: ph;
}
.vf-ph {
  border-top: 3px solid #e4e4ee; padding-top: 8px;
  display: grid; gap: 1px;
}
.vf-ph-name { font-size: 14px; font-weight: 600; color: #55556A; }
.vf-ph-zahl { font-size: 12px; color: #55556A; }
.vf-ph.aktuell { border-top-color: #6B1FD1; }
.vf-ph.aktuell .vf-ph-name { color: #17171F; }
.vf-ph.fertig { border-top-color: #0a6b53; }
.vf-ph.fertig .vf-ph-name { color: #12715B; }
.vf-ph.aktuell[data-phase="vorbereitung"] { border-top-color: var(--st-vorb-rand, #b07a1c); }
.vf-ph.aktuell[data-phase="durchfuehrung"] { border-top-color: var(--st-lauf-punkt, #2b75ff); }
.vf-ph.aktuell[data-phase="nachbereitung"] { border-top-color: var(--st-pruef-punkt, #6B1FD1); }

.vf-strecke-titel { font-size: 14px; font-weight: 600; color: #17171F; margin: 0 0 8px; }
.vf-strecke-fertig { font-size: 14px; color: #12715B; margin: 0; font-weight: 600; }
.vf-offen { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.vf-offen li { display: grid; gap: 1px; }
.vf-offen button { font-size: 14px; font-weight: 600; text-align: left; }
.vf-offen span { font-size: 12px; line-height: 1.5; color: #55556A; }

/* Nach einem Sprung kurz markieren, sonst ist unklar, wo man gelandet ist. */
.vf-gesprungen {
  animation: vfSprung 1.6s ease-out;
  scroll-margin-top: calc(var(--ck-klebe, 72px) + 16px);
}
@keyframes vfSprung {
  0%, 30% { box-shadow: 0 0 0 3px rgba(107, 31, 209, .3); }
  100%    { box-shadow: 0 0 0 3px rgba(107, 31, 209, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vf-gesprungen { animation: none; box-shadow: 0 0 0 3px rgba(107, 31, 209, .3); }
}
@media (max-width: 560px) {
  .vf-phasen { grid-template-columns: 1fr; gap: 4px; }
  .vf-ph { border-top-width: 2px; padding-top: 5px; }
}

/* ── Faehigkeiten nach Phasen, auf der Uebersicht ───────────────────── */
/* Drei Angaben je Zeile: was es ist, wie weit das Haus damit ist, wofuer es
   gut ist. Der Zweck steht bewusst UNTER dem Namen und nicht daneben: Er wird
   einmal gelesen und danach ueberflogen, der Name jedes Mal. */
.fa-liste { display: grid; gap: 1px; }
.fa-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px;
  padding: 7px 9px; border-radius: 8px;
  text-decoration: none; color: inherit;
}
.fa-zeile:hover { background: rgba(43, 117, 255, .05); }
.fa-zeile:focus-visible { outline: 2px solid #2b75ff; outline-offset: 2px; }
.fa-name { font-size: 14px; font-weight: 600; color: #17171F; }
.fa-stand { font-size: 12px; font-weight: 600; color: #12715B; text-align: right; white-space: nowrap; }
.fa-stand.leer { color: #55556A; font-weight: 400; }
.fa-stand.achtung { color: #8A4B00; }
.fa-zweck {
  grid-column: 1 / -1; font-size: 12px; line-height: 1.45; color: #55556A;
}
@media (max-width: 560px) {
  .fa-zeile { grid-template-columns: 1fr; }
  .fa-stand { text-align: left; }
}

/* ── Fristenkachel auf der Uebersicht ───────────────────────────────── */
/* Die Zeile traegt drei Angaben uebereinander: Verfahren, Restlauf, Datum. Der
   Restlauf steht bewusst groesser als das Datum, weil danach gehandelt wird.
   Rot ab sieben Tagen, grau nach Ablauf. Farbe traegt die Dringlichkeit NICHT
   allein, der Text sagt sie auch ("in 3 Tagen"). */
.fr-liste { display: grid; gap: 2px; }
.fr-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px;
  padding: 8px 9px; border-radius: 8px;
  text-decoration: none; color: inherit;
  border-left: 3px solid transparent;
}
.fr-zeile:hover { background: rgba(43, 117, 255, .05); }
.fr-zeile:focus-visible { outline: 2px solid #2b75ff; outline-offset: 2px; }
.fr-titel {
  font-size: 14px; font-weight: 600; color: #17171F;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-rest { font-size: 14px; font-weight: 700; color: #55556A; text-align: right; }
.fr-datum { grid-column: 1 / -1; font-size: 12px; color: #55556A; }
.fr-frage {
  grid-column: 1 / -1; justify-self: start; margin-top: 3px;
  font-size: 12px; font-weight: 600; color: #8A4B00;
  background: #fff1d6; border-radius: 5px; padding: 2px 7px;
}
.fr-zeile.eilig { border-left-color: #c2410c; background: rgba(194, 65, 12, .045); }
.fr-zeile.eilig .fr-rest { color: #A3241B; }
.fr-zeile.vorbei { border-left-color: #63638c; opacity: .72; }
.fr-warn { color: #A3241B; font-weight: 700; }
.fr-sammel { font-size: 12px; color: #8A4B00; font-weight: 600; }

.vf-oeff-pruef {
  margin: 0 0 18px; padding: 14px 16px;
  background: #f7f7fa; border: 1px solid #e4e4ee; border-radius: 10px;
  display: grid; grid-template-columns: 170px 1fr; gap: 7px 14px;
  font-size: 14px;
}
.vf-oeff-pruef dt { color: #55556A; }
.vf-oeff-pruef dd { margin: 0; color: #17171F; font-weight: 600; }
@media (max-width: 560px) {
  .vf-oeff-pruef { grid-template-columns: 1fr; gap: 2px 0; }
  .vf-oeff-pruef dd { margin-bottom: 8px; }
}

/* Fehlermeldungen in den Blaettern trugen bis 23.09.2026 nur .ck-blatt-klein und
   sahen damit aus wie jeder Nebentext. Rot, etwas groesser und mit Randstreifen,
   damit ein Fehler als Fehler lesbar ist. Der Rotton liegt bei 5,38:1 auf der
   hellen Flaeche. Die Hoehe kommt vom Polster, nicht von der Schrift, sonst
   springt das Blatt beim Einblenden. */
.ck-blatt-fehler {
  font-size: 14px !important; color: #A3241B !important;
  background: #ffe4e4; border-left: 3px solid #b91c1c;
  border-radius: 0 6px 6px 0; padding: 9px 12px; margin: 0 0 12px;
}

/* ── Feedback-Knopf, unten rechts auf jeder Cockpit-Seite ─────────────────── */

/* Weiss auf hellgrau war auf der hellen Flaeche praktisch unsichtbar (Ruben,
   22.09.2026). Jetzt der Hausverlauf mit Beschriftung, am Telefon nur das Symbol. */
.ck-feedback {
  position: fixed; right: 24px; bottom: 24px; z-index: 190;
  height: 46px; border-radius: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px;
  border: none;
  background: var(--gradient); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 26px -8px rgba(107, 31, 209, .5);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.ck-feedback:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(107, 31, 209, .62);
}
.ck-feedback:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ck-feedback svg { flex: 0 0 auto; }
/* Befund 4 (29.09.2026): Feedback als Zeile im Fuss der Leiste, der schwebende
   Knopf nur noch bei eingeklappter Leiste (schmale Bildschirme). */
.ck-feedback-zeile { margin: 0 0 8px; color: var(--ck-violett, #6B1FD1); font-weight: 600;
  background: rgba(107, 31, 209, .06); box-shadow: inset 0 0 0 1px rgba(107, 31, 209, .2); }
.ck-feedback-zeile:hover { background: rgba(107, 31, 209, .11); }
.ck-feedback-zeile { margin-top: auto; }
/* Zweite Zeile bei gleichnamigen Verfahren in der Leiste (Befund 18). */
.ck-unter-zusatz { display: block; font-size: 12px; color: var(--ck-gedaempft, #63638c);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-feedback-zeile + .ck-konto { margin-top: 0; }
@media (min-width: 901px) {
  html.ck-feedback-leiste .ck-feedback { display: none; }
}
@media (max-width: 900px) {
  .ck-feedback-zeile { display: none; }
  .ck-haupt { padding-bottom: 96px; }
}
@media (max-width: 900px) {
  .ck-feedback { width: 48px; padding: 0; border-radius: 50%; right: 16px; bottom: 16px; }
  .ck-feedback span { display: none; }
}

.ck-fb-feld {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--ck-rand); border-radius: 10px;
  background: #fafbfd; color: var(--ck-titel);
  font: inherit; font-size: 14px; line-height: 1.6;
  padding: 10px 12px; margin: 0 0 10px;
  outline: none; box-shadow: none; height: auto;
}
textarea.ck-fb-feld { min-height: 104px; resize: vertical; }
.ck-fb-feld:focus { border-color: rgba(43, 117, 255, .45);
                    box-shadow: 0 0 0 3px rgba(43, 117, 255, .09); }
.ck-fb-haken {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 1.5; color: #55556A; cursor: pointer; margin: 2px 0 4px;
}
.ck-fb-haken input { width: auto; margin: 3px 0 0; flex: none; }
.ck-fb-fehler { color: #A3241B; font-size: 14px; margin: 8px 0 0 !important; }
.ck-blatt-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Anhaenge im Eingabefeld
   ══════════════════════════════════════════════════════════════════════════ */

.nd-dateien {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 8px;
}
.nd-datei {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 6px 5px 11px;
  border: 1px solid var(--ck-rand);
  border-radius: 999px;
  background: #f7f8fb;
  font-size: 12px;
  color: var(--ck-kartentitel);
}
.nd-datei em { font-style: normal; color: var(--ck-gedaempft); font-size: 12px; }
.nd-datei button {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(15, 15, 30, .08);
  color: var(--ck-text);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.nd-datei button:hover { background: #c62828; color: #fff; }
.nd-datei.laedt { opacity: .7; }
.nd-datei.laedt em { color: var(--ck-blau-text); }
.nd-datei.kaputt { border-color: #f3b4b4; background: #fff4f4; }
.nd-datei.kaputt em { color: #A3241B; }

.nd-rund {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--ck-rand);
  border-radius: 999px;
  background: none;
  color: var(--ck-text);
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.nd-rund:hover { border-color: rgba(107, 31, 209, .4); background: rgba(107, 31, 209, .06); color: var(--ck-titel); }

.nd-feld.drauf {
  border-color: rgba(43, 117, 255, .6);
  background: rgba(43, 117, 255, .04);
}

/* Dateimarken in der Nachricht */
.nd-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nd-marke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--ck-rand); border-radius: 999px;
  background: #f7f8fb;
  font-size: 12px; color: var(--ck-kartentitel);
}
.nd-marke em { font-style: normal; color: var(--ck-gedaempft); }
.nd-zeile.ich .nd-marken { justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════════
   Vergabe-News, hell und im Cockpit
   ══════════════════════════════════════════════════════════════════════════ */

.nw-quellen { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.nw-quellen span {
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--ck-rand); background: var(--ck-flaeche);
  color: var(--ck-gedaempft);
}

.nw-briefing {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  background: var(--ck-flaeche);
  border: 1px solid rgba(43, 117, 255, .25);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 8px;
}
.nw-briefing h2 { font-size: 16px; color: var(--ck-titel); margin: 0 0 5px; }
.nw-briefing p { font-size: 14px; color: var(--ck-gedaempft); margin: 0; max-width: 560px; }
/* Amtliche Quellen heben sich ab: nur die duerfen wir zusammenfassen. */
.nw-quellen .amt { border-color: rgba(107, 31, 209, .3); color: #6B1FD1;
                   background: rgba(107, 31, 209, .05); }

/* Die Paketkacheln sind jetzt Verweise in den Checkout und keine Kaestchen mehr. */
a.ck-paket { text-decoration: none; cursor: pointer; }
a.ck-paket:hover { border-color: rgba(43, 117, 255, .5);
                   box-shadow: 0 4px 14px -4px rgba(15, 15, 30, .14); }

.nw-antwort { font-size: 14px; color: var(--ck-blau-text); margin: 10px 2px 0; min-height: 1em; }

/* Schalter fuer das Briefing. Kein Kaestchen, sondern ein Knopf mit Punkt: Der
   Zustand muss auf einen Blick lesbar sein, auch ohne Beschriftung daneben. */
.nw-schalter { display: flex; gap: 8px; flex-wrap: wrap; }
.nw-an {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 13px;
  border: 1px solid var(--ck-rand); border-radius: 10px;
  background: var(--ck-flaeche); color: var(--ck-kartentitel);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.nw-an i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ck-rand);
  box-shadow: inset 0 0 0 1px rgba(15, 15, 30, .08);
  transition: background .15s;
}
.nw-an:hover { border-color: rgba(43, 117, 255, .45); }
.nw-an.an { border-color: rgba(43, 117, 255, .5); background: rgba(43, 117, 255, .06);
            color: var(--ck-blau); }
.nw-an.an i { background: var(--ck-blau); box-shadow: 0 0 0 3px rgba(43, 117, 255, .16); }

/* Die Einleitung des letzten Briefings. Unser eigener Text, deshalb steht er hier
   gross, waehrend die Beitraege der Fachpresse darunter nur verlinkt sind. */
.nw-lage {
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-left: 3px solid var(--ck-violett, #6B1FD1);
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 16px;
}
.nw-lage-marke {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ck-gedaempft); margin-bottom: 8px;
}
.nw-lage p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ck-text); }

/* Fuss unter der Liste: Knopf zum Nachladen und der Stand. */
.nw-mehr {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin: 22px 0 8px;
}
.nw-mehr button {
  border: 1px solid var(--ck-rand); border-radius: 10px;
  background: var(--ck-flaeche); color: var(--ck-kartentitel);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 18px; cursor: pointer;
}
.nw-mehr button:hover:not(:disabled) { border-color: rgba(43, 117, 255, .45);
                                       color: var(--ck-blau); }
.nw-mehr button:disabled { opacity: .5; cursor: default; }
.nw-mehr span { font-size: 12px; color: var(--ck-gedaempft); }

.nw-tag { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 12px; }
.nw-tag h2 { font-size: 16px; color: var(--ck-titel); margin: 0; }
.nw-tag i { flex: 1 1 auto; height: 1px; background: var(--ck-linie); font-style: normal; }

.nw-eintrag {
  display: block; text-decoration: none;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
a.nw-eintrag:hover { border-color: rgba(43, 117, 255, .4); box-shadow: 0 4px 14px -4px rgba(15, 15, 30, .1); }
.nw-eintrag.schmal { padding: 14px 20px; }
.nw-eintrag h3 { font-size: 16px; color: var(--ck-titel); margin: 0 0 7px; line-height: 1.45; }
.nw-eintrag p  { font-size: 14px; line-height: 1.65; margin: 0 0 9px; color: var(--ck-text); }
.nw-meta { display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
           font-size: .75rem; color: var(--ck-gedaempft); }
.nw-meta .nw-quelle { font-weight: 600; color: var(--ck-kartentitel); }
.nw-meta .nw-kat { padding: 2px 8px; border-radius: 12px; border: 1px solid var(--ck-rand); }

.nw-kurz { display: flex; gap: 12px; align-items: baseline; padding: 8px 0;
           border-bottom: 1px solid var(--ck-linie); }
.nw-kurz:last-child { border-bottom: none; }
.nw-kurz a { font-size: 14px; color: var(--ck-text); text-decoration: none; flex: 1 1 auto; }
.nw-kurz a:hover { color: var(--ck-blau-text); text-decoration: underline; }
.nw-kurz .nw-quelle { font-size: .75rem; color: var(--ck-gedaempft); flex: 0 0 auto; }

/* ── Erzeugte Dateien in der Antwort ────────────────────────────────── */
/* Bewusst mit Format und Groesse daneben: Bei einer Datei, die eine KI gebaut hat,
   will man vor dem Klick wissen, was kommt. */

.nd-ausgaben { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nd-aus {
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--ck-rand);
  border-radius: 11px;
  background: var(--ck-flaeche);
  color: var(--ck-kartentitel);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: border-color .14s, box-shadow .14s, color .14s;
}
.nd-aus:hover {
  border-color: rgba(43, 117, 255, .5);
  color: var(--ck-blau);
  box-shadow: 0 3px 12px -4px rgba(15, 15, 30, .14);
}
.nd-aus > svg { flex: 0 0 auto; color: var(--ck-violett); }
.nd-aus-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-aus em {
  flex: 0 0 auto; font-style: normal; font-weight: 500;
  font-size: 12px; color: var(--ck-gedaempft);
}

/* ══════════════════════════════════════════════════════════════════════════
   Bieterfragen-Bob
   Zwei Spalten: links die Unterlagen und was Bob darin gefunden hat, rechts die
   Bieterfragen. Unter 1100 px untereinander, weil zwei Spalten dort nur noch
   Schnipsel waeren.
   ══════════════════════════════════════════════════════════════════════════ */

.bb-kopfknoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-wahl {
  max-width: 340px;
  padding: 8px 12px;
  border: 1px solid var(--ck-rand); border-radius: 8px;
  background: var(--ck-flaeche); color: var(--ck-kartentitel);
  font: inherit; font-size: 14px; height: auto;
}

.bb-raster {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* minmax(0, 1fr) statt 1fr: Eine Rasterspalte hat als Mindestmass min-content, die
   Karte kann sonst nicht unter ihre breiteste Zeile schrumpfen. Gemessen am 22.09.2026:
   Fenster 390 px, Dokument 511 px, also 121 px Ueberlauf nach rechts. */
@media (max-width: 1100px) { .bb-raster { grid-template-columns: minmax(0, 1fr); } }

.bb-spalte {
  min-width: 0;                 /* siehe Ueberlauf-Kommentar am Raster */
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 15, 30, .05);
}
.bb-spalte > h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ck-gedaempft); margin: 0 0 14px;
}

/* ── Ablage ─────────────────────────────────────────────────────────── */

.bb-ablage {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 24px 18px;
  border: 1.5px dashed var(--ck-rand);
  border-radius: 12px;
  background: #fafbfd;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.bb-ablage:hover, .bb-ablage.drauf {
  border-color: rgba(43, 117, 255, .5); background: rgba(43, 117, 255, .04);
}
.bb-ablage svg { color: var(--ck-gedaempft); }
.bb-ablage strong { font-size: 14px; color: var(--ck-kartentitel); }
.bb-ablage span { font-size: 12px; color: var(--ck-gedaempft); line-height: 1.5; }

.bb-liste { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 14px; }
.bb-datei {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.bb-datei:hover { background: rgba(107, 31, 209, .05); }
.bb-name { flex: 1 1 auto; min-width: 0; color: var(--ck-kartentitel);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-meta { flex: 0 0 auto; font-size: 12px; color: var(--ck-gedaempft); }
.bb-datei .ck-weg { opacity: 0; }
.bb-datei:hover .ck-weg { opacity: 1; }

.bb-klein { font-size: .75rem; color: var(--ck-gedaempft); line-height: 1.55; margin: 8px 0 0; }
.bb-klein.warn { color: #A3241B; font-weight: 600; }

/* ── Analyse ────────────────────────────────────────────────────────── */

.bb-analyse { margin-top: 18px; border-top: 1px solid var(--ck-linie); padding-top: 16px; }
.bb-analyse h3 { font-size: 16px; color: var(--ck-titel); margin: 0 0 8px; }
.bb-analyse > p { font-size: 14px; line-height: 1.6; color: var(--ck-text); margin: 0 0 14px; }
.bb-zeile {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--ck-linie);
}
.bb-zeile:last-child { border-bottom: none; }
.bb-zeile > span { flex: 0 0 38%; color: var(--ck-gedaempft); }
.bb-zeile > strong { flex: 1 1 auto; color: var(--ck-kartentitel); font-weight: 600; }

.bb-block { margin-top: 14px; }
.bb-block h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ck-gedaempft); margin: 0 0 6px;
}
.bb-block ul { margin: 0; padding-left: 18px; }
.bb-block li { font-size: 14px; line-height: 1.6; color: var(--ck-text); margin: 3px 0; }
.bb-block.warn {
  background: #fff8e8; border: 1px solid #f3d9a0; border-radius: 10px; padding: 12px 14px;
}
.bb-block.warn h4 { color: #8A4B00; }
.bb-block.warn li { color: #8A4B00; }

/* ── Fragen ─────────────────────────────────────────────────────────── */

.bb-eingabe { margin-bottom: 16px; }
.bb-eingabe textarea {
  width: 100%;
  height: auto; min-height: 76px; max-height: 260px;
  padding: 11px 13px;
  border: 1px solid var(--ck-rand); border-radius: 12px;
  background: #fafbfd; color: var(--ck-titel);
  font: inherit; font-size: 14px; line-height: 1.6;
  resize: vertical; outline: none; box-shadow: none;
}
/* Voller Blauton statt 45 Prozent Deckkraft: der Rahmen ist die einzige Begrenzung des
   Feldes und lag mit 1,82 zu 1 unter der Schwelle 3 zu 1. */
.bb-eingabe textarea:focus {
  border-color: var(--ck-blau); box-shadow: 0 0 0 3px rgba(43, 117, 255, .18);
}
.bb-eingabe-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px;
}
.bb-eingabe-fuss .bb-klein { margin: 0; }

.bb-fragen { display: flex; flex-direction: column; gap: 12px; }

.bb-frage {
  border: 1px solid var(--ck-rand);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--ck-flaeche);
}
.bb-frage.fertig { border-color: #dfe3ee; }
.bb-frage.laeuft { border-color: rgba(43, 117, 255, .4); background: rgba(43, 117, 255, .03); }

.bb-fkopf { display: flex; align-items: flex-start; gap: 11px; }
.bb-nr {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(107, 31, 209, .1);
  color: #6B1FD1;
  font-size: 12px; font-weight: 700;
}
.bb-ftext {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--ck-titel); font-weight: 600;
}
.bb-fkopf .ck-weg { opacity: 0; margin-top: -2px; }
.bb-frage:hover .ck-weg { opacity: 1; }

.bb-arbeit { padding: 10px 0 2px 33px; }

.bb-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 0 33px;
  font-size: 14px; color: var(--ck-gedaempft);
}
.bb-marke {
  padding: 2px 9px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
}
.bb-marke.aenderung { background: #fff1e6; border: 1px solid #f0c9a4; color: #8A4B00; }

.bb-antwort {
  margin: 12px 0 0 33px;
  padding: 13px 15px;
  background: #f7f8fb;
  border: 1px solid var(--ck-linie);
  border-radius: 11px;
  position: relative;
}
.bb-antwort h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ck-gedaempft); margin: 0 0 7px;
}
.bb-antwort p { font-size: 14px; line-height: 1.68; color: var(--ck-text); margin: 0; }
.bb-kopieren {
  margin-top: 10px;
  border: 1px solid var(--ck-rand); border-radius: 7px;
  background: var(--ck-flaeche); color: var(--ck-kartentitel);
  font: inherit; font-size: .75rem; font-weight: 600;
  padding: 5px 11px; cursor: pointer;
}
.bb-kopieren:hover { border-color: rgba(43, 117, 255, .45); color: var(--ck-blau); }

.bb-frage .bb-block { margin-left: 33px; }
.bb-fund li { margin: 6px 0; }
.bb-fund em { color: var(--ck-gedaempft); font-style: italic; }
.bb-hinweis {
  margin: 12px 0 0 33px;
  font-size: 14px; line-height: 1.6; color: var(--ck-gedaempft);
  border-left: 2px solid var(--ck-rand); padding-left: 11px;
}
.bb-fussz {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0 33px;
}
.bb-fussz .bb-klein { margin: 0; }

@media (max-width: 560px) {
  .bb-status, .bb-antwort, .bb-hinweis, .bb-fussz, .bb-frage .bb-block { margin-left: 0; }
  .bb-arbeit { padding-left: 0; }
}

/* ── Ueberarbeitung vom 22.09.2026 ───────────────────────────────────────── */

/* Meldezeile. Sie steht oben, bleibt stehen, bis sie geschlossen wird, und wird
   Hilfsmitteln angesagt. Vorher landete jeder Fehler links unter dem Analyseknopf und
   loeschte sich nach sieben Sekunden selbst. */
.bb-meldung {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff8e8; border: 1px solid #f3d9a0; border-radius: 12px;
  padding: 12px 14px; margin: 0 0 16px;
  font-size: 14px; line-height: 1.6; color: #8A4B00;
}
.bb-meldung button {
  margin-left: auto; flex: 0 0 auto;
  border: none; background: none; color: #8A4B00; cursor: pointer; padding: 2px;
  display: inline-flex; align-items: center;
}
.bb-meldung button:hover { color: #8A4B00; }

/* Die Ablage ist jetzt ein Knopf und damit mit der Tastatur erreichbar. Vorher war sie
   ein div mit Klickbehandlung, der Haupteinstieg war ohne Maus nicht bedienbar. */
.bb-ablage { width: 100%; font: inherit; text-align: center; appearance: none; }
.bb-ablage:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 2px; }

.bb-datei.leer .bb-name { color: #A3241B; }

/* Aufklappbare Gruppen im Ueberblick. */
.bb-gruppe { border-top: 1px solid var(--ck-linie); }
.bb-gruppe > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ck-gedaempft);
}
.bb-gruppe > summary::-webkit-details-marker { display: none; }
.bb-gruppe > summary::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.bb-gruppe[open] > summary::before { transform: rotate(45deg); }
.bb-gruppe > summary:hover { color: var(--ck-titel); }
.bb-gruppe > summary em {
  margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--ck-gedaempft); background: #f5f6fa; border-radius: 10px; padding: 1px 8px;
}
.bb-gruppe.warn > summary { color: #8A4B00; }
.bb-gruppe.warn > summary em { background: #fff1d6; color: #8A4B00; }
.bb-gruppe-inhalt { padding: 0 0 12px; }
.bb-gruppe-inhalt ul { margin: 0; padding-left: 18px; }
.bb-gruppe-inhalt li { font-size: 14px; line-height: 1.6; color: var(--ck-text); margin: 4px 0; }

/* Jede Luecke ist eine Bieterfrage, die noch nicht gestellt wurde. */
.bb-luecken { list-style: none; padding-left: 0; }
.bb-luecke {
  border-left: 2px solid #f3d9a0; padding: 2px 0 8px 12px; margin: 0 0 10px;
}
.bb-luecke > span { display: block; font-size: 14px; line-height: 1.6; color: var(--ck-text); }
.bb-luecke-knopf {
  margin-top: 6px;
  border: 1px solid var(--ck-rand); border-radius: 7px; background: var(--ck-flaeche);
  color: var(--ck-kartentitel); font: inherit; font-size: .75rem; font-weight: 600;
  padding: 4px 10px; cursor: pointer;
}
.bb-luecke-knopf:hover:not(:disabled) { border-color: rgba(43, 117, 255, .45); color: var(--ck-blau); }
.bb-luecke-knopf:disabled { opacity: .5; cursor: default; }
.bb-luecke-knopf:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 2px; }

/* Bilanz ueber der Fragenliste: Stand auf einen Blick und die Sammelaktionen. */
.bb-bilanz {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--ck-rand); border-radius: 12px;
  padding: 10px 14px; margin: 0 0 14px; background: #fafbfd;
}
.bb-bilanz-zahlen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                    font-size: 14px; color: var(--ck-kartentitel); }
.bb-bilanz-zahlen span { display: inline-flex; align-items: center; gap: 6px; }
.bb-bilanz-zahlen .kc-punkt { flex: 0 0 auto; }
.bb-bilanz-tun { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.bb-bilanz-tun .bb-klein { margin: 0; }
.bb-lauf { font-size: 14px; font-weight: 600; color: var(--ck-blau); }

/* Sekundenanzeige der laufenden Karte. */
.bb-dauer {
  display: inline-block; margin-left: 10px;
  font-family: 'Courier New', Consolas, monospace; font-size: 14px;
  color: var(--ck-gedaempft);
}
.bb-arbeit .bb-klein { display: block; margin-top: 8px; }

/* Freigabe. Ohne Haken kein Kopierknopf: Die Antwort geht an alle Bewerber. */
.bb-freigabe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ck-linie);
}
.bb-freigabe label {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.5; color: var(--ck-kartentitel); cursor: pointer;
}
.bb-freigabe input { width: auto; margin: 2px 0 0; flex: none; accent-color: #00b98c; }
.bb-freigabe-am { font-size: 12px; color: #12715B; font-weight: 600; }
.bb-freigabe .bb-kopieren { margin-top: 0; margin-left: auto; }
.bb-kopieren:disabled { opacity: .45; cursor: default; }
.bb-frage.frei { border-color: rgba(0, 185, 140, .35); }

.bb-marke.offen { background: #fff1e6; border: 1px solid #f0c9a4; color: #8A4B00; }

/* ── Spaltenkopf, Einklappen der Unterlagen ──────────────────────────────── */

.bb-spaltenkopf { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.bb-spaltenkopf h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ck-gedaempft); margin: 0;
}
.bb-kurz { font-size: 12px; color: var(--ck-gedaempft); }
.bb-klapp {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ck-rand); border-radius: 8px; background: var(--ck-flaeche);
  color: var(--ck-gedaempft); font: inherit; font-size: .75rem; font-weight: 600;
  padding: 4px 9px; cursor: pointer;
}
.bb-klapp:hover { border-color: rgba(43, 117, 255, .45); color: var(--ck-blau); }
.bb-klapp:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 2px; }
.bb-klapp svg { transition: transform .15s; }
.bb-links.zu .bb-klapp svg { transform: rotate(180deg); }
.bb-raster.zu { grid-template-columns: minmax(0, 1fr); }
.bb-links.zu { padding: 12px 16px; }
.bb-links.zu .bb-spaltenkopf { margin: 0; }

/* ── Was in einem Paket steckt ───────────────────────────────────────────── */

/* Der Dateiname ist ein Knopf: Bei einem ZIP klappt er das Paket auf, bei einer
   einzelnen Datei oeffnet er sie. Vorher stand dort nur Text und die Zahl "13 Seiten",
   die in Wahrheit Dateien zaehlte. */
.bb-datei .bb-name {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 14px; text-align: left;
  color: var(--ck-kartentitel); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-datei .bb-name:hover:not(:disabled) { color: var(--ck-blau); text-decoration: underline; }
.bb-datei .bb-name:disabled { cursor: default; color: var(--ck-gedaempft); }
.bb-datei .bb-name:focus-visible {
  outline: 2px solid var(--ck-blau); outline-offset: 2px; border-radius: 4px;
}

.bb-inhalt { margin: 2px 0 10px 12px; padding-left: 12px; border-left: 2px solid var(--ck-linie); }
.bb-paket { list-style: none; margin: 0; padding: 0; }
.bb-paket li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.bb-paket-name {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 12px; text-align: left;
  color: var(--ck-kartentitel); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-paket-name:hover { color: var(--ck-blau); text-decoration: underline; }
.bb-paket-name:focus-visible {
  outline: 2px solid var(--ck-blau); outline-offset: 2px; border-radius: 4px;
}
.bb-paket-meta { flex: 0 0 auto; font-size: 12px; color: var(--ck-gedaempft); }
.bb-paket li.nicht .bb-paket-name { color: #A3241B; cursor: default; }
.bb-paket li.nicht .bb-paket-name:hover { text-decoration: none; }
.bb-paket li.nicht .bb-paket-meta { color: #A3241B; }

/* ── Fundstellen als Knoepfe ─────────────────────────────────────────────── */

.bb-fund-knopf {
  display: block; width: 100%;
  border: none; background: none; margin: 0 0 0 -8px; padding: 5px 8px;
  border-radius: 8px; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--ck-text);
}
.bb-fund-knopf:hover { background: rgba(43, 117, 255, .06); }
.bb-fund-knopf strong { color: var(--ck-kartentitel); }
.bb-fund-knopf:hover strong, .bb-fund-knopf:hover .bb-fund-auf { color: var(--ck-blau); }
.bb-fund-knopf em { color: var(--ck-gedaempft); font-style: italic; }
.bb-fund-knopf:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 1px; }
.bb-fund-auf {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--ck-gedaempft);
}

/* ── Leser fuer Fundstellen ──────────────────────────────────────────────── */

.bb-leser .ck-blatt-kasten {
  width: min(940px, 100%); max-height: min(86vh, 920px);
  display: flex; flex-direction: column; padding: 20px 22px 18px;
}
.bb-leser-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.bb-leser-wer { min-width: 0; }
.bb-leser-kopf h2 { font-size: 1rem; margin: 0 0 3px; word-break: break-word; }
.bb-leser-kopf p { font-size: 12px; color: var(--ck-gedaempft); margin: 0; }
.bb-leser-kopf .ck-weg { margin-left: auto; flex: 0 0 auto; opacity: 1; }
.bb-leser-text {
  position: relative; flex: 1 1 auto; overflow: auto;
  min-height: 220px;
  border: 1px solid var(--ck-rand); border-radius: 12px; background: #fafbfd;
  padding: 14px 16px; margin: 0 0 12px;
  font-size: 14px; line-height: 1.7; color: var(--ck-text);
  white-space: pre-wrap; overflow-wrap: break-word;
}
.bb-leser-text:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 2px; }
.bb-treffer {
  background: #ffe08a; color: #8A4B00; border-radius: 3px;
  padding: 1px 2px; box-shadow: 0 0 0 3px #ffe08a;
}
.bb-leser-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bb-leser-fuss .bb-klein { flex: 1 1 220px; margin: 0; }
@media (max-width: 620px) {
  .bb-leser .ck-blatt-kasten { max-height: 92vh; padding: 16px 14px 14px; }
  .bb-leser-fuss .kc-knopf { flex: 1 1 auto; justify-content: center; }
}

/* Loeschen eines Vorgangs, mit Ruecksicherung in der Kopfzeile statt Systemdialog. */
.bb-weg { color: var(--ck-gedaempft); }
.bb-weg:hover:not(:disabled) { border-color: rgba(239, 68, 68, .45); color: #A3241B;
                               background: rgba(239, 68, 68, .06); }
.bb-weg:disabled { opacity: .45; cursor: default; }
.bb-frage-weg {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 12px;
  border: 1px solid #f0c9c9; border-radius: 9px;
  background: #fff5f5;
  font-size: 14px; color: #A3241B;
}
.bb-frage-weg button {
  border: 1px solid var(--ck-rand); border-radius: 7px;
  background: var(--ck-flaeche); color: var(--ck-kartentitel);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 11px; cursor: pointer;
}
.bb-frage-weg .bb-ja { border-color: rgba(239, 68, 68, .45); color: #A3241B; }
.bb-frage-weg .bb-ja:hover { background: #c62828; color: #fff; border-color: #c62828; }

/* Diese beiden Regeln stehen absichtlich am Ende der Datei. .bb-datei .ck-weg und
   .bb-fkopf .ck-weg setzen opacity 0 und haben dieselbe Spezifitaet wie die
   Fokusregel weiter oben; wer spaeter steht, gewinnt. Ohne das tabbt man auf einen
   unsichtbaren Loeschknopf. */
.bb-datei .ck-weg:focus, .bb-datei .ck-weg:focus-visible,
.bb-fkopf .ck-weg:focus, .bb-fkopf .ck-weg:focus-visible { opacity: 1;
                                  outline: 2px solid var(--ck-blau);
                                  outline-offset: 2px; }

/* ── Angebotsabgabe: Bieterseite und Submissionsblock ───────────────── */

/* Die Bieterseite hat keine Cockpit-Leiste, braucht aber denselben Farbsatz.
   Deshalb haengen die Werte hier ein zweites Mal, diesmal an .ag-seite. Das ist
   Absicht: Die Seite soll ohne das Cockpit-Gitter auskommen, ein Bieter hat kein
   Konto und sieht nie ein Menue. */
.ag-seite {
  --ck-flaeche:   #ffffff;
  --ck-grund:     #eef0f5;
  --ck-rand:      #e4e4ee;
  --ck-linie:     #e9e9f0;
  --ck-titel:     #0f0f1e;
  --ck-kartentitel: #242438;
  --ck-text:      #505050;
  --ck-gedaempft: #63638c;
  --ck-blau:      #2b75ff;
  /* Dieselbe Hausfarbe eine Stufe dunkler, ausschliesslich fuer Text.
     #2b75ff liegt auf Weiss bei 4,12:1 und reicht damit fuer Raender und
     Fokusringe (3:1), nicht aber fuer Fliesstext (4,5:1). #1b5fd6 kommt auf
     5,75:1 und ist daneben kaum zu unterscheiden. */
  --ck-blau-text: #1b5fd6;
  --ck-violett:   #6B1FD1;
  background: var(--ck-grund);
  color: var(--ck-text);
}

.ag-haupt {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--ck-kopf, 105px) + 28px) 20px 60px;
}

.ag-kasten {
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 16px;
}

.ag-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ck-violett); margin: 0 0 8px;
}
.ag-kasten h1 {
  font-size: 20px; line-height: 1.3; color: var(--ck-titel);
  margin: 0 0 16px; font-weight: 700;
}
.ag-kasten h2 {
  font-size: 16px; color: var(--ck-titel); margin: 0 0 6px; font-weight: 700;
}
.ag-kasten > p { font-size: 14px; line-height: 1.65; color: var(--ck-text); }

.ag-daten { display: grid; gap: 1px; margin: 0 0 4px;
            background: var(--ck-linie); border-radius: 10px; overflow: hidden; }
.ag-daten > div { display: flex; gap: 14px; padding: 9px 12px; background: var(--ck-flaeche); }
.ag-daten dt { flex: 0 0 168px; font-size: 12px; color: var(--ck-gedaempft); }
.ag-daten dd { margin: 0; font-size: 14px; color: var(--ck-kartentitel);
               font-weight: 600; min-width: 0; word-break: break-word; }

.ag-gegenstand { font-size: 14px; line-height: 1.7; color: var(--ck-text); margin: 14px 0 0; }

.ag-hinweis {
  margin: 14px 0 0; padding: 11px 13px;
  border-radius: 9px; border: 1px solid #f4d9a8; background: #fff8ec;
  font-size: 14px; line-height: 1.6; color: #8A4B00;
}

.ag-klein { font-size: 12px; color: var(--ck-gedaempft); margin: 0 0 14px; }

.ag-liste { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 14px; }
.ag-datei {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px 8px 11px;
  border: 1px solid var(--ck-linie); border-radius: 9px;
  background: #fafbfd;
}
.ag-datei .ag-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ck-kartentitel);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-datei .ag-meta { flex: 0 0 auto; font-size: .75rem; color: var(--ck-gedaempft);
                     font-variant-numeric: tabular-nums; }
/* Der Loeschknopf ist im Cockpit unsichtbar, bis man die Zeile beruehrt. Hier nicht:
   Ein Bieter arbeitet unter Zeitdruck und darf nicht suchen muessen. */
.ag-datei .ck-weg { opacity: .75; }
.ag-datei .ck-weg:hover { opacity: 1; color: #A3241B; background: #ffe4e4; }

.ag-recht {
  margin: 4px 0 0; padding: 12px 14px;
  border-radius: 9px; background: var(--ck-grund);
  font-size: 12px; line-height: 1.65; color: var(--ck-text);
}
/* Fortschritt der Uebertragung. Bei 25 Dateien a 60 MB ist der Unterschied
   zwischen "es laeuft" und "es haengt" das Einzige, was den Bieter am letzten
   Tag vom Neuladen der Seite abhaelt. */
.ag-fortschritt { margin: 14px 0 0; display: grid; gap: 6px; }
.ag-balken {
  height: 8px; border-radius: 5px; background: #e4e4ee; overflow: hidden;
}
.ag-balken > span {
  display: block; height: 100%; width: 2%; border-radius: 5px;
  background: linear-gradient(90deg, #2b75ff, #6B1FD1);
  transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) { .ag-balken > span { transition: none; } }

.ag-fuss { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Die Bestaetigung ist der Beleg des Bieters. Sie hebt sich deshalb ab. */
.ag-quittung { border-color: rgba(0, 185, 140, .4); background: #f5fdfa; }
.ag-quittung h2 { color: #12715B; }
.ag-quittung .ag-daten > div { background: #fff; }

.ag-pruef { list-style: none; margin: 14px 0 0; padding: 0;
            display: flex; flex-direction: column; gap: 6px; }
.ag-pruef li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 12px; border: 1px solid var(--ck-rand); border-radius: 9px; background: #fff;
}
.ag-pruef .ag-name { font-size: 14px; font-weight: 600; color: var(--ck-kartentitel); }
.ag-pruef .ag-meta { font-size: .75rem; color: var(--ck-gedaempft); }
.ag-pruef code {
  flex: 1 0 100%; font-size: 12px; letter-spacing: .2px; color: var(--ck-gedaempft);
  word-break: break-all; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.ag-frueher { list-style: none; margin: 0; padding: 0; }
.ag-frueher li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 10px 2px; border-bottom: 1px solid var(--ck-linie); font-size: 14px;
}
.ag-frueher li:last-child { border-bottom: none; }
.ag-stand {
  font-style: normal; font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(107, 31, 209, .12); color: #6B1FD1;
}
.ag-stand.ersetzt { background: #eef0f5; color: var(--ck-gedaempft); }
.ag-stand.zurueckgezogen { background: #fff1d6; color: #8A4B00; }
.ag-stand.geoeffnet { background: rgba(0, 185, 140, .14); color: #12715B; }
.ag-code, .sb-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px; letter-spacing: .5px; color: var(--ck-kartentitel);
}

@media (max-width: 560px) {
  .ag-haupt { padding-left: 16px; padding-right: 16px; }
  .ag-kasten { padding: 20px 17px; border-radius: 12px; }
  .ag-daten > div { flex-direction: column; gap: 2px; }
  .ag-daten dt { flex: none; }
}

/* ── Submission in der Verfahrensakte ───────────────────────────────── */

.sb-schalter {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 15px; margin-bottom: 14px;
  border: 1px solid var(--ck-rand); border-radius: 11px; background: #fafbfd;
}
.sb-schalter .sb-lage { flex: 1 1 200px; min-width: 0; }
.sb-lage strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.sb-lage span { display: block; font-size: 12px; color: var(--ck-gedaempft); margin-top: 2px; }

/* Ein Schalter, kein Kontrollkaestchen. Die Abgabe frei- oder abzuschalten ist eine
   Entscheidung mit Wirkung nach aussen und soll sich auch so anfuehlen. */
.sb-kipp { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.sb-kipp input { position: absolute; opacity: 0; width: 100%; height: 100%;
                 margin: 0; cursor: pointer; }
.sb-kipp i {
  position: absolute; inset: 0; border-radius: 20px; background: #d5d5e2;
  transition: background .18s; pointer-events: none;
}
.sb-kipp i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 15, 30, .3);
  transition: transform .18s;
}
.sb-kipp input:checked + i { background: var(--ck-violett); }
.sb-kipp input:checked + i::after { transform: translateX(20px); }
.sb-kipp input:focus-visible + i { outline: 2px solid var(--ck-blau); outline-offset: 2px; }

.sb-sperre {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; margin-bottom: 14px;
  border: 1px solid #d9c6f5; border-radius: 11px;
  background: linear-gradient(180deg, rgba(107, 31, 209, .05), rgba(43, 117, 255, .04));
}
.sb-sperre svg { flex: 0 0 auto; color: var(--ck-violett); margin-top: 1px; }
.sb-sperre strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.sb-sperre p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; color: var(--ck-text); }

.sb-liste { list-style: none; margin: 0; padding: 0; }
.sb-liste > li {
  padding: 12px 2px; border-bottom: 1px solid var(--ck-linie);
}
.sb-liste > li:last-child { border-bottom: none; }
.sb-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sb-nr {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--ck-grund); color: var(--ck-gedaempft);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sb-wer { flex: 1 1 180px; min-width: 0; }
.sb-wer strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.sb-wer span { display: block; font-size: .75rem; color: var(--ck-gedaempft); margin-top: 1px; }
.sb-zeit { flex: 0 0 auto; font-size: 12px; color: var(--ck-text);
           font-variant-numeric: tabular-nums; }

.sb-dateien { list-style: none; margin: 10px 0 0 38px; padding: 0;
              display: flex; flex-direction: column; gap: 4px; }
.sb-dateien li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border: 1px solid var(--ck-linie); border-radius: 8px; background: #fafbfd;
}
.sb-dateien .sb-name { flex: 1 1 auto; min-width: 0; font-size: 14px;
                       color: var(--ck-kartentitel);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-dateien .sb-meta { flex: 0 0 auto; font-size: 12px; color: var(--ck-gedaempft);
                       font-variant-numeric: tabular-nums; }
.sb-nachricht {
  margin: 10px 0 0 38px; padding: 10px 12px;
  border-left: 2px solid var(--ck-rand); background: var(--ck-grund);
  border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.6; color: var(--ck-text);
}

/* Die Oeffnung: zwei Schritte, zwei Konten. Die Karte zeigt immer, wer schon da ist. */
.sb-oeffnung {
  margin-top: 14px; padding: 15px 16px;
  border: 1px solid var(--ck-rand); border-radius: 11px; background: #fafbfd;
}
.sb-schritte { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 14px; }
.sb-schritt {
  flex: 1 1 220px; display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--ck-rand); border-radius: 9px; background: #fff;
}
.sb-schritt.fertig { border-color: rgba(0, 185, 140, .45); background: #f5fdfa; }
.sb-haken {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ck-grund); color: var(--ck-gedaempft);
  font-size: 12px; font-weight: 700;
}
/* #0b7a5f lag auf der gemischten Flaeche bei 4,41:1, bei 11,5 px fett sind
   4,5:1 gefordert. #0a6b53 kommt auf 5,2:1. */
.sb-schritt.fertig .sb-haken { background: rgba(0, 185, 140, .16); color: #12715B; }
.sb-schritt strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.sb-schritt span { display: block; font-size: .75rem; color: var(--ck-gedaempft); margin-top: 2px; }

.sb-zugaenge { list-style: none; margin: 0; padding: 0; }
.sb-zugaenge li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 2px; border-bottom: 1px solid var(--ck-linie);
}
.sb-zugaenge li:last-child { border-bottom: none; }
.sb-zugaenge .sb-wer { flex: 1 1 160px; }
.sb-link {
  flex: 1 1 100%; font-size: 12px; color: var(--ck-gedaempft); word-break: break-all;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.sb-prot {
  width: 100%; min-height: 320px; margin-top: 12px;
  padding: 14px 16px; border: 1px solid var(--ck-rand); border-radius: 10px;
  background: #fafbfd; color: var(--ck-text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px; line-height: 1.65; resize: vertical;
}

@media (max-width: 560px) {
  .sb-dateien, .sb-nachricht { margin-left: 0; }
}

/* Die Marke fuer ersetzte Angebote. Bewusst farblos: Ein ersetztes Angebot ist
   kein Fehler und keine Warnung, es ist nur nicht mehr das geltende. */
.vf-marke.grau { background: #eef0f5; color: var(--ck-gedaempft); }

/* Das Protokoll ist ein Fliesstext ueber mehrere Bildschirme. In 560 px liest
   sich das wie eine Quittung. */
#vfProtBlatt .ck-blatt-kasten { width: min(760px, 100%); }

/* Ein ersetztes Angebot bleibt sichtbar, denn es gehoert in die Akte. Aber es
   tritt zurueck, damit beim Ueberfliegen nicht das falsche gewertet wird. */
.sb-liste > li.ersetzt .sb-wer strong,
.sb-liste > li.ersetzt .sb-zeit { color: var(--ck-gedaempft); font-weight: 500; }
.sb-liste > li.ersetzt .sb-dateien { opacity: .62; }
.sb-ersetzt {
  margin: 6px 0 0 38px; font-size: 12px; color: var(--ck-gedaempft);
}
@media (max-width: 560px) { .sb-ersetzt { margin-left: 0; } }

/* Feste Unterpunkte unter einer Menuezeile (Adressbuch und Vorlagen unter
   Verfahren). Anders als der Zweig des Vergabe-Nerd klappen sie nicht zu: Bei
   zwei Zeilen kostet das Aufklappen mehr, als es spart. */
.ck-unter.ck-fest { margin-top: 1px; margin-bottom: 4px; }
.ck-unter.ck-fest .ck-unterzeile > a {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 8px;
}
.ck-unter.ck-fest .ck-unterzeile svg { flex: 0 0 auto; color: var(--ck-gedaempft); }
.ck-unter.ck-fest .ck-unterzeile.aktiv svg { color: var(--ck-violett); }

/* Ein Knopf, der wie ein Verweis aussieht. Fuer Entscheidungen, die selten
   vorkommen und nicht gleichrangig neben dem Hauptknopf stehen sollen. */
.ck-verweis {
  border: none; background: none; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ck-blau); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.ck-verweis:hover { color: var(--ck-violett); }
.ck-verweis:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 3px; }
.sb-umstellen { margin: 12px 0 0; }

/* ── Vergabevermerk und Vergabestatistik ────────────────────────────────── */

/* Widerspruch zwischen Auftragswert und Verfahrensart. Steht direkt unter der
   Kopfzeile, weil sie genau die Zeile darueber in Frage stellt. Rot und nicht
   gedaempft: das ist keine Randnotiz, sondern eine Angabe, die berichtigt werden
   muss, bevor der Vermerk in die Akte geht. */
.vm-schwelle {
  margin: 10px 0 0; padding: 11px 14px;
  background: #ffe4e4; border-left: 3px solid #b91c1c;
  border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 1.6; color: #A3241B;
}

.vm-unter { font-size: 14px; color: var(--ck-gedaempft); margin: -6px 0 18px; }

.vm-raster {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
@media (max-width: 1180px) { .vm-raster { grid-template-columns: minmax(0, 1fr); } }
.vm-spalte { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vm-spalte > .vf-zwischen { margin-top: 0 !important; }

/* Die Lückenliste ist der wichtigste Baustein der Seite. Sie ist der Grund,
   warum man hier ist: sehen, was noch fehlt. Deshalb steht sie ganz oben und
   nicht als Randnotiz. */
.vm-luecken {
  padding: 14px 17px; margin-bottom: 18px;
  border: 1px solid #f4d9a8; border-radius: 12px; background: #fff8ec;
}
.vm-luecken.fertig { border-color: rgba(0, 185, 140, .4); background: #f5fdfa; }
.vm-luecken > strong { font-size: 14px; color: #8A4B00; }
.vm-luecken.fertig > strong { color: #12715B; }
.vm-luecken ul { list-style: none; margin: 8px 0 0; padding: 0;
                 display: flex; flex-direction: column; gap: 4px; }
.vm-luecken li { font-size: 14px; color: var(--ck-text); }
.vm-luecken li em { font-style: normal; color: var(--ck-gedaempft); }
.vm-luecken button {
  border: 1px solid #e3c98f; border-radius: 6px; background: #fff;
  font: inherit; font-size: 12px; font-weight: 700; color: #8A4B00;
  padding: 1px 7px; margin-right: 6px; cursor: pointer;
}
.vm-luecken button:hover { background: #fdf2dd; }

/* Ein Punkt des Vermerks. Offene Punkte tragen links einen farbigen Streifen,
   damit man sie beim Scrollen findet, ohne zu lesen. */
.vm-punkt { position: relative; overflow: hidden; }
.vm-punkt::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
}
/* 2,26:1 gegen Weiss, gefordert sind 3:1 fuer Nichttext. #b45309 hat 3,9:1. */
.vm-punkt.offen::before { background: #b45309; }
.vm-punkt.gefuellt::before { background: rgba(0, 185, 140, .55); }

.vm-punkt-kopf { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 8px; }
.vm-nr {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--ck-grund); color: var(--ck-gedaempft);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vm-punkt.offen .vm-nr { background: #fdf2dd; color: #8A4B00; }
.vm-punkt.gefuellt .vm-nr { background: rgba(0, 185, 140, .14); color: #12715B; }
.vm-punkt-kopf > div { flex: 1 1 auto; min-width: 0; }
.vm-punkt-kopf strong { display: block; font-size: 14px; color: var(--ck-kartentitel);
                        line-height: 1.4; }
.vm-norm { display: block; font-size: 12px; color: var(--ck-gedaempft); margin-top: 2px; }
.vm-punkt-kopf .vf-marke { flex: 0 0 auto; }

.vm-frage { margin: 0 0 9px; font-size: 14px; line-height: 1.6;
            color: var(--ck-gedaempft); }
.vm-feld {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--ck-rand); border-radius: 9px;
  background: var(--ck-flaeche); color: var(--ck-text);
  font: inherit; font-size: 14px; line-height: 1.6;
  /* style.css setzt textarea global auf 140 px feste Hoehe. Ohne diese drei
     Zeilen ist jedes Feld hier gleich hoch, egal wie viele Zeilen es hat. */
  height: auto; min-height: 74px; resize: vertical; box-shadow: none;
}
.vm-feld:focus { outline: none; border-color: var(--ck-blau);
                 box-shadow: 0 0 0 3px rgba(43, 117, 255, .12); }
.vm-punkt-fuss { display: flex; align-items: center; gap: 11px; margin-top: 9px; }

/* Beteiligte im Vermerk: je Unternehmen der Ablehnungsgrund und zwei Merkmale. */
.vm-bet { list-style: none; margin: 0; padding: 0; }
.vm-bet > li { padding: 13px 0; border-bottom: 1px solid var(--ck-linie); }
.vm-bet > li:last-child { border-bottom: none; }
.vm-bet-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
               flex-wrap: wrap; }
.vm-bet-kopf strong { font-size: 14px; color: var(--ck-kartentitel); }
.vm-bet-felder { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.vm-bet-felder .vf-feld { margin-bottom: 8px; }
@media (max-width: 560px) { .vm-bet-felder { grid-template-columns: minmax(0, 1fr); } }

.vm-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.vm-hinweis { margin: 12px 0 0 !important; }

/* Die Lage bei der Statistik: meldepflichtig oder nicht, und warum. */
.vm-stat-lage {
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--ck-rand); border-radius: 11px; background: #fafbfd;
}
.vm-stat-lage.pflicht { border-color: #d9c6f5;
  background: linear-gradient(180deg, rgba(107, 31, 209, .05), rgba(43, 117, 255, .04)); }
.vm-stat-lage.keine { background: var(--ck-grund); }
.vm-stat-lage strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.vm-stat-lage p { margin: 4px 0 0; font-size: 14px; line-height: 1.6;
                  color: var(--ck-text); }
.vm-frist { font-weight: 600; color: var(--ck-violett) !important; }
.vm-klein { font-size: .75rem !important; color: var(--ck-gedaempft) !important; }

.vm-stat { list-style: none; margin: 0; padding: 0; }
.vm-stat li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 2px; border-bottom: 1px solid var(--ck-linie); font-size: 14px;
}
.vm-stat li:last-child { border-bottom: none; }
.vm-stat-nr {
  flex: 0 0 22px; font-size: 12px; font-weight: 700; color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums;
}
.vm-stat-name { flex: 1 1 190px; min-width: 0; color: var(--ck-text); }
.vm-stat-name em { font-style: normal; font-size: 12px; color: var(--ck-gedaempft);
                   margin-left: 6px; }
.vm-stat-wert { flex: 0 1 auto; font-weight: 600; color: var(--ck-kartentitel);
                word-break: break-word; }
.vm-stat-quelle { flex: 0 0 auto; font-size: 12px; color: var(--ck-gedaempft); }
.vm-stat li.fehlt .vm-stat-wert { color: #8A4B00; }
.vm-stat li.leer .vm-stat-wert { color: var(--ck-gedaempft); font-weight: 400; }

.vm-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 560px) { .vm-zwei { grid-template-columns: minmax(0, 1fr); } }

#vmTextBlatt .ck-blatt-kasten { width: min(820px, 100%); }
#vmTextBlatt .sb-prot { min-height: 400px; }
#vmStelleBlatt .ck-blatt-kasten { width: min(640px, 100%); }

/* ── Bieterseite: Frist, Teilnahme, Fragen ──────────────────────────────── */

/* Wie viele Tage noch. Steht gross da, weil das die Zahl ist, wegen der ein
   Bieter die Seite ueberhaupt aufmacht. */
.ag-uhr {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 12px 15px;
  border-radius: 10px; background: var(--ck-grund);
}
.ag-uhr strong { font-size: 16px; color: var(--ck-titel); }
.ag-uhr span { font-size: 14px; color: var(--ck-text); }
.ag-uhr.eilig { background: #fff1d6; }
.ag-uhr.eilig strong { color: #8A4B00; }

.ag-teilnahme.beantwortet.zusage { border-color: rgba(0, 185, 140, .45); background: #f5fdfa; }
.ag-teilnahme.beantwortet.absage { border-color: #f4d9a8; background: #fff8ec; }
.ag-absagegrund { margin-top: 14px; }
.ag-absagegrund .ag-fuss { margin-top: 10px; }

.ag-ruecknahme { margin: 14px 0 0 !important; line-height: 1.7; }
.ag-ruecknahme .ck-verweis { margin-right: 6px; }

.ag-fragen { list-style: none; margin: 18px 0 0; padding: 0;
             display: flex; flex-direction: column; gap: 10px; }
.ag-fragen li {
  padding: 12px 14px; border: 1px solid var(--ck-rand); border-radius: 10px;
  background: #fafbfd;
}
.ag-fr-zeit { font-size: 12px; color: var(--ck-gedaempft); }
.ag-fr-frage { margin: 4px 0 0; font-size: 14px; line-height: 1.65;
               color: var(--ck-kartentitel); font-weight: 600; }
.ag-fr-antwort {
  margin: 9px 0 0; padding: 9px 12px;
  border-left: 2px solid var(--ck-violett); background: #fff;
  border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 1.65; color: var(--ck-text);
}
.ag-fr-offen { margin: 7px 0 0; font-size: 12px; color: var(--ck-gedaempft); }

/* ── Verfahrensakte: Stand und Bieterfragen ─────────────────────────────── */

/* Vier Zahlen in einer Reihe: eingeladen, zugesagt, abgegeben, Fragen offen.
   Das ist der Blick, den eine Vergabestelle waehrend der laufenden Frist
   braucht, und den es bisher nirgends gab. */
.sb-stand { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sb-stand > div {
  flex: 1 1 110px;
  padding: 11px 14px; border: 1px solid var(--ck-rand); border-radius: 10px;
  background: #fafbfd;
}
.sb-stand strong { display: block; font-size: 20px; color: var(--ck-titel);
                   font-variant-numeric: tabular-nums; }
.sb-stand span { display: block; font-size: 12px; color: var(--ck-gedaempft);
                 margin-top: 1px; }
.sb-stand > div.achtung { border-color: #f4d9a8; background: #fff8ec; }
.sb-stand > div.achtung strong { color: #8A4B00; }

.sb-fragen { list-style: none; margin: 0; padding: 0; }
.sb-fragen > li { padding: 13px 0; border-bottom: 1px solid var(--ck-linie); }
.sb-fragen > li:last-child { border-bottom: none; }
.sb-fr-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
              margin-bottom: 6px; }
.sb-fr-kopf .sb-zeit { font-size: .75rem; color: var(--ck-gedaempft); }
.sb-fr-frage { margin: 0 0 9px; font-size: 14px; line-height: 1.65;
               color: var(--ck-kartentitel); }
.sb-fr-von { font-size: 12px; color: var(--ck-gedaempft); }
.sb-fr-warnung {
  margin: 0 0 9px; font-size: .75rem; line-height: 1.6; color: #8A4B00;
}
.sb-fragen textarea { min-height: 70px; }
.sb-fr-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Abgabeformular: Editor in der Akte ─────────────────────────────────── */

.fo-block {
  padding: 13px 15px; margin-bottom: 14px;
  border: 1px solid var(--ck-rand); border-radius: 11px; background: #fafbfd;
}
.fo-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fo-kopf > div { flex: 1 1 200px; min-width: 0; }
.fo-kopf strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.fo-kopf > div > span { display: block; font-size: 12px; color: var(--ck-gedaempft);
                        margin-top: 1px; }
.fo-block .bb-klein { margin: 8px 0 0; }

#vfFormBlatt .ck-blatt-kasten { width: min(760px, 100%); }
.ck-blatt-kasten.breit { width: min(760px, 100%); max-height: 88vh; overflow: auto; }

.fo-vorlagen { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.fo-vorlage {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px; border: 1px solid var(--ck-rand); border-radius: 10px;
  background: var(--ck-flaeche); cursor: pointer; font: inherit;
  transition: border-color .15s, background .15s;
}
.fo-vorlage:hover { border-color: rgba(107, 31, 209, .45); background: rgba(107, 31, 209, .04); }
.fo-vorlage strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.fo-vorlage span { display: block; font-size: 12px; line-height: 1.55;
                   color: var(--ck-text); margin-top: 2px; }
.fo-vorlage em { display: block; font-style: normal; font-size: 12px;
                 color: var(--ck-violett); font-weight: 600; margin-top: 4px; }

.fo-liste { margin: 14px 0; padding: 0 0 0 22px; }
.fo-liste li { padding: 8px 0; border-bottom: 1px solid var(--ck-linie); }
.fo-liste li:last-child { border-bottom: none; }
.fo-liste li.ueberschrift { list-style: none; margin-left: -22px; padding-top: 14px; }
.fo-liste li.ueberschrift .fo-frage { font-weight: 700; color: var(--ck-titel); }
.fo-zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fo-art {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ck-gedaempft);
}
.fo-frage { flex: 1 1 200px; min-width: 0; font-size: 14px;
            color: var(--ck-kartentitel); }
.fo-frage em { font-style: normal; color: var(--ck-violett); font-weight: 700; }
.fo-zusatz { flex: 0 0 auto; font-size: 12px; color: var(--ck-gedaempft); }
.fo-liste .ck-weg { opacity: .55; }
.fo-liste li:hover .ck-weg { opacity: 1; }
.fo-hinweis { margin: 3px 0 0; font-size: 12px; line-height: 1.55;
              color: var(--ck-gedaempft); }

.fo-neu { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ck-linie); }
.fo-neu h3 { font-size: 14px; font-weight: 700; letter-spacing: .6px;
             text-transform: uppercase; color: var(--ck-gedaempft); margin: 0 0 12px; }
.fo-arthilfe { margin: -4px 0 12px; font-size: 12px; line-height: 1.55;
               color: var(--ck-gedaempft); }
.fo-pflicht { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 12px;
              font-size: 14px; line-height: 1.55; color: var(--ck-text); cursor: pointer; }
.fo-pflicht input { margin-top: 2px; }

/* ── Vergleich nach der Öffnung ─────────────────────────────────────────── */

/* Die Fragespalte bleibt stehen. Ohne das scrollte ab drei Bietern die
   Zeilenbeschriftung aus dem Bild, und rechts stand eine Antwort ohne ihre
   Frage. Das ist der Bildschirm, auf dem der Zuschlag vorbereitet wird.
   Undurchsichtiger Hintergrund und Schattenkante, sonst schiebt sich der Text
   der naechsten Spalte sichtbar darunter. */
.vg-t th.vg-frage, .vg-t td.vg-frage {
  position: sticky; left: 0; z-index: 2;
  background: #ffffff;
  box-shadow: 1px 0 0 #e9e9f0, 6px 0 8px -8px rgba(15, 15, 30, .22);
}
.vg-t thead th.vg-frage { z-index: 3; }
.vg-t tr.vg-anders th.vg-frage { background: #fffaf0; }
.vg-t tr.vg-ueberschrift td { position: static; }

/* Der Rahmen ist per Tastatur bedienbar, sonst kommt ein reiner Tastaturnutzer
   gar nicht an die rechten Spalten. */
.vg-rahmen:focus-visible { outline: 2px solid #2b75ff; outline-offset: 2px; }

/* Unter 760 px ist eine Tabelle mit n Bietern nicht lesbar, da war schon der
   erste Bieter abgeschnitten. Dann eine Karte je Zeile, die Frage als
   Ueberschrift darueber. */
@media (max-width: 760px) {
  .vg-t, .vg-t tbody, .vg-t tr, .vg-t th, .vg-t td { display: block; width: auto; }
  .vg-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vg-t tr {
    border: 1px solid #e4e4ee; border-radius: 10px;
    margin-bottom: 10px; padding: 4px 2px;
  }
  .vg-t th.vg-frage, .vg-t td.vg-frage {
    position: static; box-shadow: none; background: transparent;
    font-weight: 700; border-bottom: 1px solid #e9e9f0;
  }
  .vg-t td::before {
    content: attr(data-bieter);
    display: block; font-size: 12px; font-weight: 600; color: #55556A;
    margin-bottom: 2px;
  }
  .vg-t tr.vg-ueberschrift td::before { content: none; }
}

.vg-rahmen { overflow-x: auto; border: 1px solid var(--ck-rand); border-radius: 11px; }
.vg-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.vg-t th, .vg-t td {
  padding: 10px 12px; border-bottom: 1px solid var(--ck-linie);
  vertical-align: top; text-align: left;
}
.vg-t thead th {
  position: sticky; top: 0; background: var(--ck-grund);
  font-size: 12px; color: var(--ck-kartentitel); font-weight: 700;
}
.vg-t thead th span { display: block; font-size: 12px; font-weight: 600;
                      color: var(--ck-violett); margin-top: 2px; }
.vg-frage { width: 34%; color: var(--ck-text); }
.vg-frage span { display: block; font-size: 12px; color: var(--ck-gedaempft);
                 margin-top: 2px; }
.vg-t tbody tr:last-child td { border-bottom: none; }
.vg-ueberschrift td {
  background: var(--ck-grund); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--ck-gedaempft);
}
/* Wo sich die Angebote unterscheiden, muss ein Mensch hinsehen. Nur dort. */
.vg-anders td { background: rgba(107, 31, 209, .04); }
.vg-fehlt { color: #8A4B00; font-weight: 600; }

/* ── Abgabeformular: Bieterseite ────────────────────────────────────────── */

.ag-formular { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.ag-fgruppe {
  margin: 18px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ck-gedaempft);
}
.ag-fgruppe:first-child { margin-top: 0; }
.ag-feld {
  padding: 12px 14px; border: 1px solid var(--ck-linie); border-radius: 10px;
  background: #fafbfd;
}
/* Nichttext braucht 3:1 (WCAG 1.4.11). #e3a008 lag bei 2,26:1, #b45309 bei
   3,9:1. Der Hintergrund wechselt weiterhin mit, die Farbe traegt die
   Aussage also nicht allein. */
.ag-feld.fehlt { border-color: #b45309; background: #fff8ec; }
.ag-feld > label { display: block; margin-bottom: 8px; cursor: pointer; }
/* Gleiche Optik wie ein label, aber ohne Zeigerhand: der Kopf einer
   Radiogruppe oder eines Nachweisfeldes ist nichts, worauf man klickt.
   Er traegt stattdessen die Kennung, auf die sich die Gruppe beruft. */
.ag-feld > .ag-feldkopf { display: block; margin-bottom: 8px; }
.ag-feld > .ag-feldkopf > span:first-child,
.ag-feld > label > span:first-child {
  display: block; font-size: 14px; line-height: 1.5; font-weight: 600;
  color: var(--ck-kartentitel);
}
.ag-pflicht { font-style: normal; color: var(--ck-violett); font-weight: 700; }
.ag-fhinweis { display: block; font-size: 12px; line-height: 1.55;
               color: var(--ck-gedaempft); margin-top: 3px; font-weight: 400; }
.ag-feld input[type=text], .ag-feld textarea, .ag-feld select {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--ck-rand); border-radius: 8px;
  background: var(--ck-flaeche); color: var(--ck-text);
  font: inherit; font-size: 14px;
  height: auto; min-height: 0; resize: vertical; box-shadow: none;
  display: block;
}
.ag-feld textarea { min-height: 66px; }
.ag-feld input:focus, .ag-feld textarea:focus, .ag-feld select:focus {
  outline: none; border-color: var(--ck-blau);
  box-shadow: 0 0 0 3px rgba(43, 117, 255, .12);
}
.ag-janein { display: flex; gap: 18px; }
.ag-janein label { display: flex; align-items: center; gap: 7px; font-size: 14px;
                   color: var(--ck-text); cursor: pointer; }
.ag-mit-einheit { display: flex; align-items: center; gap: 9px; }
.ag-mit-einheit input { flex: 1 1 auto; min-width: 0; }
.ag-mit-einheit > span { flex: 0 0 auto; font-size: 14px; color: var(--ck-gedaempft); }
.ag-preis { display: flex; flex-direction: column; gap: 6px; }
.ag-position { font-size: 12px; color: var(--ck-gedaempft); }
.ag-position strong { color: var(--ck-kartentitel); }
.ag-nachweis { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.ag-nachweis > span { font-size: 14px; color: var(--ck-gedaempft); }

.ag-gesamt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 15px; margin: 4px 0 18px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(107, 31, 209, .07), rgba(43, 117, 255, .06));
}
.ag-gesamt span { font-size: 14px; color: var(--ck-text); }
.ag-gesamt strong { font-size: 16px; color: var(--ck-titel); }

.ag-fehlt {
  padding: 13px 15px; margin-bottom: 14px;
  border: 1px solid #e3a008; border-radius: 10px; background: #fff8ec;
}
.ag-fehlt strong { display: block; font-size: 14px; color: #8A4B00; }
.ag-fehlt ul { margin: 7px 0 0; padding-left: 20px; }
.ag-fehlt li { font-size: 14px; line-height: 1.6; color: #8A4B00; }

/* ── KI-Entwurf im Vergabevermerk ───────────────────────────────────────── */

/* Der Entwurf steht UEBER dem Feld und sieht bewusst anders aus als der
   gespeicherte Text. Wer ihn uebernimmt, tut das mit einem zweiten Klick. */
.vm-entwurf {
  margin: 10px 0 0; padding: 13px 15px; border-radius: 10px;
  border: 1px solid #d9c6f5;
  background: linear-gradient(180deg, rgba(107, 31, 209, .05), rgba(43, 117, 255, .04));
}
.vm-entwurf-kopf strong { display: block; font-size: 14px; color: var(--ck-violett); }
.vm-entwurf-kopf span { display: block; font-size: .75rem; line-height: 1.55;
                        color: var(--ck-gedaempft); margin-top: 2px; }
.vm-entwurf p {
  margin: 10px 0 0; padding: 11px 13px; border-radius: 8px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand);
  font-size: 14px; line-height: 1.7; color: var(--ck-text);
  white-space: pre-wrap;
}
.vm-entwurf-fuss { display: flex; gap: 10px; margin-top: 11px; flex-wrap: wrap; }

.vm-punkt-fuss .kc-knopf svg { color: var(--ck-violett); }

/* Der Schalter im Blatt zur Vergabestelle. */
.vm-merken {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 12px 14px; margin: 14px 0 16px;
  border: 1px solid var(--ck-rand); border-radius: 10px; background: #fafbfd;
  cursor: pointer;
}
.vm-merken > .sb-kipp { flex: 0 0 auto; margin-top: 1px; }
.vm-merken > span:last-child { flex: 1 1 auto; font-size: 14px; line-height: 1.6;
                               color: var(--ck-text); }
.vm-merken strong { display: block; font-size: 14px; color: var(--ck-kartentitel);
                    margin-bottom: 2px; }

/* Der Vorschlagsknopf im Blatt Neues Verfahren. */
.vf-vorschlag {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; margin: -4px 0 14px;
  border: 1px dashed #d9c6f5; border-radius: 10px;
  background: rgba(107, 31, 209, .03);
}
.vf-vorschlag .kc-knopf { flex: 0 0 auto; }
.vf-vorschlag .kc-knopf svg { color: var(--ck-violett); }
.vf-vorschlag .bb-klein { flex: 1 1 180px; margin: 0; min-width: 0; }

/* Ein ausgeschlossenes Angebot bleibt in der Vergleichstabelle stehen, tritt
   aber zurueck. Eine Wertungstabelle, die es still weglaesst, verschweigt, dass
   es einmal da war. */
.vg-t th.vg-raus, .vg-t td.vg-raus { background: #f7f7fa; color: var(--ck-gedaempft); }
.vg-t th.vg-raus em {
  display: block; font-style: normal; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: #8A4B00; margin-top: 2px;
}
.vg-t th.vg-raus b {
  display: block; font-weight: 400; font-size: 12px; line-height: 1.5;
  color: var(--ck-gedaempft); margin-top: 3px;
}
.vg-t th.vg-raus span { color: var(--ck-gedaempft) !important; }
.vg-schalter {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 14px; color: var(--ck-text); cursor: pointer;
}

/* ────────────────────────────────────────────────── Aufgeklappte Auswahlfelder

   Die Liste eines <select> zeichnet das Betriebssystem. Sie erbt NICHT die
   Flaeche, auf der das Feld steht, sondern nur, was ausdruecklich fuer
   option gesetzt ist. In style.css steht dafuer eine einzige Zeile:

       select option { background: var(--bg-card); }

   Das ist das Marineblau der dunklen Website (#111130). Dort passt es, weil
   das Feld dort helle Schrift traegt. Das Cockpit ist hell, die Schrift im
   Feld also dunkel, und genau diese dunkle Schrift landete auf dem dunklen
   Grund der Liste: unlesbar, und zwar in allen 23 Auswahlfeldern des
   Cockpits, nicht nur in der Verfahrensart.

   .ck-blatt steht ausdruecklich daneben: Die Blaetter haengen direkt am
   <body>, nicht in .ck. Gemessen am 23.09. waren genau sie die letzten
   unlesbaren Felder, nachdem .ck allein schon gegriffen hatte.
   Literale Farben statt --ck-*, aus demselben Grund. color-scheme haelt zusaetzlich Rollbalken
   und Pfeil der Liste hell. */
.ck select,
.ck-blatt select,
.ab-dlg-schleier select, .ab-panel select, .ft-schleier select,
.ag-seite select { color-scheme: light; }

.ck select option,
.ck select optgroup,
.ck-blatt select option,
.ck-blatt select optgroup,
.ab-dlg-schleier select option, .ab-panel select option, .ft-schleier select option,
.ag-seite select option,
.ag-seite select optgroup {
  background: #ffffff;
  color: #17171F;
}

/* Der aktuelle Wert soll in der offenen Liste erkennbar bleiben. Ohne diese
   Zeile faerbt Chrome ihn mit demselben Weiss wie alle anderen ein, sobald
   option eine eigene Flaeche hat. */
.ck select option:checked,
.ck-blatt select option:checked,
.ab-dlg-schleier select option:checked, .ab-panel select option:checked, .ft-schleier select option:checked,
.ag-seite select option:checked { background: #f0e7ff; }

.ck select option:disabled,
.ck-blatt select option:disabled,
.ag-seite select option:disabled { color: #55556A; }

/* ───────────────────────────────────────────────────────────────────── Team

   Das Teamblatt haengt wie das Tokenblatt direkt am <body>, also ausserhalb
   von .ck. Deshalb hier literale Farben und keine --ck-*: Die Variablen sind
   auf .ck und .ag-seite definiert und waeren hier nicht da. */

.ck-team-zahl {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 18px;
}
.ck-team-zahl span {
  flex: 1 1 140px;
  padding: 11px 14px;
  border: 1px solid #e4e4ee; border-radius: 10px; background: #fafbfd;
  font-size: 14px; color: #55556A;
}
.ck-team-zahl strong {
  display: block; font-size: 20px; color: #17171F; line-height: 1.25;
  margin-bottom: 2px;
}

.ck-sitze { list-style: none; margin: 0 0 18px; padding: 0; }

.ck-sitz {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e9e9f0; border-radius: 10px; background: #fff;
  margin-bottom: 7px;
}
/* Der Name darf die Zeile sprengen, der Preis nie: min-width 0 ist der
   Schalter, der einem Flex-Kind das Schrumpfen ueberhaupt erst erlaubt. */
.ck-sitz-text { flex: 1 1 auto; min-width: 0; display: block; }
.ck-sitz-text strong {
  display: block; font-size: 14px; color: #17171F; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-sitz-text span {
  display: block; font-size: 12px; color: #55556A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-sitz-preis {
  flex: 0 0 auto; font-size: 14px; color: #55556A; font-variant-numeric: tabular-nums;
}
.ck-sitz-weg {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid #e9e9f0; border-radius: 8px; background: #fff;
  color: #55556A; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ck-sitz-weg:hover { color: #A3241B; border-color: #f0c9c9; background: #fdf4f4; }
.ck-sitz-weg:disabled { opacity: .5; cursor: default; }
/* Zweiter Klick, wenn kein dlgBestaetigung da ist. Der Knopf sagt selbst, dass
   er noch einmal gedrueckt werden will, statt still zu loeschen. */
.ck-sitz-weg.sicher { color: #A3241B; border-color: #c02626; background: #fdf4f4; }

.ck-team-neu {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end;
  padding: 14px; margin-bottom: 12px;
  border: 1px solid #e4e4ee; border-radius: 12px; background: #fafbfd;
}
.ck-team-neu .vf-feld { margin: 0; }
.ck-team-neu button { white-space: nowrap; }

@media (max-width: 620px) {
  .ck-team-neu { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────── Dokumenteditor

   Zwei Spalten: links das Inhaltsverzeichnis, rechts der Abschnitt. Die
   Aufteilung ist keine Geschmacksfrage. Eine Leistungsbeschreibung hat
   dreizehn Kapitel, ein Leistungsverzeichnis fuenfundvierzig Zeilen; ohne ein
   stehendes Verzeichnis sucht man nach jedem Speichern wieder, wo man war. */

.dk-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.dk-kopf-text { min-width: 0; }
.dk-weg { margin: 0 0 4px; font-size: 14px; }
.dk-weg a { color: var(--ck-blau-text); text-decoration: none; }
.dk-weg a:hover { text-decoration: underline; }
.dk-kopf h1 { margin: 0; font-size: 24px; color: var(--ck-titel); line-height: 1.22; }
.dk-unter { margin: 5px 0 0; font-size: 14px; color: var(--ck-gedaempft); }

.dk-kopf-knoepfe { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dk-stand {
  font-size: 14px; color: var(--ck-gedaempft); min-width: 0;
  font-variant-numeric: tabular-nums;
}

.dk-raster {
  display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px;
  align-items: start;
}

/* ── Inhaltsverzeichnis ── */

.dk-inhalt {
  position: sticky; top: calc(var(--ck-kopf) + 14px);
  max-height: calc(100vh - var(--ck-kopf) - 34px);
  display: flex; flex-direction: column;
  border: 1px solid var(--ck-rand); border-radius: 14px;
  background: var(--ck-flaeche); overflow: hidden;
}
.dk-inhalt-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 13px 15px 11px; border-bottom: 1px solid var(--ck-linie);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ck-gedaempft);
}
.dk-inhalt-kopf em { font-style: normal; font-weight: 600; letter-spacing: 0; }

.dk-liste { list-style: none; margin: 0; padding: 7px; overflow-y: auto; }
.dk-gruppe {
  padding: 12px 8px 5px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #55556A;
}
.dk-punkt {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 9px;
  background: transparent; text-align: left; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ck-text); line-height: 1.38;
  transition: background .13s, color .13s;
}
.dk-punkt:hover { background: #f4f5f9; }
.dk-punkt.an { background: #f3ebff; color: var(--ck-titel); font-weight: 600; }
.dk-punkt-nr {
  flex: 0 0 auto; min-width: 19px; font-size: 12px; color: #55556A;
  font-variant-numeric: tabular-nums;
}
.dk-punkt.an .dk-punkt-nr { color: var(--ck-violett); }
/* min-width: 0 erlaubt dem Text erst, schmaler als sein Inhalt zu werden.
   Ohne das sprengen lange Kapitelueberschriften die Spalte. */
.dk-punkt-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ein Punkt, kein Wort: Die Zeile ist schon eng, und "nicht gespeichert"
   passt dort nicht hinein. Der Titel am Element sagt es beim Verweilen. */
.dk-punkt-punkt {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ck-violett);
}
.dk-punkt-zahl {
  flex: 0 0 auto; min-width: 17px; padding: 1px 5px; border-radius: 20px;
  background: #ffe9c7; color: #8A4B00;
  font-size: 12px; font-weight: 700; text-align: center;
}

/* ── Der Abschnitt ── */

.dk-blatt {
  border: 1px solid var(--ck-rand); border-radius: 14px;
  background: var(--ck-flaeche); padding: 20px 22px 22px;
}
.dk-blatt-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.dk-nummer {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #55556A; margin-bottom: 3px;
}
.dk-blatt-kopf h2 {
  margin: 0; font-size: 20px; color: var(--ck-kartentitel); line-height: 1.3;
}
.dk-marke {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 20px;
  background: #f3ebff; color: #6B1FD1;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}

.dk-text {
  width: 100%; min-height: 420px; resize: vertical;
  padding: 16px 17px;
  border: 1px solid var(--ck-rand); border-radius: 11px; background: #fdfdff;
  font: inherit; font-size: 14px; line-height: 1.72; color: #17171F;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.dk-text:focus { border-color: var(--ck-violett); box-shadow: 0 0 0 3px rgba(107, 31, 209, .11); }
.dk-text[readonly] { background: #f7f7fb; color: #55556A; }

.dk-leiste {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 12px;
}
.dk-leiste .kc-knopf { display: inline-flex; align-items: center; gap: 7px; }
.dk-zeichen {
  margin-left: auto; font-size: 12px; color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums;
}

/* ── Umschreiben ── */

.dk-ki {
  margin-top: 16px; padding: 15px 16px;
  border: 1px solid #e0d2f5; border-radius: 12px;
  background: linear-gradient(180deg, #faf6ff 0%, #fdfbff 100%);
}
.dk-ki-hinweis {
  margin: 0 0 11px; font-size: 14px; line-height: 1.55; color: #6B1FD1;
}
.dk-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.dk-chip {
  padding: 6px 12px; border: 1px solid #ddd0f0; border-radius: 20px;
  background: #fff; color: #6B1FD1; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500;
  transition: background .13s, border-color .13s;
}
.dk-chip:hover { background: #f3ebff; border-color: var(--ck-violett); }

.dk-ki-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.dk-eingabe {
  flex: 1 1 260px; min-width: 0; padding: 9px 12px;
  border: 1px solid #ddd0f0; border-radius: 9px; background: #fff;
  font: inherit; font-size: 14px; color: var(--ck-titel); outline: none;
}
.dk-eingabe:focus { border-color: var(--ck-violett); box-shadow: 0 0 0 3px rgba(107, 31, 209, .11); }

.dk-fehler { margin: 10px 0 0; font-size: 14px; color: #A3241B; }

.dk-vorschlag {
  margin-top: 13px; border: 1px solid #d6c4f0; border-radius: 11px;
  background: #fff; overflow: hidden;
}
.dk-vorschlag-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid #efe7fb; background: #faf6ff;
  font-size: 14px; color: var(--ck-gedaempft);
}
.dk-vorschlag-kopf strong { color: #6B1FD1; font-size: 14px; }
/* pre-wrap, damit Absaetze stehen bleiben. Der Vorschlag ist Text, kein HTML:
   Er kommt aus einem Modell, und was von dort kommt, wird nicht gerendert. */
.dk-vorschlag-text {
  max-height: 460px; overflow: auto; padding: 15px 16px;
  white-space: pre-wrap; font-size: 14px; line-height: 1.7; color: #17171F;
}
.dk-vorschlag-knoepfe {
  display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #efe7fb;
}

/* ── Anmerkungen ── */

.dk-komm { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--ck-linie); }
.dk-komm-kopf {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ck-gedaempft); margin-bottom: 11px;
}
.dk-komm-liste { list-style: none; margin: 0 0 13px; padding: 0; }
.dk-komm-leer { font-size: 14px; color: #55556A; }
.dk-komm-eintrag {
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--ck-linie); border-left: 3px solid #f0a500;
  border-radius: 9px; background: #fffdf8;
}
.dk-komm-eintrag.erledigt {
  border-left-color: #c8c8d8; background: #fafafd; opacity: .72;
}
.dk-komm-eintrag.erledigt .dk-komm-text { text-decoration: line-through; }
.dk-komm-text { font-size: 14px; line-height: 1.6; color: #17171F; }
.dk-komm-fuss {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 7px; font-size: 12px; color: var(--ck-gedaempft);
}
.dk-komm-fuss button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ck-blau-text);
  text-decoration: underline;
}
.dk-komm-fuss button:hover { color: var(--ck-titel); }

.dk-komm-neu { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.dk-komm-neu textarea {
  flex: 1 1 260px; min-width: 0; padding: 9px 12px; resize: vertical;
  border: 1px solid var(--ck-rand); border-radius: 9px; background: #fff;
  font: inherit; font-size: 14px; line-height: 1.55; color: var(--ck-titel);
  outline: none;
}
.dk-komm-neu textarea:focus {
  border-color: var(--ck-violett); box-shadow: 0 0 0 3px rgba(107, 31, 209, .11);
}

@media (max-width: 1000px) {
  .dk-raster { grid-template-columns: minmax(0, 1fr); }
  /* Auf dem Telefon darf das Verzeichnis nicht kleben: Es stuende sonst
     dauerhaft ueber dem Text, den es erschliessen soll. */
  .dk-inhalt { position: static; max-height: 330px; }
}

/* ──────────────────────────────────────────────────────── Fristenrechner

   Links die Maske, rechts die Kette. Die Kette ist als Zeitstrahl gebaut und
   nicht als Tabelle: Eine Terminkette wird von oben nach unten gelesen, und
   genau diese Reihenfolge ist die Information. */

.fr-raster {
  display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 22px;
  align-items: start;
}

/* ── Maske ── */

.fr-maske {
  position: sticky; top: calc(var(--ck-kopf) + 14px);
  display: flex; flex-direction: column; gap: 16px;
  padding: 19px 20px 21px;
  border: 1px solid var(--ck-rand); border-radius: 14px;
  background: var(--ck-flaeche);
}
.fr-block { display: flex; flex-direction: column; gap: 10px; }
.fr-block + .fr-block { padding-top: 15px; border-top: 1px solid var(--ck-linie); }
.fr-block-titel {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ck-gedaempft);
}
.fr-maske .vf-feld { margin: 0; }
.fr-hinweis { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ck-gedaempft); }
.fr-norm { margin: 0; font-size: 12px; color: #55556A; }
.fr-fehler { margin: 0; font-size: 14px; color: #A3241B; }
.fr-los { width: 100%; justify-content: center; }

/* Die vier Vergabeordnungen als Karten. Ein Auswahlfeld hätte hier verborgen,
   was die wichtigste Entscheidung der ganzen Maske ist: ober- oder
   unterschwellig. Davon hängt ab, ob es überhaupt Mindestfristen gibt. */
.fr-schwelle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fr-karte {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 11px; text-align: left; cursor: pointer;
  border: 1px solid var(--ck-rand); border-radius: 11px; background: #fff;
  font: inherit;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.fr-karte:hover { border-color: #c9b6ea; }
.fr-karte.an {
  border-color: var(--ck-violett); background: #faf6ff;
  box-shadow: 0 0 0 3px rgba(107, 31, 209, .1);
}
.fr-karte strong { font-size: 16px; color: var(--ck-titel); }
.fr-karte > span { font-size: 12px; line-height: 1.35; color: var(--ck-gedaempft); }
.fr-schwelle-marke {
  margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .03em;
}
.fr-schwelle-marke.oberschwellig, .fr-schwelle-marke.unterschwellig { color: #55556A; }

.fr-schalter {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--ck-linie); border-radius: 10px; background: #fcfcfe;
}
.fr-schalter:hover { border-color: #c9b6ea; }
.fr-schalter input { flex: 0 0 auto; margin-top: 2px; width: auto; }
.fr-schalter strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--ck-titel);
  line-height: 1.35;
}
.fr-schalter em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12px; line-height: 1.45; color: var(--ck-gedaempft);
}

/* ── Ergebnis ── */

.fr-ergebnis {
  min-height: 360px;
  border: 1px solid var(--ck-rand); border-radius: 14px;
  background: var(--ck-flaeche); padding: 22px 24px 24px;
}
.fr-leer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; min-height: 320px; color: #1D5FBF; text-align: center;
}
.fr-leer p { margin: 0; max-width: 330px; font-size: 14px; line-height: 1.6; }

.fr-kopf { margin-bottom: 18px; }
.fr-kopf h2 { margin: 0 0 4px; font-size: 20px; color: var(--ck-titel); }
.fr-kopf p { margin: 0; font-size: 14px; color: var(--ck-gedaempft); }
.fr-kopf-hinweis {
  margin-top: 9px !important; padding: 10px 13px;
  border-left: 3px solid var(--ck-blau); border-radius: 0 9px 9px 0;
  background: #f2f6ff; font-size: 14px !important; line-height: 1.6;
  color: #1D5FBF !important;
}
.fr-warnung {
  margin-bottom: 18px; padding: 11px 14px;
  border-left: 3px solid #f0a500; border-radius: 0 9px 9px 0; background: #fffaf0;
}
.fr-warnung p { margin: 0; font-size: 14px; line-height: 1.6; color: #8A4B00; }
.fr-warnung p + p { margin-top: 6px; }

/* Der Zeitstrahl. Die Linie liegt auf dem Pseudoelement der Liste, damit sie
   nicht zwischen den Einträgen abreißt. */
.fr-kette { list-style: none; margin: 0; padding: 0; position: relative; }
.fr-kette::before {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px;
  width: 2px; background: var(--ck-linie);
}
.fr-schritt { position: relative; padding: 0 0 20px 30px; }
.fr-schritt:last-child { padding-bottom: 0; }
.fr-punkt {
  position: absolute; left: 0; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ck-violett);
}
.fr-schritt.start .fr-punkt { background: var(--ck-violett); }
.fr-schritt.offen .fr-punkt, .fr-schritt.hinweis .fr-punkt { border-color: #c8c8d8; }
.fr-schritt.achtung .fr-punkt { border-color: #f0a500; }
.fr-schritt.rueck .fr-punkt { border-color: var(--ck-blau); }

.fr-inhalt { min-width: 0; }
.fr-name {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ck-gedaempft);
}
.fr-tage {
  font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ck-violett);
  padding: 1px 8px; border-radius: 20px; background: #f3ebff;
}
.fr-datum {
  display: block; margin-top: 3px;
  font-size: 16px; font-weight: 700; color: var(--ck-titel);
  font-variant-numeric: tabular-nums;
}
.fr-ab { display: block; margin-top: 2px; font-size: 12px; color: #55556A; }
.fr-text { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: var(--ck-text); }
.fr-quelle {
  display: inline-block; margin-top: 8px; padding: 2px 8px;
  border-radius: 6px; background: #f4f5f9;
  font-size: 12px; color: #55556A; font-weight: 500;
}
.fr-schiebung {
  margin: 8px 0 0; padding: 9px 12px;
  border-left: 3px solid #f0a500; border-radius: 0 8px 8px 0; background: #fffaf0;
  font-size: 14px; line-height: 1.6; color: #8A4B00;
}

/* Die Herleitung zeigt, wie aus 35 Tagen 30 wurden. Ohne sie steht im
   Vermerk eine Zahl, die niemand nachvollziehen kann. */
.fr-herleitung {
  list-style: none; margin: 9px 0 0; padding: 9px 12px;
  border: 1px solid var(--ck-linie); border-radius: 9px; background: #fcfcfe;
}
.fr-herleitung li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.5; color: var(--ck-text);
}
.fr-herleitung li + li { margin-top: 5px; padding-top: 5px; border-top: 1px dashed #e9e9f0; }
.fr-herleitung li > span { flex: 1 1 160px; min-width: 0; }
.fr-herleitung li > em {
  flex: 0 0 auto; font-style: normal; font-weight: 700; color: var(--ck-titel);
  font-variant-numeric: tabular-nums;
}
.fr-herleitung li > b { flex: 0 0 auto; font-weight: 500; color: #55556A; font-size: 12px; }

.fr-grundlage {
  margin: 18px 0 0; font-size: 12px; line-height: 1.65; color: #55556A;
}
.fr-knoepfe { margin-top: 18px; display: flex; gap: 9px; flex-wrap: wrap; }

@media (max-width: 1020px) {
  .fr-raster { grid-template-columns: minmax(0, 1fr); }
  .fr-maske { position: static; }
}
@media (max-width: 520px) {
  .fr-schwelle { grid-template-columns: 1fr; }
  .fr-ergebnis { padding: 18px 15px 20px; }
}

/* ─────────────────────────────────────── Fristenrechner, zweiter Teil */

.fr-reiter {
  display: flex; gap: 4px; margin: 0 0 18px;
  padding: 4px; border-radius: 11px; background: #e7e9f0;
  width: fit-content;
}
.fr-reiter-knopf {
  padding: 7px 18px; border: 0; border-radius: 8px; background: transparent;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ck-gedaempft);
  transition: background .14s, color .14s, box-shadow .14s;
}
.fr-reiter-knopf:hover { color: var(--ck-titel); }
.fr-reiter-knopf.an {
  background: #fff; color: var(--ck-titel);
  box-shadow: 0 1px 3px rgba(15, 15, 30, .1);
}

/* Ein Hinweistag ist kein Feiertag. Deshalb blau und nicht orange: Orange
   heisst hier "das Ende verschiebt sich", blau heisst "denken Sie daran". */
.fr-hinweistag {
  margin: 8px 0 0; padding: 9px 12px;
  border-left: 3px solid var(--ck-blau); border-radius: 0 8px 8px 0;
  background: #f2f6ff; font-size: 14px; line-height: 1.6; color: #1D5FBF;
}

/* ── Feiertagsübersicht ── */

.fr-feiertage {
  border: 1px solid var(--ck-rand); border-radius: 14px;
  background: var(--ck-flaeche); padding: 20px 22px 22px;
}
.fr-ft-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.fr-ft-jahr { display: flex; align-items: center; gap: 10px; }
.fr-ft-jahr strong {
  min-width: 58px; text-align: center;
  font-size: 16px; color: var(--ck-titel); font-variant-numeric: tabular-nums;
}
.fr-ft-legende { display: flex; gap: 16px; flex-wrap: wrap; }
.fr-ft-lg {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--ck-gedaempft);
}
.fr-ft-lg i {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 12px; font-weight: 700;
}

/* Der Rahmen rollt waagerecht, nicht die Seite. Zwanzig Spalten passen auf
   keinen Bildschirm, und eine Seite, die seitlich wandert, verliert man. */
.fr-ft-rahmen {
  overflow-x: auto; border: 1px solid var(--ck-linie); border-radius: 11px;
}
.fr-ft-tabelle {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.fr-ft-tabelle th, .fr-ft-tabelle td {
  padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--ck-linie);
}
.fr-ft-tabelle thead th {
  position: sticky; top: 0; z-index: 2;
  background: #f4f5f9; color: var(--ck-gedaempft);
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  border-bottom: 1px solid var(--ck-rand);
}
.fr-ft-tabelle thead th abbr { text-decoration: none; border: 0; }

/* Name und Datum bleiben stehen, wenn man waagerecht rollt. Ohne das weiss
   nach drei Spalten niemand mehr, welcher Feiertag in der Zeile steht. */
.fr-ft-name {
  position: sticky; left: 0; z-index: 1;
  min-width: 190px; max-width: 230px;
  padding-left: 13px !important; text-align: left !important;
  background: var(--ck-flaeche); color: var(--ck-titel); font-weight: 600;
  box-shadow: 1px 0 0 var(--ck-linie);
}
.fr-ft-tabelle thead .fr-ft-name { z-index: 3; background: #f4f5f9; }
.fr-ft-name em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12px; font-weight: 400; line-height: 1.45;
  color: var(--ck-gedaempft);
}
.fr-ft-datum {
  position: sticky; left: 190px; z-index: 1;
  min-width: 92px; white-space: nowrap;
  background: var(--ck-flaeche); color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums;
  box-shadow: 1px 0 0 var(--ck-linie);
}
.fr-ft-tabelle thead .fr-ft-datum { z-index: 3; background: #f4f5f9; }

/* Drei Zustände, und alle drei tragen ein Zeichen, nicht nur eine Farbe.
   Rot und Grün sind für rund jeden zwölften Mann nicht zu unterscheiden. */
.fr-ft-feld { font-weight: 700; }
.fr-ft-feld.feiertag { background: #fdeaea; color: #A3241B; }
.fr-ft-feld.hinweis  { background: #fff4e0; color: #8A4B00; }
.fr-ft-feld.frei     { background: #eefaf3; color: #12715B; }
.fr-ft-leer { padding: 26px !important; color: var(--ck-gedaempft); }

@media (max-width: 720px) {
  .fr-ft-name { min-width: 150px; max-width: 160px; }
  .fr-ft-datum { left: 150px; min-width: 80px; }
  .fr-feiertage { padding: 16px 14px 18px; }
}

/* Die vier Regionalspalten sind keine Bundeslaender, sondern Gemeinden
   darin. Ohne diese Linie liest man sie als siebzehntes bis zwanzigstes
   Land. */
.fr-ft-tabelle th.fr-ft-region-start,
.fr-ft-tabelle td.fr-ft-region-start { border-left: 2px solid var(--ck-rand); }
.fr-ft-tabelle thead th.fr-ft-region { color: var(--ck-violett); }
.fr-ft-tabelle th.fr-ft-region abbr { white-space: nowrap; }

/* Die Zaehlweise der VSVgV weicht vom Rest ab. Das ist keine Fussnote,
   sondern ein Tag Unterschied im Fristende, also orange und nicht blau. */
.fr-kopf-warnung {
  margin-top: 9px !important; padding: 10px 13px;
  border-left: 3px solid #f0a500; border-radius: 0 9px 9px 0;
  background: #fffaf0; font-size: 14px !important; line-height: 1.6;
  color: #8A4B00 !important;
}
/* Sechs Ordnungen statt vier. Es bleibt bei ZWEI Spalten: Drei ergaben in der
   350 px breiten Maske Karten von 110 px, in die "VOB/A Abschnitt 1,
   Bauleistungen" nicht passt. Die Karten liefen aus der Maske heraus und
   lagen ueber dem Ergebnis. Stattdessen ist die Maske etwas breiter. */
.fr-raster { grid-template-columns: 390px minmax(0, 1fr); }
@media (max-width: 1020px) { .fr-raster { grid-template-columns: minmax(0, 1fr); } }

/* ── Fristenrechner: Details einklappbar ── */

.fr-alle { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.fr-alle-knopf {
  padding: 4px 10px; border: 1px solid var(--ck-linie); border-radius: 20px;
  background: #fff; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ck-gedaempft);
  transition: color .14s, border-color .14s;
}
.fr-alle-knopf:hover { color: var(--ck-titel); border-color: var(--ck-rand); }

.fr-mehr { margin-top: 8px; }
/* Den eigenen Pfeil abschalten und einen setzen, der sich dreht. Der von
   Chrome sitzt bei list-style-position aussen neben dem Kasten. */
.fr-mehr > summary {
  display: inline-flex; align-items: center; gap: 5px;
  list-style: none; cursor: pointer; width: fit-content;
  padding: 2px 0;
  font-size: 12px; font-weight: 600; color: var(--ck-blau-text);
}
.fr-mehr > summary::-webkit-details-marker { display: none; }
.fr-mehr > summary::before {
  content: ; width: 0; height: 0;
  border-left: 4.5px solid currentColor;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .15s;
}
.fr-mehr[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
.fr-mehr > summary:hover { color: var(--ck-titel); }
.fr-mehr-inhalt { padding-top: 4px; }
.fr-mehr-inhalt .fr-text:first-child { margin-top: 2px; }
.fr-mehr-inhalt .fr-herleitung { margin-top: 6px; }

/* ────────────────────────────────────────── Dokumenteditor: Zusammenarbeit

   Die Farbe je Person kommt aus der Kontokennung und nicht aus der Reihenfolge
   des Eintreffens. Deshalb steht sie inline im style-Attribut und nicht hier:
   Acht feste Klassen waeren derselbe Zufall, nur unuebersichtlicher. */

/* ── Wer ist da ── */

.dk-dabei { display: flex; align-items: center; gap: -6px; margin-right: 4px; }
.dk-kopf-punkt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  margin-left: -7px; border: 2px solid var(--ck-flaeche);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  cursor: default;
}
.dk-kopf-punkt:first-child { margin-left: 0; }

.dk-punkt-farbe {
  display: inline-block; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
  vertical-align: baseline;
}

.dk-kopf-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-spur {
  /* KEIN Flexkasten. inline-flex macht aus jedem Textknoten ein eigenes Kind
     und verwirft den Zwischenraum dazwischen; gemessen kam dabei
     "vonruben.zimmergerade eben" heraus. Das hier ist ein Satz. */
  display: block; font-size: 12px; color: var(--ck-gedaempft);
}
.dk-spur .dk-punkt-farbe { vertical-align: middle; }
.dk-spur strong { font-weight: 600; color: var(--ck-text); }

/* Jemand anders ist im selben Abschnitt. Die wichtigste Zeile der Seite:
   Sie verhindert den Konflikt, bevor er entsteht. */
.dk-besetzt {
  /* KEIN Flexkasten: Mit display:flex wird jeder Textknoten ein eigenes Kind,
     und der Name stand in einer eigenen Zeile. Das hier ist ein Satz. */
  display: block;
  margin: 0 0 12px; padding: 9px 12px;
  border-left: 3px solid #f0a500; border-radius: 0 9px 9px 0;
  background: #fffaf0; font-size: 14px; line-height: 1.55; color: #8A4B00;
}

/* Im Inhaltsverzeichnis: wer gerade hier ist, sticht die Spur. */
.dk-punkt-wer {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 3px; border-radius: 20px;
  color: #fff; font-size: 12px; font-weight: 700;
}

/* ── Verlauf ── */

.dk-verlauf { max-height: 62vh; overflow: auto; margin: 4px 0 4px; }
.dk-fassungen { list-style: none; margin: 0 0 14px; padding: 0; }
.dk-fassung {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 7px;
  border: 1px solid var(--ck-linie); border-radius: 10px; background: #fff;
}
.dk-fassung-text { flex: 1 1 auto; min-width: 0; }
.dk-fassung-text strong {
  display: block; font-size: 14px; color: var(--ck-titel); font-weight: 600;
}
.dk-fassung-text > span {
  display: block; font-size: 12px; color: var(--ck-gedaempft);
}
.dk-fassung-text em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12px; color: var(--ck-blau-text);
}
.dk-fassung .kc-knopf { flex: 0 0 auto; }

.dk-vergleich {
  margin-top: 6px; padding: 15px 16px;
  border: 1px solid #d6c4f0; border-radius: 12px; background: #fdfbff;
}
.dk-vergleich-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.dk-vergleich-kopf strong { font-size: 16px; color: #6B1FD1; }
.dk-vergleich-kopf span { font-size: 12px; color: var(--ck-gedaempft); }
.dk-vergleich-stueck { margin-top: 13px; }
.dk-vergleich-titel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.dk-vergleich-titel span {
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ck-gedaempft);
}
.dk-vergleich-fuss { margin-top: 15px; }

/* Der Wortvergleich. pre-wrap, damit Absaetze stehen bleiben. */
.dk-diff {
  padding: 13px 14px; border: 1px solid var(--ck-linie); border-radius: 9px;
  background: #fff; max-height: 320px; overflow: auto;
  white-space: pre-wrap; font-size: 14px; line-height: 1.75; color: #17171F;
}
/* Nicht nur Farbe: Durchgestrichen und unterstrichen tragen die Aussage auch
   dann, wenn jemand Rot und Gruen nicht unterscheidet. */
.dk-diff del {
  background: #fdeaea; color: #A3241B; text-decoration: line-through;
  text-decoration-thickness: 1px; border-radius: 3px; padding: 0 1px;
}
.dk-diff ins {
  background: #eefaf3; color: #12715B; text-decoration: underline;
  text-decoration-thickness: 1px; border-radius: 3px; padding: 0 1px;
}
.dk-diff-nichts { color: var(--ck-gedaempft); font-style: italic; }

/* ── Konflikt ── */

.dk-gegen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 4px;
}
.dk-gegen-seite {
  border: 1px solid var(--ck-linie); border-radius: 11px; overflow: hidden;
  background: #fff;
}
.dk-gegen-kopf {
  padding: 9px 13px; border-bottom: 1px solid var(--ck-linie); background: #f7f7fb;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ck-gedaempft);
}
.dk-gegen-text {
  padding: 13px 14px; max-height: 44vh; overflow: auto;
  white-space: pre-wrap; font-size: 14px; line-height: 1.72; color: #17171F;
}
.dk-gegen-text del {
  background: #fdeaea; color: #A3241B; text-decoration: line-through;
  border-radius: 3px; padding: 0 1px;
}
.dk-gegen-text ins {
  background: #eefaf3; color: #12715B; text-decoration: underline;
  border-radius: 3px; padding: 0 1px;
}

/* ── Erwähnungen ── */

.dk-komm-feld { position: relative; flex: 1 1 260px; min-width: 0; }
.dk-komm-feld textarea { width: 100%; }
.dk-erwaehnen {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30;
  list-style: none; margin: 0; padding: 5px;
  border: 1px solid var(--ck-rand); border-radius: 10px; background: #fff;
  box-shadow: 0 8px 24px rgba(15, 15, 30, .14);
  max-height: 220px; overflow: auto;
}
.dk-erwaehnen button {
  display: flex; align-items: center; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; color: var(--ck-titel);
}
.dk-erwaehnen button:hover, .dk-erwaehnen button.an { background: #f3ebff; }

@media (max-width: 760px) {
  .dk-gegen { grid-template-columns: 1fr; }
  .dk-spur { white-space: normal; }
}

/* ── Fristenrechner: Termine von Hand verschieben ── */

.fr-datum-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-dreher {
  display: inline-flex; border: 1px solid var(--ck-rand); border-radius: 8px;
  overflow: hidden; background: #fff;
  /* Erst beim Zeigen auf den Schritt sichtbar: Neun Termine mit je zwei
     Knoepfen sind achtzehn Knoepfe, und die Kette soll sich lesen lassen. */
  opacity: 0; transition: opacity .14s;
}
.fr-schritt:hover .fr-dreher,
.fr-schritt:focus-within .fr-dreher,
.fr-schritt.gedreht .fr-dreher { opacity: 1; }
.fr-dreh {
  width: 26px; height: 24px; padding: 0; border: 0; background: transparent;
  cursor: pointer; font: inherit; font-size: 16px; line-height: 1;
  color: var(--ck-gedaempft);
}
.fr-dreh + .fr-dreh { border-left: 1px solid var(--ck-rand); }
.fr-dreh:hover:not(:disabled) { background: #f3ebff; color: var(--ck-violett); }
.fr-dreh:disabled { opacity: .35; cursor: not-allowed; }

.fr-hand {
  font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: #8A4B00;
  padding: 1px 8px; border-radius: 20px; background: #fff4e0;
}
.fr-schritt.gedreht .fr-punkt { border-color: #f0a500; }

.fr-inline {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: inherit; color: inherit;
  text-decoration: underline; font-weight: 600;
}

/* ── Fristenrechner: Empfehlung zu den selbst gesetzten Fristen ── */

.fr-rat {
  margin-top: 20px; padding: 17px 18px;
  border: 1px solid #e0d2f5; border-radius: 13px;
  background: linear-gradient(180deg, #faf6ff 0%, #fdfbff 100%);
}
.fr-rat-kopf {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  color: var(--ck-violett);
}
.fr-rat-kopf strong { font-size: 16px; color: #6B1FD1; }
.fr-rat-text { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: #6B1FD1; }
.fr-eingabe-gross {
  width: 100%; padding: 10px 12px; resize: vertical;
  border: 1px solid #ddd0f0; border-radius: 10px; background: #fff;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--ck-titel);
  outline: none;
}
.fr-eingabe-gross:focus {
  border-color: var(--ck-violett); box-shadow: 0 0 0 3px rgba(107, 31, 209, .11);
}
.fr-rat-zeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 11px;
}
.fr-rat-klein { font-size: 12px; line-height: 1.55; color: #55556A; }
.fr-rat-laeuft { margin: 14px 0 0; font-size: 14px; color: #6B1FD1; }

.fr-rat-gesamt {
  margin: 16px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--ck-violett); border-radius: 0 10px 10px 0;
  background: #fff; font-size: 14px; line-height: 1.7; color: #17171F;
}
.fr-rat-warnung {
  margin: 10px 0 0; padding: 10px 13px;
  border-left: 3px solid #c02626; border-radius: 0 9px 9px 0; background: #fdf4f4;
  font-size: 14px; line-height: 1.65; color: #A3241B;
}
.fr-rat-hinweis {
  margin: 9px 0 0; padding: 9px 12px;
  border-left: 3px solid var(--ck-blau); border-radius: 0 9px 9px 0; background: #f2f6ff;
  font-size: 14px; line-height: 1.65; color: #1D5FBF;
}

.fr-rat-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.fr-rat-punkt {
  padding: 13px 15px; margin-bottom: 9px;
  border: 1px solid #e4d8f5; border-radius: 11px; background: #fff;
}
.fr-rat-punkt-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.fr-rat-punkt-kopf strong { font-size: 14px; color: var(--ck-titel); }
.fr-rat-zahl {
  flex: 0 0 auto; padding: 2px 10px; border-radius: 20px;
  background: #f3ebff; color: var(--ck-violett);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fr-rat-punkt p {
  margin: 0 0 10px; font-size: 14px; line-height: 1.68; color: var(--ck-text);
}
.fr-rat-passt { font-size: 14px; font-weight: 600; color: #12715B; }

/* ─────────────────────────────────── Dokumenteditor: Tabellensicht (LV, TN)

   Fuenf Spalten wie in der Excel-Vorlage. Wer das Leistungsverzeichnis im
   Browser bearbeitet, soll dieselbe Tabelle vor sich haben wie hinterher in
   Excel, sonst uebersetzt er im Kopf. */

.dk-tab-leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 11px;
}
.dk-tab-zahl {
  margin-right: auto; font-size: 14px; color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums;
}
/* Der Rahmen rollt waagerecht, nicht die Seite. */
.dk-tab-rahmen {
  overflow-x: auto; border: 1px solid var(--ck-rand); border-radius: 11px;
  background: #fff;
}
.dk-tab {
  /* Die Summe der Mindestbreiten: 38 + 46 + 190 + 320 + 104 + 76 + 170 + 122.
     Darunter druecken sich die Spalten gegenseitig platt, statt den Rahmen
     rollen zu lassen. */
  width: 100%; min-width: 1070px;
  border-collapse: collapse; font-size: 14px;
}
.dk-tab thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 10px; text-align: left; background: #f4f5f9;
  border-bottom: 1px solid var(--ck-rand);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ck-gedaempft); white-space: nowrap;
}
.dk-tab td {
  padding: 3px 5px; vertical-align: top;
  border-bottom: 1px solid var(--ck-linie);
}
.dk-tab-nr {
  min-width: 46px; width: 46px; padding: 9px 10px !important;
  color: #55556A; font-variant-numeric: tabular-nums; text-align: right !important;
}
/* 104 px: "muss" im Auswahlfeld samt Pfeil. 200 px: das laengste Wort, das
   in einer Kategorie vorkommt, ohne Trennung. */
.dk-tab-eng { min-width: 104px; }
/* Da steht eine Zahl. */
.dk-tab-num { min-width: 76px; }
.dk-tab-schmal { min-width: 190px; }
/* Trennen statt mitten im Wort brechen, falls doch einmal etwas laenger ist. */
.dk-tab textarea[data-feld="kategorie"] { hyphens: auto; }
.dk-tab-weit { min-width: 320px; }
.dk-tab-tun {
  min-width: 122px; white-space: nowrap; padding: 6px 8px !important;
  /* Rechts angeheftet: Die Tabelle rollt waagerecht, und wer eine Zeile
     loeschen will, soll dafuer nicht erst nach rechts rollen muessen. */
  position: sticky; right: 0; z-index: 1;
  background: #fff; box-shadow: -1px 0 0 var(--ck-linie);
}
.dk-tab thead th.dk-tab-tun { z-index: 3; background: #f4f5f9; }
.dk-tab-zeile:hover td.dk-tab-tun { background: #fafbfe; }
.dk-tab-zeile.an td.dk-tab-tun { background: #f8f3ff; }

.dk-tab-zeile:hover td { background: #fafbfe; }
.dk-tab-zeile.an td { background: #f8f3ff; }
.dk-tab-zeile.an .dk-tab-nr { color: var(--ck-violett); font-weight: 700; }
/* Noch nicht gespeichert. Ein Punkt waere in einer Zelle nicht zu sehen,
   deshalb faerbt sich der Rand des Feldes. */
.dk-tab td.offen textarea, .dk-tab td.offen select { border-color: var(--ck-violett); }

.dk-tab textarea, .dk-tab select {
  width: 100%; padding: 6px 8px; resize: none; overflow: hidden;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  font: inherit; font-size: 14px; line-height: 1.55; color: #17171F;
  outline: none;
}
.dk-tab textarea:hover, .dk-tab select:hover { border-color: var(--ck-linie); }
.dk-tab textarea:focus, .dk-tab select:focus {
  border-color: var(--ck-violett); background: #fff;
  box-shadow: 0 0 0 3px rgba(107, 31, 209, .1);
}
.dk-tab textarea[readonly] { color: #55556A; }
.dk-tab select { cursor: pointer; }

.dk-tab-tun button {
  width: 26px; height: 26px; padding: 0; margin-right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  cursor: pointer; font: inherit; font-size: 14px; color: #55556A;
  transition: color .13s, border-color .13s, background .13s;
}
.dk-tab-zeile:hover .dk-tab-tun button { color: var(--ck-gedaempft); }
.dk-tab-tun button:hover {
  color: var(--ck-violett); border-color: #ddd0f0; background: #faf6ff;
}
.dk-tab-tun button[data-tun="weg"]:hover {
  color: #A3241B; border-color: #f0c9c9; background: #fdf4f4;
}
.dk-tab-tun button:disabled { opacity: .3; cursor: default; }

/* Der gestaffelte Aufbau beim ersten Oeffnen. Nur eine Darstellung: Der
   Generator schreibt das Leistungsverzeichnis in einem Zug. */
.dk-tab tbody tr { transition: opacity .28s, transform .28s; }
.dk-tab tbody tr.kommt { opacity: 0; transform: translateY(6px); }

.dk-tab-hinweis { margin: 10px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.dk-punkt-menge {
  flex: 0 0 auto; font-size: 12px; color: #55556A;
  font-variant-numeric: tabular-nums;
}
.dk-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 900px) {
  .dk-tab-weit { min-width: 240px; }
  .dk-tab-schmal { min-width: 150px; }
}

/* ── Schmaler Modus: der Editor in einem Rahmen ──
   Alles weg, was die Seite zur Seite macht. Uebrig bleibt der Arbeitsbereich. */
.dk-nackt #site-navbar,
/* navbar.js ersetzt seinen Platzhalter; was danach dasteht, heisst anders. */
.dk-nackt .nav-utility,
.dk-nackt .navbar,
.dk-nackt .mobile-nav,
.dk-nackt #site-footer,
.dk-nackt footer.footer,
.dk-nackt .ck-leiste,
.dk-nackt .ck-leiste-knopf,
.dk-nackt .ck-schatten,
.dk-nackt .dk-kopf-text,
.dk-nackt #hubspot-messages-iframe-container { display: none !important; }
.dk-nackt .ck { display: block; min-height: 0; background: transparent; }
.dk-nackt .ck::before { display: none; }
.dk-nackt .ck-haupt { padding: 0 !important; max-width: none; margin: 0; }
.dk-nackt body { background: transparent; }
.dk-nackt .dk-kopf { margin-bottom: 12px; }
.dk-nackt .dk-kopf-knoepfe { margin-left: 0; }
/* Das Inhaltsverzeichnis klebt in einem Rahmen nicht: Der Rahmen rollt selbst. */
.dk-nackt .dk-inhalt { position: static; max-height: none; }
.dk-nackt .dk-raster { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 860px) {
  .dk-nackt .dk-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ── Der eingebettete Editor im Generator-Chat ──
   Das Ergebnis steht direkt im Fenster statt nur als Download. Der Rahmen
   zeigt dieselbe Seite wie /vergabe-cockpit/dokument, nur ohne Kopf- und
   Seitenleiste; es gibt genau eine Wahrheit und keinen Nachbau. */
.mk-editor {
  /* Der Chat ist eine Flex-Spalte mit fester Hoehe. Ohne flex:0 0 auto
     schrumpfte der Kasten auf seinen Rahmen und kam als violetter Strich an. */
  flex: 0 0 auto;
  margin: 14px 0 6px;
  border: 1px solid rgba(107, 31, 209, .28); border-radius: 14px;
  background: #ffffff; overflow: hidden;
  box-shadow: 0 6px 24px rgba(15, 15, 30, .10);
}
.mk-editor-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 15px; border-bottom: 1px solid #e9e9f0;
  background: linear-gradient(180deg, #faf6ff 0%, #ffffff 100%);
}
.mk-editor-kopf strong {
  display: block; font-size: 14px; color: #17171F; font-weight: 700;
}
.mk-editor-kopf em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12px; line-height: 1.5; color: #55556A;
}
.mk-editor-knoepfe { display: flex; gap: 7px; flex-shrink: 0; }
.mk-editor-knopf {
  padding: 5px 12px; border: 1px solid #ddd0f0; border-radius: 20px;
  background: #fff; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 12px; font-weight: 600; color: #6B1FD1;
  white-space: nowrap;
}
.mk-editor-knopf:hover { background: #f3ebff; border-color: #6B1FD1; }
.mk-editor-knopf.betont { background: #6B1FD1; border-color: #6B1FD1; color: #fff; }
.mk-editor-knopf.betont:hover { background: #7c07d1; }
.mk-editor-knopf[disabled] { opacity: .6; cursor: default; }
/* Die Zielwahl steht im Kasten, unter dem Kopf, nicht in einem Systemdialog. */
.mk-editor-ziel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 15px; border-bottom: 1px solid #e9e9f0; background: #faf6ff; }
.mk-editor-ziel[hidden] { display: none; }
.mk-editor-ziel label { font-size: 12px; font-weight: 600; color: #17171F; }
.mk-editor-ziel select { width: auto; min-width: 240px; max-width: 100%;
  padding: 6px 10px; font: inherit; font-size: 14px; color: #17171F;
  border: 1px solid #ddd0f0; border-radius: 8px; background: #fff; }
.mk-editor-ansage { flex: 1 1 100%; margin: 2px 0 0; font-size: 12px;
  color: #55556A; }
.mk-editor-ansage:empty { display: none; }
.mk-editor-ansage a { color: #6B1FD1; font-weight: 600; }
/* Die Hoehe ist ein Kompromiss: hoch genug fuer zehn Tabellenzeilen, niedrig
   genug, dass der Chat darunter noch sichtbar bleibt. "Groesser" verdoppelt. */
.mk-editor iframe {
  display: block; width: 100%; height: 520px; border: 0; background: #eef0f5;
}
.mk-editor.gross iframe { height: 84vh; }
/* Steht der Editor im Chat, darf der Chat hoeher werden; 440 px reichen fuer
   Sprechblasen, nicht fuer eine Tabelle. */
.cl-log:has(.mk-editor) { max-height: 88vh; }
@media (max-width: 700px) {
  .mk-editor iframe { height: 420px; }
  .mk-editor.gross iframe { height: 78vh; }
}

/* ── Werkzeugleiste der Tabelle ── */

.dk-werkzeuge {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 9px; margin-bottom: 11px;
  border: 1px solid var(--ck-rand); border-radius: 11px; background: #fafbfd;
}
.dk-wz-gruppe {
  display: inline-flex; border: 1px solid var(--ck-rand); border-radius: 9px;
  overflow: hidden; background: #fff;
}
.dk-wz {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; padding: 0; border: 0; background: transparent;
  cursor: pointer; font: inherit; font-size: 1rem; color: var(--ck-gedaempft);
  transition: color .13s, background .13s;
}
.dk-wz + .dk-wz { border-left: 1px solid var(--ck-rand); }
.dk-wz:hover:not(:disabled) { color: var(--ck-violett); background: #f6f0ff; }
.dk-wz:disabled { opacity: .35; cursor: not-allowed; }
.dk-wz-filter {
  flex: 1 1 200px; min-width: 140px; max-width: 340px;
  padding: 7px 11px; border: 1px solid var(--ck-rand); border-radius: 9px;
  background: #fff; font: inherit; font-size: 14px; color: var(--ck-titel);
  outline: none;
}
.dk-wz-filter:focus {
  border-color: var(--ck-violett); box-shadow: 0 0 0 3px rgba(107, 31, 209, .1);
}
.dk-werkzeuge .dk-tab-zahl { margin-left: auto; margin-right: 0; }

/* Suchen und Ersetzen */
.dk-suche {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; margin-bottom: 11px;
  border: 1px solid #ddd0f0; border-radius: 11px; background: #faf6ff;
}
.dk-suche input[type=text] {
  flex: 1 1 180px; min-width: 130px; padding: 7px 11px;
  border: 1px solid #ddd0f0; border-radius: 9px; background: #fff;
  font: inherit; font-size: 14px; color: var(--ck-titel); outline: none;
}
.dk-suche input:focus { border-color: var(--ck-violett); }
.dk-such-zahl { font-size: 14px; color: #6B1FD1; white-space: nowrap; }

/* Was mit den ausgewaehlten Zeilen geschehen soll */
.dk-auswahl {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 11px;
  border: 1px solid #c9b6ea; border-radius: 11px;
  background: linear-gradient(180deg, #f6f0ff 0%, #fdfbff 100%);
}
.dk-auswahl strong { font-size: 14px; color: #6B1FD1; }
.dk-auswahl label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ck-gedaempft);
}
.dk-auswahl select, .dk-auswahl input {
  padding: 5px 9px; border: 1px solid #ddd0f0; border-radius: 8px;
  background: #fff; font: inherit; font-size: 14px; color: var(--ck-titel);
  outline: none;
}
.dk-auswahl .dk-wz { margin-left: auto; }

/* Auswahlspalte und sortierbare Koepfe */
.dk-tab-wahl {
  width: 38px; min-width: 38px; text-align: center !important;
  padding: 8px 6px !important;
}
.dk-tab-wahl input { width: auto; cursor: pointer; }
.dk-tab-zeile.gewaehlt td { background: #f6f0ff; }
.dk-tab-zeile.gewaehlt td.dk-tab-tun { background: #f6f0ff; }
.dk-sortbar { cursor: pointer; user-select: none; }
.dk-sortbar:hover { color: var(--ck-violett); }
.dk-sortbar em { font-style: normal; margin-left: 4px; color: var(--ck-violett); }

/* Dokumentwechsler */
.dk-geschwister { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.dk-gsw {
  padding: 3px 11px; border: 1px solid var(--ck-rand); border-radius: 20px;
  background: #fff; text-decoration: none;
  font-size: 12px; font-weight: 600; color: var(--ck-gedaempft);
}
a.dk-gsw:hover { border-color: var(--ck-violett); color: var(--ck-violett); }
.dk-gsw.an {
  border-color: var(--ck-violett); background: #f3ebff; color: #6B1FD1;
}

/* Bausteine */
.dk-bst-suche {
  width: 100%; padding: 9px 12px; margin: 4px 0 12px;
  border: 1px solid var(--ck-rand); border-radius: 10px; background: #fff;
  font: inherit; font-size: 14px; color: var(--ck-titel); outline: none;
}
.dk-bst-suche:focus { border-color: var(--ck-violett); }
.dk-bst-liste { max-height: 58vh; overflow: auto; }
.dk-bst { list-style: none; margin: 0; padding: 0; }
.dk-bst-punkt {
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--ck-linie); border-radius: 11px; background: #fff;
}
.dk-bst-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 5px;
}
.dk-bst-kopf strong { font-size: 14px; color: var(--ck-titel); }
.dk-bst-kopf span { font-size: 12px; color: var(--ck-gedaempft); }
.dk-bst-punkt p {
  margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--ck-text);
}
.dk-bst-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Startseite: Ihre Module, Ihr Ansprechpartner, der Nerd (Schritt B)

   Der Aufbau folgt der Frage, die jemand beim Anmelden hat, in dieser
   Reihenfolge: Was darf ich benutzen, wen frage ich, und was wollte ich
   eigentlich wissen.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fuer Beschriftungen, die eine Vorlesefunktion braucht und das Auge nicht.
   clip-path statt display:none, sonst liest sie kein Hilfsmittel vor. */
.ck-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.st-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}
.st-spalte { min-width: 0; }
.st-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.st-kopf h2 { font-size: 16px; font-weight: 700; color: var(--ck-titel); margin: 0; }
.st-kopf-zusatz { font-size: 12px; color: var(--ck-gedaempft); margin: 0; }

.st-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.st-kachel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 15, 30, .04);
}
.st-kachel-kopf { display: flex; align-items: center; gap: 9px; color: var(--ck-violett); }
.st-kachel-kopf h3 { font-size: 14px; font-weight: 700; color: var(--ck-kartentitel);
  margin: 0; letter-spacing: -.01em; }

/* Ein nicht gebuchtes Modul wird blasser, aber nicht unlesbar: Es soll
   erkennbar bleiben, was einem fehlt. */
.st-zu { background: #fbfbfe; }
.st-zu .st-kachel-kopf { color: var(--ck-gedaempft); }

.st-nutzen { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 7px; flex: 1 1 auto; }
.st-nutzen li { display: flex; gap: 8px; align-items: flex-start;
  font-size: 14px; line-height: 1.45; color: var(--ck-text); }
.st-nutzen li svg { flex: 0 0 auto; margin-top: 2px; color: var(--ck-blau); }
.st-zu .st-nutzen li svg { color: var(--ck-gedaempft); }

.st-kachel-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 11px; border-top: 1px solid var(--ck-linie); flex-wrap: wrap; }
.st-knopf { text-decoration: none; }

/* Der Lizenzstand ist eine Tatsache, keine Warnung. Deshalb ein Punkt und ein
   Wort, keine farbige Flaeche: Sechs bunte Kaesten nebeneinander lesen sich
   wie sechs Fehlermeldungen. */
.st-stand { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ck-gedaempft); }
.st-stand::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; }
.st-stand.gut { color: #12715B; }
.st-stand.test { color: #8A4B00; }
.st-stand.aus { color: #A3241B; }

/* ── Ansprechpartner ───────────────────────────────────────────────────── */
.st-partner-karte {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 15, 30, .04);
}
.st-partner-marke { margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ck-gedaempft); }
.st-partner-kopf { display: flex; align-items: center; gap: 12px; }
.st-partner-kopf img { width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto; border: 1px solid var(--ck-rand); }
.st-partner-platz { width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ck-grund); color: var(--ck-gedaempft); flex: 0 0 auto; }
.st-partner-kopf strong { display: block; font-size: 14px; font-weight: 700;
  color: var(--ck-kartentitel); }
.st-partner-kopf span { display: block; font-size: 12px;
  color: var(--ck-gedaempft); line-height: 1.35; margin-top: 2px; }

.st-partner-daten { margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 4px 10px; font-size: 14px; }
.st-partner-daten dt { color: var(--ck-gedaempft); }
.st-partner-daten dd { margin: 0; color: var(--ck-text); min-width: 0;
  overflow-wrap: anywhere; }
.st-partner-daten a { color: var(--ck-blau-text); text-decoration: none; }
.st-partner-daten a:hover { text-decoration: underline; }

/* ── Nerd-Feld ─────────────────────────────────────────────────────────── */
.st-nerd {
  padding: 20px 18px 16px;
  background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand);
  border-radius: 16px;
  text-align: center;
}
.st-nerd-titel { font-size: 16px; font-weight: 700; color: var(--ck-titel);
  margin: 0 0 6px; }
.st-nerd-unter { max-width: 640px; margin: 0 auto 14px; font-size: 14px;
  line-height: 1.55; color: var(--ck-gedaempft); }
.st-nerd-unter strong { color: var(--ck-text); font-weight: 600; }
.st-nerd-unter a { color: var(--ck-blau-text); }

.st-feld {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 680px; margin: 0 auto;
  padding: 9px 9px 9px 14px;
  border: 1px solid var(--ck-rand); border-radius: 14px;
  background: #fff;
}
.st-feld:focus-within { border-color: rgba(43, 117, 255, .5);
  box-shadow: 0 0 0 3px rgba(43, 117, 255, .12); }
/* height: auto ist Pflicht und kein Schmuck: style.css gibt jedem textarea
   140 px Hoehe. Ohne diese Zeile steht ein einzeiliges Eingabefeld als
   handtellergrosser Kasten auf der Seite. */
.st-feld textarea {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; resize: none;
  font: inherit; font-size: .875rem; line-height: 1.5; color: var(--ck-text);
  background: transparent; padding: 5px 0;
  height: auto; min-height: 0; max-height: 140px;
}
.st-feld textarea:disabled { background: transparent; color: var(--ck-gedaempft); }
.st-feld textarea::placeholder { color: var(--ck-gedaempft); }
.st-rund {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--gradient); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.st-rund:hover:not(:disabled) { filter: brightness(1.08); }
.st-rund:disabled { opacity: .4; cursor: default; }

.st-beispiele { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 12px auto 0; max-width: 760px; }
.st-beispiel {
  border: 1px solid var(--ck-rand); background: #fff; border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 14px; color: var(--ck-text);
  cursor: pointer;
}
.st-beispiel:hover { border-color: rgba(43, 117, 255, .45);
  color: var(--ck-blau-text); background: rgba(43, 117, 255, .05); }
.st-nerd-fuss { margin: 14px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.st-melden:empty { display: none; }
.st-melden { margin: 10px 0 0; font-size: 14px; color: var(--ck-gedaempft); }

@media (max-width: 1000px) {
  .st-oben { grid-template-columns: minmax(0, 1fr); }
  .st-partner { order: -1; }
}
@media (max-width: 560px) {
  .st-raster { grid-template-columns: minmax(0, 1fr); }
  .st-kachel-fuss { flex-direction: column; align-items: stretch; }
  .st-knopf { text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Vergabeakte: Reiter und Unterlagensatz (Schritt C)

   Der Unterlagensatz ist zweigeteilt: links der Baum aus neun Ordnern, rechts
   die gewaehlte Unterlage. Links ist schmal und scrollt, rechts steht das,
   womit man arbeitet.
   ══════════════════════════════════════════════════════════════════════════ */

.vf-reiter {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 0 0 18px; padding-bottom: 0;
  border-bottom: 1px solid var(--ck-rand);
}
.vf-reiter-knopf {
  border: 0; background: none; cursor: pointer;
  padding: 9px 14px 10px; margin-bottom: -1px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ck-gedaempft);
  border-bottom: 2px solid transparent;
}
.vf-reiter-knopf:hover { color: var(--ck-kartentitel); }
.vf-reiter-knopf.aktiv { color: var(--ck-violett); border-bottom-color: var(--ck-violett); }
.vf-reiter-knopf:focus-visible {
  outline: 2px solid var(--ck-blau); outline-offset: -2px; border-radius: 6px 6px 0 0;
}
.vf-tafel[hidden] { display: none; }

/* ── Unterlagensatz ────────────────────────────────────────────────────── */
.ak-block { display: block; }
.ak-kopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.ak-kopf h2 { margin: 0 0 3px; }
.ak-kopfknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.ak-raster {
  display: grid; grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px; align-items: start; margin-top: 12px;
}
.ak-baum {
  max-height: 640px; overflow: auto;
  border: 1px solid var(--ck-rand); border-radius: 12px;
  background: var(--ck-flaeche); padding: 8px;
}
.ak-ordner { margin-bottom: 4px; }
.ak-ordner-kopf {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px 6px; font-size: 12px; font-weight: 700;
  color: var(--ck-kartentitel); letter-spacing: -.01em;
}
.ak-ordner-kopf svg { flex: 0 0 auto; color: var(--ck-gedaempft); }
.ak-ordner-kopf span { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ak-ordner-kopf em { font-style: normal; font-size: 12px; font-weight: 600;
  color: var(--ck-gedaempft); }
.ak-leer { margin: 0 0 6px 29px; font-size: 12px; color: var(--ck-gedaempft); }

.ak-liste { list-style: none; margin: 0 0 6px; padding: 0; }
.ak-zeile {
  display: flex; align-items: flex-start; gap: 7px; width: 100%;
  padding: 7px 8px; border: 1px solid transparent; border-radius: 9px;
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.ak-zeile:hover { background: var(--ck-grund); }
.ak-zeile.aktiv { background: rgba(107, 31, 209, .07); border-color: rgba(107, 31, 209, .25); }
.ak-zeile svg { flex: 0 0 auto; margin-top: 2px; color: var(--ck-gedaempft); }
/* break-word, nicht anywhere: anywhere bricht mitten im Wort, auch wenn eine
   Zeile davor noch Platz gewesen waere ("Angebotsabgab e"). */
.ak-titel { display: block; font-size: 14px; line-height: 1.35;
  color: var(--ck-kartentitel); overflow-wrap: break-word; hyphens: auto; }
.ak-marken { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ak-zeile > span:not(.ak-marken) { flex: 1 1 auto; min-width: 0; }
.ak-zeile .ak-marken { flex: 1 1 100%; margin-left: 21px; }

.ak-marke {
  display: inline-block; font-style: normal; font-size: 12px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--ck-rand);
  background: #fff; color: var(--ck-gedaempft); letter-spacing: .01em;
}
.ak-marke.vu { border-color: #bfdbfe; background: #eff6ff; color: #1D5FBF; }
.ak-marke.intern { border-color: #e9d5ff; background: #faf5ff; color: #6B1FD1; }
.ak-marke.fassung { border-color: #bbf7d0; background: #f0fdf4; color: #12715B; }
.ak-marke.leer { border-color: #fcd34d; background: #fffbeb; color: #8A4B00; }
.ak-marke.stand.gut { border-color: #bbf7d0; background: #f0fdf4; color: #12715B; }
.ak-marke.stand.warn { border-color: #fcd34d; background: #fffbeb; color: #8A4B00; }
.ak-marke.stand.blau { border-color: #bfdbfe; background: #eff6ff; color: #1D5FBF; }

.ak-schau {
  border: 1px solid var(--ck-rand); border-radius: 12px;
  background: var(--ck-flaeche); padding: 16px; min-width: 0;
}
.ak-schau-kopf h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700;
  color: var(--ck-titel); }
.ak-vorschau { margin: 12px 0; }
.ak-vorschau iframe { width: 100%; height: 430px; border: 1px solid var(--ck-rand);
  border-radius: 10px; background: #fff; }
.ak-vorschau[hidden] { display: none; }
.ak-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ak-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--ck-linie); }
/* Die Haken bekommen die volle Breite: Ihr Erklaersatz ist laenger als ein
   Auswahlfeld und lief sonst aus dem Kasten heraus. */
.ak-felder .ak-kipp { grid-column: 1 / -1; }

/* Ein Haken mit Erklaersatz daneben. Die Erklaerung gehoert dazu: "intern"
   allein sagt nicht, dass die Unterlage dann nicht an die Bieter geht. */
.ak-kipp { display: flex; align-items: flex-start; gap: 8px; font-size: 14px;
  color: var(--ck-text); cursor: pointer; }
.ak-kipp input { flex: 0 0 auto; width: auto; min-width: 0; margin: 2px 0 0; padding: 0; }
/* style.css gibt jedem input width:100%; ohne die Zeile oben nahm das
   Kaestchen die ganze Zeile, und der Text klebte als Streifen am Rand. */
.ak-kipp > span { flex: 1 1 auto; min-width: 0; }
.vf-gruppenwahl .ak-kipp em { display: block; margin-top: 2px; line-height: 1.45; }
.ak-kipp em { font-style: normal; color: var(--ck-gedaempft); }

.ak-fassungen { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ck-linie); }
.ak-fassungen h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700;
  color: var(--ck-kartentitel); }
.ak-fliste { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; }
.ak-fliste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--ck-gedaempft); }
.ak-fliste strong { color: var(--ck-kartentitel); font-weight: 600; }
.ak-pruef { font-variant-numeric: tabular-nums; }
.ak-fliste .kc-knopf { margin-left: auto; padding: 4px 10px; font-size: 12px; }

/* ── Blatt: Neues Dokument ─────────────────────────────────────────────── */
.ak-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin: 14px 0; }
.ak-karte {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 13px; border: 1px solid var(--ck-rand); border-radius: 12px;
  background: #fff; font: inherit; cursor: pointer;
}
.ak-karte:hover:not(:disabled) { border-color: rgba(43, 117, 255, .45);
  background: rgba(43, 117, 255, .04); }
.ak-karte.aktiv { border-color: var(--ck-violett); background: rgba(107, 31, 209, .06); }
.ak-karte strong { font-size: 14px; color: var(--ck-kartentitel); }
.ak-karte span { font-size: 12px; line-height: 1.45; color: var(--ck-gedaempft); }
.ak-karte em { font-style: normal; font-size: 12px; color: #8A4B00; }
.ak-karte.zu { opacity: .6; cursor: default; }
.ak-formular { display: grid; gap: 10px; padding-top: 12px;
  border-top: 1px solid var(--ck-linie); }
.ak-wahl { display: flex; flex-direction: column; gap: 7px; margin: 12px 0;
  max-height: 300px; overflow: auto; }

@media (max-width: 900px) {
  .ak-raster { grid-template-columns: minmax(0, 1fr); }
  .ak-baum { max-height: 340px; }
  .ak-vorschau iframe { height: 300px; }
}

/* Der Paketknopf auf der Bieterseite. Steht unter der Liste, nicht darueber:
   Wer nur eine Unterlage braucht, soll sie zuerst sehen. */
.ag-paket { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; }
.ag-paket .kc-knopf { text-decoration: none; }
.ag-paket .ag-klein { font-size: .75rem; color: var(--ck-gedaempft); }

/* ══════════════════════════════════════════════════════════════════════════
   Verfahrensliste: Reiter, Favoriten, Ampel, Sortierung (Schritt D)
   ══════════════════════════════════════════════════════════════════════════ */

.vf-listenreiter { display: flex; gap: 2px; margin-bottom: 14px;
  border-bottom: 1px solid var(--ck-rand); }

.vf-nur-fav { display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--ck-text); cursor: pointer; white-space: nowrap; }

/* Der Stern. Grau und hohl, solange nichts gemerkt ist; gefuellt und
   bernstein, wenn doch. Kein Emoji, sondern derselbe Strichsatz wie ueberall. */
.vf-fav-zelle { width: 34px; padding-right: 0 !important; }
.vf-fav { border: 0; background: none; cursor: pointer; padding: 4px;
  color: var(--ck-rand); display: flex; border-radius: 7px; }
.vf-fav:hover { color: #8A4B00; background: rgba(217, 119, 6, .08); }
.vf-fav.an { color: #8A4B00; }
.vf-fav:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 1px; }

/* Die Ampel an der Frist. Drei Zustaende, kein vierter: rot heisst drei Tage
   oder weniger, bernstein bis eine Woche, gruen darueber. */
.vf-ampel { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; flex: 0 0 auto; }
.vf-ampel.rot { background: #dc2626; }
.vf-ampel.gelb { background: #d97706; }
.vf-ampel.gruen { background: #16a34a; }
.vf-ampel.ab { background: var(--ck-rand); }

/* text-transform steht NICHT in der font-Kurzform. Ohne diese Zeile sieht
   eine sortierbare Spalte anders aus als eine feste, und das wirkt wie ein
   Fehler. */
.vf-sort { border: 0; background: none; padding: 0; font: inherit;
  font-weight: inherit; color: inherit; cursor: pointer; display: inline-flex;
  align-items: center; gap: 4px; text-transform: uppercase;
  letter-spacing: inherit; }
.vf-sort:hover { color: var(--ck-blau-text); }
.vf-sort.aktiv { color: var(--ck-violett); }
.vf-sort i { font-style: normal; font-size: .8em; }

.vf-wer { font-size: 12px; color: var(--ck-text); white-space: nowrap; }
.vf-naechst { font-size: 12px; color: var(--ck-gedaempft); min-width: 150px; }
.vf-naechst-los { display: inline-flex; gap: 4px; align-items: baseline; font-size: 14px; font-weight: 600;
  color: var(--ck-violett, #6B1FD1); text-decoration: none; }
.vf-naechst-los:hover { text-decoration: underline; }
.vf-naechst-fertig { color: #12715B; }
@media (max-width: 640px) {
  .vf-tabelle { overflow-x: auto; }
  .vf-t td { font-size: 14px; }
  .vf-t .vf-marke { white-space: normal; line-height: 1.25; }
}
@media (max-width: 640px) {
  .vf-tabelle { overflow-x: auto; }
  .vf-t td { font-size: 14px; }
  .vf-t .vf-marke { white-space: normal; line-height: 1.25; }
  .vf-t th { white-space: normal; letter-spacing: .02em; }
  .vf-t td, .vf-t th { padding-left: 3px !important; padding-right: 3px !important; }
  .vf-t .vf-marke { font-size: 12px; padding-left: 6px; padding-right: 6px; }
}
.vf-archiv { margin-left: auto; }

/* Nutzergruppen im Anlegedialog. Ein Rahmen ohne Rand: Die Legende genuegt,
   ein zweiter Kasten im Blatt waere eine Schachtel zu viel. */
.vf-gruppenwahl { border: 0; padding: 0; margin: 14px 0 0; }
.vf-gruppenwahl legend { padding: 0; font-size: 12px; font-weight: 600;
  color: var(--ck-kartentitel); }
.vf-gruppenwahl .bb-klein { margin: 2px 0 8px; }
.vf-gruppenwahl .ak-kipp { margin-bottom: 6px; }

/* Die Begruendungen zum Vorschlag. Sie stehen unter den Feldern, nicht
   daneben: Wer prueft, liest sie einmal von oben nach unten. */
.vf-begruendungen { margin-top: 14px; padding: 12px 14px;
  background: var(--ck-grund); border-radius: 11px; }
.vf-begruendungen h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700;
  color: var(--ck-kartentitel); }
.vf-begruendungen ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px; }
.vf-begruendungen li { display: grid; grid-template-columns: 118px 1fr;
  gap: 2px 10px; font-size: 14px; line-height: 1.45; }
.vf-begruendungen strong { color: var(--ck-kartentitel); font-weight: 600; }
.vf-begruendungen .vf-norm { grid-column: 1; font-size: 12px;
  color: var(--ck-violett); font-weight: 600; }
.vf-begruendungen li > span:last-child { grid-column: 2; grid-row: 1 / 3;
  color: var(--ck-text); }

@media (max-width: 760px) {
  .vf-begruendungen li { grid-template-columns: 1fr; }
  .vf-begruendungen li > span:last-child { grid-column: 1; grid-row: auto; }
  .vf-naechst, .vf-wer { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bedarfsklärung (Schritt E)

   Drei Spalten: links die Blöcke, Mitte die Fragen, rechts der Vorschlag.
   Die rechte Spalte ist leer, bis jemand einen Vorschlag holt; sie nimmt
   dann keinen Platz von den Fragen weg, weil sie eine eigene Spur hat.
   ══════════════════════════════════════════════════════════════════════════ */

.bd-zaehler { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  margin: 10px 0 14px; padding: 11px 14px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 12px; }
.bd-zahl { font-size: 14px; color: var(--ck-gedaempft); }
.bd-zahl strong { font-size: 16px; font-weight: 700; color: var(--ck-kartentitel);
  margin-right: 3px; font-variant-numeric: tabular-nums; }
.bd-zahl.gut strong { color: #12715B; }
.bd-zahl.warn strong { color: #8A4B00; }
.bd-balken { flex: 1 1 140px; height: 6px; border-radius: 3px;
  background: var(--ck-linie); overflow: hidden; min-width: 100px; }
.bd-balken > i { display: block; height: 100%; background: var(--gradient); }

.bd-raster { display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px;
  gap: 16px; align-items: start; }

.bd-bloecke { display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: calc(var(--ck-klebe) + 12px); }
.bd-block-knopf { display: grid; grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto; gap: 0 9px; align-items: center;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;
  background: none; font: inherit; text-align: left; cursor: pointer; }
.bd-block-knopf:hover { background: var(--ck-grund); }
.bd-block-knopf.aktiv { background: rgba(107, 31, 209, .07);
  border-color: rgba(107, 31, 209, .25); }
.bd-block-name { font-size: 14px; font-weight: 600; color: var(--ck-kartentitel); }
.bd-block-zahl { grid-column: 2; font-size: 12px; color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums; }

/* Der Fortschrittsring. Ein Kegelverlauf statt eines SVG: kein zusätzliches
   Element je Block, und er rechnet den Anteil selbst. */
.bd-ring { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--ck-violett) calc(var(--anteil) * 1%),
                             var(--ck-linie) 0);
  display: block; position: relative; }
.bd-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--ck-flaeche); }
.bd-block-knopf.aktiv .bd-ring::after { background: #fbf7ff; }
.bd-block-knopf.fertig .bd-ring { background: #16a34a; }

.bd-fragen { min-width: 0; }
.bd-kopf { margin-bottom: 12px; }
.bd-kopf h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 700;
  color: var(--ck-titel); }
.bd-kopf p { margin: 0; font-size: 14px; line-height: 1.5;
  color: var(--ck-gedaempft); }

.bd-frage { padding: 14px 16px; margin-bottom: 10px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 12px; }
.bd-frage.fertig { border-left: 3px solid #16a34a; }
.bd-frage.weg { border-left: 3px solid #d97706; background: #fffdf7; }
.bd-frage-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.bd-text { font-size: .875rem; font-weight: 600; color: var(--ck-kartentitel);
  line-height: 1.4; }
.bd-pflicht { font-style: normal; color: #A3241B; margin-left: 3px; }
.bd-norm { font-size: 12px; font-weight: 600; color: var(--ck-violett);
  white-space: nowrap; }
.bd-hilfe { margin: 5px 0 9px; font-size: 14px; line-height: 1.5;
  color: var(--ck-gedaempft); }
.bd-frage input[type="text"], .bd-frage input[type="date"],
.bd-frage textarea, .bd-frage select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--ck-rand);
  border-radius: 9px; font: inherit; font-size: 14px; color: var(--ck-text);
  background: #fff; height: auto; min-height: 0;
}
.bd-frage textarea { resize: vertical; min-height: 64px; }
.bd-mehrfach { display: flex; flex-direction: column; gap: 5px; }
.bd-uebersprungen { margin: 4px 0 0; font-size: 14px; color: #8A4B00; }
.bd-spur { margin: 6px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.bd-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bd-knoepfe .kc-knopf { padding: 5px 11px; font-size: 12px; }

/* ── Vorschlag ─────────────────────────────────────────────────────────── */
.bd-seite { position: sticky; top: calc(var(--ck-klebe) + 12px); }
.bd-vorschlag { padding: 14px 16px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 12px; }
.bd-vorschlag h4 { margin: 0 0 3px; font-size: 14px; font-weight: 700;
  color: var(--ck-kartentitel); }
.bd-vorschlag-frage { margin: 0 0 9px; font-size: .75rem; color: var(--ck-gedaempft); }
.bd-entwurf { padding: 10px 12px; background: var(--ck-grund); border-radius: 9px;
  font-size: 14px; line-height: 1.55; color: var(--ck-text);
  white-space: pre-wrap; overflow-wrap: break-word; }
.bd-warum { margin: 9px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.bd-offen { margin: 10px 0 3px; font-size: 12px; color: var(--ck-text); }
.bd-offen-liste { margin: 0; padding-left: 18px; font-size: 12px;
  color: var(--ck-gedaempft); }
.bd-warnung { margin: 9px 0 0; padding: 7px 10px; border-radius: 8px;
  background: #fffbeb; border: 1px solid #fcd34d; font-size: 12px;
  color: #8A4B00; }
.bd-klein { margin: 10px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--ck-gedaempft); }

@media (max-width: 1200px) {
  .bd-raster { grid-template-columns: 200px minmax(0, 1fr); }
  .bd-seite { grid-column: 1 / -1; position: static; }
}
@media (max-width: 800px) {
  .bd-raster { grid-template-columns: minmax(0, 1fr); }
  .bd-bloecke { position: static; flex-direction: row; overflow-x: auto;
    padding-bottom: 6px; }
  .bd-block-knopf { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Leistungsverzeichnis (Schritt F)

   Links der Baum, rechts die Tafel. Dieselbe Aufteilung wie in den Reitern
   Unterlagen und Bedarf, damit die Akte nicht in jedem Reiter anders aussieht.
   ══════════════════════════════════════════════════════════════════════════ */

.lv-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px; align-items: start; margin-top: 12px; }
.lv-baum { min-width: 0; }
.lv-seite { position: sticky; top: calc(var(--ck-klebe) + 12px);
  border: 1px solid var(--ck-rand); border-radius: 12px;
  background: var(--ck-flaeche); padding: 12px 14px; }

/* ── Wertungsregeln ─────────────────────────────────────────────────────── */
.lv-regeln { margin: 10px 0 12px; padding: 12px 14px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 12px; }
.lv-regel-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.lv-regel-kopf strong { font-size: 14px; color: var(--ck-kartentitel); }
.lv-regel-felder { display: grid; grid-template-columns: 120px 120px minmax(0, 1fr);
  gap: 12px; align-items: start; }
.lv-regel-felder .lv-weit { grid-column: 3; }
.lv-formel { margin: 10px 0 0; display: flex; flex-direction: column; gap: 3px; }
.lv-formel code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ck-kartentitel); background: var(--ck-grund);
  padding: 5px 8px; border-radius: 7px; overflow-wrap: break-word; }

/* ── Befunde ────────────────────────────────────────────────────────────── */
.lv-pruefungen { margin-bottom: 4px; }
.lv-gut { margin: 0; font-size: 12px; color: #12715B; }
.lv-befund-kopf { margin: 0 0 5px; font-size: 12px; font-weight: 600;
  color: var(--ck-kartentitel); }
.lv-befunde { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.lv-befunde li { font-size: 12px; line-height: 1.45; padding: 7px 10px;
  border-radius: 9px; border: 1px solid var(--ck-rand); background: var(--ck-flaeche);
  color: var(--ck-text); }
.lv-befunde li.fehler { background: #fef2f2; border-color: #fecaca; color: #A3241B; }
.lv-befunde li.hinweis { background: #fffbeb; border-color: #fcd34d; color: #8A4B00; }

/* ── Der Baum ───────────────────────────────────────────────────────────── */
.lv-los { border: 1px solid var(--ck-rand); border-radius: 12px;
  background: var(--ck-flaeche); margin-bottom: 10px; overflow: hidden; }
.lv-los.aktiv { border-color: rgba(107, 31, 209, .35); }
.lv-los-kopf { display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; border-bottom: 1px solid var(--ck-linie);
  background: none; font: inherit; text-align: left; cursor: pointer;
  flex-wrap: wrap; }
.lv-los-kopf:hover { background: var(--ck-grund); }
.lv-los.aktiv .lv-los-kopf { background: rgba(107, 31, 209, .06); }
.lv-los-nr { font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ck-violett); }
.lv-los-titel { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700;
  color: var(--ck-kartentitel); overflow-wrap: break-word; }
.lv-los-zahl { font-size: 12px; color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums; }
.lv-punkte { font-size: 12px; font-weight: 600; color: #12715B;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-punkte.falsch { color: #A3241B; }
.lv-punkte.ohne { color: var(--ck-gedaempft); font-weight: 600; }
.lv-los-leer { margin: 0; padding: 9px 14px; font-size: 12px;
  color: var(--ck-gedaempft); }
.lv-los-knoepfe { display: flex; gap: 7px; flex-wrap: wrap;
  padding: 9px 14px 11px; border-top: 1px solid var(--ck-linie); }
.lv-los-knoepfe .kc-knopf { padding: 4px 10px; font-size: 12px; }

.lv-zeilen { list-style: none; margin: 0; padding: 0; }
.lv-zeilen .lv-zeilen { padding-left: 22px; }
.lv-zeile { display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 7px 14px; border: 0; border-left: 3px solid transparent;
  background: none; font: inherit; text-align: left; cursor: pointer; }
.lv-zeile:hover { background: var(--ck-grund); }
.lv-zeile.aktiv { background: rgba(107, 31, 209, .07);
  border-left-color: var(--ck-violett); }
.lv-zeile.abschnitt .lv-titel { font-weight: 700; color: var(--ck-kartentitel); }
.lv-zeile.text .lv-titel { font-style: italic; color: var(--ck-gedaempft); }
.lv-nr { flex: 0 0 42px; font-size: 12px; font-weight: 600;
  color: var(--ck-gedaempft); font-variant-numeric: tabular-nums; }
.lv-zeile .lv-titel { flex: 1 1 auto; min-width: 0; font-size: 14px;
  line-height: 1.4; color: var(--ck-text); overflow-wrap: break-word; }
.lv-menge { flex: 0 0 auto; font-size: 12px; color: var(--ck-gedaempft);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-menge em { font-style: normal; color: #8A4B00; }
.lv-marke { display: inline-block; font-style: normal; font-size: 12px;
  font-weight: 600; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--ck-rand); background: #fff; color: var(--ck-gedaempft); }
.lv-marke.quelle { border-color: rgba(107, 31, 209, .3); color: var(--ck-violett); }

/* ── Die Tafel rechts ───────────────────────────────────────────────────── */
.lv-seite-reiter { display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ck-linie); }
.lv-seite-knopf { padding: 6px 11px 8px; border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ck-gedaempft); cursor: pointer; }
.lv-seite-knopf:hover { color: var(--ck-kartentitel); }
.lv-seite-knopf.aktiv { color: var(--ck-violett); border-bottom-color: var(--ck-violett); }
.lv-felder { display: flex; flex-direction: column; gap: 11px; }
.lv-seite-nr { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ck-violett); }
.lv-felder input[type="text"], .lv-felder input[type="number"],
.lv-felder textarea, .lv-felder select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--ck-rand);
  border-radius: 9px; font: inherit; font-size: 14px; color: var(--ck-text);
  background: #fff; height: auto; min-height: 0; }
.lv-felder textarea { resize: vertical; }
.lv-kipp { display: flex; align-items: flex-start; gap: 8px; font-size: 14px;
  line-height: 1.4; color: var(--ck-text); }
.lv-kipp input { margin-top: 2px; }
.lv-fundstellen h4 { margin: 0 0 3px; font-size: 12px; color: var(--ck-kartentitel); }
.lv-fundstellen ul { margin: 0; padding-left: 17px; font-size: 12px;
  color: var(--ck-gedaempft); }

.lv-punkte-summe { margin: 0; font-size: 14px; font-weight: 600; color: #12715B; }
.lv-punkte-summe.falsch { color: #A3241B; font-weight: 600; }
.lv-kriterien { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
.lv-kriterien li { position: relative; padding: 9px 34px 9px 11px;
  border: 1px solid var(--ck-rand); border-radius: 10px; background: #fff; }
.lv-kriterien li.ausschluss { border-left: 3px solid #b45309; }
.lv-kriterien li.bewertung { border-left: 3px solid var(--ck-violett); }
.lv-k-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 9px; }
.lv-k-kopf strong { font-size: 14px; color: var(--ck-kartentitel);
  overflow-wrap: break-word; }
.lv-k-typ { flex: 0 0 auto; font-size: 12px; font-weight: 600;
  color: var(--ck-gedaempft); font-variant-numeric: tabular-nums; }
.lv-kriterien li p { margin: 4px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--ck-text); }
.lv-k-nachweis { color: var(--ck-gedaempft) !important; }
.lv-kriterien .ck-weg { position: absolute; top: 7px; right: 7px; }
.lv-k-neu { padding-top: 12px; border-top: 1px solid var(--ck-linie);
  display: flex; flex-direction: column; gap: 10px; }
.lv-k-neu h4 { margin: 0; font-size: 14px; color: var(--ck-kartentitel); }

@media (max-width: 1100px) {
  .lv-raster { grid-template-columns: minmax(0, 1fr); }
  .lv-seite { position: static; }
  .lv-regel-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lv-regel-felder .lv-weit { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Wertung nach Losen (Schritt F)
   ══════════════════════════════════════════════════════════════════════════ */

.lvw-regel { font-weight: 600; color: var(--ck-kartentitel) !important; }
.lvw-los { margin: 14px 0 18px; }
.lvw-los h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700;
  color: var(--ck-titel); }
.lvw-warn { color: #8A4B00 !important; font-weight: 600; }
.lvw-rollen { overflow-x: auto; margin-top: 9px; border: 1px solid var(--ck-rand);
  border-radius: 12px; background: var(--ck-flaeche); }
.lvw-rollen:focus-visible { outline: 2px solid var(--ck-violett); outline-offset: 2px; }
.lvw-tafel { border-collapse: collapse; width: 100%; min-width: 520px;
  font-size: 12px; }
.lvw-tafel th, .lvw-tafel td { padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--ck-linie); vertical-align: top; }
.lvw-tafel thead th { font-size: 12px; font-weight: 700;
  color: var(--ck-kartentitel); background: var(--ck-grund); white-space: nowrap; }
.lvw-tafel thead th em { display: block; font-style: normal; font-size: 12px;
  font-weight: 600; color: #A3241B; }
.lvw-tafel tbody th { font-weight: 600; color: var(--ck-text); max-width: 260px;
  overflow-wrap: break-word; }
.lvw-tafel tr.ausschluss tbody th, .lvw-tafel tr.ausschluss > th {
  border-left: 3px solid #b45309; }
.lvw-max { display: block; font-size: 12px; font-weight: 600;
  color: var(--ck-gedaempft); }
.lvw-zelle { display: inline-block; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--ck-rand); background: #fff; font: inherit;
  font-size: 12px; color: var(--ck-kartentitel); cursor: pointer;
  font-variant-numeric: tabular-nums; }
button.lvw-zelle:hover { border-color: var(--ck-violett); color: var(--ck-violett); }
.lvw-zelle.offen { color: var(--ck-gedaempft); border-style: dashed; }
.lvw-zelle.gut { color: #12715B; border-color: #86efac; }
.lvw-zelle.raus { color: #A3241B; border-color: #fecaca; background: #fef2f2; }
.lvw-grund { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4;
  color: var(--ck-gedaempft); max-width: 220px; }
.lvw-fuss th, .lvw-fuss td { background: var(--ck-grund); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.lvw-fuss.betont th, .lvw-fuss.betont td { color: var(--ck-titel); font-weight: 700; }
.lvw-liste { margin-top: 8px; }
.lvw-liste summary { font-size: 12px; color: var(--ck-gedaempft); cursor: pointer; }
.lvw-liste ul { list-style: none; margin: 7px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px; }
.lvw-liste li { font-size: 12px; line-height: 1.45; padding: 7px 10px;
  border: 1px solid var(--ck-rand); border-radius: 9px; background: var(--ck-flaeche); }
.lvw-liste li strong { display: block; color: var(--ck-kartentitel); }
.lvw-liste li span { color: var(--ck-gedaempft); }

/* ══════════════════════════════════════════════════════════════════════════
   Gemerkte Passagen am Verfahren (Schritt H)
   ══════════════════════════════════════════════════════════════════════════ */

.mk-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mk-karte { padding: 13px 15px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 13px; }
.mk-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.mk-kopf strong { font-size: 14px; color: var(--ck-titel);
  overflow-wrap: break-word; }
.mk-herkunft { flex: 0 0 auto; font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; background: #fff;
  border: 1px solid var(--ck-rand); color: var(--ck-gedaempft);
  white-space: nowrap; }
.mk-quelle { margin: 3px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.mk-text { margin: 8px 0 0; padding: 9px 11px; background: #fff;
  border: 1px solid var(--ck-rand); border-radius: 9px; font-size: 14px;
  line-height: 1.55; color: var(--ck-text); white-space: pre-wrap;
  overflow-wrap: break-word; }
.mk-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.mk-knoepfe .ck-verweis { font-size: .75rem; }
.mk-knoepfe .ck-verweis.weg { color: #A3241B; }

/* ══════════════════════════════════════════════════════════════════════════
   Vergleichbare Verfahren und Schätzung (Schritt I)
   ══════════════════════════════════════════════════════════════════════════ */

.vgl-alt { margin: 0 0 12px; padding: 9px 12px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fcd34d; font-size: 12px;
  color: #8A4B00; }

.vgl-kennzahlen { margin: 12px 0 16px; padding: 14px 16px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand);
  border-radius: 14px; }
.vgl-kennzahlen h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700;
  color: var(--ck-titel); }
.vgl-zahlen-liste { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin: 12px 0 0; }
.vgl-zahlen-liste > div { padding: 10px 12px; background: #fff;
  border: 1px solid var(--ck-rand); border-radius: 10px; }
.vgl-zahlen-liste dt { font-size: 12px; font-weight: 600;
  color: var(--ck-gedaempft); }
.vgl-zahlen-liste dd { margin: 2px 0 0; font-size: 14px; font-weight: 700;
  color: var(--ck-titel); overflow-wrap: break-word; }
.vgl-zahlen-liste dd em { display: block; margin-top: 2px; font-style: normal;
  font-size: 12px; font-weight: 400; line-height: 1.4;
  color: var(--ck-gedaempft); }
.vgl-absatz { margin-top: 12px; }
.vgl-absatz summary { font-size: 12px; color: var(--ck-violett);
  cursor: pointer; font-weight: 600; }
.vgl-absatz pre { margin: 9px 0 0; padding: 11px 13px; background: #fff;
  border: 1px solid var(--ck-rand); border-radius: 10px;
  font-family: inherit; font-size: 12px; line-height: 1.6;
  color: var(--ck-text); white-space: pre-wrap; overflow-wrap: break-word;
  max-height: 340px; overflow: auto; }

.vgl-liste { display: flex; flex-direction: column; gap: 9px; }
.vgl-karte { padding: 12px 14px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 13px; }
.vgl-karte.referenz { border-color: rgba(107, 31, 209, .35);
  background: rgba(107, 31, 209, .05); }
.vgl-kopf { display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap; }
.vgl-rang { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ck-grund); color: var(--ck-gedaempft); font-size: 12px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vgl-karte.referenz .vgl-rang { background: var(--ck-violett); color: #fff; }
.vgl-titel { flex: 1 1 260px; min-width: 0; display: flex;
  flex-direction: column; gap: 2px; }
.vgl-titel strong { font-size: 14px; color: var(--ck-titel);
  overflow-wrap: break-word; }
.vgl-herkunft { font-size: 12px; color: var(--ck-gedaempft); }
.vgl-ref { flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-size: .75rem; color: var(--ck-text); cursor: pointer; }
.vgl-zahlen { margin: 8px 0 0; font-size: 12px; color: var(--ck-text); }
.vgl-warum { margin: 4px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.vgl-karte .ck-verweis { margin-top: 7px; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Anbieterlandschaft, Markterkundung am Verfahren (Schritt J)
   ══════════════════════════════════════════════════════════════════════════ */

.mke-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mke-karte { padding: 13px 15px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 13px; }
.mke-kopf { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mke-kopf strong { display: block; font-size: 14px; color: var(--ck-titel); }
.mke-meta { display: block; margin-top: 2px; font-size: 12px;
  color: var(--ck-gedaempft); }
.mke-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.mke-knoepfe .kc-knopf { padding: 5px 11px; font-size: 12px; }
.mke-quellen { margin: 8px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.mke-hinweis { margin: 4px 0 0; font-size: 12px; color: #8A4B00; }

.mke-unternehmen { list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 5px; }
.mke-unternehmen li { min-width: 0; }
/* Name ueber Ort, nicht nebeneinander: Nebeneinander hat der unnachgiebige
   Standort den Namen auf 40 px gequetscht, und "OneSpan" wurde zu "OneS pan". */
.mke-unternehmen label, .mke-ohne { display: flex; align-items: center;
  gap: 9px; padding: 7px 10px; background: #fff; border: 1px solid var(--ck-rand);
  border-radius: 9px; cursor: pointer; }
.mke-ohne { cursor: default; }
/* style.css Zeile 491 setzt JEDES input auf width:100% und padding:12px.
   Ohne Gegenwehr nimmt die Checkbox die ganze Kachel und der Firmenname
   steht als Buchstabensaeule am Rand. style.css wird nicht angefasst. */
.mke-unternehmen input { flex: 0 0 auto; width: auto; min-width: 0;
  margin: 0; padding: 0; }
.mke-text { flex: 1 1 auto; min-width: 0; }
.mke-name { display: block; font-size: 14px; line-height: 1.35;
  color: var(--ck-kartentitel); overflow-wrap: break-word; }
.mke-ort { display: block; margin-top: 1px; font-size: 12px;
  color: var(--ck-gedaempft); overflow-wrap: break-word; }
.mke-unternehmen em { flex: 0 0 auto; align-self: flex-start;
  font-style: normal; font-size: 12px;
  font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: rgba(107, 31, 209, .1); color: var(--ck-violett); }
.mke-ergebnis { margin-top: 10px; }
.mke-ergebnis summary { font-size: 12px; color: var(--ck-violett);
  cursor: pointer; font-weight: 600; }
.mke-ergebnis ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px;
  line-height: 1.55; color: var(--ck-text); }
.mke-ergebnis li.risiko { color: #8A4B00; }

/* ══════════════════════════════════════════════════════════════════════════
   Unterlagen-Editor (Schritt K)

   Drei Spalten: Baum und Gliederung links, das Blatt in der Mitte, das Panel
   mit sechs Reitern rechts. Die mittlere Spalte sieht aus wie eine Seite,
   weil sie am Ende eine wird; die Seitenvorschau zeigt dieselbe Seite mit
   Umbruechen.
   ══════════════════════════════════════════════════════════════════════════ */

.ed-haupt { padding-bottom: 28px; }

.ed-wahl { max-width: 860px; margin: 8px 0 0; }
/* Zuletzt bearbeitet (Befund 16, 29.09.2026). */
.ed-zuletzt { margin-top: 22px; }
.ed-zuletzt h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ck-titel); }
.ed-zuletzt ul { list-style: none; margin: 0; padding: 0; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 14px; }
.ed-zuletzt li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 16px;
  border-top: 1px solid var(--ck-linie); font-size: 14px; }
.ed-zuletzt li:first-child { border-top: 0; }
.ed-zuletzt a { color: var(--ck-titel); font-weight: 600; text-decoration: none; min-width: 0; }
.ed-zuletzt a:hover { color: var(--ck-violett); }
.ed-zuletzt span { flex: 0 0 auto; color: var(--ck-gedaempft); font-size: 14px; text-align: right; }
.ed-wahl h1 { margin: 0 0 6px; font-size: 24px; color: var(--ck-titel); }
.ed-unter { margin: 0 0 18px; font-size: 14px; color: var(--ck-text);
  line-height: 1.6; }
.ed-wahl-felder { display: grid; gap: 12px; padding: 18px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand);
  border-radius: 14px; }
.ed-wahl-felder .kc-knopf { justify-self: start; }

/* ── Kopf ────────────────────────────────────────────────────────────── */

.ed-kopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 0 0 12px;
  border-bottom: 1px solid var(--ck-rand); }
.ed-kopf h1 { margin: 2px 0 0; font-size: 20px; color: var(--ck-titel); }
.ed-kopf-meta { margin: 4px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.ed-zurueck { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ck-violett); text-decoration: none;
  font-weight: 600; }
.ed-zurueck:hover { text-decoration: underline; }
.ed-kopf-rechts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ed-stand { font-size: 12px; color: var(--ck-gedaempft); min-width: 116px;
  text-align: right; }
.ed-modell { display: flex; align-items: center; gap: 6px; }
.ed-modell-label { font-size: 12px; color: var(--ck-gedaempft); }
.ed-modell .bb-wahl { width: auto; min-width: 120px; padding: 6px 9px;
  font-size: 12px; }

/* ── Raster ──────────────────────────────────────────────────────────── */

.ed-raster { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px;
  gap: 16px; margin-top: 14px; align-items: start; }
@media (max-width: 1500px) { .ed-raster { grid-template-columns: 220px minmax(0, 1fr) 300px; } }
@media (max-width: 1180px) {
  .ed-raster { grid-template-columns: minmax(0, 1fr); }
  .ed-links, .ed-rechts { position: static !important; max-height: none !important; }
}

.ed-links, .ed-rechts { position: sticky; top: calc(var(--ck-klebe) + 8px);
  max-height: calc(100vh - var(--ck-klebe) - 30px); overflow: auto;
  padding: 14px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 14px; }

.ed-spalte-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; }
.ed-spalte-kopf h2 { margin: 0; font-size: 14px; color: var(--ck-titel);
  text-transform: uppercase; letter-spacing: .04em; }
.ed-spalte-kopf .kc-knopf { padding: 4px 9px; font-size: 12px; }
.ed-zwischen { margin-top: 18px; }

/* ── Baum ────────────────────────────────────────────────────────────── */

.ed-baum-ordner { margin-top: 10px; }
.ed-baum-ordner h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600;
  color: var(--ck-gedaempft); }
.ed-baum-dok { display: block; padding: 6px 9px; margin-bottom: 3px;
  border-radius: 8px; text-decoration: none; border: 1px solid transparent; }
.ed-baum-dok:hover { background: var(--ck-grund); }
.ed-baum-dok.aktiv { background: rgba(107, 31, 209, .08);
  border-color: rgba(107, 31, 209, .25); }
.ed-baum-dok span { display: block; font-size: 12px; color: var(--ck-kartentitel);
  overflow-wrap: break-word; }
.ed-baum-dok em { display: block; font-style: normal; font-size: 12px;
  color: var(--ck-gedaempft); }
.ed-baum-dok.fremd span { color: var(--ck-gedaempft); }

/* ── Gliederung ──────────────────────────────────────────────────────── */

.ed-gliederung { margin-top: 8px; }
.ed-gl-zeile { display: flex; gap: 7px; width: 100%; text-align: left;
  padding: 5px 7px; background: none; border: 0; border-radius: 7px;
  cursor: pointer; font: inherit; font-size: 12px; color: var(--ck-kartentitel);
  line-height: 1.4; }
.ed-gl-zeile:hover { background: var(--ck-grund); }
.ed-gl-zeile.e1 { font-weight: 600; margin-top: 4px; }
.ed-gl-zeile.e2 { padding-left: 17px; }
.ed-gl-zeile.e3 { padding-left: 28px; font-size: .75rem; }
.ed-gl-zeile.e4 { padding-left: 39px; font-size: 12px; }
.ed-gl-nr { flex: 0 0 auto; color: var(--ck-gedaempft); font-variant-numeric:
  tabular-nums; }

.ed-gl-liste { max-height: 50vh; overflow: auto; margin: 10px 0;
  border: 1px solid var(--ck-rand); border-radius: 11px; padding: 8px; }
.ed-gl-eintrag { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.ed-gl-eintrag.e2 { padding-left: 22px; }
.ed-gl-eintrag.e3 { padding-left: 40px; }
.ed-gl-eintrag.e4 { padding-left: 58px; }
.ed-gl-eintrag input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0;
  padding: 0; }
.ed-gl-ebene { flex: 0 0 auto; width: auto; min-width: 92px; padding: 5px 7px;
  font-size: 12px; }
.ed-gl-titel { flex: 1 1 auto; min-width: 0; width: auto; padding: 5px 8px;
  font-size: 14px; border: 1px solid var(--ck-rand); border-radius: 7px;
  background: #fff; }

/* ── Leiste ──────────────────────────────────────────────────────────── */

.ed-mitte { min-width: 0; }
.ed-leiste { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 12px 12px 0 0;
  border-bottom: 0; position: sticky; top: calc(var(--ck-klebe) + 8px);
  z-index: 4; }
.ed-wz { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; background: none;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  color: var(--ck-text); font: inherit; font-size: 14px; }
.ed-wz:hover { background: var(--ck-grund); }
.ed-wz.aktiv { background: rgba(107, 31, 209, .1); color: var(--ck-violett);
  border-color: rgba(107, 31, 209, .25); }
.ed-teiler { width: 1px; height: 20px; background: var(--ck-rand); margin: 0 3px; }
.ed-format { width: auto; min-width: 118px; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--ck-rand); border-radius: 7px; background: #fff;
  color: var(--ck-titel); }
.ed-suche { width: 160px; padding: 5px 9px; font-size: 12px;
  border: 1px solid var(--ck-rand); border-radius: 7px; background: #fff; }
.ed-such-zahl { font-size: 12px; color: var(--ck-gedaempft); min-width: 62px; }
.ed-leiste .kc-knopf { padding: 5px 11px; font-size: 12px; margin-left: auto; }

.ed-gesperrt { margin: 0; padding: 7px 12px; font-size: 12px; color: #8A4B00;
  background: #fffbeb; border: 1px solid #fde68a; border-bottom: 0; }

/* ── Das Blatt ───────────────────────────────────────────────────────── */

.ed-blatt { background: var(--ck-flaeche); border: 1px solid var(--ck-rand);
  border-radius: 0 0 12px 12px; padding: 34px 44px 44px; min-height: 60vh; }
@media (max-width: 700px) { .ed-blatt { padding: 22px 18px 30px; } }
.ed-fuss { margin: 8px 2px 0; font-size: 12px; color: var(--ck-gedaempft); }

.ed-flaeche .ProseMirror { outline: none; font-size: 14px; line-height: 1.7;
  color: var(--ck-text); }
.ed-flaeche .ProseMirror > * { position: relative; }
.ed-flaeche h1 { font-size: 24px; margin: 26px 0 10px; color: var(--ck-titel); }
.ed-flaeche h2 { font-size: 20px; margin: 22px 0 8px; color: var(--ck-titel); }
.ed-flaeche h3 { font-size: 16px; margin: 18px 0 6px; color: var(--ck-kartentitel); }
.ed-flaeche h4 { font-size: 14px; margin: 15px 0 5px; color: var(--ck-kartentitel); }
.ed-flaeche p { margin: 0 0 11px; }
.ed-flaeche ul, .ed-flaeche ol { margin: 0 0 12px; padding-left: 24px; }
.ed-flaeche li { margin-bottom: 4px; }
.ed-flaeche table { border-collapse: collapse; width: 100%; margin: 12px 0;
  font-size: 14px; }
.ed-flaeche th, .ed-flaeche td { border: 1px solid var(--ck-rand);
  padding: 6px 9px; text-align: left; vertical-align: top; }
.ed-flaeche th { background: var(--ck-grund); font-weight: 600;
  color: var(--ck-kartentitel); }
.ed-flaeche img { max-width: 100%; border-radius: 8px; }
.ed-flaeche .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); float: left; height: 0; pointer-events: none;
  color: var(--ck-gedaempft); }

/* Die Fundstelle steht als hochgestelltes F im Text. Im DOCX wird daraus eine
   echte Fussnote; hier reicht ein Zeichen, das man anklicken kann. */
.ed-fundstelle { display: inline-block; min-width: 15px; padding: 0 3px;
  margin-left: 1px; font-size: 12px; font-weight: 700; line-height: 1.5;
  vertical-align: super; border-radius: 4px; cursor: help;
  background: rgba(43, 117, 255, .12); color: var(--ck-blau); }

/* Die Anforderungsstufe. Nicht nur Farbe: Im Ausdruck ueberlebt eine Farbe
   nicht, deshalb steht die Stufe im DOCX als Wort dabei. */
.ed-stufe { padding: 0 2px; border-radius: 3px; box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }
.ed-stufe-muss { background: rgba(239, 68, 68, .13); border-bottom: 2px solid #ef4444; }
.ed-stufe-soll { background: rgba(245, 158, 11, .15); border-bottom: 2px solid #f59e0b; }
.ed-stufe-kann { background: rgba(0, 212, 160, .15); border-bottom: 2px solid #00b98c; }
.ed-anmerkung { background: rgba(107, 31, 209, .1);
  border-bottom: 1px dashed var(--ck-violett); }

/* Randmarke: geaendert seit der letzten Fassung. */
.ed-flaeche [data-absatz].ed-geaendert::before {
  content: ''; position: absolute; left: -22px; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: var(--ck-violett); }
/* Ein Absatz, den gerade jemand anderes bearbeitet. */
.ed-flaeche [data-absatz].ed-fremd { background: #fffbeb;
  box-shadow: 0 0 0 4px #fffbeb; border-radius: 3px; }
.ed-flaeche [data-absatz].ed-fremd::after {
  content: 'wird von ' attr(data-wer) ' bearbeitet';
  position: absolute; right: 0; top: -15px; font-size: 12px; color: #8A4B00; }

/* ── Schwebende Leiste ───────────────────────────────────────────────── */

.ed-schwebe { position: fixed; z-index: 60; display: flex; flex-wrap: wrap;
  gap: 3px; max-width: 470px; padding: 6px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 11px;
  box-shadow: 0 10px 30px rgba(15, 15, 30, .16); }
.ed-sw { padding: 5px 9px; background: none; border: 0; border-radius: 7px;
  cursor: pointer; font: inherit; font-size: .75rem; color: var(--ck-kartentitel); }
.ed-sw:hover { background: rgba(107, 31, 209, .1); color: var(--ck-violett); }

/* ── Rechte Tafeln ───────────────────────────────────────────────────── */

.ed-reiter { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ck-rand); padding-bottom: 8px; }
.ed-reiter-knopf { padding: 5px 8px; background: none; border: 0;
  border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--ck-gedaempft); }
.ed-reiter-knopf:hover { background: var(--ck-grund); }
.ed-reiter-knopf.aktiv { background: rgba(107, 31, 209, .1);
  color: var(--ck-violett); font-weight: 600; }
.ed-reiter-knopf em { font-style: normal; margin-left: 4px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; }
.ed-tafel textarea { width: 100%; box-sizing: border-box; margin-bottom: 8px; }

.ed-fs-suche { display: flex; gap: 6px; margin: 8px 0 12px; }
.ed-fs-suche .bb-feld { flex: 1 1 auto; min-width: 0; padding: 6px 9px;
  font-size: 12px; border: 1px solid var(--ck-rand); border-radius: 8px; }
.ed-fs-kopf { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ck-gedaempft); }
.ed-fs { padding: 9px 11px; margin-bottom: 7px; background: var(--ck-grund);
  border-radius: 10px; }
.ed-fs.drin { background: rgba(43, 117, 255, .07); }
.ed-fs strong { display: block; font-size: 12px; color: var(--ck-kartentitel); }
.ed-fs em { font-style: normal; font-size: 12px; color: var(--ck-gedaempft); }
.ed-fs p { margin: 5px 0 7px; font-size: 12px; line-height: 1.5; }
.ed-fs .kc-knopf { padding: 4px 9px; font-size: 12px; }

.ed-befund { padding: 10px 12px; margin-bottom: 8px; border-radius: 10px;
  background: var(--ck-grund); border-left: 3px solid var(--ck-rand); }
.ed-befund.hoch { background: #fef2f2; border-left-color: #ef4444; }
.ed-befund.mittel { background: #fffbeb; border-left-color: #f59e0b; }
.ed-befund strong { display: block; font-size: 12px; color: var(--ck-kartentitel); }
.ed-befund p { margin: 4px 0 6px; font-size: 12px; line-height: 1.5; }
.ed-recht { font-size: 12px; color: var(--ck-gedaempft); }
.ed-befund-knoepfe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ed-befund-knoepfe .kc-knopf { padding: 4px 9px; font-size: 12px; }

.ed-vl-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ed-vl-filter .bb-wahl { width: auto; flex: 1 1 120px; padding: 5px 8px;
  font-size: 12px; }
.ed-vl-kipp { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--ck-text); }
.ed-vl-kipp input { width: auto; margin: 0; padding: 0; }
.ed-vl { padding: 9px 11px; margin-bottom: 7px; background: var(--ck-grund);
  border-radius: 10px; }
.ed-vl-kopf { display: flex; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; }
.ed-vl-kopf strong { font-size: 12px; color: var(--ck-kartentitel); }
.ed-vl-kopf span { font-size: 12px; color: var(--ck-gedaempft); }
.ed-vl-ki { margin: 5px 0 0; font-size: 12px; color: var(--ck-violett); }
.ed-vl summary { margin-top: 6px; font-size: 12px; color: var(--ck-violett);
  cursor: pointer; }
.ed-vl-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 6px; }
.ed-vl-paar em { display: block; font-style: normal; font-size: 12px;
  color: var(--ck-gedaempft); }
.ed-vl-paar p { margin: 2px 0 0; font-size: 12px; line-height: 1.45;
  background: #fff; padding: 6px 8px; border-radius: 7px; }
.ed-vl-knoepfe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ed-vl-knoepfe .kc-knopf { padding: 4px 9px; font-size: 12px; }

.ed-kipp { display: flex; align-items: flex-start; gap: 8px; margin: 7px 0;
  font-size: 14px; color: var(--ck-text); line-height: 1.5; }
.ed-kipp input { flex: 0 0 auto; width: auto; margin: 3px 0 0; padding: 0; }

.ed-fassungen { list-style: none; margin: 8px 0 0; padding: 0; }
.ed-fassungen li { padding: 8px 10px; margin-bottom: 6px; border-radius: 9px;
  background: var(--ck-grund); }
.ed-fassungen strong { display: block; font-size: 12px;
  color: var(--ck-kartentitel); }
.ed-fassungen span { display: block; font-size: 12px; color: var(--ck-gedaempft); }
.ed-fassungen a { font-size: 12px; color: var(--ck-violett); }

/* ── Blaetter ────────────────────────────────────────────────────────── */

.ck-blatt-kasten.gross { max-width: 940px; }

.ed-schritte { display: flex; gap: 8px; list-style: none; margin: 12px 0 16px;
  padding: 0; counter-reset: schritt; }
.ed-schritte li { flex: 1 1 0; padding: 7px 10px; border-radius: 9px;
  background: var(--ck-grund); font-size: 12px; color: var(--ck-gedaempft);
  counter-increment: schritt; }
.ed-schritte li::before { content: counter(schritt) '. '; font-weight: 700; }
.ed-schritte li.aktiv { background: rgba(107, 31, 209, .1);
  color: var(--ck-violett); font-weight: 600; }
.ed-schritte li.fertig { color: var(--ck-kartentitel); }

.ed-kap-punkte, .ed-kap-entwurf { max-height: 46vh; overflow: auto;
  border: 1px solid var(--ck-rand); border-radius: 11px; padding: 10px;
  margin: 10px 0; }
.ed-kap-absatz { padding: 9px 10px; margin-bottom: 8px; border-radius: 9px;
  background: var(--ck-grund); }
.ed-kap-absatz .ed-kipp { margin: 0; }
.ed-kap-absatz ul { margin: 0; padding-left: 18px; }
.ed-kap-quelle { margin: 6px 0 0 26px; font-size: 12px; color: var(--ck-blau); }
.ed-kap-quelle.ohne { color: #8A4B00; }

.ed-tf-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 12px 0; }
@media (max-width: 760px) { .ed-tf-paar { grid-template-columns: 1fr; } }
.ed-tf-paar h3 { margin: 0 0 5px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ck-gedaempft); }
.ed-tf-kasten { max-height: 40vh; overflow: auto; padding: 11px 13px;
  border-radius: 10px; background: var(--ck-grund); font-size: 14px;
  line-height: 1.6; }
.ed-tf-kasten.neu { background: rgba(107, 31, 209, .06);
  border: 1px solid rgba(107, 31, 209, .2); }
.ed-tf-kasten p { margin: 0 0 8px; }
.ed-tf-kasten ul { margin: 0; padding-left: 18px; }
.ed-tf-tabelle { border-collapse: collapse; width: 100%; font-size: 12px; }
.ed-tf-tabelle th, .ed-tf-tabelle td { border: 1px solid var(--ck-rand);
  padding: 5px 8px; text-align: left; }
.ed-tf-tabelle th { background: #fff; font-weight: 600; }

.ed-ea-muster { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ed-muster { padding: 5px 10px; border: 1px solid var(--ck-rand);
  border-radius: 999px; background: #fff; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--ck-gedaempft); }
.ed-muster:hover { border-color: var(--ck-violett); color: var(--ck-violett); }

.ed-vs { height: 62vh; margin: 12px 0; border: 1px solid var(--ck-rand);
  border-radius: 11px; overflow: hidden; background: var(--ck-grund); }
.ed-vs iframe { width: 100%; height: 100%; border: 0; }

/* Gliederung: Zeile, Menue, Ziehen (Schritt K, Teil 4) */
.ed-gl-reihe { display: flex; align-items: center; gap: 2px; border-radius: 7px; }
.ed-gl-reihe:hover { background: var(--ck-grund); }
.ed-gl-reihe.zieht { opacity: .45; }
.ed-gl-reihe.ziel { box-shadow: inset 0 2px 0 var(--ck-violett); }
.ed-gl-reihe .ed-gl-zeile { flex: 1 1 auto; min-width: 0; }
.ed-gl-reihe .ed-gl-zeile:hover { background: none; }
.ed-gl-mehr { flex: 0 0 auto; width: 22px; height: 24px; padding: 0;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--ck-gedaempft); font: inherit; font-size: 1rem; line-height: 1; }
.ed-gl-mehr:hover { background: var(--ck-flaeche); color: var(--ck-violett); }
.ed-gl-reihe.e1 .ed-gl-zeile { font-weight: 600; }

.ed-menue { position: fixed; z-index: 70; min-width: 210px; padding: 5px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand);
  border-radius: 11px; box-shadow: 0 10px 30px rgba(15, 15, 30, .16); }
.ed-menue button { display: block; width: 100%; text-align: left;
  padding: 7px 11px; background: none; border: 0; border-radius: 7px;
  cursor: pointer; font: inherit; font-size: 14px;
  color: var(--ck-kartentitel); }
.ed-menue button:hover, .ed-menue button:focus { background: var(--ck-grund);
  outline: none; }

.ed-befund.weg { background: var(--ck-grund); border-left-color: var(--ck-rand);
  opacity: .85; }

.ed-zoom { min-width: 78px; }
.ed-flaeche img { display: block; margin: 12px 0; }

/* Anmerkungen und Freigabe im Editor (Schritt L) */

.ed-sw.anm { font-weight: 600; color: var(--ck-violett); }
.ed-sw-teiler { width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--ck-rand); }

.ed-anm-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ed-chip { padding: 4px 10px; border: 1px solid var(--ck-rand);
  border-radius: 999px; background: #fff; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--ck-gedaempft); }
.ed-chip:hover { border-color: var(--ck-violett); color: var(--ck-violett); }
.ed-chip.aktiv { background: rgba(107, 31, 209, .1); color: var(--ck-violett);
  border-color: rgba(107, 31, 209, .3); font-weight: 600; }

.ed-anm { padding: 10px 12px; margin-bottom: 8px; border-radius: 10px;
  background: var(--ck-grund); border-left: 3px solid #f59e0b; }
.ed-anm.geklaert { border-left-color: #00b98c; opacity: .82; }
.ed-anm-stelle { margin: 0 0 7px; font-size: 12px; color: var(--ck-gedaempft);
  font-style: italic; }
.ed-anm-zeile { padding: 6px 0; border-top: 1px solid var(--ck-rand); }
.ed-anm-zeile:first-of-type { border-top: 0; padding-top: 0; }
.ed-anm-kopf { display: flex; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; }
.ed-anm-kopf strong { font-size: .75rem; color: var(--ck-kartentitel); }
.ed-anm-kopf span { font-size: 12px; color: var(--ck-gedaempft); }
.ed-anm-zeile p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.ed-anm-klar { display: inline-block; margin-top: 4px; font-style: normal;
  font-size: 12px; color: #12715B; }
.ed-anm-knoepfe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ed-anm-knoepfe .kc-knopf { padding: 4px 9px; font-size: 12px; }

.ed-erw { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px;
  max-height: 180px; overflow: auto; border: 1px solid var(--ck-rand);
  border-radius: 9px; padding: 5px; background: #fff; }
.ed-erw button { display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 9px; background: none; border: 0; border-radius: 7px;
  cursor: pointer; font: inherit; font-size: 12px; text-align: left;
  color: var(--ck-kartentitel); }
.ed-erw button:hover { background: var(--ck-grund); }
.ed-erw em { font-style: normal; font-size: 12px; color: var(--ck-gedaempft); }

/* Randmarke fuer Anmerkungen: rechts, weil die Aenderungsmarke links steht. */
.ed-flaeche [data-absatz].ed-hat-anm::after {
  content: attr(data-anmzahl); position: absolute; right: -26px; top: 1px;
  min-width: 17px; padding: 0 4px; font-size: 12px; line-height: 17px;
  text-align: center; border-radius: 999px; background: var(--ck-rand);
  color: var(--ck-gedaempft); }
.ed-flaeche [data-absatz].ed-anm-offen::after { background: #fef3c7;
  color: #8A4B00; }

.ed-kette { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px;
  background: #eff6ff; border: 1px solid #bfdbfe; }
.ed-kette.zurueck { background: #fffbeb; border-color: #fde68a; }
.ed-kette.fertig { background: #ecfdf5; border-color: #a7f3d0; }
.ed-kette-kopf { display: flex; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; }
.ed-kette-kopf strong { font-size: 14px; color: var(--ck-titel); }
.ed-kette-kopf span { font-size: 12px; color: var(--ck-gedaempft); }
.ed-kette-stufen { display: flex; gap: 8px; list-style: none; margin: 10px 0 0;
  padding: 0; flex-wrap: wrap; }
.ed-kette-stufen li { flex: 1 1 180px; padding: 8px 10px; border-radius: 9px;
  background: #fff; border: 1px solid var(--ck-rand); }
.ed-kette-stufen li.dran { border-color: var(--ck-violett);
  box-shadow: 0 0 0 2px rgba(107, 31, 209, .12); }
.ed-kette-stufen li.freigegeben { border-color: #a7f3d0; }
.ed-kette-stufen li.zurueckgewiesen { border-color: #fde68a; }
.ed-kette-stufen strong { display: block; font-size: 12px;
  color: var(--ck-kartentitel); }
.ed-kette-stufen span { display: block; font-size: 12px;
  color: var(--ck-gedaempft); }
.ed-kette-stufen em { display: block; margin-top: 4px; font-style: normal;
  font-size: 12px; color: #8A4B00; }
.ed-kette-knoepfe { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Glocke und Benachrichtigungen (Schritt L) */
.ck-glocke { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 30px; height: 30px; margin-left: auto;
  margin-right: 2px; padding: 0; background: none; border: 0;
  border-radius: 8px; cursor: pointer; color: var(--ck-gedaempft); }
.ck-glocke:hover { background: var(--ck-grund); color: var(--ck-violett); }
.ck-glocke em { position: absolute; top: 1px; right: 0; min-width: 15px;
  padding: 0 3px; font-style: normal; font-size: 12px; font-weight: 700;
  line-height: 15px; text-align: center; border-radius: 999px;
  background: #ef4444; color: #fff; }

.ck-ben-kasten { position: fixed; z-index: 90; width: 360px; max-width: 94vw;
  max-height: 72vh; overflow: auto; padding: 10px; border-radius: 13px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand);
  box-shadow: 0 14px 40px rgba(15, 15, 30, .18); }
.ck-ben-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 2px 4px 8px; border-bottom: 1px solid var(--ck-rand); }
.ck-ben-kopf strong { font-size: 14px; color: var(--ck-titel); }
.ck-ben-kopf button { background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ck-violett); }
.ck-ben-liste { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ck-ben { display: block; padding: 8px 10px; border-radius: 9px;
  text-decoration: none; border-left: 3px solid transparent; }
.ck-ben:hover { background: var(--ck-grund); }
.ck-ben.neu { border-left-color: var(--ck-violett);
  background: rgba(107, 31, 209, .05); }
.ck-ben-art { display: inline-block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ck-gedaempft); }
.ck-ben strong { display: block; font-size: 12px; color: var(--ck-kartentitel);
  line-height: 1.4; }
.ck-ben span:not(.ck-ben-art) { display: block; font-size: 12px;
  color: var(--ck-text); line-height: 1.45; }
.ck-ben em { display: block; margin-top: 3px; font-style: normal;
  font-size: 12px; color: var(--ck-gedaempft); }
.ck-ben-leer { margin: 14px 6px; font-size: 12px; color: var(--ck-gedaempft); }
.ck-ben-mail { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 8px 6px 2px; border-top: 1px solid var(--ck-rand);
  font-size: .75rem; color: var(--ck-text); }
.ck-ben-mail input { width: auto; margin: 0; padding: 0; }

/* Mitwirkende und Gaeste im Reiter Beteiligte (Schritt L) */
.vf-mw { list-style: none; margin: 10px 0 0; padding: 0; }
.vf-mw li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; margin-bottom: 6px; border-radius: 10px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); }
.vf-mw li.aus { opacity: .6; }
.vf-mw-wer { flex: 1 1 200px; min-width: 0; }
.vf-mw-wer strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.vf-mw-wer em { display: block; font-style: normal; font-size: 12px;
  color: var(--ck-gedaempft); overflow-wrap: break-word; }
.vf-mw-rolle { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--ck-grund);
  color: var(--ck-gedaempft); }
.vf-mw-rolle.owner { background: rgba(107, 31, 209, .1); color: var(--ck-violett); }
.vf-mw-rolle.bearbeiter { background: rgba(43, 117, 255, .1); color: var(--ck-blau); }
.vf-mw-rolle.freigabe { background: rgba(0, 212, 160, .14); color: #12715B; }
.vf-mw-gast { flex: 1 1 100%; font-size: 12px; color: var(--ck-gedaempft); }
.vf-mw-aus { flex: 0 0 auto; font-size: 12px; color: #8A4B00; }
.vf-mw li .kc-knopf { padding: 4px 9px; font-size: 12px; }
.vf-mw-reiter legend { font-size: 12px; font-weight: 600;
  color: var(--ck-gedaempft); margin-bottom: 4px; }
.vf-mw-reiter { border: 1px solid var(--ck-rand); border-radius: 10px;
  padding: 10px 12px; }
.ck-warnung { margin: 8px 0; padding: 9px 12px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fde68a; font-size: 12px;
  color: #8A4B00; line-height: 1.5; }

/* Gastzugang (Schritt L) */
.ga { max-width: 620px; margin: 0 auto; padding: 46px 18px 70px; }
.ga-karte { padding: 28px 30px 24px; background: var(--ck-flaeche);
  border: 1px solid var(--ck-rand); border-radius: 16px; }
.ga-karte h1 { margin: 0 0 6px; font-size: 1.5rem; color: var(--ck-titel); }
.ga-unter { margin: 0 0 20px; font-size: 14px; color: var(--ck-text);
  line-height: 1.6; }
.ga-daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  margin: 0 0 18px; }
.ga-daten dt { font-size: 12px; color: var(--ck-gedaempft); }
.ga-daten dd { margin: 0; font-size: 14px; color: var(--ck-kartentitel); }
.ga-hinweis { margin: 0 0 16px; font-size: 14px; color: var(--ck-text);
  line-height: 1.6; }
.ga-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.ga-fehler { color: #A3241B; }
.ga-fuss { margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--ck-rand); font-size: 12px;
  color: var(--ck-gedaempft); line-height: 1.6; }
#gaEingabe { font-size: 20px; letter-spacing: .3em; text-align: center; }

/* Freigabeketten auf der Seite des Hauses (Schritt L) */
.st-spalte.fk { margin-top: 26px; }
.fk-karte { padding: 13px 15px; margin-bottom: 10px; border-radius: 12px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); }
.fk-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fk-kopf strong { font-size: 14px; color: var(--ck-titel); }
.fk-standard { font-style: normal; font-size: 12px; padding: 2px 8px;
  border-radius: 999px; background: rgba(107, 31, 209, .1);
  color: var(--ck-violett); font-weight: 600; }
.fk-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.fk-knoepfe .kc-knopf { padding: 4px 10px; font-size: 12px; }
.fk-stufenliste { display: flex; gap: 8px; list-style: none; margin: 10px 0 0;
  padding: 0; flex-wrap: wrap; counter-reset: fkstufe; }
.fk-stufenliste li { flex: 1 1 180px; padding: 8px 10px; border-radius: 9px;
  background: var(--ck-grund); counter-increment: fkstufe; }
.fk-stufenliste strong::before { content: counter(fkstufe) '. '; }
.fk-stufenliste strong { display: block; font-size: 12px;
  color: var(--ck-kartentitel); }
.fk-stufenliste span { display: block; font-size: 12px;
  color: var(--ck-gedaempft); }
.fk-zu { margin: 8px 0 0; font-size: 12px; color: var(--ck-gedaempft); }
.fk-stufen { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.fk-stufe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fk-stufe input, .fk-stufe select { width: auto; padding: 6px 9px;
  font-size: 12px; border: 1px solid var(--ck-rand); border-radius: 8px;
  background: #fff; }
.fk-sname { flex: 2 1 160px; min-width: 0; }
.fk-swer { flex: 0 0 auto; min-width: 140px; }
.fk-swert { flex: 2 1 160px; min-width: 0; }
.fk-sfrist { flex: 0 0 72px; }
.fk-sweg { flex: 0 0 auto; padding: 5px 10px !important; font-size: 12px !important; }
.fk-ordner { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px; }

/* Dokumentvorlagen auf der Vorlagenseite (Schritt M) */
.dv-oben, .dv-reiter { display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 16px; }
.dv-karte { padding: 13px 15px; margin-bottom: 9px; border-radius: 12px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); }
.dv-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-kopf strong { font-size: 14px; color: var(--ck-titel); }
.dv-marke { font-style: normal; font-size: 12px; padding: 2px 8px;
  border-radius: 999px; background: var(--ck-grund); color: var(--ck-gedaempft);
  font-weight: 600; }
.dv-marke.freigegeben { background: rgba(0, 212, 160, .14); color: #12715B; }
.dv-marke.itlv { background: rgba(107, 31, 209, .1); color: var(--ck-violett); }
.dv-karte p { margin: 6px 0 0; font-size: 12px; color: var(--ck-text);
  line-height: 1.5; }
.dv-meta { margin-top: 6px !important; font-size: 12px !important;
  color: var(--ck-gedaempft) !important; }
.dv-knoepfe { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.dv-knoepfe .kc-knopf { padding: 4px 10px; font-size: 12px; }

.dv-abschnitte { display: flex; flex-direction: column; gap: 10px;
  margin: 10px 0; max-height: 46vh; overflow: auto; }
.dv-abschnitt { padding: 10px 12px; border-radius: 11px;
  background: var(--ck-grund); border: 1px solid var(--ck-rand); }
.dv-abschnitt > input { width: 100%; box-sizing: border-box; padding: 6px 9px;
  font-size: 14px; font-weight: 600; border: 1px solid var(--ck-rand);
  border-radius: 8px; background: #fff; }
.dv-fragen { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.dv-frage { display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.9fr auto auto;
  gap: 5px; align-items: center; }
@media (max-width: 900px) { .dv-frage { grid-template-columns: 1fr 1fr; } }
.dv-frage input, .dv-frage select { width: 100%; box-sizing: border-box;
  padding: 5px 8px; font-size: 12px; border: 1px solid var(--ck-rand);
  border-radius: 7px; background: #fff; }
.dv-frage .dv-pflicht { display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ck-gedaempft); white-space: nowrap; }
.dv-frage .dv-pflicht input { width: auto; }
.dv-frage button { padding: 4px 8px; font-size: 12px; border: 1px solid
  var(--ck-rand); border-radius: 7px; background: #fff; cursor: pointer; }
.dv-abschnitt-knoepfe { display: flex; gap: 6px; }
.dv-abschnitt-knoepfe button { padding: 4px 9px; font-size: 12px;
  border: 1px solid var(--ck-rand); border-radius: 7px; background: #fff;
  cursor: pointer; }
#dvText { width: 100%; box-sizing: border-box; font-family: ui-monospace,
  Consolas, monospace; font-size: 12px; }

/* Das Interview (Schritt M) */
.iv-fortschritt { display: flex; gap: 6px; margin: 10px 0 14px; flex-wrap: wrap; }
.iv-schritt { flex: 1 1 120px; padding: 6px 10px; border-radius: 9px;
  background: var(--ck-grund); font-size: 12px; color: var(--ck-gedaempft); }
.iv-schritt.aktiv { background: rgba(107, 31, 209, .1); color: var(--ck-violett);
  font-weight: 600; }
.iv-schritt.fertig { color: var(--ck-kartentitel); }
.iv-frage { margin-bottom: 14px; }
.iv-frage > label { display: block; font-size: 14px; font-weight: 600;
  color: var(--ck-kartentitel); margin-bottom: 4px; }
.iv-frage .iv-pflicht { color: #A3241B; margin-left: 3px; }
.iv-frage input, .iv-frage select, .iv-frage textarea { width: 100%;
  box-sizing: border-box; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--ck-rand); border-radius: 9px; background: #fff; }
.iv-hilfe { margin: 5px 0 0; font-size: 12px; color: var(--ck-gedaempft);
  line-height: 1.55; }
.iv-paragraf { display: inline-block; margin-top: 3px; font-size: 12px;
  color: var(--ck-blau); }
.iv-ausgeblendet { margin: 6px 0 0; font-size: 12px; color: var(--ck-gedaempft);
  font-style: italic; }
.iv-fehlend { margin: 10px 0; padding: 9px 12px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fde68a; font-size: 12px;
  color: #8A4B00; }
.iv-fehlend ul { margin: 5px 0 0; padding-left: 18px; }

/* Fassungen vergleichen und Aufbewahrung (Schritt N) */
.ed-fs-dateien { display: flex; gap: 8px; margin-top: 3px; }
.ed-fs-dateien a { font-size: 12px; color: var(--ck-violett); }
.ed-fs-dateien em { font-style: normal; font-size: 12px;
  color: var(--ck-gedaempft); }
.ed-vgl-wahl { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 10px; }
.ed-vgl-wahl .vf-feld { flex: 1 1 130px; margin: 0; }
.ed-vgl { max-height: 60vh; overflow: auto; margin: 12px 0;
  border: 1px solid var(--ck-rand); border-radius: 11px; padding: 10px; }
.ed-vgl-zeile { padding: 8px 10px; margin-bottom: 6px; border-radius: 9px;
  border-left: 3px solid var(--ck-rand); background: var(--ck-grund); }
.ed-vgl-zeile.neu { border-left-color: #00b98c; background: #ecfdf5; }
.ed-vgl-zeile.weg { border-left-color: #ef4444; background: #fef2f2; }
.ed-vgl-zeile.geaendert { border-left-color: #f59e0b; background: #fffbeb; }
.ed-vgl-zeile em { display: block; font-style: normal; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ck-gedaempft); }
.ed-vgl-zeile p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
.ed-vgl-zeile .neu { background: rgba(0, 185, 140, .22); border-radius: 3px;
  padding: 0 2px; }
.ed-vgl-zeile .weg { background: rgba(239, 68, 68, .18); border-radius: 3px;
  padding: 0 2px; text-decoration: line-through; }
.af-zeile { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.af-zeile .vf-feld { flex: 1 1 260px; max-width: 420px; }
.af-zeile .kc-knopf { margin-top: 22px; }

/* Produktmerkmale im Reiter Markt (Schritt O) */
.pm-oben { display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px; margin-top: 12px; }
@media (max-width: 760px) { .pm-oben { grid-template-columns: 1fr; } }
.pm-treffer { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px;
  margin: 10px 0; }
.pm-karte { text-align: left; padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--ck-rand); background: #fff; cursor: pointer;
  font: inherit; }
.pm-karte:hover { border-color: var(--ck-violett); }
.pm-karte strong { display: block; font-size: 14px;
  color: var(--ck-kartentitel); }
.pm-karte span { display: block; font-size: 12px; color: var(--ck-gedaempft); }

.pm-abdeckung { display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: 13px;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); }
.pm-ampel { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-width: 118px;
  padding: 12px 16px; border-radius: 12px; }
.pm-ampel.rot { background: #fef2f2; border: 2px solid #ef4444; }
.pm-ampel.gelb { background: #fffbeb; border: 2px solid #f59e0b; }
.pm-ampel.gruen { background: #ecfdf5; border: 2px solid #00b98c; }
.pm-ampel.leer { background: var(--ck-grund);
  border: 2px dashed var(--ck-rand); }
.pm-ampel strong { font-size: 24px; line-height: 1.1; color: var(--ck-titel); }
.pm-ampel span { font-size: 12px; color: var(--ck-gedaempft); }
.pm-ampel em { font-style: normal; font-size: 12px;
  color: var(--ck-gedaempft); margin-top: 3px; }
.pm-satz { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--ck-text); }

.pm-tabelle-huelle { overflow-x: auto; margin-top: 10px; }
.pm-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.pm-tabelle th { text-align: left; padding: 8px 10px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ck-gedaempft); border-bottom: 1px solid var(--ck-rand); }
.pm-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--ck-linie);
  vertical-align: top; }
.pm-tabelle tr.gewaehlt { background: rgba(107, 31, 209, .04); }
.pm-tabelle strong { font-size: 14px; color: var(--ck-kartentitel); }
.pm-hinweis { display: block; margin-top: 3px; font-style: normal;
  font-size: 12px; color: var(--ck-gedaempft); line-height: 1.45;
  max-width: 320px; }
.pm-art { width: auto; min-width: 118px; padding: 5px 8px;
  font-size: 12px; color: var(--ck-titel); }
.pm-eingabe { display: flex; align-items: center; gap: 5px; }
.pm-wert { width: 100%; max-width: 152px; min-width: 62px;
  padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--ck-rand); border-radius: 7px; background: #fff;
  color: var(--ck-titel); }
.pm-wert::placeholder { color: var(--ck-gedaempft); opacity: 1; }
.pm-einheit { font-style: normal; font-size: 12px;
  color: var(--ck-gedaempft); white-space: nowrap; }
.pm-anteil { white-space: nowrap; font-size: 12px; }
.pm-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; }
.pm-punkt.rot { background: #ef4444; }
.pm-punkt.gelb { background: #f59e0b; }
.pm-punkt.gruen { background: #00b98c; }
.pm-leer { color: var(--ck-gedaempft); font-size: 12px; }
.pm-kipp input { width: auto; margin: 0; padding: 0; }
.pm-format pre { max-height: 220px; overflow: auto; padding: 10px;
  border-radius: 9px; background: var(--ck-grund); font-size: 12px;
  white-space: pre-wrap; }
.pm-format summary { font-size: 12px; color: var(--ck-violett);
  cursor: pointer; margin-bottom: 6px; }

/* Unter 760 Pixeln wird aus jeder Tabellenzeile eine Karte. Sonst liegen
   "Anteil im Markt" und "Verwenden" rechts neben dem Bildschirm, und das
   sind die beiden Spalten, um die es geht. */
@media (max-width: 760px) {
  .pm-tabelle-huelle { overflow-x: visible; }
  .pm-tabelle, .pm-tabelle tbody, .pm-tabelle tr, .pm-tabelle td {
    display: block; width: auto; }
  .pm-tabelle thead { position: absolute; left: -9999px; }
  .pm-tabelle tr { margin-bottom: 10px; padding: 10px 12px;
    border: 1px solid var(--ck-rand); border-radius: 11px; background: #fff; }
  .pm-tabelle tr.gewaehlt { border-color: var(--ck-violett); }
  .pm-tabelle td { border-bottom: 0; padding: 5px 0;
    display: grid; grid-template-columns: 116px minmax(0, 1fr);
    align-items: center; gap: 10px; }
  .pm-tabelle td::before { content: attr(data-spalte); font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em;
    color: var(--ck-gedaempft); }
  .pm-tabelle td[data-spalte="Merkmal"] { display: block; padding-bottom: 8px;
    border-bottom: 1px solid var(--ck-linie); margin-bottom: 4px; }
  .pm-tabelle td[data-spalte="Merkmal"]::before { content: none; }
  .pm-hinweis { max-width: none; }
  .pm-wert { max-width: none; }
  .pm-abdeckung { flex-direction: column; align-items: stretch; }
  .pm-ampel { min-width: 0; }
}

/* ── Schritt P: das Werkzeug ohne die Schale der Website ──────────────────
   Ohne Navigationsleiste gibt es keine Unterkante, an der die Seite anfaengt.
   Die beiden Masse gehen auf null, und alles, was mit ihnen rechnet (die
   Hoehe der Seitenleiste, ihre Klebeposition, die Mindesthoehe), stimmt
   dadurch ohne weiteres Zutun wieder. */
html.ohne-schale { --ck-kopf: 0px; --ck-klebe: 0px; }
html.ohne-schale body { background: var(--ck-grund); }
html.ohne-schale .ck-haupt { padding-top: 22px; }

/* Impressum, Datenschutz und AGB muessen erreichbar bleiben. Sie stehen
   klein am Ende der Seitenleiste, unter dem Konto. */
.ck-recht { margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--ck-linie); display: flex; flex-wrap: wrap;
  gap: 6px; align-items: center; font-size: 12px;
  color: var(--ck-gedaempft); }
.ck-recht a { color: var(--ck-gedaempft); text-decoration: none; }
.ck-recht a:hover { color: var(--ck-violett); text-decoration: underline; }
.ck-recht span { opacity: .5; }
.ck.schmal .ck-recht { display: none; }

/* ── Schritt P: Kachel "Ihr Ansprechpartner" ────────────────────────────── */
.kc-ap .ap-zeile { display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 4px; }
.ap-bild { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--ck-rand); }
.ap-ersatz { display: flex; align-items: center; justify-content: center;
  background: var(--ck-grund); color: var(--ck-gedaempft);
  font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.ap-text { flex: 1 1 260px; min-width: 0; }
.ap-text strong { display: block; font-size: 14px; color: var(--ck-titel); }
.ap-rolle { display: block; font-size: .75rem; color: var(--ck-gedaempft);
  margin-top: 1px; }
.ap-satz { margin: 7px 0 0; font-size: 14px; line-height: 1.55;
  color: var(--ck-text); }
.ap-wege { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 7px;
  align-items: center; font-size: 12px; }
.ap-wege a { color: var(--ck-blau-text); text-decoration: none; }
.ap-wege a:hover { text-decoration: underline; }
.ap-wege span { color: var(--ck-gedaempft); opacity: .6; }
.ap-knopf { flex: 0 0 auto; align-self: center; }
@media (max-width: 620px) {
  .ap-knopf { width: 100%; text-align: center; }
}

/* Was als Naechstes ansteht, unter der Frist */
.kc-naechst { display: block; margin-top: 2px; font-style: normal;
  font-size: 12px; color: var(--ck-blau-text); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.kc-frist { text-decoration: none; color: inherit; }
a.kc-frist:hover .kc-titel { color: var(--ck-violett); }

/* ── Schritt P: Kopfzeile der Bieterseite ──────────────────────────────────
   Bleibt beim Scrollen stehen. Weiter unten, beim Preisblatt, war die Frist
   sonst aus dem Bild, und genau dort entscheidet sich, ob jemand heute
   abgibt oder morgen. */
.ag-kopfzeile { position: sticky; top: 0; z-index: 50;
  background: var(--ck-flaeche); border-bottom: 1px solid var(--ck-rand);
  box-shadow: 0 1px 10px rgba(15, 15, 30, .05); }
.ag-kz-innen { max-width: 1000px; margin: 0 auto;
  padding: 11px 20px; display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; }
.ag-kz-wer { display: flex; align-items: center; gap: 11px; min-width: 0;
  flex: 1 1 250px; }
.ag-kz-logo { flex: 0 0 auto; }
.ag-kz-wer strong { display: block; font-size: 14px; color: var(--ck-titel);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 340px; }
.ag-kz-wer span { display: block; font-size: 12px; color: var(--ck-gedaempft); }
.ag-kz-fortschritt { flex: 1 1 190px; min-width: 150px; }
.ag-kz-balken { height: 6px; border-radius: 999px; background: var(--ck-grund);
  overflow: hidden; }
.ag-kz-balken i { display: block; height: 100%; background: var(--ck-violett);
  transition: width .25s ease; }
.ag-kz-fortschritt span { display: block; margin-top: 4px; font-size: 12px;
  color: var(--ck-gedaempft); }
.ag-kz-frist { flex: 0 0 auto; text-align: right; padding: 5px 12px;
  border-radius: 10px; background: var(--ck-grund); }
.ag-kz-frist.knapp { background: #fffbeb; }
.ag-kz-frist.vorbei { background: #fef2f2; }
.ag-kz-marke { display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ck-gedaempft); }
.ag-kz-frist strong { display: block; font-size: 14px; color: var(--ck-titel); }
.ag-kz-rest { display: block; font-size: 12px; color: var(--ck-gedaempft); }
.ag-kz-frist.knapp .ag-kz-rest { color: #8A4B00; font-weight: 600; }
.ag-kz-frist.vorbei .ag-kz-rest { color: #A3241B; font-weight: 600; }

.ag-kz-abschnitte { max-width: 1000px; margin: 0 auto; padding: 0 20px 9px;
  display: flex; gap: 6px; overflow-x: auto; }
.ag-kz-ab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ck-rand);
  background: var(--ck-flaeche); font-size: 12px; color: var(--ck-text);
  text-decoration: none; white-space: nowrap; }
.ag-kz-ab:hover { border-color: var(--ck-violett); }
.ag-kz-ab em { font-style: normal; font-size: 12px; color: var(--ck-gedaempft); }
.ag-kz-ab.fertig { border-color: #00b98c; background: #ecfdf5; }
.ag-kz-ab.fertig em { color: #12715B; font-weight: 600; }

.ag-recht-fuss { max-width: 1000px; margin: 0 auto; padding: 22px 20px 34px;
  display: flex; gap: 8px; align-items: center; font-size: 12px;
  color: var(--ck-gedaempft); }
.ag-recht-fuss a { color: var(--ck-gedaempft); text-decoration: none; }
.ag-recht-fuss a:hover { color: var(--ck-violett); text-decoration: underline; }
.ag-recht-fuss span { opacity: .5; }

@media (max-width: 720px) {
  .ag-kz-innen { gap: 10px; padding: 9px 14px; }
  .ag-kz-fortschritt { order: 3; flex: 1 1 100%; }
  .ag-kz-abschnitte { padding: 0 14px 8px; }
}

/* ── Mehrfachauswahl in der Verfahrensliste ───────────────────────────── */
.vf-sammel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 11px;
  background: rgba(107, 31, 209, .06); border: 1px solid var(--ck-violett); }
.vf-sammel-zahl { font-size: 14px; font-weight: 600; color: var(--ck-titel);
  white-space: nowrap; }
.vf-sammel-knoepfe { display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; }
.vf-sammel-stand select { padding: 6px 10px; font-size: 12px;
  color: var(--ck-titel); }
.kc-knopf.gefahr { border-color: #ef4444; color: #A3241B; }
.kc-knopf.gefahr:hover { background: #fef2f2; }
.vf-wahl-zelle { width: 34px; padding-right: 0; }
.vf-wahl-zelle input { width: auto; min-width: 0; margin: 0; padding: 0;
  cursor: pointer; }
.vf-t tr.gewaehlt { background: rgba(107, 31, 209, .05); }

/* ── Werkzeug-Chats: bisherige Laeufe je Werkzeug ─────────────────────── */
.wc-liste { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid #e4e4ee;
  box-shadow: 0 4px 16px rgba(15, 15, 30, .05); text-align: left; }
.wc-liste[hidden] { display: none; }
.wc-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wc-kopf h2 { margin: 0; font-size: 16px; color: #17171F; }
.wc-kopf span { font-size: 12px; color: #55556A; }
.wc-zeilen { list-style: none; margin: 0; padding: 0; }
.wc-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 4px;
  border-top: 1px solid #f0f0f6; }
.wc-zeile.aktiv { background: #faf6ff; border-radius: 8px; }
.wc-titel { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600;
  color: #17171F; text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wc-titel:hover { color: #6B1FD1; text-decoration: underline; }
.wc-wann { flex: 0 0 auto; font-size: 12px; color: #55556A; white-space: nowrap; }
.wc-weg { flex: 0 0 auto; padding: 3px 10px; border: 1px solid #e4e4ee;
  border-radius: 16px; background: #fff; font: inherit; font-size: 12px;
  color: #55556A; cursor: pointer; }
.wc-weg:hover, .wc-weg.sicher { border-color: #ef4444; color: #A3241B;
  background: #fef2f2; }
.wc-mehr { margin-top: 6px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 600; color: #6B1FD1;
  cursor: pointer; }
.wc-lauf { margin: 0 0 18px; padding: 16px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(107, 31, 209, .28);
  box-shadow: 0 6px 24px rgba(15, 15, 30, .08); text-align: left; }
.wc-lauf-kopf { display: flex; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px; }
.wc-lauf-kopf h2 { margin: 2px 0 4px; font-size: 16px; color: #17171F; }
.wc-lauf-kopf p { margin: 0; font-size: 12px; color: #55556A; max-width: 640px; }
.wc-marke { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #6B1FD1; }
.wc-lauf-knoepfe { display: flex; gap: 8px; align-items: flex-start;
  flex-wrap: wrap; }
.wc-lauf-knoepfe .sicher { border-color: #ef4444; color: #A3241B; }
/* Der gespeicherte Verlauf ist nicht hoehenbegrenzt: Er wird gelesen, nicht
   bespielt. */
.wc-verlauf { max-height: none !important; overflow: visible !important; }
.wc-verlauf button[disabled] { opacity: .55; cursor: default; }
.wc-hinweis { font-size: 14px; color: #55556A; }
@media (max-width: 620px) {
  .wc-zeile { flex-wrap: wrap; }
  .wc-titel { flex: 1 1 100%; white-space: normal; }
}

/* Laeufe je Werkzeug (25.09.2026): nur der Knopf dreht, nicht zusaetzlich das
   Bild darin. Doppelt gedreht zeigte der Pfeil eines zugeklappten Werkzeugs
   nach oben statt nach rechts. */
.ck-wz.zu .ck-pfeil svg { transform: none; }


/* ------------------------------------------------------------------ Team
   Stil der Vorlage "Team Members Data Table" (25.09.2026), ohne React
   nachgebaut: ruhige Tabelle im Rahmen, graue Kopfzeile, Marken fuer den
   Status, Aktionen hinter drei Punkten. */
/* 880 -> 1040 px, Ruben 29.09.2026: "Pop Up Team ein wenig groesser" */
.ck-blatt-kasten.ck-tm { width: min(1040px, 100%); padding: 28px 30px 22px; }
.ck-tm-kopf { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.ck-tm-titel { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ck-tm-titel h2 { margin: 0; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.ck-tm-titel p { margin: 2px 0 0; font-size: 14px; color: #55556A; }
.ck-tm-symbol { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid #e4e4ee; border-radius: 9px; background: #fafbfd; color: #55556A; }
.ck-tm-werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-tm-suche { position: relative; display: inline-flex; align-items: center; margin: 0; }
.ck-tm-suche svg { position: absolute; left: 9px; color: #55556A; pointer-events: none; }
.ck-tm-suche input { height: 32px; width: 200px; margin: 0; padding: 0 10px 0 30px; font-size: 14px;
  border: 1px solid #e4e4ee; border-radius: 8px; background: #fff; color: #17171F; }
.ck-tm-suche input:focus { outline: none; border-color: #6B1FD1; box-shadow: 0 0 0 3px rgba(107, 31, 209, .12); }
.ck-tm-knopf { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  font: inherit; font-size: 14px; font-weight: 500; color: #17171F; background: #fff;
  border: 1px solid #e4e4ee; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s; }
.ck-tm-knopf:hover { background: #f6f6fa; }
.ck-tm-knopf:disabled { opacity: .45; cursor: default; }
/* Hauptknopf wie ueberall im Cockpit im Hausverlauf (Befund 7, 29.09.2026). */
.ck-tm-knopf.betont { background: var(--gradient); border-color: transparent; color: #fff; }
.ck-tm-knopf.betont:hover { background: var(--gradient); filter: brightness(1.08); }
.ck-tm-knopf.betont.rot { background: #b42318; color: #fff; }
.ck-tm-knopf.betont.rot:hover { background: #971b12; filter: none; }
.ck-tm-knopf.rot { color: #A3241B; }
.ck-tm-knopf.rot:hover, .ck-tm-knopf.rot.sicher { background: #fdf4f4; border-color: #f0c9c9; }
.ck-tm-knopf.ikon { width: 28px; height: 28px; padding: 0; justify-content: center; }
.ck-tm-leise { font: inherit; font-size: 14px; color: #55556A; background: none; border: 0; padding: 4px 6px;
  border-radius: 6px; cursor: pointer; }
.ck-tm-leise:hover { color: #17171F; background: #f0f0f6; }
.ck-tm-erkl { margin: 10px 0 14px !important; font-size: 14px !important; color: #55556A !important; }
.ck-tm-menue-wrap { position: relative; }
.ck-tm-menue { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 170px; padding: 4px;
  background: #fff; border: 1px solid #e4e4ee; border-radius: 9px; box-shadow: 0 12px 30px -10px rgba(15, 15, 30, .28); }
.ck-tm-menue[hidden] { display: none; }
.ck-tm-menue-titel { display: block; padding: 6px 8px 4px; font-size: 12px; font-weight: 600; color: #55556A;
  text-transform: uppercase; letter-spacing: .05em; }
.ck-tm-menue label, .ck-tm-menue a, .ck-tm-menue button { display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0; padding: 7px 8px; font: inherit; font-size: 14px; color: #17171F; text-decoration: none;
  background: none; border: 0; border-radius: 6px; cursor: pointer; text-align: left; }
.ck-tm-menue label:hover, .ck-tm-menue a:hover, .ck-tm-menue button:hover { background: #f4f4f9; }
.ck-tm-menue .rot { color: #A3241B; }
.ck-tm-menue input { margin: 0; accent-color: #6B1FD1; }
.ck-tm-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
  padding: 8px 12px; border: 1px solid #e4e4ee; border-radius: 10px; background: #f7f7fb; font-size: 14px; color: #17171F; }
.ck-tm-fueller { flex: 1 1 auto; }
.ck-tm-rahmen { border: 1px solid #e4e4ee; border-radius: 12px; background: #fff; overflow: hidden; }
.ck-tm-roll { overflow-x: auto; }
.ck-tm-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.ck-tm-tabelle th { height: 36px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: #55556A; background: #f7f7fb; border-bottom: 1px solid #e9e9f0; white-space: nowrap; }
.ck-tm-tabelle td { padding: 11px 12px; border-bottom: 1px solid #efeff5; vertical-align: middle; color: #17171F; }
.ck-tm-tabelle tbody tr:last-child td { border-bottom: 0; }
.ck-tm-tabelle tbody tr { transition: background .1s; }
.ck-tm-tabelle tbody tr:hover { background: #fafafd; }
.ck-tm-tabelle tbody tr.gewaehlt { background: #f6f0ff; }
.ck-tm-tabelle .ck-tm-wahl { width: 38px; padding-left: 16px; padding-right: 0; }
.ck-tm-tabelle input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: #6B1FD1; cursor: pointer; }
.ck-tm-sort { display: inline-flex; align-items: center; gap: 4px; margin: 0 -4px; padding: 2px 4px; font: inherit;
  font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; border-radius: 5px; cursor: pointer; }
.ck-tm-sort:hover { color: #17171F; }
.ck-tm-sort span { display: inline-flex; opacity: .5; }
.ck-tm-sort span.an { opacity: 1; color: #17171F; }
.ck-tm-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ck-tm-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid #e4e4ee; background: #f1f1f7; color: #55556A; font-size: 12px; font-weight: 600; }
.ck-tm-avatar.ich { background: #efe6ff; border-color: #dcc8ff; color: #6B1FD1; }
.ck-tm-wer { min-width: 0; display: block; }
.ck-tm-wer strong { display: block; font-size: 14px; font-weight: 600; color: #17171F; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.ck-tm-wer strong em { font-style: normal; font-size: 12px; font-weight: 600; color: #6B1FD1; background: #f3ecff;
  border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.ck-tm-wer > span { display: block; font-size: 12px; color: #55556A; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 280px; }
.ck-tm-marke { display: inline-flex; align-items: center; padding: 2px 9px; font-size: 12px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.ck-tm-marke.aktiv { background: #17172b; color: #fff; }
.ck-tm-marke.eingeladen { background: #f0f0f6; color: #55556A; }
.ck-tm-marke.gesperrt { background: #fff; color: #55556A; border-color: #e4e4ee; }
.ck-tm-rolle { min-width: 150px; }
.ck-tm-seit { text-align: right; white-space: nowrap; font-size: 14px; color: #55556A !important;
  font-variant-numeric: tabular-nums; }
th.ck-tm-seit { text-align: right; }
.ck-tm-aktion { width: 44px; padding-right: 14px !important; text-align: right; }
.ck-tm-weg-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ck-tm-dots { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  color: #55556A; background: none; border: 0; border-radius: 7px; cursor: pointer; }
.ck-tm-dots:hover, .ck-tm-dots:focus-visible { background: #f0f0f6; color: #17171F; outline: none; }
.ck-tm-nichts { height: 80px; text-align: center; color: #55556A !important; }
.ck-tm-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px;
  border-top: 1px solid #e9e9f0; background: #fafafd; font-size: 12px; color: #55556A; }
.ck-tm-fuss strong { color: #17171F; }
.ck-tm-blaettern { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ck-tm-hinweis { margin: 12px 0 0 !important; }
.ck-tm .ck-team-neu[hidden] { display: none; }
.ck-tm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ck-tm-chip { display: inline-flex; padding: 1px 8px; font-size: 12px; font-weight: 500; color: #55556A;
  background: #f4f4f9; border: 1px solid #e9e9f0; border-radius: 6px; white-space: nowrap; }
.ck-tm-chip.admin { background: #f3ecff; border-color: #dcc8ff; color: #6B1FD1; font-weight: 600; }
.ck-tm-ohne { font-size: 14px; color: #55556A; }
.ck-tm-unter { display: block; margin-top: 3px; font-size: 12px; color: #55556A; }
.ck-tm-trenner { display: block; height: 1px; margin: 4px 0; background: #efeff5; }
.ck-tm-menue { min-width: 200px; }
@media (max-width: 620px) {
  .ck-tm-suche input { width: 100%; }
  .ck-tm-werkzeug, .ck-tm-suche { width: 100%; }
  .ck-tm-suche { flex: 1 1 100%; }
  .ck-tm-tabelle th:nth-child(4), .ck-tm-tabelle td:nth-child(4) { display: none; }
  .ck-tm-wer strong, .ck-tm-wer > span { max-width: 150px; }
}


/* ------------------------------------------------------ Unterlagen-Baum
   Stil der Vorlage FileTree (25.09.2026): Chevron, Ordnersymbol offen und zu,
   Dateityp als farbiges Kuerzel, Auswahl in Violett, Monospace. */
.ak-baum-neu { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.ak-knoten { margin: 0; }
.ak-ord, .ak-datei { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 5px 6px;
  font: inherit; font-size: 14px; line-height: 1.25; text-align: left; color: #17171F;
  background: none; border: 0; border-radius: 6px; cursor: pointer; transition: background .12s, color .12s; }
.ak-ord:hover, .ak-datei:hover { background: #f1f1f7; color: #17171F; }
.ak-ord:focus-visible, .ak-datei:focus-visible { outline: 2px solid rgba(107, 31, 209, .4); outline-offset: 1px; }
.ak-chev { flex: 0 0 auto; color: #55556A; transition: transform .15s; }
.ak-ord.auf .ak-chev { transform: rotate(90deg); }
.ak-ord-ico { flex: 0 0 auto; color: #1D5FBF; }
.ak-ord-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ak-ord em { flex: 0 0 auto; font-style: normal; font-size: 12px; color: #55556A; background: #f1f1f7;
  border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.ak-kinder { margin: 1px 0 4px; }
.ak-datei { padding-left: 34px; cursor: default; }
.ak-datei[draggable="true"] { cursor: grab; }
.ak-datei.aktiv { background: rgba(107, 31, 209, .1); color: #6B1FD1; font-weight: 500; }
.ak-datei.zieht { opacity: .45; }
.ak-typ { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 3px; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 1; }
.ak-typ-leer { flex: 0 0 auto; color: #55556A; }
.ak-datei-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-datei-rechts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.ak-mini { font-style: normal; font-family: Inter, system-ui, sans-serif; font-size: 12px; padding: 0 5px; border-radius: 4px;
  border: 1px solid #e9d5ff; background: #faf5ff; color: #6B1FD1; }
.ak-mini.leer { border-color: #fcd34d; background: #fffbeb; color: #8A4B00; }
.ak-punkt { width: 7px; height: 7px; border-radius: 50%; background: #c4c4d4; }
.ak-punkt.blau { background: #3b82f6; }
.ak-punkt.gut { background: #16a34a; }
.ak-punkt.warn { background: #f59e0b; }
.ak-leer-neu { margin: 0; padding: 3px 6px 6px 34px; font-size: 12px; color: #55556A; font-style: italic; }
.ak-knoten.ziel-ordner > .ak-ord { background: rgba(107, 31, 209, .1); box-shadow: inset 0 0 0 1px rgba(107, 31, 209, .35); }
.ak-datei.ziel-vor { box-shadow: inset 0 2px 0 #6B1FD1; }
.ak-datei.ziel-nach { box-shadow: inset 0 -2px 0 #6B1FD1; }

/* Live-Editor rechts in der Akte (Sammelliste 29). */
.ak-editor { margin: 4px 0 14px; border: 1px solid rgba(107, 31, 209, .25); border-radius: 12px; overflow: hidden; background: #fff; }
.ak-editor-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid #e9e9f0; background: linear-gradient(180deg, #faf6ff 0%, #ffffff 100%);
  font-size: 14px; color: #55556A; }
.ak-editor-kopf strong { color: #17171F; margin-right: 6px; }
.ak-editor-kopf span { flex: 1 1 320px; }
.ak-editor-rahmen { display: block; width: 100%; height: min(78vh, 820px); border: 0; background: #f7f7fb; }


/* ------------------------------------------------------------------ Kalender
   Stil der Vorlage shadcn Calendar (25.09.2026). Der Browser-Kalender ist nur
   ausgeblendet, das Feld bleibt ein Datumsfeld. */
.ck input[type="date"]:not([data-kalender="nativ"]),
.dk-nackt input[type="date"]:not([data-kalender="nativ"]),
.ck-blatt input[type="date"]:not([data-kalender="nativ"]) {
  cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.ck input[type="date"]:not([data-kalender="nativ"])::-webkit-calendar-picker-indicator,
.dk-nackt input[type="date"]:not([data-kalender="nativ"])::-webkit-calendar-picker-indicator,
.ck-blatt input[type="date"]:not([data-kalender="nativ"])::-webkit-calendar-picker-indicator { display: none; }
.ck-kal { position: fixed; z-index: 1300; padding: 12px; background: #fff; color: #17171F;
  border: 1px solid #e4e4ee; border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15, 15, 30, .28);
  font-family: Inter, system-ui, sans-serif; user-select: none; }
.ck-kal-kopf { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; margin-bottom: 10px; }
.ck-kal-titel { font-size: .875rem; font-weight: 500; }
.ck-kal-nav { position: absolute; top: 1px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; color: #17171F; background: transparent; border: 1px solid #e4e4ee;
  border-radius: 6px; opacity: .55; cursor: pointer; transition: opacity .12s, background .12s; }
.ck-kal-nav:hover { opacity: 1; background: #f4f4f9; }
.ck-kal-nav.links { left: 2px; }
.ck-kal-nav.rechts { right: 2px; }
.ck-kal-zeile { display: flex; }
.ck-kal-zeile + .ck-kal-zeile { margin-top: 4px; }
.ck-kal-zeile.kopf span { width: 36px; text-align: center; font-size: 14px; color: #55556A; }
.ck-kal-tag { width: 36px; height: 36px; padding: 0; font: inherit; font-size: .875rem; font-weight: 400;
  color: #17171F; background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .1s, color .1s; }
.ck-kal-tag:hover { background: #f1f1f7; }
.ck-kal-tag:focus-visible { outline: 2px solid rgba(107, 31, 209, .45); outline-offset: 1px; }
.ck-kal-tag.aussen { color: #55556A; }
.ck-kal-tag.heute { background: #f1f1f7; font-weight: 600; }
.ck-kal-tag.gewaehlt, .ck-kal-tag.gewaehlt:hover { background: #17172b; color: #fff; font-weight: 500; }
.ck-kal-tag:disabled { opacity: .35; cursor: default; background: transparent; }
.ck-kal-fuss { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid #efeff5; }
.ck-kal-leise { font: inherit; font-size: 14px; color: #55556A; background: none; border: 0; padding: 4px 8px;
  border-radius: 6px; cursor: pointer; }
.ck-kal-leise:hover { color: #17171F; background: #f4f4f9; }


/* Team, 25.09.2026 (Sammelliste 33): Menuepunkte mit Haken, Rolle, Einladen. */
.ck-tm-menue { min-width: 230px; padding: 5px; }
.ck-tm-menue-titel { padding: 6px 8px 5px !important; font-size: 12px !important; letter-spacing: .06em !important; }
.ck-tm-menue .ck-tm-trenner { margin: 4px -5px; }
.ck-tm-menue label.ck-tm-wahl-zeile { position: relative; display: flex; align-items: flex-start; gap: 0;
  padding: 7px 10px 7px 30px; border-radius: 6px; line-height: 1.3; }
.ck-tm-wahl-zeile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ck-tm-haken { position: absolute; left: 9px; top: 8px; display: inline-flex; width: 14px; height: 14px;
  align-items: center; justify-content: center; color: #17171F; visibility: hidden; }
.ck-tm-wahl-zeile input:checked + .ck-tm-haken { visibility: visible; }
.ck-tm-wahl-zeile input:focus-visible ~ span:last-child { outline: 2px solid rgba(107, 31, 209, .4); outline-offset: 2px; border-radius: 3px; }
.ck-tm-wahl-zeile input:disabled ~ span { opacity: .5; }
.ck-tm-wahl-zeile em { display: block; font-style: normal; font-size: 12px; color: #55556A; margin-top: 1px; }
.ck-tm-menue-hinweis { display: block; padding: 7px 10px; font-size: 12px; color: #55556A; line-height: 1.4; max-width: 240px; }
.ck-team-neu { grid-template-columns: 1fr 1fr 150px; align-items: end; }
.ck-team-neu > button[type=submit] { grid-column: 1 / -1; justify-self: end; }
.ck-tm-gruppenwahl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; border: 0; }
.ck-tm-gruppenwahl legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 600; color: #55556A; }
.ck-tm-chipwahl { position: relative; margin: 0; cursor: pointer; }
.ck-tm-chipwahl input { position: absolute; opacity: 0; }
.ck-tm-chipwahl span { display: inline-flex; padding: 4px 11px; font-size: 14px; color: #55556A; background: #fff;
  border: 1px solid #e4e4ee; border-radius: 999px; transition: background .12s, border-color .12s, color .12s; }
.ck-tm-chipwahl input:checked + span { background: #f3ecff; border-color: #cdb4ff; color: #6B1FD1; font-weight: 600; }
.ck-tm-chipwahl input:focus-visible + span { outline: 2px solid rgba(107, 31, 209, .4); outline-offset: 1px; }
@media (max-width: 620px) { .ck-team-neu { grid-template-columns: 1fr; } }

/* Akte: Baum einklappen (Sammelliste 34). */
.ak-raster.baum-zu { grid-template-columns: 46px minmax(0, 1fr); }
.ak-baum-leiste { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px 8px;
  margin-bottom: 4px; border-bottom: 1px solid #efeff5; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #55556A; }
.ak-baum-klapp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 28px; height: 28px;
  padding: 0; color: #55556A; background: none; border: 0; border-radius: 7px; cursor: pointer; }
.ak-baum-klapp:hover { background: #f1f1f7; color: #17171F; }
.ak-baum-klapp.zu { width: 100%; height: auto; flex-direction: column; padding: 8px 0; color: #1D5FBF; }
.ak-baum-klapp-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #55556A; }
.ak-raster.baum-zu .ak-baum { padding: 4px; overflow: hidden; }

/* Leiste: Logo und Marke (Sammelliste 35). */
a.ck-marke { display: inline-flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: var(--ck-titel); }
/* Beta-Abzeichen neben der Marke (01.10.2026). Faellt in der schmalen Leiste weg. */
.ck-markentext { display: block; min-width: 0; line-height: 1.2; }
.ck-markentext .ck-text { display: inline; }
.ck.schmal .ck-markentext { display: none; }
.ck-beta { display: inline-block; vertical-align: middle; margin-left: 5px; position: relative; top: -1px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 2px 5px; border-radius: 999px; color: var(--ck-violett); background: rgba(107, 31, 209, .08); border: 1px solid rgba(107, 31, 209, .28); }
.ck-logo { display: block; flex: 0 0 auto; height: 22px; width: auto; }
.ck.schmal .ck-logo { height: 20px; }


/* Profilfoto (Sammelliste 38), Stil der Vorlage file-upload-05. */
.ck-avatar { position: relative; overflow: hidden; }
.ck-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ck-blatt-kasten.ck-foto { width: min(390px, 100%); padding: 22px 24px 20px; }
.ck-foto h2 { margin: 0 0 14px; font-size: 16px; }
.ck-foto-stufe { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ck-foto-rein { animation: ckFotoRein .3s ease-out; }
@keyframes ckFotoRein { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.ck-foto-ablage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; border: 2px dashed rgba(107, 107, 138, .3); border-radius: 50%; cursor: pointer; overflow: hidden;
  transition: border-color .2s, background .2s, transform .2s; }
.ck-foto-ablage:hover { border-color: rgba(107, 107, 138, .5); }
.ck-foto-ablage:focus-visible { outline: 2px solid rgba(107, 31, 209, .45); outline-offset: 3px; }
.ck-foto-ablage.drueber { border-color: #6B1FD1; background: rgba(107, 31, 209, .05); transform: scale(1.02); }
.ck-foto-jetzt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.ck-foto-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px dashed rgba(107, 107, 138, .45); border-radius: 50%; background: #fff; color: #55556A; }
.ck-foto-hinweis { position: relative; font-size: 12px; font-weight: 500; color: #55556A; }
.ck-foto-klein { max-width: 220px; margin: 0 !important; font-size: 12px !important; color: #55556A !important; line-height: 1.45 !important; }
.ck-foto-knoepfe { display: flex; align-items: center; gap: 8px; width: 100%; }
.ck-foto-knoepfe.mitte { justify-content: center; flex-wrap: wrap; }
.ck-tm-knopf.ohne-rand { border-color: transparent; background: transparent; }
.ck-tm-knopf.ohne-rand:hover { background: #f4f4f9; }
.ck-foto-rahmen { position: relative; overflow: hidden; border: 2px dashed rgba(107, 31, 209, .4); border-radius: 50%;
  background: #f1f1f7; cursor: grab; touch-action: none; user-select: none; }
.ck-foto-rahmen.zieht { cursor: grabbing; }
.ck-foto-rahmen img { position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none; transition: transform .15s ease-out; }
.ck-foto-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); pointer-events: none; }
.ck-foto-zoom { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; color: #55556A; }
.ck-foto-zoom input { flex: 1; accent-color: #17172b; }
.ck-foto-ergebnis { position: relative; display: inline-block; }
.ck-foto-ergebnis img { display: block; width: 146px; height: 146px; border-radius: 50%; border: 1px solid #e4e4ee; object-fit: cover; }
.ck-foto-haken { position: absolute; right: 4px; bottom: 2px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: #2dd4bf; color: #fff; animation: ckFotoRein .3s ease-out; }
.ck-foto-titel { margin: 0 !important; font-size: 14px !important; font-weight: 600; color: #17171F !important; }


/* ══ Farbrollen fuer Zustaende (29.09.2026) ════════════════════════════════
   Ruben: "Die Farbunterscheidung muss besser sein." Auf dem Bild der
   Verfahrensliste lagen "In Vorbereitung" (Grau, 6 % Toenung) und "Laufend"
   (Blau, 12 %) gleich hell nebeneinander und waren kaum zu trennen; "In
   Vorbereitung" und "Abgeschlossen" teilten sich sogar dieselbe Farbe.

   Das System: Der Farbton traegt die Bedeutung entlang des Verfahrenswegs, die
   FORM traegt die Phase, damit Farbe nie allein spricht (Farbsehschwaeche):
     Vorbereitung   Bernstein, gestrichelt, hohler Punkt   (Entwurf, noch intern)
     Laufend        Blau, getoent, voller Punkt           (nach aussen bekannt)
     Frist vorbei   Orange, getoent, voller Punkt         (Aufmerksamkeit)
     Eignung/Wertung Violett, getoent, voller Punkt       (Arbeit an den Angeboten)
     Zuschlag / Aufgehoben / Abgeschlossen  gefuellt       (Endzustand)
   Dieselben Toene markieren die drei Phasen in der Leiste, damit Marke und
   Navigation dieselbe Sprache sprechen.
   Kontraste gerechnet: Text auf Toenung 5,4 bis 6,8 : 1, Weiss auf Fuellung
   6,5 bis 8,1 : 1, der gestrichelte Rand 3,7 : 1.
   Bewusst keine farbigen Seitenstreifen an den Zeilen: Die Marke und die Frist
   tragen die Unterscheidung, ein Streifen je Zeile waere Laerm. */

.ck,
.ck-blatt {
  --st-vorb-text:   #7a4f06;  --st-vorb-grund:  #fdf4e0;  --st-vorb-rand:  #b07a1c;
  --st-lauf-text:   #1746b5;  --st-lauf-grund:  #e1ecff;  --st-lauf-rand:  #b4ceff;  --st-lauf-punkt:  #2b75ff;
  --st-acht-text:   #a93a07;  --st-acht-grund:  #ffe8da;  --st-acht-rand:  #ffc4a1;  --st-acht-punkt:  #ea580c;
  --st-pruef-text:  #6a1bbf;  --st-pruef-grund: #f0e4ff;  --st-pruef-rand: #d9bfff;  --st-pruef-punkt: #6B1FD1;
  --st-gut-text:    #0a6b53;  --st-gut-grund:   #dcf5ec;  --st-gut-rand:   #a6e1cb;  --st-gut-punkt:   #10a37f;
  --st-fehler-text: #b42318;  --st-fehler-grund:#fde7e5;  --st-fehler-rand:#f5bdb6;  --st-fehler-punkt:#e5484d;
  --st-neutral-text:#4b4e6b;  --st-neutral-grund:#f1f2f7; --st-neutral-rand:#dadcea;
  --st-gut-voll:    #0a6b53;  --st-fehler-voll: #b42318;  --st-ende-voll:  #4b4e6b;
  --st-frist-rot:   #b42318;  --st-frist-gelb:  #9a5b04;  --st-frist-ab:   #6b6e8a;
}

/* ── Marken: Punkt vor dem Wort, Rand in der Farbe des Tons ─────────────── */
.vf-marke {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--st-neutral-rand);
  background: var(--st-neutral-grund); color: var(--st-neutral-text);
  line-height: 1.25;
}
.vf-marke::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.vf-marke:empty { display: none; }
.vf-marke.blau    { background: var(--st-lauf-grund);   color: var(--st-lauf-text);   border-color: var(--st-lauf-rand); }
.vf-marke.blau::before    { background: var(--st-lauf-punkt);   opacity: 1; }
.vf-marke.warn    { background: var(--st-acht-grund);   color: var(--st-acht-text);   border-color: var(--st-acht-rand); }
.vf-marke.warn::before    { background: var(--st-acht-punkt);   opacity: 1; }
.vf-marke.violett { background: var(--st-pruef-grund);  color: var(--st-pruef-text);  border-color: var(--st-pruef-rand); }
.vf-marke.violett::before { background: var(--st-pruef-punkt);  opacity: 1; }
.vf-marke.gut     { background: var(--st-gut-grund);    color: var(--st-gut-text);    border-color: var(--st-gut-rand); }
.vf-marke.gut::before     { background: var(--st-gut-punkt);    opacity: 1; }
.vf-marke.fehler  { background: var(--st-fehler-grund); color: var(--st-fehler-text); border-color: var(--st-fehler-rand); }
.vf-marke.fehler::before  { background: var(--st-fehler-punkt); opacity: 1; }

/* Endzustaende gefuellt, der Punkt wird zum weissen Ring: "hier ist Schluss". */
.vf-marke.ende,
.vf-marke.grau.ende   { background: var(--st-ende-voll);   border-color: var(--st-ende-voll);   color: #ffffff; }
.vf-marke.gut.ende    { background: var(--st-gut-voll);    border-color: var(--st-gut-voll);    color: #ffffff; }
.vf-marke.fehler.ende { background: var(--st-fehler-voll); border-color: var(--st-fehler-voll); color: #ffffff; }
.vf-marke.ende::before { background: transparent; border: 1.5px solid #ffffff; opacity: .9;
  width: 5px; height: 5px; }

/* "In Vorbereitung" ist im Verfahrensweg der Entwurf. Grau heisst dort nicht
   "neutral", sondern "noch nicht draussen". Nur in der Liste und im Aktenkopf,
   an anderen Stellen (Angebote, Teilnahme) bleibt Grau neutral. */
.vf-t .vf-marke.grau:not(.ende),
#vfAkteStatus.vf-marke.grau:not(.ende) {
  background: var(--st-vorb-grund); color: var(--st-vorb-text);
  border: 1px dashed var(--st-vorb-rand);
}
.vf-t .vf-marke.grau:not(.ende)::before,
#vfAkteStatus.vf-marke.grau:not(.ende)::before {
  background: transparent; border: 1.5px solid var(--st-vorb-rand); opacity: 1;
  width: 5px; height: 5px;
}

/* ── Frist in der Liste: Die Ampel faerbt jetzt auch das Datum ──────────── */
.vf-t { font-variant-numeric: tabular-nums; }
.vf-ampel { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.vf-ampel.rot   { background: var(--st-fehler-punkt); box-shadow: 0 0 0 3px var(--st-fehler-grund); }
.vf-ampel.gelb  { background: #e0a100;                box-shadow: 0 0 0 3px var(--st-vorb-grund); }
.vf-ampel.gruen { background: var(--st-gut-punkt);    box-shadow: 0 0 0 3px var(--st-gut-grund); }
.vf-ampel.ab    { background: transparent; border: 1.5px solid var(--st-frist-ab); box-shadow: none; }
.vf-t td:has(> .vf-ampel.rot)  { color: var(--st-frist-rot);  font-weight: 700; }
.vf-t td:has(> .vf-ampel.gelb) { color: var(--st-frist-gelb); font-weight: 600; }
.vf-t td:has(> .vf-ampel.ab)   { color: var(--st-frist-ab); }
.vf-t td:has(> .vf-ampel.rot) .vf-rest,
.vf-t td:has(> .vf-ampel.gelb) .vf-rest,
.vf-t td:has(> .vf-ampel.ab) .vf-rest { color: inherit; font-weight: 500; }

/* ── Leiste: die drei Phasen in den Toenen der Marken ──────────────────── */
.ck-block[data-gruppe] > .ck-block-titel { display: flex; align-items: center; gap: 7px; }
.ck-block[data-gruppe='vorbereitung']  > .ck-block-titel::before,
.ck-block[data-gruppe='durchfuehrung'] > .ck-block-titel::before,
.ck-block[data-gruppe='nachbereitung'] > .ck-block-titel::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto;
}
.ck-block[data-gruppe='vorbereitung']  > .ck-block-titel { color: var(--st-vorb-text); }
.ck-block[data-gruppe='vorbereitung']  > .ck-block-titel::before { background: #e0a100; }
.ck-block[data-gruppe='durchfuehrung'] > .ck-block-titel { color: var(--st-lauf-text); }
.ck-block[data-gruppe='durchfuehrung'] > .ck-block-titel::before { background: var(--st-lauf-punkt); }
.ck-block[data-gruppe='nachbereitung'] > .ck-block-titel { color: var(--st-pruef-text); }
.ck-block[data-gruppe='nachbereitung'] > .ck-block-titel::before { background: var(--st-pruef-punkt); }

/* ── Browserflaechen in Hausfarbe ──────────────────────────────────────── */
.ck ::selection,
.ck-blatt ::selection { background: #e6d4ff; color: #17171F; }

/* ── Telefon: die richtigen Spalten ausblenden ─────────────────────────────
   Die Regel weiter oben zaehlte acht Spalten. Seit Auswahlkaestchen und Stern
   sind es neun (Wahl, Stern, Verfahren, Aktenzeichen, Frist, Stand, Akte,
   Zuletzt, Naechster Schritt). Sie versteckte dadurch Bezeichnung und Stand,
   also genau das, was am Telefon bleiben soll. */
@media (max-width: 760px) {
  .vf-t th:nth-child(3), .vf-t td:nth-child(3),
  .vf-t th:nth-child(6), .vf-t td:nth-child(6) { display: table-cell; }
  .vf-t th:nth-child(4), .vf-t td:nth-child(4),
  .vf-t th:nth-child(9), .vf-t td:nth-child(9) { display: none; }
  .vf-t td { padding: 11px 6px; }
}
@media (max-width: 760px) {
  /* Mehrfachauswahl ist am Telefon unhandlich; der Platz gehoert der Marke. */
  .vf-t th:nth-child(1), .vf-t td:nth-child(1) { display: none; }
  .vf-t .vf-marke { white-space: normal; }
}

/* ══ Einstellungen (29.09.2026) ═════════════════════════════════════════════
   Ein Fenster fuer Konto, Kontingent und Plan, Team und Protokoll, nach dem
   Vorbild der Einstellungen von Claude: links die Bereiche auf ruhiger Flaeche,
   rechts der Inhalt als Zeilen mit Linien statt Karten, Schliessen oben rechts.
   Feste Hoehe, damit das Fenster beim Wechsel der Bereiche nicht springt. */
.ck-blatt-kasten.ck-ein {
  position: relative;
  width: min(1080px, 100%);
  height: min(720px, calc(100vh - 40px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}
.ck-ein-leiste {
  background: #f7f7fa;
  border-right: 1px solid var(--ck-rand);
  padding: 22px 12px;
  overflow-y: auto;
}
.ck-blatt-kasten .ck-ein-leiste h2 {
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ck-gedaempft);
  margin: 4px 12px 10px;
}
.ck-ein-leiste nav { display: flex; flex-direction: column; gap: 2px; }
.ck-ein-nav {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 14px; color: var(--ck-kartentitel); text-align: left; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ck-ein-nav svg { color: #55556A; flex: 0 0 auto; }
.ck-ein-nav:hover { background: #ededf3; }
.ck-ein-nav.aktiv { background: #f0e4ff; color: #6B1FD1; font-weight: 600; }
.ck-ein-nav.aktiv svg { color: var(--ck-violett); }
.ck-ein-nav:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 1px; }

.ck-ein-inhalt { padding: 30px 40px 34px; overflow-y: auto; outline: none; }
.ck-ein-zu {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: none; color: #55556A; cursor: pointer;
}
.ck-ein-zu:hover { background: #f1f2f7; color: var(--ck-titel); }
.ck-ein-zu:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 1px; }

.ck-ein-h { font-size: 16px; font-weight: 700; color: var(--ck-titel); margin: 2px 0 18px; }
.ck-ein-h4 { font-size: 16px; font-weight: 700; color: var(--ck-titel); margin: 0 0 6px; }
.ck-ein-abschnitt { margin-top: 30px; }
.ck-blatt-kasten .ck-ein-text { font-size: 14px; color: var(--ck-gedaempft); margin: 0 0 14px; max-width: 64ch; }
.ck-blatt-kasten .ck-ein-text.klein { font-size: 12px; margin-top: 4px; }

.ck-ein-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 15px 0; border-bottom: 1px solid var(--ck-linie);
}
.ck-ein-zeile strong { display: block; font-size: 14px; font-weight: 600; color: var(--ck-kartentitel); }
.ck-ein-zeile span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ck-gedaempft); }
.ck-ein-aktion { flex: 0 0 auto; }

.ck-ein-person { display: flex; align-items: center; gap: 14px; padding: 4px 0 18px;
  border-bottom: 1px solid var(--ck-linie); }
.ck-ein-person strong { display: block; font-size: 1rem; color: var(--ck-titel); }
.ck-ein-person span { display: block; font-size: 14px; color: var(--ck-gedaempft); margin-top: 2px; }
.ck-ein-bild > * { width: 52px !important; height: 52px !important; font-size: 16px !important;
  display: grid !important; place-items: center; line-height: 1 !important; border-radius: 50%;
  padding: 0 !important; position: relative; overflow: hidden; color: #ffffff !important; font-weight: 700; }
.ck-ein-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Tarif und Kontingente */
.ck-ein-tarifkopf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 14px; color: var(--ck-gedaempft); }
.ck-ein-tarifkopf em { font-style: normal; color: var(--st-gut-text, #0a6b53); font-weight: 600; }
.ck-ein-marke { display: inline-block; padding: 3px 11px; border-radius: 999px;
  background: #f0e4ff; border: 1px solid #d9bfff; color: #6B1FD1;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }

.ck-ein-kontingent { padding: 14px 0; border-bottom: 1px solid var(--ck-linie); }
.ck-ein-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ck-ein-kopfzeile strong { font-size: 14px; font-weight: 600; color: var(--ck-kartentitel); }
.ck-ein-kopfzeile em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ck-kartentitel);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-ein-kontingent > span { display: block; margin-top: 7px; font-size: 14px; color: var(--ck-gedaempft); }
.ck-ein-balken { height: 7px; margin-top: 9px; border-radius: 999px; background: #ecedf4; overflow: hidden; }
.ck-ein-balken i { display: block; height: 100%; border-radius: inherit; background: var(--ck-violett);
  transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.ck-ein-kontingent.frei .ck-ein-balken i { background: #c9b6ef; }
.ck-ein-kontingent.knapp .ck-ein-balken i { background: #e0a100; }
.ck-ein-kontingent.knapp .ck-ein-kopfzeile em { color: var(--st-vorb-text, #7a4f06); }
.ck-ein-kontingent.leer .ck-ein-balken i { background: var(--st-fehler-punkt, #e5484d); }
.ck-ein-kontingent.leer .ck-ein-kopfzeile em { color: var(--st-fehler-text, #b42318); }

.ck-ein-tarife { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ck-ein-tarif { border: 1px solid var(--ck-rand); border-radius: 12px; padding: 18px 18px 16px;
  display: flex; flex-direction: column; }
.ck-ein-tarif > strong { font-size: 16px; color: var(--ck-titel); }
.ck-blatt-kasten .ck-ein-preis { margin: 4px 0 10px; font-size: 14px; color: var(--ck-gedaempft); }
.ck-ein-preis b { font-size: 20px; color: var(--ck-titel); font-variant-numeric: tabular-nums; }
.ck-ein-tarif ul { margin: 0 0 16px; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--ck-text); flex: 1; }
.ck-ein-tarif .kc-knopf { align-self: flex-start; text-decoration: none; }

/* Team im Fenster: dieselbe Tabelle, der Rahmen kommt vom Fenster */
/* Oben mehr Luft, damit die Werkzeugleiste der Tabelle (Suche, Ansicht,
   Einladen) nicht unter dem Schliessen-Kreuz liegt. */
.ck-ein-inhalt.ck-tm { padding: 60px 34px 30px; }

@media (max-width: 760px) {
  .ck-blatt-kasten.ck-ein { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
    height: calc(100vh - 24px); }
  .ck-ein-leiste { border-right: 0; border-bottom: 1px solid var(--ck-rand); padding: 14px 52px 10px 12px; }
  .ck-blatt-kasten .ck-ein-leiste h2 { margin: 2px 8px 8px; }
  .ck-ein-leiste nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .ck-ein-nav { width: auto; white-space: nowrap; padding: 8px 11px; }
  .ck-ein-inhalt, .ck-ein-inhalt.ck-tm { padding: 20px 18px 24px; }
  .ck-ein-zeile { flex-wrap: wrap; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-ein-balken i, .ck-ein-nav { transition: none; }
}

/* Stand am Telefon unter dem Titel (01.10.2026). Die Spalte Stand ragte ueber den Rand. */
.vf-marke-mobil { display: none !important; }
@media (max-width: 640px) {
  .vf-t th:nth-child(6), .vf-t td:nth-child(6) { display: none !important; }
  .vf-t .vf-marke-mobil { display: inline-flex !important; margin-top: 6px; }
}

/* ── Aufgaben (Sammelliste 39, 01.10.2026) ─────────────────────────────── */
.au-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.au-zahl { background: #fff; border: 1px solid var(--ck-rand); border-radius: 12px; padding: 12px 14px; }
.au-zahl span { display: block; font-size: 12px; color: var(--ck-gedaempft); }
.au-zahl strong { display: block; font-size: 20px; color: var(--ck-titel); line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.au-zahl.warn { border-color: var(--st-fehler-rand, #f5bdb6); background: var(--st-fehler-grund, #fde7e5); }
.au-zahl.warn strong { color: var(--st-fehler-text, #b42318); }
.au-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 16px; font-size: 14px; color: var(--ck-gedaempft); }
.au-filter .bb-wahl { max-width: 300px; }
.au-haken { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.au-ansicht { margin-left: auto; display: inline-flex; border: 1px solid var(--ck-rand); border-radius: 9px; overflow: hidden; background: #fff; }
.au-reiter { border: none; background: none; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ck-gedaempft); cursor: pointer; }
.au-reiter.aktiv { background: rgba(107, 31, 209, .09); color: var(--ck-violett); }
.au-reiter:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: -2px; }
.au-gruppe { background: #fff; border: 1px solid var(--ck-rand); border-radius: 14px; padding: 14px 16px 6px; margin: 0 0 14px; }
.au-gruppe > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 8px; }
.au-gruppe h2 { font-size: 16px; font-weight: 700; color: var(--ck-titel); margin: 0; }
.au-az { font-size: 12px; color: var(--ck-gedaempft); }
.au-anzahl { margin-left: auto; font-size: 12px; color: var(--ck-gedaempft); }
.au-tabelle { overflow-x: auto; }
.au-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.au-t th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-gedaempft); padding: 6px 10px; border-bottom: 1px solid var(--ck-linie); white-space: nowrap; }
.au-t td { padding: 10px; border-bottom: 1px solid var(--ck-linie); vertical-align: top; }
.au-t tbody tr:last-child td { border-bottom: none; }
.au-t tr.fertig .au-titel { color: var(--ck-gedaempft); text-decoration: line-through; }
.au-titel { display: block; font-weight: 600; color: var(--ck-titel); }
.au-notiz { display: block; font-size: 12px; color: var(--ck-gedaempft); margin-top: 2px; }
.au-wer { display: inline-flex; align-items: center; gap: 8px; }
.au-wer i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--gradient, linear-gradient(135deg, #6B1FD1, #2b75ff)); }
.au-leer { color: var(--ck-gedaempft); }
.au-tag { white-space: nowrap; }
.au-spaet { display: block; font-size: 12px; font-weight: 700; color: var(--st-frist-rot, #b42318); }
.au-tun { text-align: right; white-space: nowrap; }
.au-tun .kc-knopf { padding: 5px 10px; font-size: 12px; }
.au-stand { font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; border: 1px solid var(--st-lauf-rand, #b4ceff); background: var(--st-lauf-grund, #e1ecff); color: var(--st-lauf-text, #1746b5); }
.au-stand.in_arbeit { border: 1px dashed var(--st-vorb-rand, #b07a1c); background: var(--st-vorb-grund, #fdf4e0); color: var(--st-vorb-text, #7a4f06); }
.au-stand.erledigt { border-color: transparent; background: var(--st-gut-voll, #0a6b53); color: #fff; }
.au-stand:disabled { cursor: default; }
.au-stand:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 2px; }
.au-plan { background: #fff; border: 1px solid var(--ck-rand); border-radius: 14px; overflow-x: auto; margin: 0 0 10px; }
.au-plan-innen { min-width: 760px; }
.au-plan-kopf, .au-plan-zeile { display: grid; grid-template-columns: 260px 1fr; align-items: stretch; }
.au-plan-kopf { border-bottom: 1px solid var(--ck-linie); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-gedaempft); }
.au-plan-links { padding: 9px 14px; border-right: 1px solid var(--ck-linie); min-width: 0; }
.au-plan-links .au-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.au-plan-spur { position: relative; min-height: 36px; }
.au-plan-kopf .au-plan-spur { min-height: 30px; }
.au-marke { position: absolute; top: 8px; transform: translateX(4px); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ck-gedaempft); white-space: nowrap; }
.au-marke::before { content: ''; position: absolute; left: -4px; top: -8px; height: 30px; border-left: 1px solid var(--ck-linie); }
.au-marke.monat { font-weight: 700; color: var(--ck-titel); }
.au-plan-gruppe { padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--ck-titel); background: #f6f6fb; border-top: 1px solid var(--ck-linie); border-bottom: 1px solid var(--ck-linie); }
.au-plan-gruppe span { font-weight: 500; color: var(--ck-gedaempft); margin-left: 6px; }
.au-plan-zeile { border-bottom: 1px solid var(--ck-linie); }
.au-plan-zeile:last-child { border-bottom: none; }
.au-plan-zeile.fertig .au-titel { color: var(--ck-gedaempft); text-decoration: line-through; }
.au-heute { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--ck-violett); opacity: .55; }
.au-balken { position: absolute; top: 9px; height: 18px; min-width: 10px; border-radius: 6px; padding: 0 6px; font: inherit; font-size: 12px; font-weight: 700; line-height: 16px; text-align: right; overflow: hidden; white-space: nowrap; cursor: pointer; border: 1px solid var(--st-lauf-punkt, #2b75ff); background: var(--st-lauf-grund, #e1ecff); color: var(--st-lauf-text, #1746b5); }
.au-balken.in_arbeit { border: 1px dashed var(--st-vorb-rand, #b07a1c); background: var(--st-vorb-grund, #fdf4e0); color: var(--st-vorb-text, #7a4f06); }
.au-balken.erledigt { border-color: transparent; background: var(--st-gut-voll, #0a6b53); color: #fff; opacity: .8; }
.au-balken.spaet { border: 2px solid var(--st-fehler-punkt, #e5484d); }
.au-balken.punkt { width: 14px; height: 14px; top: 11px; padding: 0; border-radius: 50%; transform: translateX(-7px); }
.au-balken:disabled { cursor: default; }
.au-balken:focus-visible { outline: 2px solid var(--ck-blau); outline-offset: 2px; }
.au-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.au-legende .au-balken { position: static; display: inline-block; width: 22px; height: 12px; min-width: 0; padding: 0; vertical-align: middle; cursor: default; }
.au-legende .au-heute.fest { position: static; display: inline-block; height: 14px; vertical-align: middle; }
.au-ohne { font-size: 14px; font-weight: 700; color: var(--ck-titel); margin: 18px 0 8px; }
.kc-knopf.sicher { border-color: var(--st-fehler-punkt, #e5484d); color: var(--st-fehler-text, #b42318); }
@media (max-width: 760px) {
  .au-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-ansicht { margin-left: 0; }
  .au-t th:nth-child(3), .au-t td:nth-child(3) { display: none; }
  .au-plan-kopf, .au-plan-zeile { grid-template-columns: 170px 1fr; }
}

/* Aufgaben am Handy (02.10.2026): Zeilen als Karten statt abgeschnittener Tabelle */
.au-haken { white-space: nowrap; }
@media (max-width: 640px) {
  .au-filter .bb-wahl { max-width: none; width: 100%; }
  .au-t thead { display: none; }
  .au-t, .au-t tbody { display: block; }
  .au-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ck-linie); }
  .au-t tbody tr:last-child { border-bottom: none; }
  .au-t td { display: block; padding: 0; border-bottom: none; }
  .au-t td:nth-child(1) { grid-column: 1 / -1; }
  .au-t td:nth-child(2) { grid-column: 1; }
  .au-t td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .au-t td:nth-child(4):empty { display: none; }
  .au-t td:nth-child(5) { grid-column: 1; }
  .au-t td.au-tun { grid-column: 2; }
}

/* ── Rechtschreibung und Silbentrennung im Editor (OFFEN O-6, 02.10.2026) ── */
.ed-flaeche .ProseMirror { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 3; }
.ed-flaeche h1, .ed-flaeche h2, .ed-flaeche h3, .ed-flaeche h4, .ed-flaeche th,
.ed-flaeche code, .ed-flaeche pre { hyphens: manual; -webkit-hyphens: manual; }
.ed-flaeche.ed-ohne-trennung .ProseMirror { hyphens: manual; -webkit-hyphens: manual; }
.ed-rs { text-decoration: underline wavy var(--st-fehler-punkt, #e5484d); text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-skip-ink: none; cursor: context-menu; }
.ed-rs-schalter { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; font-size: 14px; }
.ed-rs-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ed-rs-wort { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--st-fehler-rand, #f5bdb6); background: var(--st-fehler-grund, #fde7e5);
  color: var(--st-fehler-text, #b42318); }
.ed-rs-wort:hover { border-color: var(--st-fehler-punkt, #e5484d); }
.ed-rs-wort:focus-visible { outline: 2px solid var(--ck-blau, #2b75ff); outline-offset: 2px; }
.ed-rs-wb { margin: 0 0 14px; font-size: 14px; }
.ed-rs-wb summary { cursor: pointer; color: var(--ck-kartentitel, #242438); font-weight: 600; padding: 4px 0; }
.ed-rs-wbzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--ck-linie, #e9e9f0); }
.ed-rs-wbzeile .kc-knopf { padding: 3px 9px; font-size: 12px; }
.ed-rs-menue { position: fixed; z-index: 12000; width: 250px; background: #fff; color: #17171F;
  border: 1px solid #e4e4ee; border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 15, 30, .18);
  padding: 6px; font-family: inherit; font-size: 14px; }
.ed-rs-menue[hidden] { display: none; }
.ed-rs-menue .ed-rs-kopf { padding: 4px 8px 6px; font-size: 12px; color: #55556A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-rs-menue .ed-rs-leer { padding: 6px 8px; color: #55556A; }
.ed-rs-menue button { display: block; width: 100%; text-align: left; border: none; background: none;
  font: inherit; color: inherit; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.ed-rs-menue button[data-ersatz] { font-weight: 600; }
.ed-rs-menue button:hover:not(:disabled), .ed-rs-menue button:focus-visible { background: #f1eefb; outline: none; }
.ed-rs-menue button:disabled { color: #55556A; cursor: default; }
.ed-rs-menue hr { border: none; border-top: 1px solid #e9e9f0; margin: 5px 0; }

/* Hausmodus der alten Startseite (03.10.2026): nur Freigabeketten und Aufbewahrung */
.st-hausmodus .st-oben, .st-hausmodus .st-nerd, .st-hausmodus #stPlan { display: none; }

/* 03.10.2026 (Ruben): Feedback nur noch als kleines Symbol unten rechts, auf jeder
   Cockpit-Seite und jeder Bildschirmbreite. Die Zeile in der Seitenleiste entfaellt. */
.ck-feedback, html.ck-feedback-leiste .ck-feedback {
  display: inline-flex; width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 50%;
  right: 18px; bottom: 18px; opacity: .92;
}
.ck-feedback:hover { opacity: 1; }
.ck-feedback .ck-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.ck-feedback-zeile { display: none !important; }


/* ══ Vorlage Beteiligte und Leiste, 03.10.2026 (Ruben) ═════════════════════════
   Quelle: claude.ai/artifact/YPicjySvLf8gChH3a8dRZt. Farben und Masse von dort. */
:root {
  --bt-text: #18181f; --bt-text2: #3f3f4a; --bt-leise: #71717f; --bt-blass: #8a8a97;
  --bt-rand: #e7e7ec; --bt-linie: #efeff3; --bt-feld: #e2e2e8; --bt-kopf: #fafafc;
  --bt-violett: #6B1FD1; --bt-violett-d: #6B1FD1; --bt-violett-h: #f3edff;
}

/* Kopf der Akte */
html.vf-akte-an .ck-gruss { align-items: flex-end; }
html.vf-akte-an #vfZurueck {
  display: inline-flex; align-items: center; gap: 4px; height: auto; min-height: 0;
  padding: 0; margin: 0 0 10px; border: 0; background: none; box-shadow: none;
  font-size: 14px; font-weight: 500; color: var(--bt-leise); cursor: pointer;
}
html.vf-akte-an #vfZurueck:hover { color: var(--bt-violett-d); text-decoration: underline; }
html.vf-akte-an #vfZurueck svg { width: 12px; height: 12px; }
html.vf-akte-an .ck-gruss > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.vf-titelzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vf-titelzeile h1 { margin: 0; }
html.vf-akte-an .ck-gruss h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
html.vf-akte-an .ck-gruss p { font-size: 14px; color: var(--bt-leise); margin-top: 6px; }
.vf-titelzeile #vfAkteRolle { font-size: 12px; color: var(--bt-blass); }
.vf-kopf-rechts { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }
html:not(.vf-akte-an) .vf-kopf-rechts { display: none; }

/* Reiter */
#vfReiter .vf-reiter-knopf { display: inline-flex; align-items: center; gap: 6px; }
.bt-zahl {
  font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--bt-violett-d);
  background: var(--bt-violett-h); border-radius: 99px; padding: 1px 7px;
}

/* Karten */
.bt-seite { display: flex; flex-direction: column; gap: 20px; }
.bt-seite > h2.vf-zwischen { display: none; }
.bt-karte { background: #fff; border: 1px solid var(--bt-rand); border-radius: 12px; min-width: 0; }
.bt-kopf {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 20px 22px 16px; flex-wrap: wrap;
}
.bt-kopf h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--bt-text); }
.bt-kopf p { margin: 4px 0 0; font-size: 14px; color: var(--bt-leise); max-width: 620px; text-wrap: pretty; line-height: 1.45; }
.bt-karte .ck-ansage:empty { display: none; }
.bt-karte .ck-ansage { margin: 0 22px 10px; font-size: 14px; color: var(--bt-violett-d); }
.bt-tabkopf {
  padding: 8px 22px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bt-blass); border-top: 1px solid var(--bt-linie); background: var(--bt-kopf);
}
.bt-tabkopf .m { text-align: center; }
.bt-fuss { margin: 0; padding: 10px 22px 14px; font-size: 12px; color: var(--bt-blass); border-top: 1px solid var(--bt-linie); }
.bt-leer { margin: 0; padding: 28px 22px; border-top: 1px solid var(--bt-linie); text-align: center; font-size: 14px; color: var(--bt-blass); }

/* Knoepfe */
.bt-knopf {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--bt-feld); background: #fff; color: var(--bt-text2);
  font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
.bt-knopf:hover { background: #f7f7fa; }
.bt-knopf.primaer { border-color: var(--bt-violett); background: var(--bt-violett); color: #fff; font-weight: 600; }
.bt-knopf.primaer:hover { background: var(--bt-violett-d); }
.bt-knopf.klein { height: 32px; padding: 0 10px; font-size: 12px; }
.bt-knopf.gefahr { border-color: #b42318; background: #b42318; color: #fff; font-weight: 600; }
.bt-knopf:focus-visible, .bt-leise:focus-visible, .bt-haken:focus-visible, .bt-weg:focus-visible,
.bt-verweis:focus-visible, .bt-menue button:focus-visible, .bt-vorschlaege button:focus-visible {
  outline: 2px solid var(--bt-violett); outline-offset: 2px;
}
.bt-pfeil { opacity: .8; }
.bt-leise {
  height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid transparent; background: none;
  font: 500 14px Inter, system-ui, sans-serif; color: var(--bt-leise); cursor: pointer;
}
.bt-leise:hover { color: #A3241B; border-color: #f3d4d1; background: #fff6f5; }
.bt-verweis { border: 0; background: none; padding: 0; font: inherit; color: var(--bt-violett-d); cursor: pointer; }
.bt-verweis:hover { text-decoration: underline; }
.bt-wahl {
  width: 100%; height: 34px; border: 1px solid var(--bt-feld); border-radius: 8px; padding: 0 8px;
  font: 400 14px Inter, system-ui, sans-serif; background: #fff; color: var(--bt-text); cursor: pointer;
}

/* Menue "Person hinzufuegen" */
.bt-menue-halter { position: relative; }
.bt-menue {
  position: absolute; right: 0; top: 42px; width: 290px; background: #fff; border: 1px solid var(--bt-feld);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 20, 40, .12); padding: 6px; z-index: 20;
}
.bt-menue button {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px;
  border-radius: 7px; cursor: pointer; font-family: Inter, system-ui, sans-serif;
}
.bt-menue button:hover { background: #f5f3ff; }
.bt-menue strong { display: block; font-size: 14px; font-weight: 600; color: var(--bt-text); }
.bt-menue span { display: block; font-size: 12px; color: var(--bt-leise); margin-top: 2px; }

/* Mitwirkende */
.bt-mw-raster { display: grid; grid-template-columns: minmax(0, 1fr) 180px 120px; gap: 16px; align-items: center; }
#vfMwListe .vf-mw { list-style: none; margin: 0; padding: 0; }
#vfMwListe .vf-mw > li { padding: 12px 22px; border-top: 1px solid var(--bt-linie); }
#vfMwListe .vf-mw > li.aus { opacity: .6; }
.bt-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bt-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
#vfMwListe .vf-mw-wer { display: flex; flex-direction: column; min-width: 0; }
#vfMwListe .vf-mw-wer strong {
  font-size: 14px; font-weight: 600; color: var(--bt-text); display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
#vfMwListe .vf-mw-wer small { font-size: 12px; color: var(--bt-leise); overflow: hidden; text-overflow: ellipsis; }
#vfMwListe .vf-mw-gast { font-size: 12px; color: #8A4B00; margin-top: 2px; background: none; padding: 0; }
.bt-marke {
  font-style: normal; font-size: 12px; font-weight: 500; color: #55556A; background: #f0f0f4;
  border-radius: 4px; padding: 1px 6px;
}
.bt-marke.extern { color: #8A4B00; background: #fff4e0; }
#vfMwListe .vf-mw-rolle { display: block; background: none; padding: 0; border: 0; color: inherit; }
.bt-rolle-text { display: block; font-size: 14px; font-weight: 500; color: var(--bt-text2); padding: 0 10px; }
#vfMwListe .vf-mw-rolle small { display: block; font-size: 12px; color: var(--bt-blass); margin-top: 4px; padding: 0 10px; }
.bt-aktion { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.bt-hinweis { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--bt-blass); }

/* Nutzergruppen */
.bt-quer { overflow-x: auto; }
.bt-quer-innen { min-width: 560px; }
.bt-gr-raster { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 140px; align-items: center; }
#vfMwGruppen .vf-mit { list-style: none; margin: 0; padding: 0; }
#vfMwGruppen .vf-mit > li { padding: 11px 22px; border-top: 1px solid var(--bt-linie); }
.bt-gr-name span { font-size: 14px; font-weight: 500; color: var(--bt-text); }
.bt-gr-name b {
  font-size: 12px; font-weight: 600; color: #8A4B00; background: #fff4e0; border-radius: 99px; padding: 1px 6px; margin-left: 4px;
}
.bt-gr-name small { display: block; font-size: 12px; color: var(--bt-blass); margin-top: 2px; }
.bt-zelle { display: flex; justify-content: center; }
.bt-haken {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; padding: 0;
  border: 1.5px solid #d4d4dc; background: #fff; color: #fff; cursor: pointer;
}
.bt-haken.an { border-color: var(--bt-violett); background: var(--bt-violett); }
.bt-haken.gesperrt { cursor: not-allowed; }
.bt-haken.gesperrt:not(.an) { background: #f2f2f5; border-color: #e2e2e8; }
.bt-haken.gesperrt.an { opacity: .55; }
.bt-haken:not(.gesperrt):hover { border-color: var(--bt-violett); }

/* Unternehmen */
.bt-suche { display: flex; gap: 8px; padding: 0 22px 16px; flex-wrap: wrap; }
.bt-suche[hidden] { display: none; }
.bt-suchfeld { flex: 1; min-width: 240px; position: relative; }
.bt-suchfeld > svg { position: absolute; left: 12px; top: 11px; color: var(--bt-blass); }
.bt-suchfeld input {
  width: 100%; box-sizing: border-box; height: 38px; border: 1px solid var(--bt-feld); border-radius: 8px;
  padding: 0 12px 0 34px; font: 400 14px Inter, system-ui, sans-serif; color: var(--bt-text); background: #fff;
}
.bt-suchfeld input:focus { outline: 2px solid var(--bt-violett); outline-offset: -1px; border-color: transparent; }
.bt-suche > .bt-knopf { height: 38px; }
.bt-vorschlaege {
  position: absolute; left: 0; right: 0; top: 44px; background: #fff; border: 1px solid var(--bt-feld);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 20, 40, .12); padding: 6px; z-index: 20;
  max-height: 320px; overflow-y: auto;
}
.bt-vorschlaege button {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 0;
  background: none; padding: 9px 12px; border-radius: 7px; cursor: pointer; font: 400 14px Inter, system-ui, sans-serif;
  color: var(--bt-text);
}
.bt-vorschlaege button:hover, .bt-vorschlaege button:focus { background: #f5f3ff; }
.bt-vorschlaege button span { color: var(--bt-blass); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-vorschlaege p { margin: 0; padding: 10px 12px; font-size: 14px; color: var(--bt-blass); }
#vfBeteiligte .vf-bet { list-style: none; margin: 0; padding: 0; }
#vfBeteiligte .vf-bet > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 22px; border-top: 1px solid var(--bt-linie); background: none; border-radius: 0;
}
.bt-bet-text { min-width: 0; }
#vfBeteiligte .vf-bet-wer { display: block; }
#vfBeteiligte .vf-bet-name { font-size: 14px; font-weight: 600; color: var(--bt-text); }
#vfBeteiligte .vf-bet-kontakt { display: block; font-size: 12px; color: var(--bt-leise); }
.bt-stufen { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bt-stufe { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #55556A; }
.bt-stufe i { width: 8px; height: 8px; border-radius: 50%; background: #dcdce3; }
.bt-stufe.fertig { color: #55556A; }
.bt-stufe.fertig i { background: #c4b5fd; }
.bt-stufe.jetzt { color: var(--bt-text); font-weight: 600; }
.bt-stufe.jetzt i { background: var(--bt-violett); }
.bt-strich { width: 18px; height: 1px; background: #dcdce3; }
.bt-bet-aktion { display: flex; gap: 6px; align-items: center; }
.bt-bet-aktion .bt-wahl { width: auto; min-width: 150px; }
.bt-bet-aktion .bt-knopf { height: 34px; }
.bt-weg {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: none;
  color: var(--bt-blass); display: grid; place-items: center; cursor: pointer;
}
.bt-weg:hover { color: #A3241B; background: #fff6f5; }
.bt-nda #ndAkteLeiste { justify-content: flex-end; }

@media (max-width: 760px) {
  .bt-kopf { padding: 16px 16px 12px; }
  .bt-tabkopf.bt-mw-raster { display: none; }
  .bt-mw-raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #vfMwListe .vf-mw > li, #vfMwGruppen .vf-mit > li, #vfBeteiligte .vf-bet > li { padding-left: 16px; padding-right: 16px; }
  .bt-aktion { justify-content: flex-start; }
  #vfBeteiligte .vf-bet > li { grid-template-columns: minmax(0, 1fr); }
  .bt-bet-aktion { flex-wrap: wrap; }
  .bt-suche { padding: 0 16px 14px; }
  .bt-menue { width: min(290px, calc(100vw - 48px)); }
  html.vf-akte-an .ck-gruss h1 { font-size: 24px; }
}

/* Leiste nach der Vorlage: ruhige Eintraege, Neues Verfahren als Knopf, aktives
   Verfahren mit violettem Strich. Die Symbole bleiben fuer die schmale Leiste. */
.ck:not(.schmal) #ckNeuVerfahren {
  height: 38px; border: 1px solid var(--bt-feld); border-radius: 8px; background: #fff; color: var(--bt-text);
  font-weight: 500; margin: 0 0 14px; padding: 0 12px;
}
.ck:not(.schmal) #ckNeuVerfahren:hover { background: #f7f7fa; }
/* 08.10.2026 (Ruben): Verfahren und Vergabe-Nerd zeigen ihr Symbol wie alle anderen Zeilen. */
.ck:not(.schmal) .ck-mehr > svg:first-child { display: none; }
.ck:not(.schmal) .ck-arbeit .ck-zeile, .ck:not(.schmal) .ck-mehr { font-size: 14px; color: var(--bt-text2); border-radius: 8px; }
.ck:not(.schmal) .ck-arbeit .ck-zeile.aktiv { background: var(--bt-violett-h); color: var(--bt-text); }
.ck:not(.schmal) .ck-arbeit .ck-zeile.aktiv a { font-weight: 600; color: var(--bt-text); }
html.ck-in-akte #ckVfUnter .ck-unterzeile.aktiv a {
  padding: 7px 12px 7px 12px; margin-left: 12px; border-left: 2px solid var(--bt-violett); border-radius: 0;
  font-size: 14px; font-weight: 500; color: var(--bt-violett-d); background: none;
}
.ck-fuss .ck-avatar { background: #2a2a35; color: #fff; }
.ck-fuss-marke { font-size: 12px; font-weight: 700; color: var(--bt-violett); background: var(--bt-violett-h); border-radius: 4px; padding: 1px 5px; }

/* Nachbesserung Beteiligte (03.10.2026): die alten Listenregeln .vf-mw li und
   .vf-mit li (Flex, Rahmen, Abstand) duerfen das Raster nicht schlagen. */
#vfMwListe .vf-mw { margin: 0; }
#vfMwListe .vf-mw > li.bt-mw-raster, #vfMwGruppen .vf-mit > li.bt-gr-raster {
  display: grid; flex-wrap: nowrap; margin: 0; border: 0; border-top: 1px solid var(--bt-linie);
  border-radius: 0; background: none; box-shadow: none;
}
#vfMwListe .vf-mw > li.bt-mw-raster { padding: 12px 22px; gap: 16px; }
#vfMwGruppen .vf-mit > li.bt-gr-raster { padding: 11px 22px; gap: 0; }
#vfMwListe .vf-mw-wer { flex: none; }
#vfMwListe .vf-mw-rolle { flex: none; border-radius: 0; font-size: inherit; }
#vfMwGruppen .vf-mit em { margin: 0; }
html.ck-in-akte #ckVfUnter .ck-unterzeile.aktiv { background: none; }
html.ck-in-akte #ckVfZweig > .ck-zeile { background: var(--bt-violett-h); }
html.ck-in-akte #ckVfZweig > .ck-zeile a { color: var(--bt-text); font-weight: 600; }
@media (max-width: 760px) {
  #vfMwListe .vf-mw > li.bt-mw-raster { padding: 12px 16px; gap: 10px; }
  #vfMwGruppen .vf-mit > li.bt-gr-raster { padding: 11px 16px; }
}

/* Matrix am Telefon (03.10.2026): schmale Spalten statt seitlichem Scrollen. */
@media (max-width: 560px) {
  .bt-quer-innen { min-width: 0; }
  .bt-gr-raster { grid-template-columns: minmax(0, 1fr) 54px 70px 64px; }
  .bt-tabkopf.bt-gr-raster { font-size: 12px; letter-spacing: .02em; padding-left: 16px; padding-right: 16px; }
  .bt-tabkopf.bt-gr-raster .m { white-space: normal; line-height: 1.2; }
}


/* ══ Vorlage Uebersicht 03.10.2026 (Ruben), dazu Mitarbeit live ══════════════
   Quelle: claude.ai/artifact/BZGGo5m93JrXtmkuTYQkwR. */
.ue-trenner { margin: 0 8px; color: #b4b4bf; }
html.vf-akte-an .ck-gruss p strong { color: var(--bt-text); font-weight: 600; }
.ue-da { display: flex; align-items: center; margin-right: 6px; }
.ue-da[hidden] { display: none; }
.ue-kopf-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-size: 12px; font-weight: 600; border: 2px solid #fff; margin-left: -6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.ue-kopf-avatar.mehr { background: #52525e; }
html.vf-akte-an .vf-kopf-rechts { align-items: center; }

/* Phasenkarte */
#vfStrecke.vf-strecke { background: #fff; border: 1px solid var(--bt-rand); border-radius: 12px; overflow: hidden; padding: 0; margin-top: 0; }
.ue-phasen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--bt-linie); }
.ue-phasen > li.vf-ph { padding: 16px 22px; border-right: 1px solid var(--bt-linie); border-top: 0; margin: 0; background: none; display: block; }
.ue-phasen > li.vf-ph:last-child { border-right: 0; }
.ue-phasen > li.vf-ph::before, .ue-phasen > li.vf-ph::after { display: none; }
.ue-ph-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ue-phasen .vf-ph-name { font-size: 14px; font-weight: 600; color: var(--bt-text); display: flex; align-items: center; gap: 8px; }
.ue-phasen .vf-ph-name i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ue-phasen .vf-ph-zahl { font-size: 12px; color: var(--bt-leise); }
.ue-balken { height: 4px; background: var(--bt-linie); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.ue-balken b { display: block; height: 100%; border-radius: 99px; }
.ue-unten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ue-weiter { padding: 22px; border-right: 1px solid var(--bt-linie); }
.ue-als { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bt-violett); }
.ue-weiter h3 { margin: 8px 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--bt-text); }
.ue-weiter p { margin: 0; font-size: 14px; color: #55556A; line-height: 1.5; max-width: 440px; text-wrap: pretty; }
.ue-knoepfe { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.bt-knopf.gross { height: 38px; padding: 0 16px; font-size: 14px; text-decoration: none; }
a.bt-knopf.primaer:hover { color: #fff; text-decoration: none; }
.ue-danach { padding: 14px 10px; }
.ue-danach-titel { font-size: 12px; color: var(--bt-leise); padding: 6px 12px 8px; }
#vfStrecke .vf-offen { list-style: none; margin: 0; padding: 0; }
#vfStrecke .vf-offen li { margin: 0; padding: 0; border: 0; }
#vfStrecke .vf-offen button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-family: Inter, system-ui, sans-serif;
}
#vfStrecke .vf-offen button:hover { background: #f7f7fa; }
.ue-kreis { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #d4d4dc; }
.ue-schritt { flex: 1; min-width: 0; }
.ue-schritt strong { display: block; font-size: 14px; font-weight: 500; color: var(--bt-text); }
.ue-schritt small { display: block; font-size: 12px; color: var(--bt-blass); margin-top: 1px; }
#vfStrecke .vf-offen em { font-style: normal; font-size: 12px; color: var(--bt-leise); background: #f2f2f5; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }

/* Raster darunter */
#vfRaster.ue-raster { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; align-items: flex-start; }
.ue-links { display: flex; flex-direction: column; gap: 20px; min-width: 0; flex: 999 1 520px; }
.ue-form { display: flex; flex-direction: column; gap: 20px; }
#vfRaster.ue-raster > #vfRechts { flex: 1 1 300px; min-width: 0; background: none; border: 0; padding: 0; box-shadow: none; }
.ue-rechts { display: flex; flex-direction: column; gap: 20px; }
.ue-karte { padding: 22px; }
.ue-karte.klein { padding: 20px; }
.ue-karte.ue-wz { padding: 20px 10px 10px; }
.ue-karte h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--bt-text); }
.ue-karte.klein h2 { font-size: 16px; }
.ue-karte.ue-wz h2 { margin: 0 10px 8px; }
.ue-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ue-leise { font-size: 12px; color: var(--bt-blass); }
.ue-stand { font-size: 12px; color: var(--bt-blass); }
.ue-stand.fehler { color: #A3241B; }
.ue-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 18px; }
.ue-felder .ue-voll { grid-column: 1 / -1; }
.ue-felder .vf-feld { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ue-felder .vf-feld > span:first-child { font-size: 14px; font-weight: 500; color: var(--bt-text2); display: flex; align-items: center; gap: 8px; }
.ue-felder .vf-feld > span small { font-weight: 400; color: var(--bt-blass); }
.ue-felder input, .ue-felder select, .ue-felder textarea {
  height: 40px; border: 1px solid var(--bt-feld); border-radius: 8px; padding: 0 12px; font: 400 14px Inter, system-ui, sans-serif;
  color: var(--bt-text); background: #fff; box-sizing: border-box; width: 100%;
}
.ue-felder select { padding: 0 10px; }
.ue-felder textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ue-felder input:focus, .ue-felder select:focus, .ue-felder textarea:focus,
.ue-zeit input:focus { outline: 2px solid var(--bt-violett); outline-offset: -1px; border-color: transparent; }
.ue-wert { display: flex; max-width: 320px; }
.ue-wert input { border-right: 0; border-radius: 8px 0 0 8px; text-align: right; }
.ue-wert > span { height: 40px; box-sizing: border-box; display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--bt-feld);
  border-radius: 0 8px 8px 0; background: var(--bt-kopf); font-size: 14px; color: var(--bt-leise); }
.ue-intern textarea { border-style: dashed; border-color: #d4d4dc; background: #fcfcfd; }

/* Termine als Zeitleiste */
.ue-warn { display: flex; flex-direction: column; gap: 6px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 10px 14px; margin: -4px 0 12px; }
.ue-warn[hidden] { display: none; }
.ue-warn div { font-size: 14px; color: #A3241B; }
.ue-warn div::before { content: '!'; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px;
  border-radius: 50%; background: #ea580c; color: #fff; font-size: 12px; font-weight: 700; }
.ue-zeit { display: flex; flex-direction: column; }
.ue-zeit .ue-termin {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(200px, 230px); column-gap: 14px;
  align-items: start; padding: 4px 0 18px; margin: 0;
}
.ue-zeit .ue-termin:not(:last-child)::after {
  content: ''; position: absolute; left: 9px; top: 30px; bottom: 0; width: 2px; background: #ececf0;
}
.ue-punkt { grid-column: 1; grid-row: 1; width: 12px; height: 12px; border-radius: 50%; margin: 14px auto 0; box-sizing: border-box;
  background: #fff; border: 2px solid var(--bt-violett); position: relative; z-index: 1; }
.ue-termin.vorbei .ue-punkt { background: var(--bt-violett); }
.ue-termin.schief .ue-punkt { border-color: #ea580c; }
.ue-termin.schief input { border-color: #fdba74; }
.ue-termin-text { grid-column: 2; grid-row: 1; padding-top: 6px; min-width: 0; }
.ue-termin-text > span { display: block; font-size: 14px; font-weight: 600; color: var(--bt-text); }
.ue-termin-text small { display: block; font-size: 12px; color: var(--bt-blass); margin-top: 2px; }
.ue-zeit input { grid-column: 3; grid-row: 1 / span 2; height: 40px; border: 1px solid var(--bt-feld); border-radius: 8px; padding: 0 10px;
  font: 400 14px Inter, system-ui, sans-serif; color: var(--bt-text); background: #fff; width: 100%; box-sizing: border-box; }
.ue-zeit .vf-hinweis { grid-column: 2; grid-row: 2; font-style: normal; font-size: 12px; color: var(--bt-blass); margin: 2px 0 0; }

/* Rechte Spalte */
.ue-leer { margin: 12px 0 0; border: 1px dashed #dcdce3; border-radius: 8px; padding: 18px; text-align: center;
  font-size: 14px; color: var(--bt-leise); line-height: 1.5; }
.ue-breit { width: 100%; justify-content: center; margin-top: 10px; }
.ue-rechts #vfErgebnisse { margin-top: 10px; }
.ue-wz-gruppe { padding: 8px 0 4px; }
.ue-wz-phase { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bt-blass); padding: 0 10px 4px; }
.ue-wz-phase i { width: 6px; height: 6px; border-radius: 50%; }
.ue-wz #vfWerkzeuge { display: block; }
.ue-wz .vf-werkzeug {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 7px;
  font: 400 14px Inter, system-ui, sans-serif; color: var(--bt-text); background: none; border: 0; box-shadow: none; margin: 0;
  text-align: left; cursor: pointer; min-height: 0;
}
.ue-wz .vf-werkzeug:hover { background: #f5f3ff; color: #6B1FD1; text-decoration: none; }
.ue-wz .vf-werkzeug span { flex: 1; }
.ue-wz .vf-werkzeug em { font-style: normal; font-size: 12px; font-weight: 600; color: #12715B; background: #e3f3ea; border-radius: 99px; padding: 1px 7px; }
.ue-wz .vf-werkzeug b { color: #b4b4bf; font-weight: 400; }

/* Mitarbeit live: Feld, in dem jemand anderes steht */
.ue-fremd input, .ue-fremd select, .ue-fremd textarea { outline: 2px solid var(--ue-farbe); outline-offset: -1px; border-color: transparent; }
.ue-wer {
  position: absolute; right: 8px; top: -2px; z-index: 2; padding: 2px 8px; border-radius: 99px; background: var(--ue-farbe);
  color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.ue-zeit .ue-wer { top: -6px; }
.ue-neu input, .ue-neu select, .ue-neu textarea { background: #f5f3ff; transition: background 1.2s; }

@media (max-width: 760px) {
  .ue-phasen { grid-template-columns: minmax(0, 1fr); }
  .ue-phasen > li.vf-ph { border-right: 0; border-bottom: 1px solid var(--bt-linie); padding: 12px 16px; }
  .ue-weiter { border-right: 0; border-bottom: 1px solid var(--bt-linie); padding: 18px 16px; }
  .ue-karte { padding: 18px 16px; }
  .ue-zeit .ue-termin { grid-template-columns: 20px minmax(0, 1fr); }
  .ue-zeit input { grid-column: 2; grid-row: auto; margin-top: 8px; }
  .ue-zeit .vf-hinweis { grid-row: auto; }
}

/* Suche in der Leiste (03.10.2026, nach dem Vorbild ChatGPT) */
.ck-such-blatt {
  position: fixed; inset: 0; z-index: 2000; background: rgba(20, 20, 30, .18);
  display: flex; align-items: flex-start; justify-content: center; padding: 18vh 16px 16px;
}
.ck-such-kasten {
  width: min(646px, 100%); max-height: 64vh; display: flex; flex-direction: column; background: #fff;
  border-radius: 16px; border: 1px solid #e7e7ec; box-shadow: 0 24px 64px rgba(20, 20, 40, .18); overflow: hidden;
}
.ck-such-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; border-bottom: 1px solid #efeff3; color: #55556A; }
.ck-such-kopf input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px Inter, system-ui, sans-serif; color: #17171F; padding: 6px 0;
}
.ck-such-kopf input::-webkit-search-cancel-button { display: none; }
.ck-such-zu { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: #55556A; display: grid; place-items: center; cursor: pointer; }
.ck-such-zu:hover { background: #f2f2f5; }
.ck-such-liste { overflow-y: auto; padding: 8px 10px 14px; }
.ck-such-gruppe { font-size: 12px; color: #55556A; padding: 10px 12px 6px; }
.ck-such-treffer {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #17171F; text-decoration: none;
}
.ck-such-treffer svg { flex-shrink: 0; margin-top: 1px; color: #55556A; }
.ck-such-treffer:hover, .ck-such-treffer:focus { background: #f5f3ff; outline: none; text-decoration: none; color: #17171F; }
.ck-such-text { min-width: 0; display: flex; flex-direction: column; }
.ck-such-text span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-such-text small { font-size: 12px; color: #55556A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.ck-such-leer { margin: 0; padding: 18px 12px; font-size: 14px; color: #55556A; }
.ck-mehr-chats button {
  border: 0; background: none; padding: 6px 12px; width: 100%; text-align: left; cursor: pointer;
  font: 500 14px Inter, system-ui, sans-serif; color: #55556A;
}
.ck-mehr-chats button:hover { color: #6B1FD1; }
@media (max-width: 560px) { .ck-such-blatt { padding-top: 10vh; } .ck-such-kasten { max-height: 80vh; } }


/* Ablage fuer Dateien (03.10.2026): Drag & Drop an jedem Upload */
.ck-ablage {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 92px;
  border: 1.5px dashed #d4d4dc; border-radius: 10px; background: #fafafc; padding: 16px; text-align: center;
  transition: border-color .15s, background .15s;
}
.ck-ablage input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ck-ablage-text { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #55556A; pointer-events: none; text-align: left; }
.ck-ablage-text svg { color: #6B1FD1; flex-shrink: 0; }
.ck-ablage-text strong { color: #17171F; font-weight: 600; }
.ck-ablage-text u { color: #6B1FD1; }
.ck-ablage-name { display: block; margin-top: 4px; font-size: 12px; color: #6B1FD1; font-weight: 600; word-break: break-all; }
.ck-ablage.gewaehlt { border-style: solid; border-color: #c4b5fd; background: #f8f5ff; }
.ck-ablage:focus-within { outline: 2px solid #6B1FD1; outline-offset: 2px; }
html.ck-zieht-datei .ck-ablage, html.ck-zieht-datei .ck-ablage-ziel { outline: 2px dashed #a78bfa; outline-offset: 2px; }
.ck-ablage.ck-ablage-ueber, .ck-ablage-ziel.ck-ablage-ueber { outline: 2px solid #6B1FD1 !important; background: #f5f3ff; }
html.ck-zieht-datei .ak-knoten { outline: 0; }

/* Unterlagen: Hochladen am Ordner */
.ak-ord-zeile { position: relative; display: flex; align-items: center; }
.ak-ord-zeile .ak-ord { flex: 1; min-width: 0; }
.ak-ord-hoch {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; border: 0; background: none; color: #55556A;
  display: grid; place-items: center; cursor: pointer; opacity: 0; margin-right: 4px;
}
.ak-ord-zeile:hover .ak-ord-hoch, .ak-ord-hoch:focus-visible { opacity: 1; }
.ak-ord-hoch:hover { background: #f3edff; color: #6B1FD1; }
.ak-knoten.datei-ziel { outline: 2px solid #6B1FD1; outline-offset: -2px; border-radius: 8px; background: #f8f5ff; }
@media (hover: none) { .ak-ord-hoch { opacity: 1; } }

/* Neues Verfahren aus einer Unterlage */
.vf-aus-unterlage { margin: 0 0 18px; }
.vf-aus-unterlage > p { margin: 0 0 8px; font-size: 14px; color: #55556A; }
.vf-aus-ergebnis { margin-top: 10px; font-size: 14px; color: #17171F; }
.vf-aus-ergebnis ul { margin: 6px 0 0; padding-left: 18px; }
.vf-aus-ergebnis li { margin: 3px 0; }
.vf-aus-ergebnis q { color: #55556A; font-size: 12px; }
.vf-aus-ergebnis.fehler { color: #A3241B; }

/* ══ Protokoll im Design der Vorlage (03.10.2026) ═══════════════════════════ */
.pa-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-knopf {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid #e2e2e8; background: #fff; font: 500 14px Inter, system-ui, sans-serif; color: #17171F; cursor: pointer; white-space: nowrap;
}
.pa-knopf:hover { background: #f7f7fa; }
.pa-knopf.klein { height: 32px; font-size: 12px; }
.pa-knopf.export { border-color: #6B1FD1; background: #6B1FD1; color: #fff; font-weight: 600; }
.pa-knopf.export:hover { background: #6B1FD1; }
.pa-knopf:disabled { opacity: .6; cursor: progress; }
.pa-punkt { width: 8px; height: 8px; border-radius: 50%; background: #c4c4cc; }
[data-live].an .pa-punkt { background: #16a34a; }
.pa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 22px; }
.pa-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px;
  font-family: Inter, system-ui, sans-serif; background: #fff; border: 1px solid #e7e7ec; cursor: pointer;
}
.pa-kpi:disabled { cursor: default; color: inherit; }
.pa-kpi:not(:disabled):hover { border-color: #c4b5fd; }
.pa-kpi.an { background: #f8f5ff; border-color: #c4b5fd; }
.pa-kpi.fehler.an { background: #fff5f4; border-color: #f4b4ad; }
.pa-kpi-name { font-size: 12px; font-weight: 500; color: #55556A; }
.pa-kpi-wert { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #17171F; }
.pa-kpi.fehler .pa-kpi-name, .pa-kpi.fehler .pa-kpi-wert { color: #A3241B; }
.pa-kpi-zusatz { font-size: 12px; color: #55556A; min-height: 15px; }
.pa-karte { background: #fff; border: 1px solid #e7e7ec; border-radius: 12px; margin-top: 20px; overflow: hidden; }
.pa-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid #efeff3; }
.pa-arten { display: flex; gap: 2px; background: #f2f2f5; border-radius: 8px; padding: 3px; flex-wrap: wrap; }
.pa-art {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  font: 500 14px Inter, system-ui, sans-serif; color: #55556A; cursor: pointer;
}
.pa-art span { font-size: 12px; color: #55556A; }
.pa-art.fehler span { color: #A3241B; }
.pa-art.an { background: #fff; color: #17171F; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pa-wahl { height: 36px; border: 1px solid #e2e2e8; border-radius: 8px; padding: 0 10px; font: 400 14px Inter, system-ui, sans-serif; color: #17171F; background: #fff; }
.pa-suche { flex: 1; min-width: 220px; position: relative; }
.pa-suche svg { position: absolute; left: 11px; top: 11px; color: #55556A; }
.pa-suche input {
  width: 100%; box-sizing: border-box; height: 36px; border: 1px solid #e2e2e8; border-radius: 8px; padding: 0 12px 0 32px;
  font: 400 14px Inter, system-ui, sans-serif; color: #17171F; background: #fff;
}
.pa-suche input:focus, .pa-wahl:focus { outline: 2px solid #6B1FD1; outline-offset: -1px; }
.pa-zurueck { height: 36px; padding: 0 10px; border: 0; background: none; font: 500 14px Inter, system-ui, sans-serif; color: #6B1FD1; cursor: pointer; }
.pa-zurueck[hidden] { display: none; }
.pa-quer { overflow-x: auto; }
.pa-quer-innen { min-width: 860px; }
.pa-raster { display: grid; grid-template-columns: 72px minmax(150px, 1fr) minmax(130px, .8fr) minmax(240px, 2fr) 64px 24px; gap: 16px; }
.pa-kopf { padding: 9px 16px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #55556A;
  background: #fafafc; border-bottom: 1px solid #efeff3; }
.pa-kopf .r { text-align: right; }
.pa-tag { padding: 10px 16px 6px; font-size: 12px; font-weight: 600; color: #55556A; background: #fff; border-bottom: 1px solid #f3f3f6;
  display: flex; gap: 8px; position: sticky; top: 0; z-index: 1; }
.pa-tag span { font-weight: 400; color: #55556A; }
.pa-eintrag { border-bottom: 1px solid #f1f1f4; background: #fff; }
.pa-eintrag.fehler { background: #fffafa; }
.pa-eintrag.offen { background: #fcfcfd; }
.pa-zeile { align-items: start; padding: 11px 16px; cursor: pointer; }
.pa-eintrag.fehler .pa-zeile { box-shadow: inset 3px 0 0 #dc2626; }
.pa-zeile:hover { background: #fafafc; }
.pa-zeile:focus-visible { outline: 2px solid #6B1FD1; outline-offset: -2px; }
.pa-zeit { font-size: 14px; color: #55556A; font-variant-numeric: tabular-nums; padding-top: 1px; }
.pa-vorgang { min-width: 0; }
.pa-vorgang > div { display: flex; align-items: center; gap: 8px; }
.pa-vorgang strong { font-size: 14px; font-weight: 600; color: #17171F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-vorgang code { display: block; font: 400 12px 'JetBrains Mono', ui-monospace, monospace; color: #55556A; margin-top: 3px; background: none; padding: 0; }
.pa-tag-marke { font-size: 12px; font-weight: 700; letter-spacing: .04em; border-radius: 4px; padding: 2px 6px; flex-shrink: 0; }
.pa-konto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pa-konto i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; font-style: normal; }
.pa-konto span { min-width: 0; }
.pa-konto b { display: block; font-size: 14px; font-weight: 500; color: #17171F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-konto small { display: block; font-size: 12px; color: #55556A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-was { min-width: 0; font-size: 14px; color: #17171F; line-height: 1.45; }
.pa-was .rot { color: #A3241B; }
.pa-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.pa-chip { font-size: 12px; color: #55556A; background: #f2f2f5; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.pa-dauer { font-size: 12px; color: #55556A; text-align: right; font-variant-numeric: tabular-nums; padding-top: 2px; }
.pa-dauer.lang { color: #8A4B00; }
.pa-pfeil { font-size: 12px; color: #55556A; padding-top: 2px; text-align: center; }
.pa-details { padding: 0 16px 14px 104px; max-width: 900px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.pa-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #55556A; }
.pa-meta strong { color: #17171F; font-weight: 500; }
.pa-details pre { margin: 0; background: #f7f7fa; border: 1px solid #ececf0; border-radius: 8px; padding: 12px 14px;
  font: 400 12px/1.6 'JetBrains Mono', ui-monospace, monospace; color: #17171F; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.pa-leer { padding: 48px 16px; text-align: center; font-size: 14px; color: #55556A; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.pa-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: 12px; color: #55556A; flex-wrap: wrap; }
.pa-fuss [hidden] { display: none; }
.pa-akte-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pa-akte-kopf h2 { margin: 0; font-size: 20px; font-weight: 600; color: #17171F; }
.pa-akte-kopf p { margin: 4px 0 0; font-size: 14px; color: #55556A; }
.pa-akte .pa-kpis { margin-top: 16px; }
@media (max-width: 760px) {
  .pa-details { padding-left: 16px; }
  .pa-knoepfe { width: 100%; }
}
/* Protokoll: Zeitraum und Suche neben den Arten (style.css zieht Auswahllisten auf volle Breite) */
.pa-leiste .pa-wahl { width: auto !important; flex: 0 0 auto; min-width: 150px; margin: 0; }
.pa-leiste .pa-suche { flex: 1 1 240px; }
.pa-leiste .pa-suche input { margin: 0; }

/* 06.10.2026 (Ruben): Konto und Rechtszeile sitzen am unteren Bildschirmrand.
   Vorher blieben 32 px Innenabstand unter der Rechtszeile. */
.ck-leiste { padding-bottom: 8px; }
.ck-recht { margin-top: 4px; padding-top: 6px; }


/* ══ UX-Runde 06.10.2026 ═══════════════════════════════════════════════════
   Aus der Bewertung mit zwei unabhaengigen Blickwinkeln (Design-Review und
   Detektor). Steht am Ende, weil es frueheres gezielt ueberschreibt. */

/* P0: Frist vorbei, Verfahren noch offen. Orange wie im Farbsystem vorgesehen. */
.vf-ampel.ab.offen { background: var(--st-acht-punkt); border: 0; box-shadow: 0 0 0 3px var(--st-acht-grund); }
.vf-t td:has(> .vf-ampel.ab.offen) { color: var(--st-acht-text); font-weight: 600; }
.vf-t td:has(> .vf-ampel.ab.offen) .vf-rest { color: inherit; font-weight: 600; }
.vf-frist-ab { color: var(--st-acht-text); font-weight: 600; }

/* Aktenzeichen bricht nicht mitten im Zeichen um. */
.vf-t td.vf-art { white-space: nowrap; letter-spacing: 0; }

/* Leistenkopf: Die Zahl an der Glocke lag auf dem Schriftzug. */
/* Ursache war min-width: 0 an Marke und Schriftzug: Der Text liess sich schmaler
   druecken als "Vergabe-" und lief unter die Glocke. Jetzt nie schmaler als das
   laengste Wort, die Knoepfe ruecken dafuer enger. */
.ck-leiste-kopf { gap: 4px; }
.ck-leiste-kopf a.ck-marke { flex: 0 1 auto; min-width: auto; gap: 7px; padding-left: 4px; }
.ck-leiste-kopf .ck-markentext { min-width: auto; font-size: 14px; }
.ck-leiste-kopf .ck-glocke { margin-left: auto; margin-right: 0; flex: 0 0 auto; }
.ck-leiste-kopf .ck-klapp { width: 30px; height: 30px; }
.ck-glocke em { top: -3px; right: -4px; box-shadow: 0 0 0 2px var(--ck-flaeche, #fff); }

/* Neue Leistengruppe "Nachschlagen": neutral, keine Phase. */
.ck-block[data-gruppe='nachschlagen'] > .ck-block-titel { color: var(--st-neutral-text); }
.ck-block[data-gruppe='nachschlagen'] > .ck-block-titel::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; background: #9a9cb4; }

/* Ein Hauptknopf fuer das ganze Cockpit: flaches Markenviolett. Der Verlauf bleibt
   der Marke vorbehalten. Vorher war es mal Verlauf, mal ein anderes Violett. */
.ck, .ck-blatt { --ck-primaer: #6B1FD1; --ck-primaer-tief: #4E129E; }
html body :is(.kc-knopf.betont, .ck-tm-knopf.betont:not(.rot), .bt-knopf.primaer, .mk-editor-knopf.betont,
              .ab-knopf.primaer, .da-k.betont, .ft-knopf.primaer, .pa-knopf.export) {
  background: var(--ck-primaer, #6B1FD1); border-color: var(--ck-primaer, #6B1FD1); color: #fff; filter: none;
}
html body :is(.kc-knopf.betont, .ck-tm-knopf.betont:not(.rot), .bt-knopf.primaer, .mk-editor-knopf.betont,
              .ab-knopf.primaer, .da-k.betont, .ft-knopf.primaer, .pa-knopf.export):not(:disabled):hover {
  background: var(--ck-primaer-tief, #4E129E); border-color: var(--ck-primaer-tief, #4E129E); color: #fff; filter: none;
}
/* Gesperrt sieht gesperrt aus und reagiert nicht auf Hover (vorher Weiss auf Flieder, 1,2 : 1). */
html body :is(.kc-knopf, .ck-tm-knopf, .bt-knopf, .ab-knopf, .da-k, .ft-knopf):disabled,
html body :is(.kc-knopf, .ck-tm-knopf, .bt-knopf, .ab-knopf, .da-k, .ft-knopf):disabled:hover {
  background: #eeedf4; border-color: #e1dfea; color: #55556A; filter: none; cursor: not-allowed;
}

/* Kontrast: die blassen Grautoene fuer echte Angaben auf mindestens 4,5 : 1. */
.ck, .ck-blatt, :root { --bt-blass: #686876; --bt-leise: #5b5b69; }
.ck-such-text small, .ck-such-leer, .ck-such-gruppe { color: #55556A; }
.ck-unterzeile.fragt .ck-ja:hover { background: #c62828; border-color: #c62828; color: #fff; }

/* Fokus: ueberall ein sichtbarer Ring. Mehrere Bauteile hatten outline: none mit
   einer Toenung von 12 %, die man nicht sieht. Eingabefelder behalten ihren Rahmen. */
.ck :is(a, button, summary, [role='tab'], [tabindex]:not([tabindex='-1'])):focus-visible,
.ck-blatt :is(a, button, summary, [role='tab']):focus-visible {
  outline: 2px solid var(--ck-violett, #6B1FD1) !important; outline-offset: 2px;
}

/* Einheitliche Umschalter (Segmente) auch auf der Vorlagenseite. */
.dv-oben:not([hidden]) { display: inline-flex; gap: 2px; background: #ebebef; border-radius: 8px; padding: 3px; margin-bottom: 14px; }
.dv-oben .ed-chip { border: 0; background: none; height: 30px; padding: 0 12px; border-radius: 6px;
  font: 500 14px Inter, system-ui, sans-serif; color: #55556A; box-shadow: none; }
.dv-oben .ed-chip.aktiv { background: #fff; color: #17171F; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* Ein Leerstand fuer alle Seiten: gestrichelte Karte, Titel, ein Satz, ein Knopf. */
html body :is(.ck-leerstand, .af-leer, .ab-leer, .nx-leer, .ft-leer) {
  background: #fff; border: 1px dashed #d4d4e2; border-radius: 12px; padding: 36px 24px;
  text-align: center; color: #55556A; font-size: 14px; line-height: 1.6;
}
html body :is(.ck-leerstand, .af-leer) h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650;
  letter-spacing: 0; color: var(--ck-titel, #17172b); }
html body :is(.ck-leerstand, .af-leer) p { margin: 0 auto 14px; max-width: 520px; color: #55556A; font-size: 14px; }

/* Der schwebende Knopf bleibt (Ruben), verdeckt aber am Seitenende nichts mehr. */
.ck-haupt:not(.nd) { padding-bottom: 104px; }

/* Telefon */
@media (max-width: 900px) {
  /* Der Schatten der eingeklappten Leiste lag als grauer Streifen am linken Rand. */
  .ck-leiste { box-shadow: none; }
  .ck-leiste.offen { box-shadow: 0 0 40px rgba(15, 15, 30, .22); }
  /* Die Menueleiste im Nerd lief rechts aus dem Bild. */
  .ck-haupt.nd .ck-leiste-knopf { box-sizing: border-box; width: calc(100% - 32px); margin: 14px 16px 0; }
}

/* Reiter der Akte: Verlauf am Rand, wenn es weitergeht. */
#vfReiter.mehr-rechts { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
#vfReiter.mehr-links.mehr-rechts { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
#vfReiter.mehr-links:not(.mehr-rechts) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
  mask-image: linear-gradient(90deg, transparent, #000 40px); }

/* Fristenrechner: Wochenendhinweis ruhig, keine Warnfarbe. */
.ft-notiz.ft-notiz-ruhig { background: var(--st-neutral-grund); color: var(--st-neutral-text);
  border-color: var(--st-neutral-rand); }

/* Seitenkopf: Text und Knoepfe in einer Zeile, der Untertitel bricht in sich um,
   statt die Knoepfe unter sich zu schieben (Direktauftraege, Analysen). */
@media (min-width: 761px) {
  .ck-gruss { flex-wrap: nowrap; }
  .ck-gruss > div:first-child { flex: 1 1 auto; min-width: 0; }
  .ck-gruss > div:first-child p { max-width: 76ch; }
  .ck-gruss > :not(:first-child) { flex: 0 0 auto; }
}

/* Filterbeschriftungen der Aufgaben wirkten gesperrt (Ruben-Testkonto, 06.10.2026). */
.au-filter { color: var(--ck-text, #2e2e45); }
.au-filter > label:not(.au-haken) { font-weight: 600; }
.au-filter label { color: var(--ck-text, #2e2e45); }

/* 06.10.2026: Der Benachrichtigungskasten haengt direkt am body, also ausserhalb von .ck.
   Auf den Produktseiten (?cockpit=1) fehlten ihm deshalb alle --ck-Farben: durchsichtig,
   blasse Schrift. Er bekommt die Werte selbst. Kein Seitenstreifen fuer Neues. */
.ck-ben-kasten {
  --ck-flaeche: #ffffff; --ck-grund: #eef0f5; --ck-rand: #e4e4ee; --ck-linie: #e9e9f0;
  --ck-titel: #0f0f1e; --ck-kartentitel: #242438; --ck-text: #505050; --ck-gedaempft: #63638c;
  --ck-violett: #6B1FD1;
  background: #ffffff; color: #55556A; font-family: Inter, system-ui, sans-serif; line-height: 1.4;
  text-align: left;
}
.ck-ben-kasten * { box-sizing: border-box; }
.ck-ben { border-left: 0; }
.ck-ben.neu { background: rgba(107, 31, 209, .06); }
.ck-ben.neu strong::before { content: ; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0;
  border-radius: 50%; background: var(--ck-violett); vertical-align: middle; }
.ck-ben-mail input[type=checkbox] { width: 15px; height: 15px; accent-color: #6B1FD1; }

/* 06.10.2026: Die Leiste rollt zum aktiven Werkzeug. Der Kopf mit Glocke, Suche und
   Klappknopf darf dabei nicht mitrollen, sonst oeffnet die Glocke ihren Kasten
   ausserhalb des Bildes. */
.ck-leiste-kopf { position: sticky; top: -20px; z-index: 4; background: var(--ck-flaeche, #fff);
  margin-top: -20px; padding: 20px 0 8px; }

/* Spracheingabe im Nerd (06.10.2026). Waehrend der Aufnahme rot mit Stopp-Symbol. */
.nd-rund.nd-mikro.nimmt { background: var(--st-fehler-grund, #fde7e5); color: var(--st-fehler-text, #b42318);
  border-color: var(--st-fehler-rand, #f5bdb6); }
.nd-rund.nd-mikro.arbeitet { opacity: .6; cursor: progress; }
.nd-sprache-meldung { font-size: 12px; color: var(--ck-gedaempft, #63638c); align-self: center;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-sprache-meldung:empty { display: none; }

/* Bedarfsklaerung: Fragen ohne KI-Vorschlag (RDG, 06.10.2026). */
.bd-ohne-ki { align-self: center; font-size: 12px; color: var(--ck-gedaempft, #63638c); }

/* Leiste neu (06.10.2026): Gruppenkopf als Klappknopf, Organisation neutral. */
.ck-block-titel .ck-block-knopf { all: unset; box-sizing: border-box; display: flex; align-items: center;
  gap: 6px; width: 100%; cursor: pointer; padding: 4px 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; }
.ck-block-titel .ck-block-knopf svg { margin-left: auto; margin-right: 8px; transition: transform .15s ease; }
.ck-block.zu .ck-block-titel .ck-block-knopf svg { transform: rotate(-90deg); }
.ck-block-titel .ck-block-knopf:hover { color: var(--ck-titel, #0f0f1e); }
.ck-block.zu > .ck-block-liste { display: none; }
.ck.schmal .ck-block.zu > .ck-block-liste { display: flex; }
.ck-block[data-gruppe='organisation'] > .ck-block-titel { color: var(--st-neutral-text, #4b4e6b); }
.ck-block[data-gruppe='organisation'] > .ck-block-titel::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; background: #4b4e6b; }

/* Bedarfsklaerung, Uebersicht (06.10.2026) */
.bdu-leiste { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 14px; }
.bdu-seg { margin-bottom: 0 !important; }
.bdu-seg .ed-chip b { font-weight: 600; margin-left: 4px; color: var(--ck-gedaempft, #63638c); }
.bdu-suche { flex: 1 1 260px; }
.bdu-suche input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px; border: 1px solid var(--ck-rand, #e4e4ee);
  border-radius: 9px; background: #fff; font: inherit; font-size: 14px; }
.bdu-rahmen { background: #fff; border: 1px solid var(--ck-rand, #e4e4ee); border-radius: 12px; overflow-x: auto; }
.bdu-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.bdu-tabelle th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ck-gedaempft, #63638c); padding: 12px 14px; border-bottom: 1px solid var(--ck-linie, #e9e9f0); white-space: nowrap; }
.bdu-tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--ck-linie, #e9e9f0); vertical-align: middle; }
.bdu-tabelle tr:last-child td { border-bottom: 0; }
.bdu-titel { font-weight: 600; color: var(--ck-titel, #0f0f1e); text-decoration: none; }
.bdu-titel:hover { color: var(--ck-violett, #6B1FD1); }
.bdu-az { display: block; font-size: 12px; color: var(--ck-gedaempft, #63638c); white-space: nowrap; margin-top: 2px; }
.bdu-balken { width: 160px; max-width: 100%; height: 6px; border-radius: 99px; background: #ececf3; overflow: hidden; }
.bdu-balken i { display: block; height: 100%; background: var(--st-lauf-punkt, #2b75ff); border-radius: 99px; }
.bdu-zahl { display: block; margin-top: 5px; font-size: 12px; color: var(--ck-gedaempft, #63638c); white-space: nowrap; }
.bdu-datum { white-space: nowrap; color: var(--ck-text, #505050); }
.bdu-tat { text-align: right; white-space: nowrap; }
.bdu-los { font-weight: 600; color: var(--ck-violett, #6B1FD1); text-decoration: none; }
.bdu-los:hover { text-decoration: underline; }
.vf-marke.ende-neutral { background: var(--st-neutral-grund, #f1f2f7); color: var(--st-neutral-text, #4b4e6b);
  border-color: var(--st-neutral-rand, #dadcea); }
@media (max-width: 760px) { .bdu-balken { width: 100px; } .bdu-tabelle th:nth-child(4), .bdu-tabelle td:nth-child(4) { display: none; } }

/* Live-Spracheingabe (06.10.2026): Der Ring waechst mit dem Pegel, gruen, sobald Sprache
   ankommt. So sieht man, dass das Mikrofon etwas aufnimmt. */
.nd-rund.nd-mikro { position: relative; }
.nd-rund.nd-mikro.nimmt::after { content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--st-fehler-rand, #f5bdb6); transform: scale(calc(1 + var(--pegel, 0) * .45));
  opacity: calc(.35 + var(--pegel, 0) * .65); transition: transform .08s linear, opacity .08s linear; pointer-events: none; }
.nd-rund.nd-mikro.nimmt.hoert::after { border-color: var(--st-gut-punkt, #10a37f); }
@media (prefers-reduced-motion: reduce) { .nd-rund.nd-mikro.nimmt::after { transition: none; } }

/* Umwandeln in der Akte (06.10.2026) */
.ak-umwandeln { align-items: center; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ck-linie, #ececf2); }
.ak-umw-titel { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ck-text-leise, #6e6e80); margin-right: 4px; }
.ak-umw-hinweis { margin: -4px 0 12px; }
.ak-umwandeln .kc-knopf[disabled] { opacity: .55; cursor: progress; }

/* Vergabe-Token in der App kaufen, nur DigitaleVergabe (06.10.2026) */
button.ck-paket { font: inherit; cursor: pointer; background: #fff; width: 100%; }
button.ck-paket:hover { border-color: rgba(43, 117, 255, .5); }
.ck-paket.gewaehlt { border-color: #0f0f1e; box-shadow: 0 0 0 1px #0f0f1e inset; }
.ck-vt-kauf { display: grid; gap: 12px; margin: 0 0 14px; padding: 14px; border-radius: 12px; background: #f6f6f9; }
.ck-vt-summe { margin: 0; font-size: 14px; line-height: 1.55; color: #17171F; }
.ck-vt-summe strong { color: #17171F; }
.ck-vt-wege { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-vt-wege label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e4e4ee; border-radius: 999px; background: #fff; font-size: 14px; cursor: pointer; }
.ck-vt-wege label:has(input:checked) { border-color: #0f0f1e; }
.ck-vt-wege label.aus { opacity: .5; cursor: not-allowed; }
.ck-vt-formular { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-vt-formular label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #17171F; }
.ck-vt-formular label.breit { grid-column: 1 / -1; }
.ck-vt-formular label em { font-style: normal; font-weight: 400; color: #55556A; }
.ck-vt-formular input { padding: 8px 10px; border: 1px solid #dcdce6; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 400; background: #fff; }
.ck-vt-formular input:focus { outline: none; border-color: #2b75ff; box-shadow: 0 0 0 3px rgba(43, 117, 255, .12); }
.ck-vt-agb { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #17171F; }
.ck-vt-fertig { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #e5f4ed; color: #12715B; font-size: 14px; line-height: 1.5; }
@media (max-width: 520px) { .ck-vt-formular { grid-template-columns: 1fr; } }

/* Dateien umwandeln (06.10.2026), auch fuer das Download-Blatt im Editor */
.umw { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.25fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .umw { grid-template-columns: 1fr; } }
.umw-arten { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.umw-schritt { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--ck-titel); }
.umw-schritt b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ck-violett); color: #fff; font-size: 12px; }
.umw-art { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; cursor: pointer;
  background: var(--ck-flaeche); border: 1px solid var(--ck-rand); border-radius: 12px;
  transition: border-color .12s ease, box-shadow .12s ease; }
.umw-art:hover { border-color: var(--ck-violett); }
.umw-art:has(input:checked) { border-color: var(--ck-violett); box-shadow: inset 0 0 0 1px var(--ck-violett); }
.umw-art input { margin: 3px 0 0; accent-color: var(--ck-violett); flex: 0 0 auto; }
.umw-art strong { display: block; font-size: 14px; color: var(--ck-kartentitel); }
.umw-art em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; line-height: 1.45; color: var(--ck-gedaempft); }
.umw-rechts { background: var(--ck-flaeche); border: 1px solid var(--ck-rand); border-radius: 14px; padding: 20px; min-width: 0; }
.umw-ablage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 16px; text-align: center; cursor: pointer; color: var(--ck-gedaempft);
  border: 1.5px dashed var(--ck-rand); border-radius: 12px; transition: border-color .12s ease, background .12s ease; }
.umw-ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.umw-ablage:hover, .umw-ablage.drueber { border-color: var(--ck-violett); background: rgba(107, 31, 209, .04); }
.umw-ablage:focus-within { outline: 2px solid var(--ck-violett); outline-offset: 2px; }
.umw-ablage svg { color: var(--ck-violett); }
.umw-ablage strong { color: var(--ck-titel); }
.umw-ablage em { font-style: normal; font-size: 12px; }
.umw-liste { margin: 14px 0 0; padding-left: 22px; font-size: 14px; }
.umw-liste li { padding: 6px 0; border-bottom: 1px solid var(--ck-linie); }
.umw-liste li > * { vertical-align: middle; }
.umw-name { display: inline-block; max-width: calc(100% - 190px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ck-text); }
.umw-groesse { margin: 0 8px; font-size: 12px; color: var(--ck-gedaempft); }
.umw-falsch .umw-groesse { color: #A3241B; }
.umw-mini { width: 26px; height: 26px; margin-left: 2px; border: 1px solid var(--ck-rand); border-radius: 6px;
  background: transparent; color: var(--ck-text); cursor: pointer; }
.umw-mini:disabled { opacity: .35; cursor: default; }
.umw-zusatz { display: block; margin-top: 14px; }
.umw-pw-hinweis { margin: 6px 0 0; }
.umw-los { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.umw-los .ck-ansage { margin: 0; }
.ed-dl-format { display: grid; gap: 8px; margin: 14px 0; }
.ed-dl-kipp { margin: 4px 0 8px; }

/* style.css gibt jedem input volle Breite und Polster. Auswahlpunkte in den Kacheln brauchen das nicht. */
.umw-art input[type="radio"] { width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 2px 0 0; box-shadow: none; }
.umw-art > span { flex: 1 1 auto; min-width: 0; }

/* ── Vergabe-Token (DigitaleVergabe, 06.10.2026) ─────────────────────────────
   Statuszeile unter der Nerd-Antwort, Stand in den Einstellungen, Live-Fuss der Leiste. */
.nd-vt { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ck-gedaempft); font-variant-numeric: tabular-nums; }
.nd-vt b { color: var(--ck-text); font-weight: 600; }
.nd-vt-stern { display: inline-block; color: var(--ck-violett); animation: nd-vt-dreh 2.4s linear infinite; }
.nd-vt-hinweis { display: block; margin-top: 2px; color: var(--ck-violett); }
@keyframes nd-vt-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nd-vt-stern { animation: none; } }
#ckFussPlan.ck-vt-live { color: var(--ck-violett); font-variant-numeric: tabular-nums; }
.ck-ein-h4.ck-vt-h4 { margin-top: 22px; }
.ck-ein-h4.ck-vt-h4 em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ck-gedaempft); margin-left: 6px; }
.ck-vt-pakete { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ck-vt-pakete li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: 10px; background: #f6f6f9; font-size: 14px; color: var(--ck-text); font-variant-numeric: tabular-nums; }
.ck-vt-pakete li em { font-style: normal; color: var(--ck-gedaempft); white-space: nowrap; }
.ck-vt-verlauf { margin-top: 16px; }
.ck-vt-verlauf summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ck-titel); }
.ck-vt-tabelle { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ck-vt-tabelle td { padding: 7px 0; border-bottom: 1px solid var(--ck-linie); color: var(--ck-text); vertical-align: baseline; }
.ck-vt-tabelle td.zeit { width: 1%; padding-right: 14px; white-space: nowrap; color: var(--ck-gedaempft); }
.ck-vt-tabelle td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.ck-vt-tabelle td em { font-style: normal; color: var(--ck-gedaempft); margin-left: 4px; }

/* Einstellungsfenster: KI-Anbieter, Haus, Protokoll und Team-Schublade (07.10.2026) */
.ck-ein-text { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ck-gedaempft); }
.ck-ein-warn { color: #8A4B00; }
.ck-ein-wahl { display: grid; gap: 8px; margin: 6px 0 14px; max-width: 560px; }
.umw-art.gesperrt { opacity: .55; cursor: default; }
.umw-art.gesperrt:hover { border-color: var(--ck-rand); }
.ck-ein-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-right: 40px; }
.ck-ein-titelzeile .ck-ein-h { margin: 0; }
.ck-ein-titelzeile + .ck-ein-text { margin-top: 10px; }
.ck-ein-prot-rahmen { border: 1px solid var(--ck-rand); border-radius: 12px; overflow: auto; }
.ck-ein-prot { width: 100%; border-collapse: collapse; font-size: 14px; }
.ck-ein-prot th { position: sticky; top: 0; background: #f7f7fa; text-align: left; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ck-gedaempft); padding: 9px 12px; }
.ck-ein-prot td { padding: 8px 12px; border-top: 1px solid var(--ck-linie); vertical-align: top; color: var(--ck-text); }
.ck-ein-prot td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ck-gedaempft); }
.ck-ein-prot tr.fehler td { background: #fff6f5; }
.ck-ein-prot tr.fehler td:nth-child(3) { color: #A3241B; font-weight: 600; }
.ck-tm-schublade { position: absolute; z-index: 6; left: 0; top: 0; bottom: 0; width: min(460px, 100%);
  background: #fff; border-right: 1px solid var(--ck-rand); box-shadow: 18px 0 40px rgba(20, 16, 40, .12);
  padding: 22px 24px 26px; overflow-y: auto; animation: ck-tm-rein .18s ease-out; }
.ck-tm-schublade[hidden] { display: none; }
@keyframes ck-tm-rein { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ck-tm-schublade { animation: none; } }
.ck-tm-sch-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ck-tm-sch-kopf h3 { margin: 0; font-size: 16px; color: var(--ck-titel); }
.ck-tm-sch-kopf .ck-ein-zu { position: static; }
.ck-tm-sch-reiter { display: flex; gap: 4px; padding: 4px; background: #f3f3f7; border-radius: 10px; margin-bottom: 16px; }
.ck-tm-sch-reiter button { flex: 1; border: 0; background: none; border-radius: 7px; padding: 7px 8px; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--ck-gedaempft); cursor: pointer; }
.ck-tm-sch-reiter button[aria-selected="true"] { background: #fff; color: var(--ck-titel); box-shadow: 0 1px 3px rgba(20, 16, 40, .12); }
.ck-tm-schublade .ck-team-neu { display: grid; gap: 12px; grid-template-columns: 1fr; }
.ck-tm-schublade .ck-team-neu button[type=submit] { justify-self: start; }
.ck-tm-ablage { margin: 6px 0 12px; padding: 22px 14px; }
.ck-tm-vorschau { border: 1px solid var(--ck-rand); border-radius: 10px; overflow: auto; max-height: 300px; margin: 8px 0; }
.ck-tm-vorschau table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ck-tm-vorschau th { text-align: left; background: #f7f7fa; padding: 7px 9px; font-size: 12px; color: var(--ck-gedaempft); position: sticky; top: 0; }
.ck-tm-vorschau td { padding: 7px 9px; border-top: 1px solid var(--ck-linie); vertical-align: top; }
.ck-tm-vorschau small { color: var(--ck-gedaempft); }
@media (max-width: 760px) { .ck-tm-schublade { width: 100%; } .ck-ein-titelzeile { flex-wrap: wrap; margin-right: 34px; } }

/* Hausseite (07.10.2026): KI-Schalter, SSO-Schritte, Freigabekette leichter */
.ki-schalter { display: grid; gap: 8px; max-width: 620px; margin-bottom: 18px; }
.ki-schalter label { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--ck-rand);
  border-radius: 10px; background: #fff; cursor: pointer; }
.ki-schalter label.aus { cursor: default; }
.ki-schalter input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; min-width: 36px; padding: 0; margin: 0;
  border-radius: 999px; background: #d5d5df; position: relative; cursor: inherit; transition: background .15s; border: 0; box-shadow: none; }
.ki-schalter input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ki-schalter input:checked { background: var(--ck-violett); }
.ki-schalter input:checked::after { transform: translateX(16px); }
.ki-schalter input:disabled { opacity: .55; }
.ki-schalter input:focus-visible { outline: 2px solid var(--ck-violett); outline-offset: 2px; }
.ki-schalter-name { flex: 1; font-weight: 600; color: var(--ck-titel); }
.ki-schalter-stand { font-size: 14px; color: var(--ck-gedaempft); }
.ki-schalter label:not(.an):not(.aus) .ki-schalter-stand { color: #A3241B; font-weight: 600; }
.so-schritt { display: flex; align-items: center; gap: 8px; }
.so-schritt b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ck-violett); color: #fff; font-size: 12px; }
.fk-start { background: #f7f5ff; border: 1px solid #e6defd; border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; }
.fk-start-titel { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ck-gedaempft); }
.fk-vorlagen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fk-vorlage { border: 1px solid var(--ck-rand); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit;
  font-size: 14px; color: var(--ck-titel); cursor: pointer; }
.fk-vorlage:hover { border-color: var(--ck-violett); color: var(--ck-violett); }
.fk-ki textarea { min-height: 58px; height: auto; }
.fk-ki-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.fk-stufen { counter-reset: fkneu; gap: 10px; }
.fk-stufe { display: grid; grid-template-columns: 28px minmax(180px, 1.3fr) minmax(140px, 1fr) 110px auto;
  align-items: end; gap: 10px; padding: 10px 12px; border: 1px solid var(--ck-rand); border-radius: 10px; background: #fff; }
.fk-snr::before { counter-increment: fkneu; content: counter(fkneu); display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: #efeafe; color: var(--ck-violett); font-weight: 700; font-size: 12px; }
.fk-snr { align-self: center; }
.fk-sfeld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fk-sfeld > span:first-child { font-size: 12px; color: var(--ck-gedaempft); font-weight: 600; }
.fk-stufe .fk-sfeld input, .fk-stufe .fk-sfeld select { width: 100%; }
.fk-frist { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ck-gedaempft); }
.fk-frist input { width: 62px !important; }
@media (max-width: 760px) { .fk-stufe { grid-template-columns: 28px 1fr; } .fk-stufe > :not(.fk-snr) { grid-column: 2; } }
/* Korrektur 07.10.2026: Die alten flex-Werte (.fk-sname 160px) wirkten in der Spalte als Hoehe. Zwei Zeilen je Stufe. */
.fk-stufe .fk-sfeld > input, .fk-stufe .fk-sfeld > select, .fk-stufe .fk-frist input { flex: none; min-width: 0; height: auto; font-size: 14px; color: var(--ck-titel); }
.fk-stufe { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "nr wer wer weg" ". name frist frist"; align-items: end; }
.fk-stufe .fk-snr { grid-area: nr; }
.fk-stufe .fk-sfeld-wer { grid-area: wer; }
.fk-stufe .fk-sfeld:not(.fk-sfeld-wer):not(.fk-sfeld-frist) { grid-area: name; }
.fk-stufe .fk-sfeld-frist { grid-area: frist; }
.fk-stufe .fk-sweg { grid-area: weg; align-self: end; }
@media (max-width: 760px) { .fk-stufe { grid-template-columns: 28px 1fr; grid-template-areas: "nr wer" ". name" ". frist" ". weg"; } .fk-stufe > :not(.fk-snr) { grid-column: auto; } }
.ki-frei.ki-schalter { display: grid; grid-template-columns: minmax(0, 520px); }

/* KI-Umschreiben im Dokument: Fortschritt (07.10.2026) */
.dk-ki-laeuft { margin: 12px 0 4px; padding: 14px 16px; border: 1px solid #e6defd; border-radius: 12px; background: #faf8ff; }
.dk-ki-laeuft p { margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 14px; }
.dk-ki-laeuft strong { color: var(--ck-titel, #18181f); font-weight: 600; }
.dk-ki-meta { color: var(--ck-gedaempft, #6e6e80); font-variant-numeric: tabular-nums; }
.dk-ki-balken { position: relative; height: 4px; border-radius: 4px; background: #ebe6fb; overflow: hidden; }
.dk-ki-balken i { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 4px;
  background: linear-gradient(90deg, #8b7cff, #6B1FD1, #c26bff); animation: dk-ki-lauf 1.3s ease-in-out infinite; }
@keyframes dk-ki-lauf { from { left: -40%; } to { left: 100%; } }
.dk-ki-skelett { display: grid; gap: 7px; margin-top: 12px; }
.dk-ki-skelett i { display: block; height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, #efecf8 25%, #f8f6fd 50%, #efecf8 75%); background-size: 200% 100%;
  animation: dk-ki-glanz 1.6s linear infinite; }
.dk-ki-skelett i:nth-child(2) { width: 92%; } .dk-ki-skelett i:nth-child(3) { width: 64%; }
@keyframes dk-ki-glanz { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dk-ki-balken i, .dk-ki-skelett i { animation: none; } .dk-ki-balken i { left: 0; width: 100%; opacity: .5; } }
/* 07.10.2026: .ck-ansage ist nur fuer Screenreader. Meldefelder, die Ergebnisse oder Fehler
   zeigen (Gespeichert, Umgewandelt, Passwort zu kurz), tragen zusaetzlich .sichtbar. */
.ck-ansage.sichtbar { position: static; width: auto; height: auto; margin: 8px 0 0; padding: 0; overflow: visible;
  clip: auto; white-space: normal; font-size: 14px; line-height: 1.5; color: #6B1FD1; }
.ck-ansage.sichtbar:empty { display: none; }

/* Team: eine Frage, was darf die Person (07.10.2026) */
.ck-tm-recht { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck-tm-recht legend { font-size: 12px; font-weight: 600; color: var(--ck-gedaempft); margin-bottom: 6px; padding: 0; }

/* ── Anwendungszwecke und Schrittleiste (07.10.2026) ─────────────────────── */
.ck-zwecke { margin-top: 10px; }
.ck-zwecke .ck-zweck-titel { margin: 4px 0 4px 10px; }
.ck.schmal .ck-zwecke .ck-zweck-titel { display: none; }
.ck-block-liste .ck-posten.ck-thema-neu { margin-top: 10px; }
.ck-menue-hinweis { margin: 2px 10px 8px; font-size: 12px; line-height: 1.4; color: var(--ck-gedaempft, #63638c); }

.vf-akte-raster {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 22px; align-items: start;
}
.vf-akte-inhalt { min-width: 0; }
.vf-akte-raster #vfReiter.vf-reiter {
  display: block; position: sticky; top: calc(var(--ck-kopf, 106px) + 12px);
  max-height: calc(100vh - var(--ck-kopf, 106px) - 24px); overflow-y: auto; overflow-x: hidden;
  margin: 0; padding: 12px 8px 10px; border: 1px solid var(--ck-rand, #e4e4ee); border-radius: 12px;
  background: var(--ck-flaeche, #fff); scrollbar-width: thin;
}
.vf-sl-zweck { padding: 2px 6px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--ck-rand, #e4e4ee); }
.vf-sl-zweck label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ck-gedaempft, #63638c); margin-bottom: 5px; }
.vf-sl-zweck select { width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--ck-rand, #e4e4ee);
  border-radius: 8px; background: #fff; color: #17171F; }
.vf-sl-warn { margin: 7px 0 0; font-size: 12px; line-height: 1.4; color: #8a4b00; background: #fff6e8;
  border-radius: 7px; padding: 6px 8px; }
.vf-sl-phase + .vf-sl-phase { margin-top: 8px; }
.vf-sl-phasenkopf { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 8px 3px;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ck-gedaempft, #63638c); }
.vf-sl-phasenkopf em { font-style: normal; font-weight: 600; letter-spacing: 0; }
.vf-sl-phase.fertig .vf-sl-phasenkopf em { color: #12715B; }
#vfReiter .vf-reiter-knopf.vf-sl-schritt {
  display: flex; width: 100%; align-items: center; gap: 9px; text-align: left; white-space: normal;
  padding: 7px 8px; margin: 1px 0; border: 0; border-radius: 8px; border-left: 3px solid transparent;
  font-size: 14px; font-weight: 500; color: #17171F; line-height: 1.3;
}
#vfReiter .vf-sl-schritt:hover { background: #f5f3fb; color: #17171F; }
#vfReiter .vf-sl-schritt.aktiv { background: #f3ecff; color: #6B1FD1; font-weight: 650; border-left-color: var(--ck-violett, #6B1FD1); }
#vfReiter .vf-sl-schritt:focus-visible { outline: 2px solid var(--ck-blau, #2b75ff); outline-offset: 0; border-radius: 8px; }
#vfReiter .vf-sl-schritt.entfaellt { color: #55556A; }
.vf-sl-haken { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid #b9b9cc; background: #fff;
  position: relative; box-sizing: border-box; }
.erledigt > .vf-sl-haken { border-color: #0b9e6d; background: #0b9e6d; }
.erledigt > .vf-sl-haken::after { content: ''; position: absolute; left: 4.2px; top: 1.6px; width: 4px; height: 7.5px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.entfaellt > .vf-sl-haken { border-style: dashed; border-color: #d0d0dc; }
.entfaellt > .vf-sl-haken::after { content: ''; position: absolute; left: 3px; right: 3px; top: 6px; height: 1.6px; background: #c4c4d2; }
#vfReiter .vf-sl-schritt .bt-zahl { margin-left: auto; }

.vf-sl-status { display: grid; gap: 6px; margin: 0 0 14px; }
.vf-sl-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--ck-rand, #e4e4ee);
  border-radius: 10px; background: #fafafc; font-size: 14px; }
.vf-sl-zeile > div { flex: 1; min-width: 0; }
.vf-sl-zeile strong { display: block; color: #17171F; font-size: 14px; }
.vf-sl-zeile span { color: #55556A; }
.vf-sl-zeile.erledigt { background: #f1fbf6; border-color: #cdeedd; }

@media (max-width: 900px) {
  .vf-akte-raster { grid-template-columns: 1fr; gap: 12px; }
  .vf-akte-raster #vfReiter.vf-reiter { position: static; max-height: none; }
}
.ue-phasen.ue-sechs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ue-phasen.ue-sechs > li.vf-ph { padding: 14px 14px; }
@media (max-width: 1280px) { .ue-phasen.ue-sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ue-phasen.ue-sechs { grid-template-columns: minmax(0, 1fr); } }
.ck.schmal .ck-zweck-titel { display: none; }
.ue-phasen.ue-sechs .ue-ph-kopf { flex-wrap: nowrap; gap: 6px; }
.ue-phasen.ue-sechs .vf-ph-name { min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ue-phasen.ue-sechs .vf-ph-zahl { white-space: nowrap; flex: none; }

/* 07.10.2026 Schritt 6: Projekt in der Schrittleiste, Verhandlungsrunden */
.vf-sl-zweck .vf-sl-zweit { margin-top: 10px; }
.vf-sl-neu { display: flex; gap: 6px; margin-top: 6px; }
.vf-sl-neu input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--ck-rand, #e4e4ee); border-radius: 8px; }
.vh-karte { margin-top: 16px; }
.vh-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.vh-kopf h2 { margin: 0 0 4px; font-size: 16px; }
.vh-kopf p { margin: 0; font-size: 14px; color: #55556A; }
.vh-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vh-liste > li { border: 1px solid var(--ck-rand, #e4e4ee); border-radius: 10px; padding: 10px 12px; }
.vh-zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.vh-zeile span { color: #55556A; }
.vh-zeile .kc-knopf:first-of-type { margin-left: auto; }
.vh-liste p { margin: 8px 0 0; font-size: 14px; white-space: pre-wrap; }
.vh-liste p small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #55556A; }
.vh-form { display: grid; gap: 10px; margin-top: 8px; }
.vh-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.vh-feld span { display: block; font-size: 14px; font-weight: 600; color: #17171F; margin-bottom: 4px; }
.vh-feld input, .vh-feld textarea { width: 100%; font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid #d6d6e2; border-radius: 8px; height: auto; min-height: 0; }
.vh-knoepfe { display: flex; gap: 8px; }
.vh-fehler { color: #A3241B; font-size: 14px; margin: 0; }
.vh-frage { font-size: 14px; }
@media (max-width: 700px) { .vh-zwei { grid-template-columns: 1fr; } }
.vh-liste p { color: #17171F; }
.vh-kopf p { color: #55556A; }

/* ── Schmale Leiste wie bei ChatGPT (07.10.2026 abends, Ruben) ─────────────
   Oben das Zeichen, darunter wenige Symbole in ruhigem Abstand, unten das Konto.
   Zwecke, Werkzeuge und Unterlisten stehen nur in der breiten Leiste. */
.ck-logo-zeichen, .ck-aufklapp { display: none; }
.ck-logo.ck-logo-dv { height: 30px; width: auto; }
.ck.schmal { --ck-leiste: 56px; }
.ck.schmal .ck-leiste { padding: 12px 0 14px; gap: 2px; overflow: hidden; align-items: center; background: #f9f9fb; }
.ck.schmal .ck-leiste-kopf { position: relative; flex-direction: column; align-items: center; gap: 4px; padding: 0; margin: 0 0 6px; width: 100%; }
.ck.schmal .ck-marke { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; padding: 0; margin: 0; }
.ck.schmal .ck-logo-dv, .ck.schmal .ck-haus { display: none; }
.ck.schmal .ck-logo-zeichen { display: block; width: 26px; height: 26px; }
.ck.schmal .ck-aufklapp { display: grid; place-items: center; position: absolute; top: 0; left: 50%; margin-left: -20px; width: 40px; height: 40px;
  border: 0; border-radius: 10px; background: #ececf1; color: #17171F; cursor: pointer; opacity: 0; transition: opacity .12s; }
.ck.schmal .ck-leiste-kopf:hover .ck-aufklapp, .ck.schmal .ck-aufklapp:focus-visible { opacity: 1; }
.ck.schmal #ckKlapp { display: none; }
.ck.schmal .ck-glocke, .ck.schmal .ck-suche-knopf { width: 40px; height: 40px; display: grid; place-items: center; margin: 0; border-radius: 10px; }
.ck.schmal .ck-glocke[hidden] { display: none; }
.ck.schmal .ck-gruppe { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ck.schmal .ck-gruppe > .ck-nav { width: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; }
.ck.schmal #ckZwecke, .ck.schmal #ckNav, .ck.schmal .ck-mehr-block, .ck.schmal .ck-unter, .ck.schmal .ck-menue-hinweis { display: none !important; }
.ck.schmal .ck-gruppe .ck-zeile, .ck.schmal .ck-zweig .ck-kopfzeile > a, .ck.schmal #ckNeuVerfahren {
  width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: none; box-shadow: none; }
.ck.schmal .ck-zweig .ck-kopfzeile { width: 40px; padding: 0; margin: 0; background: none; border: 0; }
.ck.schmal .ck-gruppe .ck-zeile:hover, .ck.schmal .ck-zweig .ck-kopfzeile > a:hover, .ck.schmal .ck-glocke:hover,
.ck.schmal .ck-suche-knopf:hover, .ck.schmal .ck-marke:hover { background: #ececf1; }
.ck.schmal .ck-gruppe .ck-zeile.aktiv, .ck.schmal .ck-zweig .ck-kopfzeile.aktiv > a { background: #ececf1; color: #17171F; }
.ck.schmal .ck-gruppe svg { width: 19px; height: 19px; }
.ck.schmal .ck-fuss { margin-top: auto; padding: 8px 0 0; border: 0; justify-content: center; width: 100%; }
.ck.schmal .ck-leiste-kopf { top: 0; margin: 0 0 6px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* 07.10.2026 abends (Ruben): Die blaue Scrollleiste mit Pfeilen aus style.css ragte in
   Fenstern und in der Leiste ueber die runden Ecken. Im Cockpit schmal und dezent, ohne Pfeile. */
.ck *, .ck-blatt, .ck-blatt * { scrollbar-width: thin; scrollbar-color: #c9c9d6 transparent; }
.ck-blatt-kasten { scrollbar-gutter: stable; }

/* 07.10.2026 abends (Ruben): Anlegefenster breiter, 560 px wirkte zu schmal. */
#vfBlatt .ck-blatt-kasten { width: min(780px, calc(100vw - 32px)); }

/* 07.10.2026 Direktauftrag: Kennzahlen und Hausregeln */
.da-zahlen-zwei { margin-top: -6px; }
.da-zahlen-zwei .da-zahl span { font-size: 12px; }
.da-linie { border: 0; border-top: 1px solid var(--ck-rand, #e4e4ee); margin: 14px 0; }
.da-regeln { display: grid; gap: 8px; margin-top: 8px; }

/* 07.10.2026 abends (Ruben): Fester oberer Block der Leiste. Kopf, Neuer Vergabe-Nerd-Chat,
   Neues Verfahren, Start, Verfahren und Nerd-Chats bleiben beim Rollen stehen; nur
   Anwendungszwecke und Werkzeuge rollen darunter durch. Die Listen im Block haben eine
   eigene Hoehe, damit darunter Platz fuer die Werkzeuge bleibt. In der schmalen Leiste
   verhaelt sich alles wie bisher (display: contents). */
.ck:not(.schmal) .ck-oben {
  position: sticky; top: -20px; z-index: 5;
  margin-top: -20px; padding: 20px 0 10px;
  background: var(--ck-flaeche, #fff);
  border-bottom: 1px solid var(--ck-rand, #ececf2);
}
.ck:not(.schmal) .ck-oben .ck-leiste-kopf { position: static; margin-top: 0; padding-top: 0; }
.ck:not(.schmal) .ck-oben > .ck-gruppe-oben { margin-top: 12px; }
.ck:not(.schmal) .ck-oben .ck-unter { max-height: 22vh; overflow-y: auto; overscroll-behavior: contain; }
.ck.schmal .ck-oben { display: contents; }
/* 08.10.2026: #ckNerdNeu ist jetzt das Plus neben "Vergabe-Nerd" (nur auf der Nerd-Seite). */
.ck-nerd-plus { margin-right: 0; }

/* 09.10.2026 (Paket 2, Umbruch bei 320 Pixel): Die versteckte Spaltenbeschriftung (.ck-versteckt, absolut
   positioniert) ragte aus der Rollflaeche der Bedarfsliste und verbreiterte die ganze Seite. */
.bdu-rahmen { position: relative; }

/* Paket 41, 12.10.2026 (Barrierefreiheit): Suchfelder erbten die helle Schrift der Website (#e8e8f8 auf Weiss).
   Felder ohne eigenen Fokusrahmen bekommen einen sichtbaren (2.4.7). */
.ck-haupt input[type="search"], .ck-haupt input[type="text"], .ck-haupt input[type="number"], .ck-haupt select, .ck-haupt textarea { color: #17171F; }
.ck-haupt input:focus-visible, .ck-haupt select:focus-visible, .ck-haupt textarea:focus-visible,
.ck-haupt button:focus-visible, .ck-haupt a:focus-visible { outline: 2px solid #6B1FD1; outline-offset: 1px; }

/* 13.10.2026 (Ruben): kein zweiter Rahmen im Nerd-Eingabefeld. Den Fokus zeigt der aeussere Kasten (.nd-feld:focus-within). */
.ck-haupt .nd-feld textarea:focus-visible { outline: none; }

/* ============================================================================
   Schlankes Menü (13.10.2026, Plan PLAN_Menue-schlank). Fünf Punkte, breit als
   Standard (Wort neben Symbol), schmal als Option (Symbol oben, Wort darunter).
   Große Schrift hebt alles an und schaltet breit mit ein.
   ============================================================================ */
/* Die Variable muss auf .ck gesetzt werden: .ck definiert --ck-leiste selbst (264px), und
   .ck-leiste erbt vom näheren .ck, nicht von html. Auf html allein greift sie nie. (13.10.2026) */
html.va-menue-schlank, html.va-menue-schlank .ck { --ck-leiste: 220px; }
html.va-menue-schlank:not(.va-leiste-breit), html.va-menue-schlank:not(.va-leiste-breit) .ck { --ck-leiste: 96px; }
html.va-gross, html.va-gross .ck { --ck-leiste: 240px; }

html.va-menue-schlank .ck-leiste {
  display: flex; flex-direction: column; padding: 18px 12px 16px; gap: 6px;
  background: var(--ck-flaeche); border-right: 1px solid var(--ck-rand);
}
html.va-menue-schlank .cs-kopf { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; min-height: 48px; }
html.va-menue-schlank .cs-marke { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex: 1 1 auto; min-width: 0; }
html.va-menue-schlank .cs-logo { max-width: 100%; height: auto; }
html.va-menue-schlank .cs-logo-zeichen { display: none; }
html.va-menue-schlank .cs-haus { font-style: normal; font-size: 12px; color: var(--ck-gedaempft); }
html.va-menue-schlank .cs-schmal { flex: none; width: 34px; height: 34px; border: 0; background: none; color: var(--ck-gedaempft); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html.va-menue-schlank .cs-schmal:hover { background: #f1ebff; color: #6B1FD1; }

html.va-menue-schlank .cs-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; flex: 1 1 auto; }
html.va-menue-schlank .cs-fuss { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ck-rand); position: relative; }

/* Ein Punkt: breit = Symbol links, Wort daneben. */
html.va-menue-schlank .cs-punkt {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px;
  border-radius: 12px; text-decoration: none; color: #17171F; font: 500 16px/1.25 Inter, system-ui, sans-serif;
  border: 0; background: none; cursor: pointer; width: 100%; box-sizing: border-box; text-align: left; position: relative;
}
html.va-menue-schlank .cs-punkt:hover { background: #f4f1fb; }
html.va-menue-schlank .cs-punkt:focus-visible { outline: 2px solid #6B1FD1; outline-offset: 2px; }
html.va-menue-schlank .cs-ico { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #55556a; }
html.va-menue-schlank .cs-wort { flex: 1 1 auto; min-width: 0; }
html.va-menue-schlank .cs-zahl { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #c81e1e; color: #fff; font: 600 12px/20px Inter, system-ui, sans-serif; text-align: center; }
/* Aktiver Punkt: Balken links, fett, Farbe, nicht nur Farbe (WCAG). */
html.va-menue-schlank .cs-punkt.aktiv { background: #f1ebff; color: #6B1FD1; font-weight: 700; }
html.va-menue-schlank .cs-punkt.aktiv .cs-ico { color: #6B1FD1; }
html.va-menue-schlank .cs-punkt.aktiv::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #6B1FD1; }

/* Schmale Form: Symbol oben, Wort klein darunter, zentriert. */
html.va-menue-schlank:not(.va-leiste-breit) .cs-punkt { flex-direction: column; gap: 3px; min-height: 60px; padding: 8px 4px; text-align: center; font-size: 14px; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-wort { font-size: 14px; line-height: 1.15; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-punkt.aktiv::before { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 3px 3px 0 0; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-markentext, html.va-menue-schlank:not(.va-leiste-breit) .cs-logo { display: none; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-logo-zeichen { display: inline-block; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-kopf { justify-content: center; flex-wrap: wrap; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-zahl { position: absolute; top: 4px; right: 10px; }

/* Aufklapp-Zweig: Verfahren, Nerd, Werkzeuge mit Pfeil und Unterliste (Ruben 13.10.2026). */
html.va-menue-schlank .cs-zweig { display: flex; flex-direction: column; }
html.va-menue-schlank .cs-zweig-kopf { display: flex; align-items: center; gap: 2px; }
html.va-menue-schlank .cs-zweig-kopf .cs-punkt { flex: 1 1 auto; min-width: 0; }
html.va-menue-schlank .cs-plus, html.va-menue-schlank .cs-aufzu { flex: none; width: 30px; height: 30px; border: 0; background: none; color: #55556A; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html.va-menue-schlank .cs-plus:hover, html.va-menue-schlank .cs-aufzu:hover { background: #ede5ff; color: #6B1FD1; }
html.va-menue-schlank .cs-aufzu svg { transition: transform .15s ease; }
html.va-menue-schlank .cs-zweig.zu .cs-aufzu svg { transform: rotate(-90deg); }
html.va-menue-schlank .cs-unter { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 30px; padding-left: 8px; border-left: 1px solid var(--ck-rand); }
html.va-menue-schlank .cs-unter[hidden] { display: none; }
html.va-menue-schlank .cs-unter .ck-unterzeile { display: block; padding: 6px 8px; border-radius: 7px; font-size: 14px; color: #17171F; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.va-menue-schlank .cs-unter .ck-unterzeile:hover { background: #f4f1fb; }
html.va-menue-schlank .cs-unter .ck-unterzeile.aktiv { background: #ede5ff; color: #6B1FD1; font-weight: 600; }
html.va-menue-schlank .cs-unter .cs-unter-leer { padding: 6px 8px; font-size: 14px; color: var(--ck-gedaempft); }
/* Schmal: kein Pfeil, keine Unterliste, kein Plus. Ganz schmal wie vorher. */
html.va-menue-schlank:not(.va-leiste-breit) .cs-aufzu, html.va-menue-schlank:not(.va-leiste-breit) .cs-plus, html.va-menue-schlank:not(.va-leiste-breit) .cs-unter { display: none; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-zweig-kopf { gap: 0; }

/* Große Schrift: alles etwa 112,5 %. */
html.va-gross { font-size: 112.5%; }
html.va-gross .cs-punkt { font-size: 16px; min-height: 52px; }

/* Hilfe-Menü im Fuß */
html.va-menue-schlank .cs-hilfemenue { position: absolute; left: 10px; right: 10px; bottom: 100%; margin-bottom: 6px; background: #fff; border: 1px solid var(--ck-rand); border-radius: 12px; box-shadow: 0 10px 28px rgba(15,15,30,.16); padding: 6px; z-index: 30; }
html.va-menue-schlank .cs-hilfemenue [role="menuitem"] { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 8px; color: #17171F; font: 500 14px Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; }
html.va-menue-schlank .cs-hilfemenue [role="menuitem"]:hover { background: #f4f1fb; }

/* Handy: untere Leiste mit fünf Punkten (Plan Abschnitt 5). */
@media (max-width: 900px) {
  html.va-menue-schlank .ck-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: auto;
    flex-direction: row; padding: 4px 4px env(safe-area-inset-bottom, 4px); gap: 0; z-index: 60;
    border-right: 0; border-top: 1px solid var(--ck-rand); transform: none; box-shadow: 0 -2px 12px rgba(15,15,30,.08);
  }
  html.va-menue-schlank .cs-kopf, html.va-menue-schlank .cs-fuss { display: none; }
  html.va-menue-schlank .cs-nav { flex-direction: row; gap: 0; margin: 0; }
  html.va-menue-schlank .cs-punkt { flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 2px; font-size: 12px; text-align: center; }
  html.va-menue-schlank .cs-punkt.aktiv { background: none; }
  html.va-menue-schlank .cs-punkt.aktiv::before { top: 0; bottom: auto; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 0 0 3px 3px; }
  html.va-menue-schlank .cs-wort { font-size: 12px; }
  html.va-menue-schlank .ck-haupt { padding-bottom: 76px; }
  /* Die Rechtszeile (Impressum, Datenschutz …) gehört nicht in die horizontale untere App-Leiste;
     auf dem Handy würde sie die fünf Punkte überlagern. Sie steht auf den Seiten selbst und im Footer. */
  html.va-menue-schlank .ck-recht { display: none; }
  /* Der schwebende Feedback-Knopf überlappt sonst den rechten Punkt (Posteingang) und drückt dessen
     Klickfläche unter 44 px. Über die untere Leiste heben. */
  html.va-menue-schlank .ck-feedback { bottom: 72px; }
}
/* Desktop im schlanken Modus: Rechtszeile klein unten, unter dem Konto, umbrechend. */
html.va-menue-schlank .ck-recht { margin-top: 8px; padding: 0 8px; font-size: 12px; line-height: 1.6; color: var(--ck-gedaempft); display: flex; flex-wrap: wrap; gap: 2px 8px; }
html.va-menue-schlank .ck-recht a { color: var(--ck-gedaempft); text-decoration: none; }
html.va-menue-schlank .ck-recht a:hover { text-decoration: underline; }
html.va-menue-schlank:not(.va-leiste-breit) .ck-recht { display: none; }

/* Die Gespräche stehen seit 13.10.2026 wieder als Unterliste unter „Vergabe-Nerd“ in der
   Leiste (csNerdUnter), nicht mehr als eigenes Panel auf der Nerd-Seite. */

/* ============================================================================
   Altes Menueband entschlackt + Tipps-/Tour-Schalter (Ruben, 13.10.2026).
   Mehr Ruhe: groessere Abstaende, weniger Linien, dezentere Zwecke, keine Zahlen
   ausser der Ungelesen-Zahl am Posteingang.
   ============================================================================ */

/* 13.10.2026 spaet (Ruben, Bild vom 12.10.: „das Menü wieder wie gestern“): Abstände, Zeilenhöhe und Anwendungszwecke
   wieder wie am 12.10. Die Regeln „Mehr Luft“ und „Anwendungszwecke ruhiger“ sind entfernt; sie machten die Zeilen
   höher und rückten die Zeilen mit Pfeil (Verfahren, Generatoren) ein. Sicherung: /root/sicherung/redesign_1310_menue_gestern. */

/* Posteingang-Zahl: dezent, nur wenn ungelesen (das einzige Badge, das bleibt). */
.ck-post-zahl {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: #e6e6ef; color: #55556A; font: 600 12px/18px Inter, system-ui, sans-serif;
  text-align: center; font-variant-numeric: tabular-nums; font-style: normal;
}
.ck-post-zahl[hidden] { display: none; }
.ck-zeile.aktiv .ck-post-zahl { background: #ded0fb; color: #6B1FD1; }
.ck.schmal .ck-post-zahl { position: absolute; top: 3px; right: 8px; margin: 0; }
.ck.schmal #ckPost { position: relative; }

/* Hilfe-Block im alten Band (ueber dem Konto). */
.ck-hilfe-block { position: relative; margin-top: auto; padding-top: 4px; }
.ck.schmal .ck-hilfe-block .ck-text { display: none; }
.ck-hilfe-knopf { color: var(--ck-gedaempft, #71718a); }

/* Hilfe-Menue (gemeinsame Form fuer altes Band und schlankes Menue). */
.ck-hilfemenue {
  position: absolute; left: 8px; right: 8px; bottom: 100%; margin-bottom: 6px;
  background: #fff; border: 1px solid var(--ck-rand, #e4e4ee); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15,15,30,.18); padding: 7px; z-index: 40;
}
.ck-hilfe-eintrag {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none;
  border-radius: 9px; color: #17171F; font: 500 14px Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none;
}
.ck-hilfe-eintrag:hover { background: #f4f1fb; }
.ck-hilfe-eintrag:focus-visible { outline: 2px solid #6B1FD1; outline-offset: -2px; }

/* Der Toggle oben im Hilfe-Menue. */
.ck-hilfe-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; background: none; border-radius: 9px; cursor: pointer;
  margin-bottom: 4px; border-bottom: 1px solid #f0edf7; padding-bottom: 13px;
}
.ck-hilfe-toggle:hover { background: #f8f6fd; }
.ck-hilfe-toggle:focus-visible { outline: 2px solid #6B1FD1; outline-offset: -2px; }
.ck-hilfe-toggle-text { flex: 1 1 auto; min-width: 0; }
.ck-hilfe-toggle-text strong { display: block; font: 600 14px Inter, system-ui, sans-serif; color: #17171F; }
.ck-hilfe-toggle-text small { display: block; font-size: 12px; color: #55556A; margin-top: 1px; line-height: 1.35; }
.ck-schieber {
  flex: none; width: 40px; height: 23px; border-radius: 99px; background: #d4d4e0; position: relative;
  transition: background .16s ease;
}
.ck-schieber::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s ease;
}
.ck-hilfe-toggle[aria-checked="true"] .ck-schieber { background: #6B1FD1; }
.ck-hilfe-toggle[aria-checked="true"] .ck-schieber::after { transform: translateX(17px); }

/* ── Schlanke Leiste nachgebessert (13.10.2026 abends, Ruben „fixe das selbst“, 100-vms-2d) ──
   Unterlisten kompakt: die Links waren inline gesetzt, jede Zeile 93 px hoch. Nur die Navigation rollt, Kopf,
   Hilfe und Konto bleiben stehen. Aktiver Zweig markiert wie ein aktiver Punkt. Woerter brechen nicht um. */
html.va-menue-schlank .ck-leiste { overflow: hidden; }
html.va-menue-schlank .cs-nav { overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: #d6cfe8 transparent; }
html.va-menue-schlank .cs-wort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.va-menue-schlank .cs-unter .ck-unterzeile { padding: 0; }
html.va-menue-schlank .cs-unter .ck-unterzeile > a, html.va-menue-schlank .cs-unter a.ck-unterzeile {
  display: block; padding: 7px 9px; border-radius: 7px; font-size: 14px; line-height: 1.4; color: #17171F; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.va-menue-schlank .cs-unter .ck-unterzeile > a:hover, html.va-menue-schlank .cs-unter a.ck-unterzeile:hover { background: #f4f1fb; }
html.va-menue-schlank .cs-unter .ck-unterzeile > a:focus-visible, html.va-menue-schlank .cs-unter a.ck-unterzeile:focus-visible { outline: 2px solid #6B1FD1; outline-offset: -2px; }
html.va-menue-schlank .cs-unter .ck-unter-zusatz { display: block; font-size: 12px; color: #55556A; overflow: hidden; text-overflow: ellipsis; }
html.va-menue-schlank .cs-unter .ck-alle a, html.va-menue-schlank .cs-unter .cs-alle-wz { color: #6B1FD1; font-weight: 600; font-style: normal; }
html.va-menue-schlank .cs-zweig-kopf { position: relative; border-radius: 10px; }
html.va-menue-schlank .cs-zweig-kopf:hover { background: #f4f1fb; }
html.va-menue-schlank .cs-zweig-kopf .cs-punkt:hover { background: none; }
html.va-menue-schlank .cs-zweig-kopf.aktiv { background: #f1ebff; }
html.va-menue-schlank .cs-zweig-kopf.aktiv .cs-punkt { color: #6B1FD1; font-weight: 700; }
html.va-menue-schlank .cs-zweig-kopf.aktiv .cs-ico { color: #6B1FD1; }
html.va-menue-schlank .cs-zweig-kopf.aktiv::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #6B1FD1; }
html.va-menue-schlank .cs-aufzu { width: 36px; height: 36px; margin-right: 2px; }
html.va-menue-schlank .cs-aufzu:focus-visible { outline: 2px solid #6B1FD1; outline-offset: 1px; }
@media (max-width: 900px) {
  html.va-menue-schlank .ck-leiste { overflow: visible; }
  html.va-menue-schlank .cs-nav { overflow: visible; }
  html.va-menue-schlank .cs-zweig-kopf.aktiv { background: none; }
  html.va-menue-schlank .cs-zweig-kopf.aktiv::before { top: 0; bottom: auto; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 0 0 3px 3px; }
}

/* Kopf der breiten Leiste wie im alten Band: Zeichen/Logo, Suche, Glocke, schmal/breit (13.10.2026 abends). */
html.va-menue-schlank .cs-kopf { gap: 2px; padding: 2px 2px 10px 6px; }
html.va-menue-schlank .cs-logo { max-width: 100%; height: auto; max-height: 40px; }
html.va-menue-schlank .cs-kopfknopf {
  flex: none; position: relative; width: 34px; height: 34px; border: 0; background: none; color: var(--ck-gedaempft);
  border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
html.va-menue-schlank .cs-kopfknopf:hover { background: #f1ebff; color: #6B1FD1; }
html.va-menue-schlank .cs-kopfknopf:focus-visible, html.va-menue-schlank .cs-schmal:focus-visible { outline: 2px solid #6B1FD1; outline-offset: 1px; }
html.va-menue-schlank .cs-kopfknopf[hidden] { display: none; }
html.va-menue-schlank .cs-glocke em {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #c81e1e;
  color: #fff; font: 700 12px/16px Inter, system-ui, sans-serif; font-style: normal; text-align: center; box-sizing: border-box;
}
html.va-menue-schlank .cs-glocke em[hidden] { display: none; }
html.va-menue-schlank:not(.va-leiste-breit) #ckSuche { display: none; }
/* „Vergabe-Nerd“ passt ohne Abschneiden: rechts im Zweig-Kopf weniger Innenabstand, schmalerer Pfeilknopf. */
html.va-menue-schlank .cs-zweig-kopf .cs-punkt { padding-right: 4px; gap: 11px; }
html.va-menue-schlank .cs-aufzu { width: 32px; height: 36px; margin-right: 2px; }

/* Gespraeche im Nerd-Zweig: Link und Loeschknopf in einer Zeile; „Mehr anzeigen“ wie ein Link (13.10.2026 abends). */
html.va-menue-schlank .cs-unter .ck-unterzeile { display: flex; align-items: center; }
html.va-menue-schlank .cs-unter .ck-unterzeile > a { flex: 1 1 auto; min-width: 0; }
html.va-menue-schlank .cs-unter .ck-unterzeile > button[data-mehrchats] {
  display: block; width: 100%; text-align: left; padding: 7px 9px; border: 0; background: none; border-radius: 7px;
  font: 600 14px/1.4 Inter, system-ui, sans-serif; color: #6B1FD1; cursor: pointer;
}
html.va-menue-schlank .cs-unter .ck-unterzeile > button[data-mehrchats]:hover { background: #f4f1fb; }
html.va-menue-schlank .cs-unter .ck-unterzeile.fragt { gap: 6px; padding: 4px 6px; font-size: 14px; }
/* Handy: untere Leiste mit fuenf gleich breiten Punkten, ohne Unterlisten und Pfeile. */
@media (max-width: 900px) {
  html.va-menue-schlank .cs-unter, html.va-menue-schlank .cs-aufzu, html.va-menue-schlank .cs-plus { display: none !important; }
  html.va-menue-schlank .cs-nav > .cs-punkt, html.va-menue-schlank .cs-zweig { flex: 1 1 0; min-width: 0; }
  html.va-menue-schlank .cs-zweig-kopf { justify-content: center; background: none; }
  html.va-menue-schlank .cs-zweig-kopf .cs-punkt { padding: 6px 2px; gap: 2px; }
  html.va-menue-schlank .cs-zweig-kopf.aktiv .cs-punkt::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: #6B1FD1; }
  html.va-menue-schlank .cs-zweig-kopf.aktiv::before { display: none; }
  html.va-menue-schlank .cs-wort { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Unterlisten begrenzt: die fuenf Hauptpunkte bleiben auch auf kleinen Bildschirmen sichtbar (13.10.2026 abends). */
html.va-menue-schlank .cs-unter { max-height: min(260px, 28vh); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #d6cfe8 transparent; }
@media (max-width: 900px) {
  /* Die Regel fuer die Rechtszeile stand nach der Medienabfrage und blendete sie in der Handy-Leiste wieder ein. */
  html.va-menue-schlank .ck-recht { display: none; }
}

/* Zeilen der Unterlisten rollen statt zu schrumpfen (Flex-Spalte mit Hoehengrenze), 13.10.2026 abends. */
html.va-menue-schlank .cs-unter > * { flex: none; }

/* Kopf: Klappknopf direkt neben dem Logo (Ruben 13.10.2026 abends), Suche und Glocke rechts. Nur Reihenfolge per CSS. */
html.va-menue-schlank .cs-marke { order: 0; flex: 0 1 auto; }
html.va-menue-schlank .cs-schmal { order: 1; }
html.va-menue-schlank #ckSuche { order: 2; margin-left: auto; }
html.va-menue-schlank #ckGlocke { order: 3; }
/* Schmale Form (96 px): Zeichen und Klappknopf in einer Zeile, darunter Suche und Glocke; Woerter umbrechen statt
   abschneiden; am Konto nur das Bild. */
html.va-menue-schlank:not(.va-leiste-breit) .ck-leiste { padding-left: 6px; padding-right: 6px; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-kopf { flex-wrap: wrap; justify-content: center; gap: 4px; padding: 2px 0 10px; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-marke { flex: none; justify-content: center; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-logo-zeichen { width: 28px; height: 28px; }
html.va-menue-schlank:not(.va-leiste-breit) #ckSuche { display: inline-flex; margin-left: 0; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-punkt, html.va-menue-schlank:not(.va-leiste-breit) .cs-zweig-kopf .cs-punkt { padding: 8px 2px; gap: 4px; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-wort { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 1.2; hyphens: manual; overflow-wrap: normal; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-zweig-kopf { justify-content: center; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-konto-knopf { justify-content: center; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-konto-knopf .ck-fuss-pfeil, html.va-menue-schlank:not(.va-leiste-breit) .cs-konto-knopf .ck-fuss-text { display: none; }


/* ══ Redesign 13.10.2026 abends (Ruben, PLAN_Redesign-Cockpit_2026-10-13, 100-vms-2d) ══════════════════════════
   Leiste wie ChatGPT/Linear: breit 260 px, eingeklappt 68 px (nur Symbole, Tooltip, Aufklappmenü je Gruppe).
   Ruhige Flächen: Hintergrund #F7F7FA, Weiß mit feinem Rand, Akzent #8B2CF5 sparsam (aktiv, Fokus, primäre Aktion). */
html.va-menue-schlank, html.va-menue-schlank .ck { --ck-leiste: 260px; }
html.va-menue-schlank:not(.va-leiste-breit), html.va-menue-schlank:not(.va-leiste-breit) .ck { --ck-leiste: 68px; }
html.va-gross.va-menue-schlank.va-leiste-breit, html.va-gross.va-menue-schlank.va-leiste-breit .ck { --ck-leiste: 284px; }

html.va-menue-schlank .ck-leiste { padding: 12px 10px 12px; gap: 4px; background: #fff; }
html.va-menue-schlank .cs-kopf { display: flex; align-items: center; gap: 2px; padding: 2px 2px 10px 6px; min-height: 46px; flex-wrap: nowrap; }
html.va-menue-schlank .cs-marke { order: 0; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; }
html.va-menue-schlank .cs-logo { max-height: 36px; width: auto; max-width: 118px; }
html.va-menue-schlank .cs-schmal { order: 1; width: 32px; height: 32px; color: #55556A; border-radius: 8px; }
html.va-menue-schlank #ckSuche { order: 2; margin-left: auto; }
html.va-menue-schlank #csNeu { order: 3; }
html.va-menue-schlank #ckGlocke { order: 4; }
html.va-menue-schlank .cs-kopfknopf { width: 32px; height: 32px; color: #55556a; text-decoration: none; }
html.va-menue-schlank .cs-kopfknopf:hover, html.va-menue-schlank .cs-schmal:hover { background: #f2f2f7; color: #17171F; }
html.va-menue-schlank #csNeu { color: #fff; background: #6B1FD1; }
html.va-menue-schlank #csNeu:hover { background: #7a1fe0; color: #fff; }

/* Navigation: nur sie rollt, Kopf und Fuß bleiben stehen. */
html.va-menue-schlank .cs-nav { display: flex; flex-direction: column; gap: 0; margin-top: 2px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
html.va-menue-schlank .cs-haupt { display: flex; flex-direction: column; gap: 1px; }
html.va-menue-schlank .cs-mehr { display: none; }

/* Hauptpunkte */
html.va-menue-schlank .cs-punkt { min-height: 40px; padding: 0 10px; gap: 11px; border-radius: 8px; font: 500 14px/1.25 Inter, system-ui, sans-serif; color: #17171F; }
html.va-menue-schlank .cs-ico svg { width: 20px; height: 20px; }
html.va-menue-schlank .cs-ico { width: 22px; height: 22px; color: #55556A; }
html.va-menue-schlank .cs-punkt:hover { background: #f2f2f7; }
html.va-menue-schlank .cs-punkt.aktiv, html.va-menue-schlank .cs-zweig-kopf.aktiv { background: #f3ecff; }
html.va-menue-schlank .cs-punkt.aktiv, html.va-menue-schlank .cs-zweig-kopf.aktiv .cs-punkt { color: #17171F; font-weight: 600; }
html.va-menue-schlank .cs-punkt.aktiv .cs-ico, html.va-menue-schlank .cs-zweig-kopf.aktiv .cs-ico { color: #6B1FD1; }
html.va-menue-schlank .cs-punkt.aktiv::before, html.va-menue-schlank .cs-zweig-kopf.aktiv::before { display: none; }
html.va-menue-schlank .cs-zweig-kopf { border-radius: 8px; }
html.va-menue-schlank .cs-zweig-kopf .cs-punkt { padding-right: 2px; }
html.va-menue-schlank .cs-aufzu { width: 30px; height: 32px; color: #55556A; }
html.va-menue-schlank .cs-zahl { background: #6B1FD1; }

/* Unterlisten (Verfahrensfilter, Gespräche, Zuletzt geöffnet) */
html.va-menue-schlank .cs-unter { margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid #e6e6ee; gap: 0; }
html.va-menue-schlank .cs-unter .ck-unterzeile > a, html.va-menue-schlank .cs-unter a.ck-unterzeile { padding: 6px 9px; font-size: 14px; color: #17171F; border-radius: 6px; }
html.va-menue-schlank .cs-unter .ck-unterzeile.aktiv > a, html.va-menue-schlank .cs-unter a.ck-unterzeile.aktiv { background: #f3ecff; color: #17171F; font-weight: 600; }
html.va-menue-schlank .cs-unter .ck-unterzeile.aktiv { background: none; }

/* Gruppen B bis D */
html.va-menue-schlank .cs-gruppen { margin-top: 10px; padding-top: 8px; border-top: 1px solid #ececf2; display: flex; flex-direction: column; gap: 2px; }
html.va-menue-schlank .cs-gruppe[hidden] { display: none; }
html.va-menue-schlank .cs-gruppe-kopf {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 8px 0 10px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; text-align: left; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: #55556A; letter-spacing: .01em;
}
html.va-menue-schlank .cs-gruppe-kopf:hover { background: #f2f2f7; color: #17171F; }
html.va-menue-schlank .cs-gruppe-kopf:focus-visible, html.va-menue-schlank .cs-eintrag:focus-visible { outline: 2px solid #6B1FD1; outline-offset: -2px; }
html.va-menue-schlank.va-leiste-breit .cs-gruppe-kopf .cs-ico { display: none; }
html.va-menue-schlank .cs-gruppe-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.va-menue-schlank .cs-gruppe-pfeil { flex: none; display: inline-flex; color: #55556A; transition: transform .15s ease; }
html.va-menue-schlank .cs-gruppe.zu .cs-gruppe-pfeil { transform: rotate(-90deg); }
html.va-menue-schlank .cs-gruppe.hat-aktiv .cs-gruppe-kopf { color: #17171F; }
html.va-menue-schlank .cs-gruppe-liste { display: flex; flex-direction: column; gap: 1px; padding: 1px 0 6px; }
html.va-menue-schlank .cs-gruppe-liste[hidden] { display: none; }
html.va-menue-schlank .cs-eintrag, .cs-flyout .cs-eintrag {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; text-decoration: none; cursor: pointer; font: 500 14px/1.25 Inter, system-ui, sans-serif; color: #17171F;
  box-sizing: border-box;
}
html.va-menue-schlank .cs-eintrag[hidden], .cs-flyout .cs-eintrag[hidden] { display: none; }
html.va-menue-schlank .cs-eintrag .cs-ico svg, .cs-flyout .cs-eintrag .cs-ico svg { width: 17px; height: 17px; }
html.va-menue-schlank .cs-eintrag .cs-ico, .cs-flyout .cs-eintrag .cs-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: #55556A; flex: none; }
html.va-menue-schlank .cs-eintrag .cs-wort, .cs-flyout .cs-eintrag .cs-wort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.va-menue-schlank .cs-eintrag:hover, .cs-flyout .cs-eintrag:hover { background: #f2f2f7; color: #17171F; }
html.va-menue-schlank .cs-eintrag.aktiv, .cs-flyout .cs-eintrag.aktiv { background: #f3ecff; color: #17171F; font-weight: 600; }
html.va-menue-schlank .cs-eintrag.aktiv .cs-ico, .cs-flyout .cs-eintrag.aktiv .cs-ico { color: #6B1FD1; }

/* Zuletzt geöffnet */
html.va-menue-schlank .cs-zuletzt { margin-top: 10px; padding-top: 8px; border-top: 1px solid #ececf2; }
html.va-menue-schlank .cs-zuletzt[hidden] { display: none; }
html.va-menue-schlank .cs-abschnitt { margin: 0; padding: 6px 10px 4px; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: #55556A; }
html.va-menue-schlank .cs-zuletzt-liste { margin-left: 10px; border-left: 0; padding-left: 0; max-height: none; }

/* Fuß */
html.va-menue-schlank .cs-fuss { border-top: 1px solid #ececf2; padding-top: 8px; gap: 2px; }

/* Aufklappmenü der eingeklappten Leiste und Tooltip (beide am body, damit nichts abgeschnitten wird) */
.cs-flyout {
  position: fixed; z-index: 1100; min-width: 230px; max-width: 300px; padding: 6px; background: #fff; border: 1px solid #e6e6ee;
  border-radius: 12px; box-shadow: 0 12px 32px rgba(24, 24, 31, .14); display: flex; flex-direction: column; gap: 1px;
}
.cs-flyout-titel { padding: 6px 10px 4px; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: #55556A; }
.cs-flyout .cs-eintrag:focus-visible { outline: 2px solid #6B1FD1; outline-offset: -2px; }
.cs-tipp {
  position: fixed; z-index: 1200; pointer-events: none; white-space: nowrap; padding: 5px 9px; border-radius: 6px;
  background: #18181f; color: #fff; font: 500 14px/1.3 Inter, system-ui, sans-serif; box-shadow: 0 4px 12px rgba(24, 24, 31, .2);
}

/* Eingeklappt (68 px): nur Symbole, Wörter erscheinen als Tooltip. */
@media (min-width: 901px) {
html.va-menue-schlank:not(.va-leiste-breit) .ck-leiste { padding: 10px 8px; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-kopf { flex-direction: column; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; padding: 0 0 8px; }
html.va-menue-schlank:not(.va-leiste-breit) #ckSuche { margin-left: 0; display: inline-flex; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-logo { display: none; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-logo-zeichen { display: inline-block; width: 28px; height: 28px; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-punkt,
html.va-menue-schlank:not(.va-leiste-breit) .cs-zweig-kopf .cs-punkt { justify-content: center; padding: 0; min-height: 44px; gap: 0; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-wort, html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe-text,
html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe-pfeil, html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe-liste,
html.va-menue-schlank:not(.va-leiste-breit) .cs-zuletzt, html.va-menue-schlank:not(.va-leiste-breit) .cs-unter,
html.va-menue-schlank:not(.va-leiste-breit) .cs-aufzu { display: none !important; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-zweig-kopf { justify-content: center; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe-kopf { justify-content: center; padding: 0; min-height: 44px; color: #55556A; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe-kopf .cs-ico { display: inline-flex; color: #55556A; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe.hat-aktiv .cs-gruppe-kopf { background: #f3ecff; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe.hat-aktiv .cs-gruppe-kopf .cs-ico { color: #6B1FD1; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-gruppe-kopf.cs-fly-auf { background: #f2f2f7; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-zahl { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; font-size: 12px; line-height: 16px; padding: 0 4px; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-punkt { position: relative; }
html.va-menue-schlank:not(.va-leiste-breit) .cs-konto-knopf { justify-content: center; padding: 6px 0; }
}

/* Handy: untere Leiste mit fünf Punkten, „Mehr“ öffnet alle Bereiche als Fläche. */
@media (max-width: 900px) {
  html.va-menue-schlank .cs-nav { flex-direction: row; overflow: visible; margin: 0; width: 100%; }
  html.va-menue-schlank .cs-haupt { flex-direction: row; width: 100%; gap: 0; }
  html.va-menue-schlank .cs-haupt > .cs-punkt, html.va-menue-schlank .cs-haupt > .cs-zweig { flex: 1 1 0; min-width: 0; }
  html.va-menue-schlank .cs-gruppen, html.va-menue-schlank .cs-zuletzt { display: none; }
  html.va-menue-schlank .cs-mehr { display: flex; }
  html.va-menue-schlank .cs-punkt, html.va-menue-schlank .cs-zweig-kopf .cs-punkt { flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 6px 2px; text-align: center; font-size: 12px; }
  html.va-menue-schlank .cs-wort { display: block !important; font-size: 12px; white-space: normal; overflow: visible; }
  html.va-menue-schlank .cs-punkt.aktiv, html.va-menue-schlank .cs-zweig-kopf.aktiv { background: none; }
  html.va-menue-schlank .cs-zahl { position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; font-size: 12px; line-height: 16px; padding: 0 4px; }
  html.va-menue-schlank .cs-punkt { position: relative; }
  html.cs-mehr-offen.va-menue-schlank .ck-leiste {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; height: auto; flex-direction: column; overflow-y: auto;
    padding: 14px 14px 24px; background: #fff; border-top: 0; box-shadow: none;
  }
  html.cs-mehr-offen.va-menue-schlank .cs-kopf, html.cs-mehr-offen.va-menue-schlank .cs-fuss { display: flex; }
  html.cs-mehr-offen.va-menue-schlank .cs-nav { flex-direction: column; overflow: visible; }
  html.cs-mehr-offen.va-menue-schlank .cs-haupt { flex-direction: column; }
  html.cs-mehr-offen.va-menue-schlank .cs-haupt > .cs-punkt, html.cs-mehr-offen.va-menue-schlank .cs-haupt > .cs-zweig { flex: none; }
  html.cs-mehr-offen.va-menue-schlank .cs-punkt, html.cs-mehr-offen.va-menue-schlank .cs-zweig-kopf .cs-punkt { flex-direction: row; justify-content: flex-start; gap: 11px; min-height: 48px; padding: 0 12px; text-align: left; font-size: 16px; }
  html.cs-mehr-offen.va-menue-schlank .cs-wort { font-size: 16px; }
  html.cs-mehr-offen.va-menue-schlank .cs-gruppen, html.cs-mehr-offen.va-menue-schlank .cs-zuletzt { display: flex; flex-direction: column; }
  html.cs-mehr-offen.va-menue-schlank .cs-eintrag { min-height: 46px; font-size: 16px; }
  html.cs-mehr-offen.va-menue-schlank .cs-gruppe-kopf { min-height: 44px; font-size: 14px; }
  html.cs-mehr-offen.va-menue-schlank .cs-gruppe-kopf .cs-ico { display: none; }
  html.cs-mehr-offen { overflow: hidden; }
  /* Unterleiste: Kopf, Fuß, Pfeile und Unterlisten aus; die Regeln der eingeklappten Form gelten hier nicht. */
  html.va-menue-schlank:not(.cs-mehr-offen) .cs-kopf, html.va-menue-schlank:not(.cs-mehr-offen) .cs-fuss { display: none !important; }
  html.va-menue-schlank:not(.cs-mehr-offen) .ck-leiste { padding: 4px 4px env(safe-area-inset-bottom, 4px) !important; }
  html.va-menue-schlank .cs-aufzu, html.va-menue-schlank:not(.cs-mehr-offen) .cs-unter { display: none !important; }
  html.va-menue-schlank .cs-haupt > .cs-zweig { display: flex; flex-direction: column; }
  html.va-menue-schlank .cs-zweig-kopf { justify-content: center; }
  html.va-menue-schlank .cs-zweig-kopf .cs-punkt { flex: 1 1 auto; }
  html.va-menue-schlank .ck-feedback { bottom: 78px !important; }
  html.cs-mehr-offen.va-menue-schlank .cs-kopf { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; padding: 2px 2px 12px 6px; }
  html.cs-mehr-offen.va-menue-schlank .cs-logo { display: inline-block; }
  html.cs-mehr-offen.va-menue-schlank .cs-logo-zeichen { display: none; }
  html.cs-mehr-offen.va-menue-schlank .cs-gruppe-liste:not([hidden]) { display: flex; }
  html.cs-mehr-offen.va-menue-schlank .cs-gruppe-text, html.cs-mehr-offen.va-menue-schlank .cs-gruppe-pfeil { display: inline-flex; }
  html.cs-mehr-offen.va-menue-schlank .ck-feedback, html.cs-mehr-offen.va-menue-schlank .ns-start { display: none !important; }
}

/* Nachbesserung: Im Aufklappmenü der eingeklappten Leiste stehen die Wörter (die Regel zum Ausblenden gilt dort nicht).
   Hinter „Mehr“ auf dem Handy: Konto mit Name, Unterlisten sichtbar, auch wenn am Konto „schmal“ gewählt ist. */
html.va-menue-schlank .cs-flyout .cs-eintrag .cs-wort { display: block !important; }
@media (max-width: 900px) {
  html.cs-mehr-offen.va-menue-schlank .cs-unter:not([hidden]) { display: flex !important; flex-direction: column; }
  html.cs-mehr-offen.va-menue-schlank .cs-konto-knopf { justify-content: flex-start; padding: 8px 10px; }
  html.cs-mehr-offen.va-menue-schlank .cs-konto-knopf .ck-fuss-text { display: flex !important; }
  html.cs-mehr-offen.va-menue-schlank .cs-konto-knopf .ck-fuss-pfeil { display: inline-flex !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Redesign Phase 6 (13.10.2026 abends, PLAN_Redesign-Cockpit_2026-10-13)
   1. Klappknopf aussen auf der Kante der Leiste (Ruben)
   2. Einheitlicher Seitenkopf: .ck-gruss (auf fast allen Seiten) und neu .ck-seitenkopf, Titel, ein Satz, Aktion rechts
   3. Knoepfe: primaere Aktion in der Akzentfarbe statt Verlauf, sonst ruhig
   4. Handy im schlanken Menue: kein Menueknopf oben, die Leiste steht unten
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  /* Die Navigation rollt fuer sich, also darf die Leiste ueber ihre Kante hinaus zeichnen. */
  html.va-menue-schlank .ck-leiste { overflow: visible; }
  html.va-menue-schlank .cs-schmal { position: absolute; top: 22px; right: -13px; z-index: 40; order: 0; display: grid;
    place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--ck-rand); border-radius: 50%;
    background: #fff; color: #55556a; box-shadow: 0 1px 3px rgba(16, 16, 32, .1); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease; }
  html.va-menue-schlank .cs-schmal:hover { background: #f7f7fa; border-color: #cfcfdc; color: #17171F; }
  html.va-menue-schlank .cs-schmal:focus-visible { outline: 2px solid var(--ck-violett); outline-offset: 2px; }
  html.va-menue-schlank .cs-schmal svg { transition: transform .2s ease; }
  html.va-menue-schlank:not(.va-leiste-breit) .cs-schmal svg { transform: rotate(180deg); }
  html.va-menue-schlank.va-leiste-breit .cs-kopf { padding-right: 16px; }
}
@media (max-width: 900px) {
  html.va-menue-schlank .ck-leiste-knopf { display: none !important; }
  html.va-menue-schlank .cs-schmal { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { html.va-menue-schlank .cs-schmal, html.va-menue-schlank .cs-schmal svg { transition: none; } }

/* Seitenkopf */
.ck-gruss, .ck-seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 20px; margin: 2px 0 24px; }
.ck-gruss h1, .ck-seitenkopf h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em;
  color: var(--ck-titel); }
.ck-gruss > div:first-child > p, .ck-seitenkopf > div:first-child > p { margin: 6px 0 0; font-size: 14px; line-height: 1.5;
  color: var(--ck-gedaempft); }
.ck-gruss h1 .ck-fach-titel, .ck-seitenkopf h1 .ck-fach-titel { font-size: 16px; font-weight: 500; letter-spacing: 0;
  color: var(--ck-gedaempft); }
.ck-seitenkopf-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 761px) {
  .ck-seitenkopf { flex-wrap: nowrap; }
  .ck-seitenkopf > div:first-child { flex: 1 1 auto; min-width: 0; }
  .ck-seitenkopf > div:first-child p { max-width: 76ch; }
  .ck-seitenkopf > :not(:first-child) { flex: 0 0 auto; }
}
@media (max-width: 620px) { .ck-gruss h1, .ck-seitenkopf h1 { font-size: 24px; } }

/* Knoepfe */
.kc-knopf { border-radius: 9px; }
.kc-knopf:hover:not(:disabled) { border-color: #cfcfdc; background: #f7f7fa; color: var(--ck-titel); }
.kc-knopf.betont { background: var(--ck-violett); border-color: var(--ck-violett); color: #fff; }
.kc-knopf.betont:hover:not(:disabled) { filter: none; background: #7a1fe0; border-color: #7a1fe0; color: #fff; }
.kc-knopf:focus-visible { outline-color: var(--ck-violett); }

/* Handy im schlanken Menue: Der schwebende Knopf des Seitenbereichs (nerd-sparring.js) bekommt oben eine eigene Zeile,
   die frueher der Menueknopf mit ihm teilte. Sonst laege er auf langen Seitentiteln. */
@media (max-width: 900px) { html.va-menue-schlank.ns-da .ck-haupt { padding-top: 66px; } }

/* 13.10.2026 spaet (Ruben: „Hilfe erstmal dezenter“): Hilfe im Band als kleine, leise Zeile. */
.ck-hilfe-block { padding-top: 2px; }
.ck-hilfe-knopf.ck-zeile { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 14px; font-weight: 500;
  color: var(--ck-gedaempft, #5e5e74); }
.ck-hilfe-knopf.ck-zeile svg { width: 15px; height: 15px; opacity: .75; }
.ck-hilfe-knopf.ck-zeile:hover { color: var(--ck-titel, #18181f); }

/* ── Menue neu (13.10.2026, KONZEPT_Menue-neu): Bereiche, Suchzeile, Fusszeile der Seite ───────────────────── */
.ck-bereich { margin-top: 10px; }
.ck-bereich .ck-zweck-titel { margin: 4px 0 4px 10px; }
.ck.schmal .ck-bereich .ck-zweck-titel { display: none; }
/* 14.10.2026 (UX U0.1): eigener Name und gekapselt; .ck-zusatz der Werkzeugseiten machte daraus einen Kasten. */
#ckLeiste .ck-zeile-zusatz { display: block; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--ck-gedaempft); }
.ck.schmal #ckLeiste .ck-zeile-zusatz { display: none; }
.ck-suchzeile { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ck-suchzeile .ck-taste { margin-left: auto; font: 500 12px Inter, system-ui, sans-serif; color: var(--ck-gedaempft);
  border: 1px solid var(--ck-rand); border-radius: 5px; padding: 1px 5px; }
.ck-seitenfuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 48px 0 8px;
  padding-top: 14px; border-top: 1px solid var(--ck-rand); font-size: 12px; }
.ck-seitenfuss a { color: var(--ck-gedaempft); text-decoration: none; }
.ck-seitenfuss a:hover { color: var(--ck-violett); text-decoration: underline; }
.ck-seitenfuss span { opacity: .5; }
/* Handy: Der schwebende Nerd-Knopf verdeckt sonst den Kopf der offenen Leiste. */
body:has(.ck-leiste.offen) #nsStart { display: none; }
/* ── Menue Runde 4 (13.10.2026 spaet, Ruben): „…“ bei Alle Werkzeuge, Gruppen der aufgeklappten Liste, Kontaktblatt ── */
.ck-zweig .ck-wz-mehr, .ck-zweig.zu .ck-wz-mehr, .ck-wz-mehr.zu svg, .ck-zweig.zu .ck-wz-mehr svg { transform: none; }
.ck-wz-mehr[aria-expanded="true"] { background: rgba(107, 31, 209, .1); color: var(--ck-violett); }
.ck-wz-mehr:focus-visible, #ckVfNeu:focus-visible { outline: 2px solid var(--ck-violett); outline-offset: 1px; }
.ck-wz-gruppe { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ck-gedaempft); padding: 9px 9px 2px; }
.ck-wz-gruppe:first-child { padding-top: 3px; }
.ck-kt-anliegen { border: 0; margin: 0 0 16px; padding: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ck-kt-anliegen legend { font-size: 14px; font-weight: 600; color: #17171F; margin: 0 0 8px; padding: 0; }
.ck-kt-wahl { position: relative; display: flex; border: 1px solid #e4e4ee; border-radius: 10px; padding: 9px 11px;
  cursor: pointer; background: #fff; transition: border-color .13s, background .13s; }
.ck-kt-wahl:hover { border-color: rgba(107, 31, 209, .45); }
.ck-kt-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ck-kt-wahl strong { display: block; font-size: 14px; color: #17171F; }
.ck-kt-wahl small { display: block; font-size: 12px; color: #55556A; line-height: 1.35; margin-top: 2px; }
.ck-kt-wahl:has(input:checked) { border-color: #6B1FD1; background: rgba(107, 31, 209, .06);
  box-shadow: inset 0 0 0 1px #6B1FD1; }
.ck-kt-wahl:has(input:focus-visible) { outline: 2px solid #6B1FD1; outline-offset: 2px; }
.ck-kt-termin { border: 1px dashed rgba(107, 31, 209, .4); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.ck-kt-termin p { margin: 0 0 12px !important; }
.ck-kt-termin .kc-knopf { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.ck-kt-feldname { display: block; font-size: 14px; font-weight: 600; color: #17171F; margin: 0 0 5px; }
.ck-kt-direkt { font-size: 14px !important; color: #55556A !important; margin: 10px 0 16px !important; }
.ck-kt-direkt a { color: #6B1FD1; font-weight: 600; }
.ck-kt-danke { text-align: center; padding: 14px 0; color: #17171F !important; }
@media (prefers-reduced-motion: reduce) { .ck-kt-wahl { transition: none; } }

/* ── UX U0 (14.10.2026, PROMPT_Korrektur-UX-UI) ───────────────────────────────────────────────────────── */
/* U0.1: Die Leiste ist gegen Stile der Werkzeugseiten abgeschirmt (gleiche Zeilen wie auf /verfahren). */
#ckLeiste .ck-zeile { box-sizing: border-box; }
#ckLeiste .ck-zeile > svg, #ckLeiste .ck-kopfzeile > a > svg { flex: 0 0 auto; }
#ckLeiste .ck-text { min-width: 0; }
/* U0.3: Kennzahlen der Angebote als Raster mit Umbruch; die Schaltflaeche „Fragen offen“ sieht aus wie die Kacheln. */
.sb-stand { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sb-stand > div, .sb-stand > button { min-width: 0; padding: 11px 14px; border: 1px solid var(--ck-rand); border-radius: 10px;
  background: #fafbfd; text-align: left; font: inherit; color: inherit; }
.sb-stand > button.achtung { border-color: #f4d9a8; background: #fff8ec; cursor: pointer; }
.sb-stand > button.achtung strong { color: #8A4B00; }
/* U0.4: Zaehler der Verfahrensliste bricht um statt abgeschnitten zu werden. */
#vfAnzahl { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
/* U0.6: Ueberfaelliges in der Glocke (das Panel haengt am body, deshalb feste Farben). */
.ck-ben-ueber { padding: 6px 0 4px; border-bottom: 1px solid #ececf2; }
.ck-ben-ueber-titel { margin: 4px 14px 2px; font-size: 12px; font-weight: 700; color: #a3241b; }
.ck-ben.ueber .ck-ben-art { color: #a3241b; }
/* U0.9: Haken ohne Inhalt und Begruendung */
.vf-sl-schritt.ohne-inhalt .vf-sl-haken { background: #fff !important; border: 2px dashed #8a4b00 !important; }
.vf-sl-zeile.ohne-inhalt span { color: #8a4b00; }
.vf-haken-grund { display: grid; gap: 8px; margin-top: 10px; width: 100%; }
.vf-haken-grund label { font-size: 14px; font-weight: 600; color: #17171f; }
.vf-haken-grund textarea { width: 100%; min-height: 64px; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #c9c9d6;
  border-radius: 8px; box-sizing: border-box; }
.vf-haken-grund .vf-haken-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.vf-sl-zeile.mit-grund { flex-wrap: wrap; }
/* Einfache Seiten in der Huelle (Anleitung, Fehlerseite) */
.ck-einfach { max-width: 760px; }
.ck-einfach h2 { font-size: 20px; margin: 28px 0 8px; color: var(--ck-titel); }
.ck-einfach p, .ck-einfach li { font-size: 16px; line-height: 1.6; color: #17171F; }
.ck-einfach ul { padding-left: 20px; margin: 0 0 12px; }
.ck-einfach kbd { border: 1px solid var(--ck-rand); border-radius: 5px; padding: 1px 6px; font-size: 14px; }
.ck-einfach .ck-einfach-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ══ U1 Designsystem: Token und Bauteile (14.10.2026, PROMPT_Korrektur-UX-UI) ═══════════════════════════════
   Beschreibung und Beispiele: docs/ui/designsystem.md, Musterseite /ui-muster (intern).
   Die Token stehen auf :root UND auf allen Flaechen, die am <body> haengen (.ck-blatt, Benachrichtigungen,
   Bieterseite), sonst greifen sie dort nicht (siehe Befund 23.09.). Die alten Namen (--ck-*, --bt-*, --st-*)
   zeigen ab hier auf die Token, damit alle bestehenden Regeln ohne Umbau mitziehen.
   Kontraste gerechnet auf #FFFFFF: Text 17,4 : 1, sekundaer 7,0 : 1, Platzhalter 5,3 : 1, Akzent 7,9 : 1,
   Erfolg 6,1 : 1, Warnung 6,7 : 1, Fehler 7,0 : 1, Info 6,0 : 1; Weiss auf Akzent 7,9 : 1. */
:root, .ck, .ck-blatt, .ag-seite, .ck-ben-kasten {
  --ui-schrift: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ui-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ui-s12: 12px; --ui-s14: 14px; --ui-s16: 16px; --ui-s20: 20px; --ui-s24: 24px; --ui-s32: 32px;
  --ui-text: #17171F; --ui-text-2: #55556A; --ui-platzhalter: #6A6A7E;
  --ui-grund: #F6F6F9; --ui-flaeche: #FFFFFF; --ui-rand: #E4E4EA; --ui-rand-stark: #D5D5DE; --ui-linie: #EFEFF3;
  --ui-akzent: #6B1FD1; --ui-akzent-tief: #4E129E; --ui-akzent-hell: #F3EEFC; --ui-akzent-rand: #D9C7F7;
  --ui-erfolg: #12715B; --ui-erfolg-hell: #E5F4EF;
  --ui-warnung: #8A4B00; --ui-warnung-hell: #FDF1E1;
  --ui-fehler: #A3241B; --ui-fehler-hell: #FCEBEA;
  --ui-info: #1D5FBF; --ui-info-hell: #E8F0FC;
  --ui-a1: 4px; --ui-a2: 8px; --ui-a3: 12px; --ui-a4: 16px; --ui-a5: 20px; --ui-a6: 24px; --ui-a8: 32px; --ui-a10: 40px;
  --ui-r-karte: 12px; --ui-r-knopf: 10px; --ui-r-feld: 8px; --ui-r-etikett: 999px;
  --ui-schatten-1: 0 1px 2px rgba(23, 23, 31, .06);
  --ui-schatten-2: 0 6px 24px rgba(23, 23, 31, .12);
  --ui-fokus: 0 0 0 3px rgba(107, 31, 209, .28);

  --ck-flaeche: var(--ui-flaeche); --ck-grund: var(--ui-grund); --ck-rand: var(--ui-rand); --ck-linie: var(--ui-linie);
  --ck-titel: var(--ui-text); --ck-kartentitel: var(--ui-text); --ck-text: var(--ui-text); --ck-gedaempft: var(--ui-text-2);
  --ck-violett: var(--ui-akzent); --ck-primaer: var(--ui-akzent); --ck-primaer-tief: var(--ui-akzent-tief);
  --ck-blau-text: var(--ui-info);
  --bt-text: var(--ui-text); --bt-text2: var(--ui-text-2); --bt-leise: var(--ui-text-2); --bt-blass: var(--ui-text-2);
  --bt-rand: var(--ui-rand); --bt-linie: var(--ui-linie);
  --st-lauf-text: var(--ui-info); --st-lauf-grund: var(--ui-info-hell);
  --st-pruef-text: var(--ui-akzent); --st-pruef-grund: var(--ui-akzent-hell); --st-pruef-punkt: var(--ui-akzent);
  --st-gut-text: var(--ui-erfolg); --st-gut-grund: var(--ui-erfolg-hell); --st-gut-voll: var(--ui-erfolg);
  --st-fehler-text: var(--ui-fehler); --st-fehler-grund: var(--ui-fehler-hell); --st-fehler-voll: var(--ui-fehler);
  --st-vorb-text: var(--ui-warnung); --st-neutral-text: var(--ui-text-2); --st-frist-ab: var(--ui-text-2);
}
.ck, .ck-blatt { font-family: var(--ui-schrift); color: var(--ui-text); }
.ck .ck-haupt { background: var(--ui-grund); }

/* ── Knopf: sekundaer (.kc-knopf), primaer (.betont), Text (.text), Gefahr (.gefahr), klein (.klein) ── */
.kc-knopf {
  min-height: 40px; padding: 0 16px; gap: 8px;
  border: 1px solid var(--ui-rand-stark); border-radius: var(--ui-r-knopf);
  background: var(--ui-flaeche); color: var(--ui-text);
  font-family: var(--ui-schrift); font-size: 14px; font-weight: 600; line-height: 1.25;
}
.kc-knopf:hover:not(:disabled) { border-color: var(--ui-akzent-rand); background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); }
.kc-knopf:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
.kc-knopf.betont, .kc-knopf.primaer { background: var(--ui-akzent); border-color: var(--ui-akzent); color: #FFFFFF; filter: none; }
.kc-knopf.betont:hover:not(:disabled), .kc-knopf.primaer:hover:not(:disabled) { background: var(--ui-akzent-tief); border-color: var(--ui-akzent-tief); color: #FFFFFF; filter: none; }
.kc-knopf.text { background: transparent; border-color: transparent; color: var(--ui-akzent); padding: 0 8px; }
.kc-knopf.text:hover:not(:disabled) { background: var(--ui-akzent-hell); border-color: transparent; }
.kc-knopf.gefahr { color: var(--ui-fehler); border-color: #E9B9B4; background: var(--ui-flaeche); }
.kc-knopf.gefahr:hover:not(:disabled) { color: var(--ui-fehler); border-color: var(--ui-fehler); background: var(--ui-fehler-hell); }
.kc-knopf.betont.gefahr { background: var(--ui-fehler); border-color: var(--ui-fehler); color: #FFFFFF; }
.kc-knopf.klein { min-height: 32px; padding: 0 12px; }
.kc-knopf:disabled { color: var(--ui-text-2); background: #F1F1F5; border-color: var(--ui-rand); }
.kc-knopf:disabled.betont { background: #E6DDF7; color: var(--ui-akzent-tief); border-color: transparent; }

/* ── Statusetikett: .vf-marke mit festem Satz (blau, warn, violett, gut, fehler, grau, ende) ──
   Punkt vor dem Wort traegt die Form, damit Farbe nie allein spricht. */
.vf-marke { font-size: 12px; font-weight: 600; border-radius: var(--ui-r-etikett); padding: 2px 10px; min-height: 22px; }
.vf-marke::before { opacity: 1; }

/* ── Reiter (hoechstens zwei Ebenen) und Segmentschalter ── */
.ui-reiter { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ui-rand); }
.ui-reiter > button, .ui-reiter > a {
  min-height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: 600 14px/1.2 var(--ui-schrift); color: var(--ui-text-2); text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; margin-bottom: -1px;
}
.ui-reiter > [aria-selected="true"], .ui-reiter > [aria-current="page"] { color: var(--ui-akzent); border-bottom-color: var(--ui-akzent); }
.ui-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ui-r-knopf); background: #EDEDF2; }
.ui-segment > button {
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  font: 600 14px/1.2 var(--ui-schrift); color: var(--ui-text-2); cursor: pointer;
}
.ui-segment > [aria-pressed="true"], .ui-segment > [aria-selected="true"] { background: var(--ui-flaeche); color: var(--ui-text); box-shadow: var(--ui-schatten-1); }

/* ── Tabelle: Kopf >= 32 px, ganze Zeile klickbar (tr[data-href], ui-bauteile.js), mobil als Karten ── */
.ui-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-tabelle th { height: 36px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--ui-text-2); border-bottom: 1px solid var(--ui-rand); white-space: nowrap; }
.ui-tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--ui-linie); vertical-align: top; }
.ui-tabelle tr[data-href] { cursor: pointer; }
.ui-tabelle tr[data-href]:hover td { background: #FAF8FE; }
.ui-tabelle tr[data-href]:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: -2px; }
@media (max-width: 640px) {
  .ui-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ui-tabelle, .ui-tabelle tbody, .ui-tabelle tr, .ui-tabelle td { display: block; width: 100%; box-sizing: border-box; }
  .ui-tabelle tr { border: 1px solid var(--ui-rand); border-radius: var(--ui-r-karte); margin: 0 0 12px; padding: 8px 12px; background: var(--ui-flaeche); }
  .ui-tabelle td { border: 0; padding: 4px 0; display: flex; gap: 12px; justify-content: space-between; }
  .ui-tabelle td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--ui-text-2); flex: 0 0 40%; }
}

/* ── Formularfeld: sichtbares Label, Platzhalter >= 4,5 : 1, ein Stil fuer Datum; Checkbox 20 px ── */
.ck ::placeholder, .ck-blatt ::placeholder { color: var(--ui-platzhalter); opacity: 1; }
.ck input[type="checkbox"], .ck input[type="radio"], .ck-blatt input[type="checkbox"], .ck-blatt input[type="radio"] {
  width: 20px; height: 20px; accent-color: var(--ui-akzent); flex: 0 0 auto;
}
.ui-feld { display: flex; flex-direction: column; gap: 6px; }
.ui-feld > label, .ui-feld > .ui-label { font-size: 14px; font-weight: 600; color: var(--ui-text); }
.ui-feld > .ui-hilfe { font-size: 12px; color: var(--ui-text-2); }
.ui-feld :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 40px; padding: 8px 12px; box-sizing: border-box; border: 1px solid var(--ui-rand-stark);
  border-radius: var(--ui-r-feld); background: var(--ui-flaeche); color: var(--ui-text); font: 400 14px/1.4 var(--ui-schrift);
}
.ui-feld :is(input, select, textarea):focus-visible { outline: none; border-color: var(--ui-akzent); box-shadow: var(--ui-fokus); }
.ui-feld.fehler :is(input, select, textarea) { border-color: var(--ui-fehler); }
.ui-feld .ui-fehlertext { font-size: 12px; color: var(--ui-fehler); }

/* ── Leerer Zustand, Lade-Skelett ── */
.ck-leer, .ui-leer { font-size: 14px; color: var(--ui-text-2); }
.ui-leer { padding: 24px; border: 1px dashed var(--ui-rand-stark); border-radius: var(--ui-r-karte); background: var(--ui-flaeche); text-align: center; }
.ui-leer strong { display: block; color: var(--ui-text); font-size: 16px; margin-bottom: 4px; }
.ui-skelett { display: block; border-radius: 6px; background: linear-gradient(90deg, #EEEEF3 25%, #F6F6F9 50%, #EEEEF3 75%); background-size: 200% 100%; animation: ui-skelett 1.4s ease-in-out infinite; min-height: 14px; }
.ui-skelett.zeile { height: 14px; margin: 8px 0; }
.ui-skelett.titel { height: 24px; width: 40%; margin: 4px 0 16px; }
.ui-skelett.karte { height: 96px; border-radius: var(--ui-r-karte); margin: 0 0 12px; }
@keyframes ui-skelett { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-skelett { animation: none; } }

/* ── Speicherleiste „Ungespeicherte Aenderungen“ (ui-bauteile.js: UI.speicherleiste) ── */
.ui-speicherleiste {
  position: sticky; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; margin-top: 16px; border: 1px solid var(--ui-akzent-rand); border-radius: var(--ui-r-karte);
  background: var(--ui-flaeche); box-shadow: var(--ui-schatten-2); font-size: 14px; color: var(--ui-text);
}
.ui-speicherleiste[hidden] { display: none; }
.ui-speicherleiste .ui-sl-text { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ui-speicherleiste .ui-sl-text::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-warnung); }
.ui-speicherleiste .ui-sl-knoepfe { display: flex; gap: 8px; }

/* ── Mehr-Menue fuer seltene und gefaehrliche Aktionen (UI.mehr) ── */
.ui-mehr { position: relative; display: inline-block; }
.ui-mehr-knopf { width: 40px; padding: 0; font-size: 18px; letter-spacing: 1px; }
.ui-mehr-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px; padding: 6px;
  border: 1px solid var(--ui-rand); border-radius: var(--ui-r-karte); background: var(--ui-flaeche); box-shadow: var(--ui-schatten-2);
}
.ui-mehr-liste[hidden] { display: none; }
.ui-mehr-liste button {
  display: flex; width: 100%; min-height: 40px; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 8px;
  background: none; font: 500 14px/1.2 var(--ui-schrift); color: var(--ui-text); text-align: left; cursor: pointer;
}
.ui-mehr-liste button:hover, .ui-mehr-liste button:focus-visible { background: var(--ui-akzent-hell); outline: none; }
.ui-mehr-liste button.gefahr { color: var(--ui-fehler); }
.ui-mehr-liste button.gefahr:hover { background: var(--ui-fehler-hell); }
.ui-mehr-liste .ui-mehr-frage { padding: 8px 12px; font-size: 14px; color: var(--ui-text); }
.ui-mehr-liste .ui-mehr-frage p { margin: 0 0 8px; }
.ui-mehr-liste .ui-mehr-frage div { display: flex; gap: 8px; }

/* ── Monospace nur fuer Aktenzeichen und Betraege in Tabellen ── */
.ui-mono, .ui-tabelle td.betrag { font-family: var(--ui-mono); font-variant-numeric: tabular-nums; }

/* KI-Vorbefuellen (2.8): Einleitungssatz der Zusammenfassung in normaler Textfarbe (Wunsch 2d, 14.10.). */
.vb-zusammen p { color: var(--ui-text); }

/* ── U1 Nachtrag (14.10.2026): Einzelfaelle aus der Nachmessung ── */
.vf-feld small, .vf-feld > span > small { font-size: 12px; }
.ue-trenner { color: var(--ui-text-2); }
h1 .ck-fach-titel { font-size: 16px; font-weight: 500; }
.pe-lese-leer p, .pe-lese-leer { color: var(--ui-text-2); }
.av-mehrtext { color: var(--ui-akzent); }
.gh-klein { font-size: 12px; }
.am-karte .am-mitte p { font-size: 14px; color: var(--ui-text-2); }
.am-karte .am-mitte h3, #ghTitel { font-size: 16px; }
.hr-reiter, .hr-profi-knopf { font-size: 14px; }
.hr-profi .hr-erkl { color: var(--ui-text-2); }

/* ══ U2 Huelle und Leiste (14.10.2026, PROMPT_Korrektur-UX-UI) ═════════════════════════════════════════════
   Sprunglink, Gruppen der Einstellungen, kein schwebender Feedback-Knopf, Phasenreiter der Akte ohne Abschneiden. */
:root, .ck, .ck-blatt, .ag-seite, .ck-ben-kasten { --ck-blau: var(--ui-info); }
.ck-sprung {
  position: absolute; left: 16px; top: -64px; z-index: 3000; padding: 10px 16px; border-radius: var(--ui-r-knopf);
  background: var(--ui-akzent); color: #FFFFFF; font: 600 14px/1.2 var(--ui-schrift); text-decoration: none;
  box-shadow: var(--ui-schatten-2);
}
.ck-sprung:focus { top: 12px; outline: 2px solid #FFFFFF; outline-offset: 2px; }
#inhalt:focus { outline: none; }
/* 14.10.2026 spaet (Ruben): Das Feedback-Symbol unten rechts ist wieder da; die U2-Regel, die es ausblendete, ist weg. */
.ck-ein-gruppe { margin: 16px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-2); }
.ck-ein-gruppe:first-child { margin-top: 4px; }
a.ck-ein-nav { text-decoration: none; }
.ck-ein-raus { margin-left: auto; font-size: 12px; color: var(--ui-text-2); }
.ue-phasen.ue-sechs .vf-ph-name { white-space: normal; overflow: visible; }
.ue-phasen .vf-ph-name i { flex: 0 0 8px; }
.ue-phasen.ue-sechs > li.vf-ph { padding: 14px 10px; }

/* U2 Nachtrag (14.10.2026): Mit beschrifteter Leiste ist die Akte schmaler; der Phasenbalken (entfaellt in U3)
   steht deshalb bis 1600 px in zwei Reihen zu drei, die Namen werden nicht ueberlagert. */
@media (max-width: 1600px) { .ue-phasen.ue-sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ue-phasen.ue-sechs .vf-ph-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ U3 Akte (14.10.2026, PROMPT_Korrektur-UX-UI) ═══════════════════════════════════════════════════════════
   Kopf mit „Als Naechstes“ und Hauptaktion, Mehr-Menue, Kurznamen mit Fachbegriff, Zweck und Projekt in den
   Stammdaten, Stand aus dem Ablauf. */
.vf-u3-ausloeser { display: none !important; }
.vf-kopf-u3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.vf-kn { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.vf-kn-label { font-size: 12px; color: var(--ui-text-2); }
.vf-kn-schritt { font-size: 14px; font-weight: 600; color: var(--ui-text); }
.vf-sl-text .vf-sl-fach { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--ui-text-2); }
.vf-akte-raster.vf-sl-zu .vf-sl-fach { display: none; }
.vf-sk-fach { margin: 2px 0 0; font-size: 14px; color: var(--ui-text-2); }
.vf-frist-hinweis { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--ui-warnung-hell); color: var(--ui-warnung);
  font-size: 14px; max-width: 760px; }
.vf-zweck-stamm { padding: 12px; border: 1px solid var(--ui-linie); border-radius: 10px; background: #FAFAFC; }
.vf-zweck-stamm .vf-sl-zweck { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; margin: 0; padding: 0; border: 0; }
.vf-zweck-stamm .vf-sl-zweck label { font-size: 14px; font-weight: 600; color: var(--ui-text); }
.vf-zweck-stamm .vf-sl-warn { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ui-warnung); }
.vf-zweck-stamm .vf-sl-neu { grid-column: 1 / -1; display: flex; gap: 8px; }
.vf-stand-fest p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.vf-stand-fest small { font-size: 12px; color: var(--ui-text-2); }
@media (max-width: 760px) { .vf-kopf-u3 { justify-content: flex-start; } .vf-kn { align-items: flex-start; } }

/* ── U3b (14.10.2026): Dokumente als Ausklappbereich, Ueberblick gekuerzt, Lade-Skelett, Eignung als Etikett ── */
html.vf-akte-an .ue-wz, html.vf-akte-an #p10Kalender { display: none; }
html.vf-akte-an.vf-kal-auf #p10Kalender { display: block; }
.vf-doku-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1500; width: min(400px, 100%); overflow-y: auto;
  box-sizing: border-box; padding: 16px 16px 24px; background: var(--ui-flaeche); border-left: 1px solid var(--ui-rand);
  box-shadow: var(--ui-schatten-2); }
.vf-doku-panel[hidden] { display: none; }
.vf-doku-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; }
.vf-doku-kopf h2 { margin: 0; font-size: 20px; color: var(--ui-text); }
.vf-doku-panel .ue-karte { border: 0; box-shadow: none; padding: 0; background: none; }
.vf-doku-ordner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 0; font-size: 14px; color: var(--ui-text-2); }
.vf-aufgaben { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.vf-aufgaben li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ui-text); }
.vf-aufgaben small { font-size: 12px; color: var(--ui-text-2); }
.vf-aufgaben small.ueber { color: var(--ui-fehler); }
.vf-lade-skelett { padding: 8px 0; }
.vf-lade-raster { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 20px; margin-top: 16px; }
@media (max-width: 760px) { .vf-lade-raster { grid-template-columns: 1fr; } }
.vf-zweck-stamm .vf-sl-zweck label { text-transform: none; letter-spacing: normal; }
#vfBeteiligte .eg-marke { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px;
  border: 1px solid var(--st-neutral-rand); border-radius: 999px; background: var(--st-neutral-grund); color: var(--ui-text-2);
  font: 600 12px/1.2 var(--ui-schrift); cursor: pointer; }
#vfBeteiligte .eg-marke i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#vfBeteiligte .eg-marke small { font-size: 12px; font-weight: 400; }
#vfBeteiligte .eg-marke.eg-f-gut { background: var(--ui-erfolg-hell); border-color: #A6E1CB; color: var(--ui-erfolg); }
#vfBeteiligte .eg-marke.eg-f-warn { background: var(--ui-warnung-hell); border-color: #F1D3A8; color: var(--ui-warnung); }
#vfBeteiligte .eg-marke.eg-f-fehler { background: var(--ui-fehler-hell); border-color: #F5BDB6; color: var(--ui-fehler); }
#vfBeteiligte .eg-marke.eg-f-blau { background: var(--ui-info-hell); border-color: #B4CEFF; color: var(--ui-info); }
#vfBeteiligte .eg-marke:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }

/* ── U3c (14.10.2026): Schritt-Fokus. Wert, Termine, Zuschlag und Oeffnung zeigen nur ihren Teil, statt in den
   Ueberblick oder den ganzen Angebotsreiter zu springen. Der Ueberblick selbst zeigt alles. ── */
#vfP-uebersicht[data-fokus="wert"] .ue-raster, #vfP-uebersicht[data-fokus="termine"] .ue-raster,
#vfP-uebersicht[data-fokus="zuschlag"] .ue-raster { grid-template-columns: minmax(0, 1fr); }
#vfP-uebersicht[data-fokus="wert"] #vfRechts, #vfP-uebersicht[data-fokus="wert"] #vfTermine,
#vfP-uebersicht[data-fokus="wert"] #vfStammKarte > :not(.ue-kopf):not(.ue-felder),
#vfP-uebersicht[data-fokus="wert"] #vfStammKarte .ue-felder > :not([data-feld="auftragswert"]),
#vfP-uebersicht[data-fokus="termine"] #vfRechts, #vfP-uebersicht[data-fokus="termine"] #vfStammKarte,
#vfP-uebersicht[data-fokus="zuschlag"] #vfRechts, #vfP-uebersicht[data-fokus="zuschlag"] #vfStammKarte,
#vfP-uebersicht[data-fokus="zuschlag"] #vfTermine .ue-zeit > :not([data-feld="bindefrist"]):not([data-feld="zuschlagsfrist"]),
#vfP-angebote[data-fokus="oeffnung"] .vf-teile, #vfP-angebote[data-fokus="oeffnung"] #vfSubmission > .sb-schalter,
#vfP-angebote[data-fokus="oeffnung"] #vfFormular, #vfP-angebote[data-fokus="oeffnung"] #vfAngMail,
#vfP-angebote[data-fokus="oeffnung"] #vfGewichtung, #vfP-angebote[data-fokus="oeffnung"] #vfLvWertBlock,
#vfP-angebote[data-fokus="oeffnung"] .vf-gr-zugaenge, #vfP-angebote[data-fokus="oeffnung"] #vfZugaenge,
#vfP-angebote[data-fokus="oeffnung"] #vfVerhandlungBlock, #vfP-angebote[data-fokus="oeffnung"] #psBlock { display: none !important; }
.vf-fragen-ort { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ui-rand); }
.ef-alle { margin-top: 8px; }

/* ── U3d (14.10.2026): Protokoll als Dokumentation des Verfahrens, druckbar ── */
.vm-ansicht { display: grid; gap: 16px; }
.vm-kopf h3 { margin: 0; font-size: 20px; color: var(--ui-text); }
.vm-kopf p { margin: 4px 0 0; font-size: 14px; color: var(--ui-text-2); }
.vm-kopf .vm-hinweis { font-size: 12px; }
.vm-beteiligte { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--ui-rand); border-radius: 10px; background: var(--ui-flaeche); font-size: 14px; }
.vm-beteiligte dt { font-weight: 600; color: var(--ui-text); }
.vm-beteiligte dd { margin: 0; color: var(--ui-text); }
.vm-tag h4 { margin: 8px 0 6px; font-size: 14px; font-weight: 700; color: var(--ui-text); }
.vm-tag ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ui-rand); }
.vm-tag li { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(120px, 220px); gap: 12px; padding: 6px 0 6px 12px;
  font-size: 14px; color: var(--ui-text); border-bottom: 1px solid var(--ui-linie); }
.vm-tag time { color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
.vm-tag em { font-style: normal; color: var(--ui-text-2); }
.vm-wer { color: var(--ui-text-2); overflow-wrap: anywhere; }
.vm-fehler .vm-text { color: var(--ui-fehler); }
.vm-technik { margin-top: 16px; }
#vfProtokollKnoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 760px) { .vm-tag li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media print {
  html.vm-druck body * { visibility: hidden !important; }
  html.vm-druck #vfProtAnsicht, html.vm-druck #vfProtAnsicht * { visibility: visible !important; }
  html.vm-druck #vfProtAnsicht { position: absolute; left: 0; top: 0; width: 100%; }
}
/* Verfahrensangaben: Beschriftungen ohne Silbentrennung (Bericht 5.3). */
#vfP-angaben label, #vfP-angaben .vf-feld > span, #vfP-angaben legend, #vfP-angaben h3 { hyphens: manual; -webkit-hyphens: manual; }

/* U3 (14.10.2026): Anwendungszweck in den Verfahrensangaben nur als Angabe, geaendert wird in den Stammdaten. */
.va-zweck-info .va-zweck-label { display: block; font-size: 14px; font-weight: 600; color: var(--ui-text); }
.va-zweck-info p { margin: 4px 0 0; font-size: 14px; color: var(--ui-text); }
.va-zweck-info small { font-size: 12px; color: var(--ui-text-2); }

/* ── U4 (14.10.2026): KI-Werkzeuge im Cockpit ohne Werbeteile ── */
/* Die Wahl des Sprachmodells steht unter Einstellungen > KI-Anbieter, nicht im Werkzeug. */
.ck #clModel { display: none !important; }
.ck-erg-leer { margin: 16px 0; }
.ck-erg-leer[hidden] { display: none; }

/* U4 Nachtrag: Werkzeugseiten im Cockpit auf die Token (die Produktseite ausserhalb bleibt unveraendert). */
.ck .cl-note { font-size: 12px; color: var(--ui-text-2); }
.ck .cl-input::placeholder { color: var(--ui-platzhalter); opacity: 1; }
.ck .cl-tool, .ck .cl-tool span, .ck .cl-chip { font-size: 14px; }
.ck .cl-bubble, .ck .cl-bubble b { font-size: 14px; }
.ck #ckCard h3 { font-size: 16px; }
.ck #ckCard .ck-h-sub { font-size: 14px; color: var(--ui-text-2); }
.ck #ckDrop .t { font-size: 14px; }
.ck #ckDrop .s { font-size: 12px; color: var(--ui-text-2); }

/* U4 (14.10.2026): Live-Editor, Vorschlag der KI mit Vergleich Bisher/Vorschlag. */
.dk-vg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 900px) { .dk-vg { grid-template-columns: minmax(0, 1fr); } }
.dk-vg > section { padding: 12px 14px; border: 1px solid var(--ui-rand); border-radius: 10px; background: var(--ui-flaeche); font-size: 14px; line-height: 1.55; color: var(--ui-text); max-height: 420px; overflow: auto; }
.dk-vg > .dk-vg-neu { border-color: var(--ui-akzent-rand); background: #FCFAFF; }
.dk-vg-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ui-text-2); text-transform: uppercase; letter-spacing: .04em; }
.dk-vg-titel .vf-marke { text-transform: none; letter-spacing: 0; }
.dk-vg p { margin: 0 0 8px; }
.dk-vg .dk-vg-h { font-weight: 700; }
.dk-vg .dk-vg-leer { color: var(--ui-text-2); }
.dk-vg-feld textarea { width: 100%; min-height: 220px; box-sizing: border-box; font: 14px/1.5 var(--ui-schrift); padding: 8px 10px; border: 1px solid var(--ui-rand-stark); border-radius: 8px; color: var(--ui-text); }

/* U4 (14.10.2026): Das Modell des Vergabe-Nerds waehlt man unter Einstellungen > KI-Anbieter, nicht im Werkzeug. */
.ck .nd-modell { display: none !important; }
.ck-ein-nerd { margin-top: 24px; }

/* U5 (14.10.2026): Blatt „Neues Verfahren“ zuerst mit Bezeichnung und Anwendungszweck; der Rest unter „Weitere Angaben“.
   Der Vorschlag aus der Bezeichnung ist der vierte Weg der Leiste „Mit KI vorbefüllen“, seine Meldung steht darunter. */
.vf-neu-mehr { margin: 16px 0 0; border-top: 1px solid var(--ui-linie); padding-top: 12px; }
.vf-neu-mehr > summary { cursor: pointer; font-size: var(--ui-s14); font-weight: 600; color: var(--ui-text); min-height: 32px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vf-neu-mehr > summary { list-style: none; }
.vf-neu-mehr > summary::-webkit-details-marker { display: none; }
.vf-neu-mehr > summary::before { content: ''; flex: none; align-self: center; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 2px solid var(--ui-text-2); border-bottom: 2px solid var(--ui-text-2); transform: rotate(-45deg); transition: transform .12s ease; }
.vf-neu-mehr[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .vf-neu-mehr > summary::before { transition: none; } }
.vf-neu-mehr > summary small { font-weight: 400; font-size: var(--ui-s12); color: var(--ui-text-2); }
.vf-neu-mehr > summary:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; border-radius: 4px; }
.vf-neu-mehr[open] > summary { margin-bottom: 8px; }
.vf-vorschlag-meldung { margin: 8px 0 0; }
.vf-vorschlag-meldung:empty { display: none; }

/* U6a (14.10.2026): Verfahrensliste mit einer Filterzeile, Seltenes unter „Weitere Filter“; Datum der Frist einzeilig. */
.vf-filter { gap: var(--ui-a2) var(--ui-a3); }
.vf-filter .su-leiste { display: contents; }
.vf-weitere-knopf { gap: 6px; }
.vf-weitere-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--ui-r-etikett); background: var(--ui-akzent); color: #fff; font-size: var(--ui-s12); font-weight: 700; }
.vf-weitere-zahl:empty { display: none; }
.vf-weitere { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-a2) var(--ui-a3);
  padding: var(--ui-a3); border-radius: var(--ui-r-feld); background: var(--ui-grund); }
.vf-weitere[hidden] { display: none; }
.vf-t .vf-datum { white-space: nowrap; }

/* U6 (14.10.2026): Hinweis im Blatt „Neues Verfahren“, wenn das Haus vor der ersten Akte noch keinen Nummernkreis hat. */
.vf-nk-hinweis { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--ui-r-feld); background: var(--ui-warnung-hell); color: var(--ui-warnung);
  font-size: var(--ui-s14); line-height: 1.45; }
.vf-nk-hinweis a { color: var(--ui-warnung); font-weight: 600; text-decoration: underline; }

/* U6 (14.10.2026): Bob, hoechstens zwei Etiketten je Frage; der Rest aufklappbar. */
.bb-mehr { margin: 8px 0 0; font-size: var(--ui-s14); color: var(--ui-text); }
.bb-mehr > summary { cursor: pointer; font-weight: 600; color: var(--ui-text-2); min-height: 32px; display: flex; align-items: center; }
.bb-mehr > summary:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; border-radius: 4px; }
.bb-mehr ul { margin: 4px 0 0; padding-left: 18px; }
.bb-sperre { color: var(--ui-warnung); }
.bb-beleg { display: inline-flex; align-items: center; gap: 6px; }

/* U6 (14.10.2026): Vorlagen bearbeiten als eigene Seite (vorlagen-seite.js), Vorschau mit Musterdaten, Platzhalter-Menue. */
html.vo-seite-an main.ck-haupt > *:not(.vo-als-seite):not(.ck-gruss):not(.ck-leiste-knopf) { display: none !important; }
html.vo-seite-an main.ck-haupt > .ck-gruss .bb-kopfknoepfe { display: none; }
.ck-blatt.vo-als-seite { position: static; inset: auto; z-index: auto; display: block; padding: 0; margin: 16px 0 0; background: none;
  overflow: visible; backdrop-filter: none; }
.ck-blatt.vo-als-seite[hidden] { display: none; }
.vo-als-seite > .ck-blatt-kasten { max-width: none; width: auto; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  box-shadow: none; background: none; overflow: visible; animation: none; transform: none; }
.vo-zurueck { margin: 0 0 8px; }
.vo-zurueck .kc-knopf { gap: 6px; }
.vo-mehr { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.vo-mehr[hidden], .vo-weg-versteckt { display: none !important; }
.vo-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vo-vorschau { position: sticky; top: 12px; min-width: 0; padding: 16px; background: var(--ui-flaeche); border: 1px solid var(--ui-rand);
  border-radius: var(--ui-r-karte); }
.vo-vorschau h3 { margin: 0 0 4px; font-size: var(--ui-s16); color: var(--ui-text); }
.vo-v-betreff { margin: 12px 0 8px; font-size: var(--ui-s14); color: var(--ui-text); overflow-wrap: anywhere; }
.vo-v-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--ui-s14); line-height: 1.55; color: var(--ui-text); }
.vo-muster { background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); border-radius: 4px; padding: 0 2px; }
.vo-unbekannt { background: var(--ui-warnung-hell); color: var(--ui-warnung); border-radius: 4px; padding: 0 2px; }
.vo-platz { position: relative; margin: 8px 0 6px; }
.vo-platz-menue { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px; min-width: 300px; max-width: calc(100vw - 32px);
  max-height: 320px; overflow: auto; padding: 4px; background: var(--ui-flaeche); border: 1px solid var(--ui-rand);
  border-radius: var(--ui-r-feld); box-shadow: var(--ui-schatten-2); }
.vo-platz-menue[hidden] { display: none; }
.vo-platz-menue button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: 6px; background: none; text-align: left; cursor: pointer; font: inherit; font-size: var(--ui-s14); color: var(--ui-text); }
.vo-platz-menue button:hover, .vo-platz-menue button:focus-visible { background: var(--ui-akzent-hell); outline: none; }
.vo-platz-menue code { font-family: var(--ui-mono); font-size: var(--ui-s12); color: var(--ui-akzent-tief); }
.vo-platz-menue span { font-size: var(--ui-s12); color: var(--ui-text-2); }
@media (max-width: 900px) { .vo-spalten { grid-template-columns: minmax(0, 1fr); } .vo-vorschau { position: static; } }

/* U6 (14.10.2026): Einstieg des Unterlagen-Editors, Liste aller Dokumente mit Suche und „Leeres Dokument anlegen“. */
.ed-alle { margin: 0 0 24px; }
.ed-alle-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.ed-alle-kopf h2, form.ed-neu h2 { margin: 0; font-size: var(--ui-s16); font-weight: 700; color: var(--ui-text); }
.ed-zahl { font-size: var(--ui-s14); color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
.ed-suche { position: relative; display: block; margin: 0 0 12px; }
.ed-suche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-text-2); pointer-events: none; }
.ed-suche input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px 0 36px; font: inherit; font-size: var(--ui-s14);
  color: var(--ui-text); background: var(--ui-flaeche); border: 1px solid var(--ui-rand-stark); border-radius: var(--ui-r-feld); }
.ed-suche input:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 1px; border-color: var(--ui-akzent); }
.ed-liste { max-height: 560px; overflow: auto; background: var(--ui-flaeche); border: 1px solid var(--ui-rand);
  border-radius: var(--ui-r-karte); }
.ed-gruppe { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 16px; font-size: var(--ui-s12); font-weight: 600;
  letter-spacing: .02em; color: var(--ui-text-2); background: var(--ui-grund); border-bottom: 1px solid var(--ui-linie); }
.ed-doks { list-style: none; margin: 0; padding: 0; }
.ed-doks li + li { border-top: 1px solid var(--ui-linie); }
.ed-dok { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "titel art tag" "akte art tag";
  column-gap: 16px; row-gap: 2px; align-items: center; padding: 10px 16px; text-decoration: none; color: var(--ui-text); }
.ed-dok:hover { background: var(--ui-akzent-hell); }
.ed-dok:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: -2px; }
.ed-dok-titel { grid-area: titel; font-size: var(--ui-s14); font-weight: 600; overflow-wrap: anywhere; }
.ed-dok:hover .ed-dok-titel { color: var(--ui-akzent-tief); }
.ed-dok-akte { grid-area: akte; font-size: var(--ui-s12); color: var(--ui-text-2); overflow-wrap: anywhere; }
.ed-dok-art { grid-area: art; font-size: var(--ui-s12); color: var(--ui-akzent-tief); background: var(--ui-akzent-hell);
  border-radius: var(--ui-r-etikett); padding: 2px 10px; white-space: nowrap; }
.ed-dok-tag { grid-area: tag; font-size: var(--ui-s12); color: var(--ui-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-leer, .ed-laedt { margin: 0; padding: 16px; font-size: var(--ui-s14); color: var(--ui-text-2); }
form.ed-neu { margin: 0 0 24px; }
form.ed-neu h2 { margin: 0 0 8px; }
form.ed-neu .ed-wahl-felder { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr); align-items: end; }
form.ed-neu .vf-feld input { height: 40px; }
.ed-neu-fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-neu-hinweis { font-size: var(--ui-s14); color: var(--ui-text-2); }
@media (max-width: 760px) {
  form.ed-neu .ed-wahl-felder { grid-template-columns: minmax(0, 1fr); }
  .ed-dok { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel tag" "akte akte" "art art"; }
  .ed-dok-art { justify-self: start; margin-top: 4px; }
  .ed-liste { max-height: none; }
}

/* ── U8 G-05, V-43 (14.10.2026): Reiter als Unterstrich (UI.reiter), ohne grauen Kasten; der aktive Reiter mit
   2-px-Akzentlinie; was nicht in eine Zeile passt, steht in „Mehr“. ── */
.ui-reiter { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 0; margin: 0 0 16px;
  border: 0; border-bottom: 1px solid var(--ui-rand); border-radius: 0; background: none; box-shadow: none; }
.ui-reiter > [role="tab"] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 0 12px; margin: 0 0 -1px; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ui-text-2);
  font: inherit; font-size: var(--ui-s14); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ui-reiter > [role="tab"]:hover { color: var(--ui-text); }
.ui-reiter > [role="tab"][aria-selected="true"] { color: var(--ui-akzent-tief); border-bottom-color: var(--ui-akzent) !important; }
.ui-reiter > [role="tab"]:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: -2px; }
.ui-reiter > .ui-reiter-weg { display: none !important; }
.ui-reiter-mehr { position: relative; flex: 0 0 auto; display: flex; margin-left: auto; }
.ui-reiter-mehr[hidden] { display: none; }
.ui-reiter-mehr-knopf { min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--ui-text-2);
  font: inherit; font-size: var(--ui-s14); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ui-reiter-mehr-knopf:hover, .ui-reiter-mehr-knopf[aria-expanded="true"] { color: var(--ui-text); }
.ui-reiter-mehr-knopf:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: -2px; }
.ui-reiter-mehr .ui-mehr-liste { position: absolute; right: 0; left: auto; top: 100%; z-index: 40; }

/* U8 V-02 (14.10.2026): Akkordeon-Kopf (UI.akkordeon). */
[data-ui-akk] { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 10px;
  font: inherit; text-align: left; cursor: pointer; color: var(--ui-text); }
[data-ui-akk]:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: -2px; border-radius: 6px; }
[data-ui-akk]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; opacity: .7; }
[data-ui-akk][aria-expanded="true"]::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { [data-ui-akk]::after { transition: none; } }

/* ── U8 Schritt 1 (14.10.2026) ─────────────────────────────────────────── */
/* V-29, V-44: ein Feldstil fuer alle Eingaben im Cockpit. style.css (Website, dunkles Thema) setzt input, textarea und
   select global auf #0d0d24; Felder ohne eigene Klasse (Rang in „Wertung nach Los“, Begruendung beim Haken) erbten
   das mit dunkler Schrift, Kontrast etwa 1,1 : 1. Eine Klasse vorn reicht, um style.css zu schlagen; Bauteile mit
   eigener Regel (Klasse plus Element) behalten ihren Stil. */
.ck :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select), .ck-blatt :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select), .nv-dialog :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select), .ck-such-blatt :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select) {
  background-color: var(--ui-flaeche); color: var(--ui-text); border-color: var(--ui-rand-stark); }
.ck :where(input, textarea)::placeholder, .ck-blatt :where(input, textarea)::placeholder,
.nv-dialog :where(input, textarea)::placeholder { color: var(--ui-platzhalter); opacity: 1; }
.ck :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select):focus-visible, .ck-blatt :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select):focus-visible, .nv-dialog :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select):focus-visible {
  outline: 2px solid var(--ui-akzent); outline-offset: 1px; border-color: var(--ui-akzent); }
.ck :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select)[aria-invalid="true"], .ck-blatt :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select)[aria-invalid="true"] { border-color: var(--ui-fehler); }
.ck :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image], [type=reset]), textarea, select):disabled { background-color: var(--ui-grund); color: var(--ui-text-2); }

/* Nur fuer Screenreader. */
.ck-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* V-44: Begruendung beim Haken mit Zaehler und Meldung am Feld. */
.vf-haken-grund textarea { width: 100%; min-height: 72px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--ui-rand-stark);
  border-radius: var(--ui-r-feld); font: inherit; font-size: var(--ui-s14); resize: vertical; }
.vf-haken-info { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 8px; font-size: var(--ui-s12); }
.vf-haken-fehler { color: var(--ui-fehler); }
.vf-haken-fehler[hidden] { display: none; }
.vf-haken-zaehler { margin-left: auto; color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
.vf-haken-zaehler.genug { color: var(--ui-erfolg); }

/* G-02, V-39: Ladezeile als Skelett (Text bleibt fuer Screenreader), nach 15 s Meldung mit „Erneut versuchen“. */
.ui-ladezeile { position: relative; min-height: 40px; color: transparent !important; user-select: none; }
.ui-ladezeile::before, .ui-ladezeile::after { content: ""; position: absolute; left: 0; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #EEEEF3 25%, #F6F6F9 50%, #EEEEF3 75%); background-size: 200% 100%;
  animation: ui-skelett 1.4s ease-in-out infinite; }
.ui-ladezeile::before { top: 6px; width: min(60%, 360px); }
.ui-ladezeile::after { top: 26px; width: min(40%, 240px); }
@media (prefers-reduced-motion: reduce) { .ui-ladezeile::before, .ui-ladezeile::after { animation: none; } }
.ui-ladefehler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; margin: 8px 0;
  border: 1px solid #E9B9B4; border-radius: var(--ui-r-feld); background: var(--ui-fehler-hell); color: var(--ui-text);
  font-size: var(--ui-s14); text-align: left; }

/* G-04: Skelett in der Leiste, solange Verfahren und Chats laden. */
.ck-lade { padding: 2px 12px 6px; }
.ck-lade .ui-skelett.zeile { height: 10px; margin: 8px 0; }
.ck-lade .ui-skelett.zeile + .ui-skelett.zeile { width: 70%; }

/* V-09: eine Fortschrittszeile in der Bedarfsklaerung. */
.bd-fortschritt { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ui-s14); color: var(--ui-text); }
.bd-fortschritt .bd-balken { width: 160px; }

/* V-14, P-13, G-01: Gefahr-Variante gefuellt (unumkehrbare Aktion), mit Symbol und benanntem Objekt. */
.kc-knopf.gefahr.voll { background: var(--ui-fehler); border-color: var(--ui-fehler); color: #fff; gap: 8px; }
.kc-knopf.gefahr.voll:hover:not(:disabled) { background: #861D16; border-color: #861D16; color: #fff; }
.kc-knopf.gefahr.voll:focus-visible { outline: 2px solid var(--ui-fehler); outline-offset: 2px; }

/* V-26, V-27: Angebotszahl mit Nebenzeile; ersetzte Eingaenge zusammengeklappt; „Verschlossen“ mit Schloss. */
#vfStand > div small, #vfStand > button small { display: block; margin-top: 2px; font-size: var(--ui-s12); color: var(--ui-text-2); }
.vf-marke.sb-zu { display: inline-flex; align-items: center; gap: 4px; }
.vf-marke.sb-zu::before { display: none; }
.sb-ersetzt-gruppe { margin: 8px 0 0; }
.sb-ersetzt-gruppe > summary { cursor: pointer; padding: 8px 2px; font-size: var(--ui-s14); color: var(--ui-text-2); }
.sb-ersetzt-gruppe > summary:hover { color: var(--ui-text); }

/* V-36, G-06: Leerzustand im Schritt „Vollständigkeit“. */
.ab-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ui-text-2); }
.ab-leer svg { color: var(--ui-text-2); }
.ab-leer p { margin: 0 0 6px; }

/* P-12, P-13: Vorlagenname als Knopf; „Löschen“ links in der Gefahr-Variante. */
.vo-name { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ui-text); text-align: left; cursor: pointer; }
.vo-name:hover { color: var(--ui-akzent-tief); text-decoration: underline; }
.vo-name:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; border-radius: 4px; }
.ck-blatt-knoepfe .vo-weg-links { margin-right: auto; }

/* ── U8 Schritt 2 (14.10.2026): Designsystem ─────────────────────────────── */
/* G-07, A5: kein Punkt im Statusetikett; ein Symbol nur, wo es Bedeutung traegt (Schloss, Warnung). */
.vf-marke::before { display: none !important; }

/* G-08, A6: KI-Einstieg mit Verlaufsrahmen. Nur fuer Einstiege in die KI (Nerd-Knopf, Nerd in der Leiste, „Kapitel
   schreiben lassen“, „Mit KI vorfüllen“); KI-Inhalte behalten das Etikett „Entwurf, KI“ ohne Verlauf. */
@property --ui-ki-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --ui-ki-verlauf: #6B1FD1, #3B6CFF, #14B8A6, #F59E0B, #EC4899, #6B1FD1; }
.ui-ki-einstieg { border: 1.5px solid transparent !important; box-shadow: none !important;
  background: linear-gradient(var(--ui-flaeche), var(--ui-flaeche)) padding-box,
              conic-gradient(from var(--ui-ki-winkel), var(--ui-ki-verlauf)) border-box !important;
  animation: ui-ki-drehen 6s linear infinite; }
.ui-ki-einstieg:hover { background: linear-gradient(var(--ui-akzent-hell), var(--ui-akzent-hell)) padding-box,
  conic-gradient(from var(--ui-ki-winkel), var(--ui-ki-verlauf)) border-box !important; }
@keyframes ui-ki-drehen { to { --ui-ki-winkel: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ui-ki-einstieg { animation: none; } }

/* G-03, V-11: Platz fuer den Nerd-Einstieg oben rechts reservieren, sobald die Leiste steht (html.ns-da). */
html.ns-da .ck-haupt { position: relative; padding-top: 60px; }
@media (max-width: 900px) { html.ns-da .ck-haupt { padding-top: 18px; } }

/* V-06: gestrichelte Rahmen nur fuer Ablageflaechen; „abgelaufen“ in --ui-warnung. */
.ck, .ck-blatt { --st-acht-text: var(--ui-warnung); }
.vf-t .vf-marke.grau:not(.ende), #vfAkteStatus.vf-marke.grau:not(.ende) { border-style: solid; }
.au-stand.in_arbeit, .au-balken.in_arbeit, .ck-kt-termin, .pm-ampel.leer, .ue-intern textarea { border-style: solid; }
html body :is(.ck-leerstand, .af-leer, .ab-leer, .nx-leer, .ft-leer), .ui-leer, .ue-leer { border-style: solid; border-color: var(--ui-rand); }
.vf-vorschlag { border-style: solid; border-color: var(--ui-akzent-rand); }

/* G-01: ein Knopfsystem. Primaer (.betont), Sekundaer (.sekundaer: Export, Freigeben), Standard (neutral, Routine),
   Tertiaer (.text: ohne Rand), Gefahr (.gefahr, gefuellt .voll); 40 px, in Leisten und Tabellen 32 px (.klein). */
.kc-knopf.sekundaer { background: var(--ui-flaeche); border-color: var(--ui-akzent); color: var(--ui-akzent); }
.kc-knopf.sekundaer:hover:not(:disabled) { background: var(--ui-akzent-hell); border-color: var(--ui-akzent); color: var(--ui-akzent-tief); }
.kc-knopf.text { color: var(--ui-text); }
.kc-knopf.text:hover:not(:disabled) { background: var(--ui-grund); color: var(--ui-text); }
.kc-knopf svg { flex: 0 0 auto; }
.kc-knopf[data-symbol]::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--knopf-symbol) center / contain no-repeat; mask: var(--knopf-symbol) center / contain no-repeat; }
.kc-knopf[data-symbol="neu"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.kc-knopf[data-symbol="drucken"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E"); }
.kc-knopf[data-symbol="tabelle"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18'/%3E%3C/svg%3E"); }
.kc-knopf[data-symbol="laden"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }

/* G-05: Filter als Chips ohne grauen Kasten (Segmentschalter); Seitenbereiche als Unterstrich-Reiter (UI.reiter). */
.ui-segment { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important;
  box-shadow: none !important; }
.ui-segment > button, .ui-segment > [role="radio"], .ui-segment > [role="tab"] { min-height: 32px; padding: 0 12px; border: 1px solid var(--ui-rand-stark) !important;
  border-radius: var(--ui-r-etikett) !important; background: var(--ui-flaeche) !important; box-shadow: none !important;
  color: var(--ui-text); font: inherit; font-size: var(--ui-s14); font-weight: 600; cursor: pointer; }
.ui-segment > [aria-pressed="true"], .ui-segment > [aria-checked="true"], .ui-segment > [aria-selected="true"], .ui-segment > .aktiv {
  background: var(--ui-akzent-hell) !important; border-color: var(--ui-akzent-rand) !important; color: var(--ui-akzent-tief); }

/* P-10: eine Datenfarbe fuer Diagramme; Grau nur fuer die leere Spur; die erste Kennzahl wie die anderen. */
:root { --ui-daten: #6B1FD1; --ui-daten-spur: #EFEFF3; }
.an-zahlen .an-zahl.akzent { border-color: #e7e7ec; background: var(--ui-flaeche); }

/* G-01 (mit P-07 von 2d): ein Stil fuer gesperrte Knoepfe, auch fuer Primaer und Sekundaer; nicht wie aktiv. */
.kc-knopf:disabled, .kc-knopf:disabled.betont, .kc-knopf:disabled.primaer, .kc-knopf:disabled.sekundaer,
.kc-knopf:disabled.gefahr, .kc-knopf[aria-disabled="true"] { background: #F1F1F5 !important; color: var(--ui-text-2) !important;
  border-color: var(--ui-rand) !important; cursor: not-allowed; filter: none; }
/* G-01: eine Hoehe und Schriftgroesse in der Kopfknopfzeile (vorher „Neues Verfahren“ 48 px und 16 px). */
.bb-kopfknoepfe .kc-knopf { min-height: 40px; font-size: 14px; }

/* G-06: Knopfreihe im Leerzustand. */
.af-leer-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ── U8 Schritt 3a (14.10.2026) ──────────────────────────────────────────── */
/* V-02: Phasenkopf als Knopf (Akkordeon), Pfeil, Haken bei fertiger Phase. */
button.vf-sl-phasenkopf { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  border-radius: 6px; align-items: center; }
/* 14.10.2026 (Ruben): Phasenkoepfe klein wie die Blocktitel der Leiste, einzeilig; font: inherit hatte 16 px gesetzt. */
#vfReiter .vf-sl-phasenkopf { font-size: var(--ui-s12); font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--ui-text-2); }
#vfReiter .vf-sl-phasenkopf em { flex: none; font-size: var(--ui-s12); font-style: normal; white-space: nowrap; }
button.vf-sl-phasenkopf:hover { background: var(--ui-grund); }
button.vf-sl-phasenkopf:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: -2px; }
button.vf-sl-phasenkopf > span:first-child { flex: 1 1 auto; }
button.vf-sl-phasenkopf::after { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 2px 2px 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; }
.vf-sl-phase.auf > button.vf-sl-phasenkopf::after { transform: rotate(-135deg); margin-bottom: -2px; }
.vf-sl-ph-haken { display: inline-block; width: 8px; height: 4px; margin: 0 6px 3px 0; border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.vf-sl-phase-schritte[hidden] { display: none; }

/* V-04: Legende der Punkte; gefuellt = gesetzt. V-03: abgelaufene Angebotsfrist an der Zeile. */
.ue-legende { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--ui-s12); color: var(--ui-text-2); }
.ue-legende .ue-punkt { display: inline-block; margin: 0 0 0 6px; width: 10px; height: 10px; }
.ue-legende .ue-punkt.voll, .ue-termin.gesetzt .ue-punkt { background: var(--bt-violett, #6B1FD1); }
.ue-termin.abgelaufen input { border-color: var(--ui-warnung) !important; box-shadow: 0 0 0 2px var(--ui-warnung-hell); }
.ue-abgelaufen { grid-column: 2 / -1; display: block; margin-top: 4px; font-style: normal; font-size: var(--ui-s12); color: var(--ui-warnung); }
.ue-anpassen { border: 0; background: none; padding: 0; font: inherit; color: var(--ui-akzent); text-decoration: underline; cursor: pointer; }
.ue-anpassen:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }

/* ── U8 Schritt 3b (14.10.2026) ──────────────────────────────────────────── */
/* V-32: eine Vorlage fuer Reiterinhalte: 24 px Innenabstand, Ueberschrift mit Aktion rechts, kein leerer Streifen. */
.ui-tafel { padding: 24px; background: var(--ui-flaeche); border: 1px solid var(--ui-rand); border-radius: 12px; box-sizing: border-box; }
.ui-tafel-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.ui-tafel-kopf h2, .ui-tafel-kopf h3 { margin: 0; font-size: var(--ui-s16); }
.ui-tafel-kopf p { margin: 4px 0 0; max-width: 680px; font-size: var(--ui-s14); color: var(--ui-text-2); }
.ui-tafel-kopf .kc-knopf { flex: none; white-space: nowrap; }
.vf-tafel :is(#vfRunden, #psBlock, #vfFachpruefung, #vfWertungsrechner, #vfTeilzuschlag, #vgPlus, #vfGewichtung, #vfLvWertBlock,
  #vfVertragBlock, #fvBlock) { margin-top: 0; padding: 24px; border: 1px solid var(--ui-rand); border-radius: 12px;
  background: var(--ui-flaeche); box-sizing: border-box; }
.vf-tafel :is(#vfGewichtung, #vfLvWertBlock, #fvBlock) { margin-top: 16px; }
.vf-tafel #vfVerhandlungBlock > .vh-karte { margin-top: 0; padding: 24px; }
.vh-kopf { gap: 16px; margin-bottom: 16px; }
.vh-kopf .kc-knopf, .vt-kopf .kc-knopf { flex: none; white-space: nowrap; }

/* V-15: Dokumentbaum in Inter, Spalte 400 px, Dateityp und Stand als Textetikett. */
.ak-baum-neu { font-family: inherit; }
@media (min-width: 901px) { .ak-raster { grid-template-columns: min(400px, 45%) minmax(0, 1fr); } }
.ak-datei { padding-left: 28px; }
.ak-typ { width: auto; min-width: 44px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 4px;
  border: 1px solid var(--ui-rand); background: var(--ui-grund); color: var(--ui-text-2); font-size: 12px; font-weight: 600; }
.ak-typ.editor { color: var(--ui-akzent); border-color: var(--ui-akzent-rand); background: var(--ui-akzent-hell); }
.ak-stand { font-style: normal; font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: 4px; white-space: nowrap;
  background: var(--ui-grund); color: var(--ui-text-2); }
.ak-stand.blau { background: var(--ui-info-hell); color: var(--ui-info); }
.ak-stand.gut { background: var(--ui-erfolg-hell); color: var(--ui-erfolg); }
.ak-stand.warn { background: var(--ui-warnung-hell); color: var(--ui-warnung); }

/* V-17: Einladung zur Angebotsabgabe mit 20 px Innenabstand. */
.ck #vfEinladung { padding: 20px; }

/* V-19, V-20: Schlosszeile, gesperrte Haken grau, Grund im Spaltenkopf. */
.bt-schloss { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 24px; font-size: var(--ui-s14);
  color: var(--ui-text-2); background: var(--ui-grund); border-bottom: 1px solid var(--ui-rand); }
.bt-haken.gesperrt.an { opacity: 1; background: var(--ui-rand-stark); border-color: var(--ui-rand-stark); color: var(--ui-text-2); }
.bt-haken.gesperrt:not(.an) { background: var(--ui-grund); border-color: var(--ui-rand); }
.bt-tabkopf .bt-kopf-grund { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--ui-text-2); }

/* V-21, V-22: Markt erkunden, eine Kartenform, gleiche Hoehe, vorgemerkt mit Haken und Akzentrahmen. */
.mke-knoepfe .kc-knopf { min-height: 36px; padding: 0 14px; font-size: var(--ui-s14); }
.mke-hinweis { color: var(--ui-text-2); }
.mke-unternehmen { grid-auto-rows: 1fr; gap: 8px; }
.mke-unternehmen li { display: flex; }
.mke-unternehmen li > label, .mke-unternehmen li > .mke-ohne { flex: 1 1 auto; min-height: 56px; box-sizing: border-box; }
.mke-unternehmen li.vorgemerkt > .mke-ohne { border-color: var(--ui-akzent-rand); background: var(--ui-akzent-hell); }
.mke-haken { flex: none; position: relative; width: 16px; height: 16px; border-radius: 4px; background: var(--ui-akzent); }
.mke-haken::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid var(--ui-flaeche); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mke-ka { color: var(--ui-text-2); font-style: italic; }

/* V-23: „Neu suchen“ im Warnhinweis. */
.vgl-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: var(--ui-s14); background: var(--ui-warnung-hell); color: var(--ui-warnung); }
.vgl-alt .kc-knopf { flex: none; }

/* V-24: Aehnlichkeit als Balken 0 bis 100, Aufschluesselung zum Aufklappen, fehlende Werte mit Fussnote. */
.vgl-aehnlich { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 12px; color: var(--ui-text-2); }
.vgl-balken { flex: 0 0 160px; height: 6px; border-radius: 3px; background: var(--ui-daten-spur); overflow: hidden; }
.vgl-balken i { display: block; height: 100%; border-radius: 3px; background: var(--ui-daten); }
details.vgl-warum { margin: 4px 0 0; }
details.vgl-warum summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ui-akzent); }
abbr.vgl-ka { text-decoration: none; color: var(--ui-text-2); }
.vgl-fuss { margin: 12px 0 0; font-size: 12px; color: var(--ui-text-2); }

/* V-25: Gemerkte Passagen nummeriert, Symbolknoepfe 32 px. */
.mk-kopf { align-items: center; gap: 10px; }
.mk-kopf strong { flex: 1 1 auto; min-width: 0; }
.mk-nr { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px;
  background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); font-size: 12px; font-weight: 700; }
.mk-kopf .mk-knoepfe { flex: none; margin: 0; gap: 6px; }
.ui-symbolknopf { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; box-sizing: border-box;
  border: 1px solid var(--ui-rand); border-radius: var(--ui-r-knopf); background: var(--ui-flaeche); color: var(--ui-text-2); cursor: pointer; }
.ui-symbolknopf:hover { color: var(--ui-text); border-color: var(--ui-rand-stark); }
.ui-symbolknopf.gefahr:hover { color: var(--ui-fehler); border-color: var(--ui-fehler); background: var(--ui-fehler-hell); }
.ui-symbolknopf:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }

/* UI.rueckgaengig: Leiste unten. */
.ui-rueck { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2100; display: flex; align-items: center;
  gap: 16px; max-width: calc(100% - 32px); box-sizing: border-box; padding: 8px 8px 8px 16px; border-radius: var(--ui-r-feld);
  background: var(--ui-text); color: var(--ui-flaeche); box-shadow: var(--ui-schatten-2); font-size: var(--ui-s14); }
.ui-rueck .kc-knopf.ui-rueck-knopf { background: transparent; color: var(--ui-flaeche); border-color: var(--ui-text-2); }
.ui-rueck .kc-knopf.ui-rueck-knopf:hover { background: var(--ui-text-2); color: var(--ui-flaeche); }
.ui-rueck .kc-knopf.ui-rueck-knopf:focus-visible { outline: 2px solid var(--ui-flaeche); outline-offset: 2px; }

/* UI.mehr mit Beschriftung (V-42 „Exportieren“). */
.ui-mehr-knopf.mit-text { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 14px;
  font-size: var(--ui-s14); letter-spacing: 0; }
.ui-mehr-pfeil { width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); }

/* V-33: Sortiersymbol je sortierbarem Spaltenkopf, aktive Sortierung hervorgehoben. */
#vfP-angebote #vfWertungsrechner th[aria-sort] .wr-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-text); }
#vfP-angebote #vfWertungsrechner th[aria-sort] .wr-sort::after { content: ""; flex: none; width: 12px; height: 12px;
  background: currentColor; opacity: .45; --wr-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E");
  -webkit-mask: var(--wr-sym) center / contain no-repeat; mask: var(--wr-sym) center / contain no-repeat; }
#vfP-angebote #vfWertungsrechner th[aria-sort="ascending"] .wr-sort,
#vfP-angebote #vfWertungsrechner th[aria-sort="descending"] .wr-sort { color: var(--ui-akzent); }
#vfP-angebote #vfWertungsrechner th[aria-sort="ascending"] .wr-sort::after { opacity: 1; --wr-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14l4-4 4 4'/%3E%3C/svg%3E"); }
#vfP-angebote #vfWertungsrechner th[aria-sort="descending"] .wr-sort::after { opacity: 1; --wr-sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E"); }

/* V-34: Methode als auswaehlbare Karten, Beschriftungen einzeilig, Knopf buendig mit den Feldern. */
#vfP-angebote #vfWertungsrechner fieldset { display: grid; gap: 8px; margin: 12px 0; padding: 0; border: 0; }
#vfP-angebote #vfWertungsrechner legend { margin: 0 0 8px; padding: 0; font-weight: 600; }
#vfP-angebote #vfWertungsrechner .wr-methode, #vfP-angebote #vfWertungsrechner .wr-methode:first-of-type {
  padding: 12px 14px; border: 1px solid var(--ui-rand); border-radius: 10px; background: var(--ui-flaeche); cursor: pointer; }
#vfP-angebote #vfWertungsrechner .wr-methode:hover { border-color: var(--ui-rand-stark); }
#vfP-angebote #vfWertungsrechner .wr-methode:has(input:checked) { border-color: var(--ui-akzent); background: var(--ui-akzent-hell);
  box-shadow: 0 0 0 1px var(--ui-akzent); }
#vfP-angebote #vfWertungsrechner .wr-methode:has(input:focus-visible) { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
#vfP-angebote #vfWertungsrechner .wr-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px; align-items: end; }
#vfP-angebote #vfWertungsrechner .wr-feld span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vfP-angebote #vfWertungsrechner input[type=text] { min-height: 40px; }
#vfP-angebote .ps-neu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
#vfP-angebote .ps-neu .vf-feld { margin: 0; }
#vfP-angebote .ps-neu .vf-feld > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vfP-angebote .ps-neu input, #vfP-angebote .ps-neu .kc-knopf { height: 40px; min-height: 40px; box-sizing: border-box; }
@media (max-width: 760px) {
  #vfP-angebote #vfWertungsrechner .wr-zeile, #vfP-angebote .ps-neu { grid-template-columns: minmax(0, 1fr); }
}

/* V-37: Vertrag vor dem Zuschlag, Hinweis neben dem Knopf. */
.vt-vor-zuschlag { align-self: center; font-size: var(--ui-s14); color: var(--ui-text-2); }

/* V-41: Akte abschliessen. V-42: CSV laeuft ueber „Exportieren“. */
.vf-abschluss { margin: 0 0 24px; }
.vf-abschluss-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; }
.vf-abschluss-daten dt { font-size: 12px; font-weight: 600; color: var(--ui-text-2); }
.vf-abschluss-daten dd { margin: 4px 0 0; font-size: var(--ui-s16); font-weight: 600; color: var(--ui-text); }
.vf-abschluss-daten dd.klein { font-size: 12px; font-weight: 400; color: var(--ui-text-2); }
#vfP-protokoll #fvCsv { display: none !important; }

/* ── U8 Schritt 4 (14.10.2026) ───────────────────────────────────────────── */
/* P-03: Knoepfe der Anfragen 40 px, Hauptknopf wie im Knopfsystem (kein Verlauf). */
#afNeu, .af-leer .ck-tm-knopf { height: 40px; padding: 0 16px; font-size: var(--ui-s14); }
.ck-tm-knopf.betont { background: var(--ui-akzent); filter: none; }
.ck-tm-knopf.betont:hover { background: var(--ui-akzent-tief); filter: none; }
/* P-02: leere Quartale als ruhige Flaeche (gestrichelt nur fuer Ablageflaechen, V-06). */
.vp-leer-q { margin: 8px 0 0; padding: 12px; border-radius: 8px; background: var(--ui-grund); text-align: center; color: var(--ui-text-2); }

/* U8 V-32 Nachzug: Huelle eines Unterpunkts ohne eigenen Rahmen (keine Karte in der Karte). */
.vf-tafel .vf-teil-huelle { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }

/* U7 t_ui_a11y: Kontrollkaestchen der Kontakte mit 20 px (Zielgroesse mit Abstand, WCAG 2.5.8). */
#adVorschlaege input[type=checkbox], .ab-wahl input[type=checkbox] { flex: none; width: 20px; height: 20px; min-width: 20px; margin: 0;
  accent-color: var(--ui-akzent); }

/* U7 t_ui_mobil: breite Tabellen am Handy als Karten; Spaltenname aus data-label (cockpit-leiste.js). */
@media (max-width: 560px) {
  table.ui-karten-mobil thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.ui-karten-mobil, table.ui-karten-mobil tbody { display: block; width: 100%; min-width: 0 !important; }
  table.ui-karten-mobil tr { display: block; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--ui-rand); border-radius: 10px;
    background: var(--ui-flaeche); }
  table.ui-karten-mobil td, table.ui-karten-mobil tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 4px 0 !important; border: 0 !important; text-align: right; }
  table.ui-karten-mobil td::before, table.ui-karten-mobil tbody th::before { content: attr(data-label); flex: none; max-width: 50%;
    font-weight: 600; text-align: left; color: var(--ui-text-2); }
  table.ui-karten-mobil td:not([data-label])::before, table.ui-karten-mobil td[data-label=""]::before { content: none; }
}
#adAlle, .ab-wahl input[type=checkbox], #adVorschlaege input[type=checkbox] { height: 24px !important; width: 24px !important;
  min-width: 24px; }
/* U7 t_ui_a11y: Kontakte, Sortierknoepfe im Kopf 24 px hoch, Abstand zwischen Kaestchen und Nachbarn (WCAG 2.5.8). */
.ab-tabelle th button { min-height: 24px; }
.ab-tabelle .ab-wahl { width: 44px; padding-left: 10px !important; padding-right: 14px !important; }

/* U8 G-01, V-01: ein Hauptknopf je Ansicht. Hat der offene Schritt einen eigenen Hauptknopf, tritt „Als Nächstes“ im
   Kopf der Akte als sekundaerer Knopf zurueck. */
body:has(.vf-tafel:not([hidden]) .kc-knopf.betont:not(:disabled):not([hidden]):not([hidden] *):not(.vf-teil-aus *):not(.vf-teil-innen-aus *)) #vfKopfAktion {
  background: var(--ui-flaeche); color: var(--ui-akzent-tief); border-color: var(--ui-akzent-rand); }
body:has(.vf-tafel:not([hidden]) .kc-knopf.betont:not(:disabled):not([hidden]):not([hidden] *):not(.vf-teil-aus *):not(.vf-teil-innen-aus *)) #vfKopfAktion:hover {
  background: var(--ui-akzent-hell); }

/* ── Menue v2 (14.10.2026, c0): M12 Verfahren mit vier Reitern, Loesungsseiten ───────────────────────────── */
html.menue-v2 nav.zr { display: none; }
html.menue-v2 .vf-listenreiter .vf-lr-zahl { margin-left: 4px; font-weight: 600; color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
html.menue-v2 .vf-listenreiter .aktiv .vf-lr-zahl { color: inherit; }
.mv2-loesung { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin: 0 0 18px; }
.mv2-loesung > div { padding: 18px 20px; background: var(--ui-flaeche); border: 1px solid var(--ui-rand); border-radius: 12px; }
.mv2-loesung h2 { margin: 0 0 6px; font-size: var(--ui-s16); }
.mv2-loesung-klein { margin: 0 0 10px; font-size: var(--ui-s14); color: var(--ui-text-2); }
.mv2-loesung-hinweise ul { margin: 0 0 10px; padding-left: 18px; font-size: var(--ui-s14); line-height: 1.5; color: var(--ui-text); }
.mv2-loesung-hinweise li + li { margin-top: 6px; }
.mv2-phasen { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: ph; }
.mv2-phasen > li { counter-increment: ph; }
.mv2-phasen summary { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 1px solid var(--ui-rand);
  border-radius: 8px; cursor: pointer; list-style: none; }
.mv2-phasen summary::-webkit-details-marker { display: none; }
.mv2-phasen summary::before { content: counter(ph); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 11px;
  background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); font-size: var(--ui-s12); font-weight: 700; flex: none; }
.mv2-phasen summary:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
.mv2-ph-name { flex: 1 1 auto; font-weight: 600; }
.mv2-ph-zahl { font-size: var(--ui-s12); color: var(--ui-text-2); }
.mv2-phasen details[open] summary { border-color: var(--ui-akzent-rand); }
.mv2-phasen details ul { margin: 6px 0 4px 32px; padding: 0; font-size: var(--ui-s14); color: var(--ui-text); }
@media (max-width: 760px) { .mv2-loesung { grid-template-columns: minmax(0, 1fr); } }

/* ── Menue v2, M10 (14.10.2026, c0): Akte ─────────────────────────────────────────────────────────────── */
.vf-sl-immer { margin: 12px 0 0; padding: 12px 6px 0; border-top: 1px solid var(--ui-rand); display: flex; flex-direction: column; gap: 2px; }
.vf-sl-immer-titel { margin: 0 4px 4px; font-size: var(--ui-s12); font-weight: 600; text-transform: uppercase; color: var(--ui-text-2); }
.vf-sl-immer-knopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 8px; background: none; font: inherit; font-size: var(--ui-s14); color: var(--ui-text); text-align: left; cursor: pointer; }
.vf-sl-immer-knopf:hover { background: var(--ui-grund); }
.vf-sl-immer-knopf:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: -2px; }
.vf-sl-immer-knopf em { font-style: normal; font-size: var(--ui-s12); color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
.vf-akte-raster.vf-sl-zu .vf-sl-immer { display: none; }
.vf-sk-nerd { margin: 10px 0 0; }
.vf-sk-nerd .kc-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
/* 14.10.2026 (Menue v2, M10, Konzept 7): unter 1.024 px die Schrittleiste als Auswahlliste, „Immer verfügbar“ als Reihe. */
.vf-sl-wahl { display: none; }
.vf-sl-wahl label { display: block; margin: 0 0 4px; font-size: var(--ui-s12); font-weight: 600; text-transform: uppercase; color: var(--ui-text-2); }
.vf-sl-wahl select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-rand-stark); border-radius: var(--ui-r-feld);
  background: var(--ui-flaeche); font: inherit; font-size: var(--ui-s16); color: var(--ui-text); }
.vf-sl-wahl select:focus-visible { outline: 2px solid var(--ui-fokus); outline-offset: 1px; }
@media (max-width: 1023px) {
  html.menue-v2 .vf-akte-raster, html.menue-v2 .vf-akte-raster.vf-sl-zu { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html.menue-v2 .vf-akte-raster #vfReiter.vf-reiter { position: static; max-height: none; overflow: visible; padding: 12px; }
  html.menue-v2 .vf-sl-wahl { display: block; }
  html.menue-v2 #vfReiter .vf-sl-reiter, html.menue-v2 #vfReiter .vf-sl-klapp { display: none; }
  html.menue-v2 .vf-akte-raster .vf-sl-immer, html.menue-v2 .vf-akte-raster.vf-sl-zu .vf-sl-immer {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 12px 0 0; }
  html.menue-v2 .vf-sl-immer-titel { flex: 0 0 100%; margin: 0 0 2px; }
  html.menue-v2 .vf-sl-immer-knopf { width: auto; min-height: 40px; padding: 0 12px; border: 1px solid var(--ui-rand); border-radius: var(--ui-r-knopf); }
}
/* 14.10.2026 (P5): offene Vorschlaege fuer die Verfahrensangaben im Aktenkopf. */
.vf-vs-hinweis { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--ui-info-hell); color: var(--ui-text);
  font-size: var(--ui-s14); max-width: 760px; }
/* 14.10.2026 (Menue v2, M10): Abstand zwischen Phasenname und Fortschritt („PRÜFUNG UND WERTUNG 0 / 5“). */
button.vf-sl-phasenkopf { gap: 8px; }
/* 14.10.2026 (Menue v2, t_menue_a11y, 400 % Zoom): die vier Listenreiter brechen schmal um statt quer zu scrollen. */
@media (max-width: 600px) { .vf-listenreiter { flex-wrap: wrap; } }

/* ── Nachpruefung der UX-Befunde nach Menue v2 (15.10.2026, c0) ─────────────────────────────────────────────── */
/* V-01, G-01: Auch „Person hinzufügen“ (Team, .bt-knopf.primaer) ist der Hauptknopf eines Schritts; der Kopf tritt zurueck. */
body:has(.vf-tafel:not([hidden]) .bt-knopf.primaer:not(:disabled):not([hidden]):not([hidden] *)) #vfKopfAktion {
  background: var(--ui-flaeche); color: var(--ui-akzent-tief); border-color: var(--ui-akzent-rand); }
body:has(.vf-tafel:not([hidden]) .bt-knopf.primaer:not(:disabled):not([hidden]):not([hidden] *)) #vfKopfAktion:hover {
  background: var(--ui-akzent-hell); }
/* V-32: Am Anfang eines Kastens mit eigenem Rahmen oder eigener Linie bringt die Abschnittsueberschrift keine zweite
   Linie und keinen leeren Streifen mit (Wertung nach Losen, Bieterfragen). */
#vfAkte #vfLvWertBlock > h2.vf-zwischen:first-of-type,
#vfAkte .vf-fragen-ort > h2.vf-zwischen:first-of-type { margin-top: 0 !important; padding-top: 0; border-top: 0; }
/* G-07: kein Punkt im Eignungs-Etikett; Farbe und Text tragen den Stand. */
#vfBeteiligte .eg-marke i { display: none; }
/* V-06: Gestrichelt nur fuer Ablageflaechen; eine offene Wertungszelle ist keine. */
.lvw-zelle.offen { border-style: solid; }
/* V-37: Leertexte in der Akte buendig mit dem Text darueber (.ck-leer stammt aus der Leiste und hat dort Einzug). */
#vfAkte .vf-tafel .ck-leer { padding-left: 0; padding-right: 0; }
/* Abschliessen: „Dokumentation des Verfahrens“ ist nicht groesser als die Abschnittsueberschrift „Protokoll“. */
#vfAkte .vm-kopf h3 { font-size: var(--ui-s16); }
/* G-05 (Nachpruefung): dieselben Chips auch fuer die Umschalter mit eigenen Klassen (Vertraege, Vorlagen, News,
   Kennzahlen, Fristenrechner, Direktauftraege); kein grauer Kasten mit weisser Pille mehr. */
html body :is(#vuSeg, .dv-oben, .nx-seg, .an-seg, .ft-segment, .da-seg):not([hidden]) { display: inline-flex; flex-wrap: wrap; gap: 6px;
  padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html body :is(#vuSeg, .dv-oben, .nx-seg, .an-seg, .ft-segment, .da-seg) > :is(button, a) { display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; height: auto; padding: 0 12px; border: 1px solid var(--ui-rand-stark) !important; border-radius: var(--ui-r-etikett) !important;
  background: var(--ui-flaeche) !important; box-shadow: none !important; color: var(--ui-text); font: inherit; font-size: var(--ui-s14);
  font-weight: 600; text-decoration: none; cursor: pointer; }
html body :is(#vuSeg, .dv-oben, .nx-seg, .an-seg, .ft-segment, .da-seg) > :is(.an, .aktiv, [aria-selected="true"], [aria-pressed="true"]) {
  background: var(--ui-akzent-hell) !important; border-color: var(--ui-akzent-rand) !important; color: var(--ui-akzent-tief); }
html body :is(#vuSeg, .dv-oben, .nx-seg, .an-seg, .ft-segment, .da-seg) > :is(button, a):focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
/* G-06 (Nachpruefung): ein kleines Symbol ueber jedem Leerzustand, wie im Muster des Befunds; nur wo keins steht. */
html body { --leer-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E"); }
html body :is(.ck-leerstand, .af-leer, .nx-leer, .ft-leer):not(:has(svg)) { position: relative; }
html body :is(.ck-leerstand, .af-leer, .nx-leer, .ft-leer):not(:has(svg))::before { content: ''; display: block; width: 40px; height: 40px;
  margin: 0 auto 12px; border-radius: 50%; background: var(--ui-akzent-hell); }
html body :is(.ck-leerstand, .af-leer, .nx-leer, .ft-leer):not(:has(svg))::after { content: ''; position: absolute; top: 46px; left: 50%;
  width: 20px; height: 20px; margin-left: -10px; background: var(--ui-akzent);
  -webkit-mask: var(--leer-symbol) center / contain no-repeat; mask: var(--leer-symbol) center / contain no-repeat; }
/* P-10 (Nachpruefung): auch die Monatssaeulen in der Datenfarbe; die Farbe stand noch im Seitenkopf von analysen.html. */
.an-monate .an-monat i { background: var(--ui-daten); }
.an-monate .an-monat i.null { background: var(--ui-daten-spur); }
/* P-12 (Nachpruefung): „Standard“ neutral. .vf-marke.grau traegt in Tabellen (.vf-t) die Bernsteinfarbe von „In Vorbereitung“. */
.vf-marke.neutral { background: var(--ui-grund); color: var(--ui-text-2); border: 1px solid var(--ui-rand); }

/* ── Detailpruefung der UX-Befunde (15.10.2026, c0) ──────────────────────────────────────────────────────────── */
/* G-01: weitere Knopfsymbole (Filter als Schieberegler, Haken) und Symbole auch an den Kopfknoepfen der Kennzahlen. */
.kc-knopf[data-symbol="filter"], .an-k[data-symbol="filter"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h10M18 18h2'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E"); }
.kc-knopf[data-symbol="haken"], .an-k[data-symbol="haken"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.an-k[data-symbol="laden"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
.an-k[data-symbol]::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--knopf-symbol) center / contain no-repeat; mask: var(--knopf-symbol) center / contain no-repeat; }
/* G-01: eine Hoehe, 40 px, in Werkzeugleisten 32 px. Kennzahlen und Adressbuch hatten 34 und 36 px aus eigenen Stilbloecken. */
html body .an-k { height: 40px; }
html body .ab-knopf { height: 40px; }
html body .ab-sammel .ab-knopf { height: 32px; }
/* V-33: aktive Sortierspalte in Textfarbe und fett, das Symbol in der Akzentfarbe; Violett fuer den Text nur beim Ueberfahren. */
#vfP-angebote #vfWertungsrechner th[aria-sort="ascending"] .wr-sort,
#vfP-angebote #vfWertungsrechner th[aria-sort="descending"] .wr-sort { color: var(--ui-text); font-weight: 700; }
#vfP-angebote #vfWertungsrechner th[aria-sort="ascending"] .wr-sort::after,
#vfP-angebote #vfWertungsrechner th[aria-sort="descending"] .wr-sort::after { background: var(--ui-akzent); }
#vfP-angebote #vfWertungsrechner th[aria-sort] .wr-sort:hover { color: var(--ui-akzent); }
/* V-36 und Kontrast allgemein: style.css (Website) setzt p { color: #a8a8c8 }, auf Weiss 2,3:1. Im Cockpit erben Absaetze
   ohne eigene Regel die Farbe ihres Kastens; :where haelt die Spezifitaet bei null, jede Klassenregel gewinnt weiter. */
:where(.ck-haupt) p { color: inherit; }
.ui-leer p { color: var(--ui-text-2); }

/* 16.10.2026 (Ruben): Arbeitsmodus der Akte. Steht rechts ein Dokument, klappen Schrittleiste und Ordnerbaum
   nacheinander zu (Akte-Skript, fokusAn). Beim Klick gleiten sie kurz, waehrend html.vf-gleiten langsam. */
.vf-akte-raster, .ak-raster { transition: grid-template-columns .25s ease; }
html.vf-gleiten .vf-akte-raster, html.vf-gleiten .ak-raster { transition-duration: .6s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
html.vf-gleiten .ck-leiste, html.vf-gleiten .ck::before { transition-duration: .6s; }
@media (prefers-reduced-motion: reduce) { .vf-akte-raster, .ak-raster { transition: none; } }

/* 16.10.2026 (Ruben: „Alle gelesen funktioniert nicht“): Quittierte ueberfaellige Eintraege stehen gedaempft in der
   Liste der Glocke. */
.ck-ben.ueber.gesehen .ck-ben-art, .ck-ben.ueber.gesehen strong { color: var(--ui-text-2); }
.ck-ben.ueber.gesehen strong { font-weight: 500; }

/* ── QC Pass 2 (17.10.2026), Akte ────────────────────────────────────────── */
/* Q-18: Der Kopfknopf der Akte bleibt immer der gefuellte Hauptknopf (frueher trat er zurueck, sobald der offene Schritt
   einen eigenen Hauptknopf hatte; die Gewichtung wechselte dadurch von Schritt zu Schritt). */
#vfKopfAktion.kc-knopf.betont { background: var(--ui-akzent) !important; color: #fff !important; border-color: var(--ui-akzent) !important; }
#vfKopfAktion.kc-knopf.betont:hover { background: var(--ui-akzent-tief) !important; border-color: var(--ui-akzent-tief) !important; }
/* Q-27: Der offene Schritt wird oben im Kopf abgehakt; die doppelte Zeile darunter erscheint nur noch fuer die Begruendung. */
body:has(#vfKopfAktion[data-kopf-haken]) .vf-tafel:not([hidden]) > .vf-sl-status .vf-sl-zeile.offen:not(.mit-grund) { display: none; }
#vfSchrittKopf { scroll-margin-top: 120px; }
/* Q-92: Hinweis, wenn ein Schritt aus einem Verweis in dieser Akte nicht vorkommt. */
.vf-sk-umleitung { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--ui-warnung-hell); color: var(--ui-text);
  font-size: var(--ui-s14); }

/* ── QC Pass 2 (17.10.2026), Akte Teil 2 ─────────────────────────────────── */
/* Q-20: erledigt mit Hinweis, Haken in Bernstein. */
.vf-sl-schritt.erledigt.hinweis .vf-sl-haken { background: var(--ui-warnung) !important; border-color: var(--ui-warnung) !important; }
.vf-sk-hinweis { margin: 6px 0 0; font-size: 14px; color: #8a4b00; }
/* Q-22: nach der Oeffnung kein Sperrkasten in Warnfarbe. */
.sb-sperre.aufgehoben { background: var(--ui-grund) !important; border-color: var(--ui-rand) !important; color: var(--ui-text) !important; }
/* Q-28: Im Schritt „Angebote oeffnen“ nur das Oeffnungsprotokoll; Kopieren, Muster, Bekanntmachung und Wertung stehen
   in ihren eigenen Schritten oder im Menue der Akte. */
#vfP-angebote[data-fokus="oeffnung"] #vfSubmission > .vf-form-fuss > :not(#vfProtokoll) { display: none !important; }
/* Q-31: Rueckfrage zum Abschluss in der Karte. */
.vf-ab-frage { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--ui-rand-stark); border-radius: 10px; background: var(--ui-flaeche); }
.vf-ab-frage h3 { margin: 0 0 6px; font-size: 16px; }
.vf-ab-frage textarea { width: 100%; min-height: 80px; box-sizing: border-box; margin: 6px 0 10px; }
/* Q-30: weitere Schritte eingeklappt. */
.ab-weitere > summary { cursor: pointer; margin: 8px 0; font-weight: 600; }
.ab-st.optional { background: var(--ui-grund); color: var(--ui-text-2); }

/* ── QC Pass 2 (17.10.2026), n70 ──────────────────────────────────────── */
/* Q-57: Platzhalter im Betreff der Vorlagenliste als Etikett, der Betreff ungekuerzt auf hoechstens zwei Zeilen. */
.vo-betreff { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 52ch; white-space: normal; }
.vo-platz { display: inline-block; margin: 0 1px; padding: 0 6px; border-radius: 6px; background: var(--ui-akzent-hell);
  color: var(--ui-akzent-tief); font-size: 12px; font-weight: 600; line-height: 18px; vertical-align: 1px; }
/* Q-56 (und Q-34): Symbol fuer das Hochladen. */
.kc-knopf[data-symbol="hochladen"] { --knopf-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }

/* ── QC Pass 2 (17.10.2026), n72: ein Knopfsystem ─────────────────────────────────────────────────────────────── */
/* Q-66, Q-94: ein Radius fuer alle Knoepfe (8 px). Die Hoehen bleiben wie seit G-01 (40 px, in Leisten und Tabellen
   32 px). Hierarchie: .betont (Hauptknopf, einer je Ansicht), .sekundaer, Standard, .text (ruhig), .gefahr und KI
   (.ui-ki-einstieg, nie Hauptknopf). Navigation sieht aus wie ein Link (violett, 600, Pfeil rechts). Symbole als Maske
   ueber currentColor (--sym-*), damit sie der Textfarbe folgen. Keine .ef-* Selektoren (eForms gehoert 2d). */
:root {
  --ui-r-knopf: 8px;
  --sym-suchen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --sym-funkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.4z'/%3E%3C/svg%3E");
  --sym-laden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
  --sym-hochladen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
  --sym-nachricht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --sym-glocke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
  --sym-neu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --sym-kopieren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --sym-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --sym-links: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --sym-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --sym-mehr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='19' cy='12' r='1.3'/%3E%3C/svg%3E");
  --sym-antworten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17l-5-5 5-5M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
  --sym-sprachen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
  --sym-baustein: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7M17 15v6M14 18h6'/%3E%3C/svg%3E");
}
html body .kc-knopf { border-radius: var(--ui-r-knopf); }
/* Kennzahlen und Fristenrechner: dieselben Knoepfe wie ueberall */
html body .an-k { border-color: var(--ui-rand-stark); border-radius: var(--ui-r-knopf); color: var(--ui-text); font-size: 14px; font-weight: 600; }
html body .an-k:hover:not(:disabled) { border-color: var(--ui-akzent-rand); background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); }
html body .ft-knopf { display: inline-flex; align-items: center; gap: 8px; height: 40px; border: 1px solid var(--ui-rand-stark);
  border-radius: var(--ui-r-knopf); font-weight: 600; }
html body .ft-knopf.primaer { border-color: var(--ui-akzent); }
html body .ft-knopf.primaer:hover:not(:disabled) { background: var(--ui-akzent-tief); border-color: var(--ui-akzent-tief); }
/* Q-49: Formate im Menue, Format als Etikett; das (i) direkt hinter der Beschriftung, 24 px Trefferflaeche. */
html body .ft-menue { min-width: 250px; }
html body .ft-menue button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; }
html body .ft-menue button em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px;
  border-radius: 6px; background: var(--ui-grund); color: var(--ui-text-2); }
html body .ft-zahl-text b { display: inline-flex; align-items: center; justify-content: flex-start; gap: 2px; }
html body .fr-info { width: 24px; height: 24px; flex: 0 0 24px; }
/* Q-94: Navigation als Link (Termine pruefen, Angaben ansehen, Alle Verfahrensangaben, Alle Aufgaben). */
html body :is(.ue-anpassen, .va-ue-link, #vfP-uebersicht a.kc-knopf.text[href$="/aufgaben"]) { display: inline-flex; align-items: center;
  gap: 4px; min-height: 0; height: auto; padding: 2px 0; border: 0; background: none; color: var(--ui-akzent-tief); font-size: 14px;
  font-weight: 600; text-decoration: none; cursor: pointer; }
html body :is(.ue-anpassen, .va-ue-link, #vfP-uebersicht a.kc-knopf.text[href$="/aufgaben"]):hover { background: none;
  color: var(--ui-akzent-tief); text-decoration: underline; text-underline-offset: 3px; }
/* Q-94: „Textbaustein einfuegen“ ist eine ruhige Aktion, keine violette Pille. */
html body .bs-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0;
  border-radius: var(--ui-r-knopf); background: none; color: var(--ui-text-2); font-size: 14px; font-weight: 600; cursor: pointer; }
html body .bs-knopf:hover { background: var(--ui-grund); color: var(--ui-text); }
/* Q-34: „Mit dem Nerd durchsuchen“ im KI-Aussehen wie jede Nerd-Aktion. */
html body #ntNerd { border: 1.5px solid transparent; box-shadow: none;
  background: linear-gradient(var(--ui-flaeche), var(--ui-flaeche)) padding-box,
              conic-gradient(from var(--ui-ki-winkel), var(--ui-ki-verlauf)) border-box;
  animation: ui-ki-drehen 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { html body #ntNerd { animation: none; } }
/* Q-34: „⋯“ als Symbolknopf */
html body .kc-knopf.ui-mehr-knopf:not(.mit-text) { width: 40px; padding: 0; justify-content: center; }
html body .kc-knopf.ui-mehr-knopf:not(.mit-text) > span { display: none; }
html body .bt-knopf[data-text] { display: inline-flex; align-items: center; gap: 6px; }
/* Q-40: „Antworten“ und „Uebersetzen“ in einer Zeile, gleiche Hoehe. */
html body .lh-knopf:not(.lh-zu) { display: inline-flex; align-items: center; gap: 6px; }
html body .km-fr-fuss > .lh-reihe { display: contents; }
html body .km-fr-fuss .lh-knopf { height: 40px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: var(--ui-r-knopf);
  background: none; color: var(--ui-text); font-weight: 600; }
html body .km-fr-fuss .lh-knopf:hover { background: var(--ui-grund); border-color: transparent; color: var(--ui-text); }
html body .km-fr-fuss > .lh-box { flex: 1 0 100%; }
/* Q-54: Bob mit einem Sperrstil; „Neuer Vorgang“ neben der Auswahl. */
html body .bb-kopfknoepfe > .bb-wahl { flex: 0 1 340px; width: auto; min-width: 220px; margin: 0; }
html body .kc-knopf.bb-weg:disabled { opacity: 1; }
/* Q-53: Symbol der Ablageflaeche mittig ueber dem Text. */
html body .ck-drop > svg { display: block; margin: 0 auto 8px; }
/* Symbole vor dem Text */
html body [data-nt="suchen"].kc-knopf::before,
html body #ntNerd::before,
html body [data-gb="import"].kc-knopf::before,
html body [data-gb="x83"].kc-knopf::before,
html body [data-gb="x81"].kc-knopf::before,
html body [data-gb="x83akte"].kc-knopf::before,
html body #frMehrKnopf::before,
html body [data-ab-reiter="kommunikation"].kc-knopf::before,
html body .bt-knopf[data-text]:not(.primaer)::before,
html body #vfAkteNeu::before,
html body [data-linkkopie].kc-knopf::before,
html body #vfProtKopieren::before,
html body #vfKopieren::before,
html body #vfSchreibKopie::before,
html body [data-schritt-haken][data-an="1"].kc-knopf::before,
html body #vfKopfAktion[data-kopf-haken]::before,
html body #vfSchrittFuss [data-sf="zurueck"]::before,
html body .kc-knopf.ui-mehr-knopf:not(.mit-text)::before,
html body [data-km-antworten].kc-knopf::before,
html body .lh-knopf:not(.lh-zu)::before,
html body .bs-knopf::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--knopf-symbol) center / contain no-repeat; mask: var(--knopf-symbol) center / contain no-repeat; }
html body [data-nt="suchen"].kc-knopf { --knopf-symbol: var(--sym-suchen); }
html body #ntNerd { --knopf-symbol: var(--sym-funkel); }
html body [data-gb="import"].kc-knopf { --knopf-symbol: var(--sym-hochladen); }
html body [data-gb="x83"].kc-knopf, html body [data-gb="x81"].kc-knopf, html body [data-gb="x83akte"].kc-knopf, html body #frMehrKnopf { --knopf-symbol: var(--sym-laden); }
html body [data-ab-reiter="kommunikation"].kc-knopf { --knopf-symbol: var(--sym-nachricht); }
html body .bt-knopf[data-text]:not(.primaer) { --knopf-symbol: var(--sym-glocke); }
html body #vfAkteNeu { --knopf-symbol: var(--sym-neu); }
html body [data-linkkopie].kc-knopf, html body #vfProtKopieren, html body #vfKopieren, html body #vfSchreibKopie { --knopf-symbol: var(--sym-kopieren); }
html body [data-schritt-haken][data-an="1"].kc-knopf, html body #vfKopfAktion[data-kopf-haken] { --knopf-symbol: var(--sym-haken); }
html body #vfSchrittFuss [data-sf="zurueck"] { --knopf-symbol: var(--sym-links); }
html body .kc-knopf.ui-mehr-knopf:not(.mit-text) { --knopf-symbol: var(--sym-mehr); }
html body [data-km-antworten].kc-knopf { --knopf-symbol: var(--sym-antworten); }
html body .lh-knopf:not(.lh-zu) { --knopf-symbol: var(--sym-sprachen); }
html body .bs-knopf { --knopf-symbol: var(--sym-baustein); }
/* Pfeil hinter dem Text: Weiter, In Verfahren uebernehmen und Navigation */
html body #vfSchrittFuss [data-sf="weiter"]::after,
html body #frUebernehmen::after,
html body .ue-anpassen::after,
html body .va-ue-link::after,
html body #vfP-uebersicht a.kc-knopf.text[href$="/aufgaben"]::after {
  content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--sym-rechts) center / contain no-repeat; mask: var(--sym-rechts) center / contain no-repeat; }

/* ── QC Pass 2 (17.10.2026), n73: Formulare ───────────────────────────────────────────────────────────────── */
:root { --sym-schloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
/* Q-24: Gruppentitel groesser als die Feldbeschriftungen, mit Linie. */
html body .va-gruppe > h3 { font-size: 16px; font-weight: 650; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-rand); }
html body .va-feld > span:first-child { font-size: 13px; font-weight: 500; color: var(--ui-text-2); }
/* Q-25: ein Eingabestil (weiss mit Rand); Grau nur fuer gesperrte Felder. */
html body .va-feld :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea):not(:disabled) { background: var(--ui-flaeche); }
/* Q-61, Q-25: gesperrte Felder sehen gesperrt aus (grau, gedaempfte Schrift, Mauszeiger „nicht erlaubt“). */
html body .ck-haupt :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea):disabled {
  background: #F1F1F5; color: var(--ui-text-2); -webkit-text-fill-color: var(--ui-text-2); border-color: var(--ui-rand); cursor: not-allowed; opacity: 1; }
/* Q-61: Hinweis oben im Bereich, wenn dort alles nur lesbar ist (haus-reiter.js). */
html body .hr-nurlesen { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--ui-rand);
  border-radius: 10px; background: var(--ui-grund); color: var(--ui-text); font-size: 14px; }
html body .hr-nurlesen::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--sym-schloss) center / contain no-repeat; mask: var(--sym-schloss) center / contain no-repeat; }
/* Q-42: GAEB einlesen in zwei Zeilen: Datei ueber die volle Breite, darunter Als, Bieter und Einlesen auf einer Linie. */
html body #gaebBlock .gb-zeile:has(#gbDatei) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; }
html body #gaebBlock .gb-zeile:has(#gbDatei) > .gb-feld:first-child { grid-column: 1 / -1; }
@media (max-width: 640px) { html body #gaebBlock .gb-zeile:has(#gbDatei) { grid-template-columns: minmax(0, 1fr); } }
/* Q-45: Im Schritt nennt die Schrittkarte schon, was fehlt; der Kasten „Noch N Angaben offen“ ist deshalb neutral. */
html body .va-kasten:not(.fertig) { border-color: var(--ui-rand); background: var(--ui-flaeche); color: var(--ui-text); }
html body .va-kasten:not(.fertig) button { border-color: var(--ui-rand-stark); background: var(--ui-flaeche); color: var(--ui-text); }
html body .va-kasten:not(.fertig) button:hover, html body .va-kasten:not(.fertig) button:focus-visible { border-color: var(--ui-akzent); color: var(--ui-akzent-tief); }
/* Q-45: Im Kopf hoechstens ein Hinweis, der zweite hinter „+1 weiterer Hinweis“. */
html body .vf-hw-mehr { display: inline-flex; align-items: center; margin: -2px 0 8px; padding: 2px 0; border: 0; background: none;
  color: var(--ui-akzent-tief); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
html body .vf-hw-mehr:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── QC Pass 2 (17.10.2026), n74: KI-Flaechen ─────────────────────────────────────────────────────────────── */
/* Q-65: Wo man mit dem Nerd spricht, sieht man es: Verlaufslinie oben im Seitenbereich, Avatar mit Funkeln im Kopf,
   Verlaufsrand und leichter Schein an der Eingabe (Fokus als deutlicher Ring), Senden im Verlauf, Vorschlaege mit zartem
   Verlaufsrand, Antworten in einer hellen Blase. Text bleibt dunkel auf hell; nichts bewegt sich. */
:root { --ui-ki-linie: linear-gradient(90deg, #6B1FD1, #3B6CFF 50%, #14B8A6); --ui-ki-knopf: linear-gradient(135deg, #6B1FD1, #3B6CFF); }
html body #nsBereich::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ui-ki-linie);
  z-index: 3; pointer-events: none; }
html body .ns-kopf::before { content: ""; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z'/%3E%3C/svg%3E") center / 16px no-repeat, var(--ui-ki-knopf); }
html body .ns-feld, html body:not(.nd-temp-an) .nd-feld:not(.mk-dialog .nd-feld) { border: 1.5px solid transparent;
  background: linear-gradient(var(--ui-flaeche), var(--ui-flaeche)) padding-box, var(--ui-ki-linie) border-box;
  box-shadow: 0 0 0 4px rgba(107, 31, 209, .08); }
html body .ns-feld:focus-within, html body:not(.nd-temp-an) .nd-feld:not(.mk-dialog .nd-feld):focus-within {
  border-color: transparent; box-shadow: 0 0 0 2px var(--ui-flaeche), 0 0 0 4px var(--ui-akzent); }
html body :is(.ns-senden, .st-ki-los):not(:disabled), html body .nd-ab:not(:disabled):not(.stopp) { background: var(--ui-ki-knopf); color: #fff; }
html body :is(.ns-senden, .st-ki-los):not(:disabled):hover, html body .nd-ab:not(:disabled):not(.stopp):hover {
  background: linear-gradient(135deg, #5A17B5, #2F5AE0); filter: none; }
html body :is(.ns-vor, .nd-schnell button) { border: 1px solid transparent;
  background: linear-gradient(var(--ui-flaeche), var(--ui-flaeche)) padding-box,
              linear-gradient(90deg, rgba(107, 31, 209, .4), rgba(59, 108, 255, .4), rgba(20, 184, 166, .4)) border-box; }
html body :is(.ns-vor, .nd-schnell button):hover { background: linear-gradient(#FAF8FF, #FAF8FF) padding-box, var(--ui-ki-linie) border-box;
  color: var(--ui-text); }
html body .ns-er, html body .nd-zeile.er .nd-blase { padding: 12px 14px; border-radius: 12px 12px 12px 4px;
  background: linear-gradient(135deg, #F7F3FF, #F2F6FF 55%, #EFFAF7); box-sizing: border-box; }
/* Start: Die Eingabe ist Teil der Karte (ohne Rahmen); dort traegt die Linie unten den Verlauf, der Fokus bleibt der innere Ring.
   Die Tastenhinweise rutschen in eine eigene Zeile, wenn es eng wird (etwa mit offenem Seitenbereich). */
html body .st-ki-feld { background: linear-gradient(90deg, #6B1FD1, #3B6CFF 50%, #14B8A6) bottom / 100% 2px no-repeat, var(--ui-flaeche); }
html body .st-ki-feld { flex-wrap: wrap; }
html body .st-ki-feld textarea { flex: 1 1 240px; }
/* Q-50: kein roter Bogen unter der Begruessung (er sah aus wie die Rechtschreibpruefung); „kein Guthaben“ als neutrales
   Etikett statt roter Schrift. */
html body .ck-hallo-strich { display: none; }
html body .nd-stand.leer { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--ui-rand-stark);
  border-radius: var(--ui-r-etikett); background: var(--ui-grund); color: var(--ui-text-2); font-weight: 600; }

/* ── QC Pass 2 (17.10.2026), n75: Handy ───────────────────────────────────────────────────────────────────── */
html body .vf-kopf-az { white-space: nowrap; }
/* Q-75: Die Vorlagenliste zeigt den Namen immer (eine aeltere Regel blendet die erste Spalte von .vf-t am Handy aus). */
html body #voTabelle .vf-t :is(th, td):nth-child(1) { display: table-cell; }
@media (max-width: 560px) { html body #voTabelle table.vf-t.ui-karten-mobil td:nth-child(1) { display: flex; }
  html body #voTabelle table.vf-t.ui-karten-mobil td { white-space: normal; } }
@media (max-width: 900px) {
  /* Q-06: ein klebender Kopf von 56 px. Das Menue sitzt als Symbolknopf links in der Kopfzeile und bleibt beim Scrollen,
     der Pfad zeigt nur den Namen der Seite in einer Zeile, die Zahl an der Glocke bleibt im Knopf. */
  html.menue-v2:has(.mv2-kopf) #ckLeisteKnopf { position: fixed; top: 6px; left: 8px; z-index: 31; width: 44px; height: 44px;
    min-height: 44px; margin: 0; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  html.menue-v2:has(.mv2-kopf) #ckLeisteKnopf svg { width: 18px; height: 18px; }
  html.menue-v2 .mv2-kopf { padding-left: 60px !important; }
  html.menue-v2 .mv2-krumen, html.menue-v2 .mv2-krumen ol { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  html.menue-v2 .mv2-krumen li:not(:last-child) { display: none; }
  html.menue-v2 .mv2-krumen li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.menue-v2 .mv2-krumen li:last-child::before { content: none; display: none; }
  html.menue-v2 .mv2-krumen [aria-current="page"] { max-width: none; }
  html.menue-v2 .mv2-kopf-rechts #ckGlockeZahl { top: 2px; right: 2px; }
  /* V-11, G-03: kein schwebender Feedback-Knopf ueber den Karten; „Feedback geben“ steht im Menue. */
  html.menue-v2 #ckFeedback { display: none; }
}
@media (max-width: 600px) {
  /* Q-38, Q-83: Aktenkopf kompakt: Titel 20 px und hoechstens drei Zeilen („Ganzen Titel zeigen“), „Immer verfuegbar“ als
     eine Zeile, die sich seitlich schieben laesst. */
  html body .ck-gruss .vf-titelzeile h1 { font-size: 20px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; overflow: hidden; }
  html body .ck-gruss .vf-titelzeile h1.ganz { display: block; -webkit-line-clamp: unset; overflow: visible; }
  html body .vf-titel-ganz { flex-basis: 100%; padding: 0; border: 0; background: none; color: var(--ui-akzent-tief); font: inherit;
    font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
  html.menue-v2 body .vf-sl-immer { display: flex !important; flex-wrap: nowrap !important; gap: 6px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html body .vf-sl-immer-titel { display: none; }
  html body .vf-sl-immer .vf-sl-immer-knopf { flex: none; }
  /* Q-39: Kacheln im Schritt Angebote zweispaltig. */
  html body #vfStand.sb-stand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Block 4: Die Reiter der Liste passen auch mit „Mehr (3)“ in 390 px. */
  html.menue-v2 body .vf-listenreiter { gap: 0; }
  html.menue-v2 body .vf-listenreiter .vf-reiter-knopf { padding-left: 8px; padding-right: 8px; gap: 4px; }
  /* Q-77: Text und „Als erledigt markieren“ untereinander; die Bloecke der Bedarfsklaerung zeigen am Rand, dass mehr folgen. */
  html body .vf-sl-zeile { flex-direction: column; align-items: stretch; }
  html body .vf-sl-zeile > .kc-knopf { width: 100%; justify-content: center; }
  html body .bd-bloecke { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  /* Q-76: Reiter der Einstellungen mit Verlauf am Rand */
  html body #hrLeiste.hr-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  /* Q-78: Baum der Unterlagen ohne eigenes Scrollen, Namen ueber zwei Zeilen statt abgeschnitten. */
  html body #vfAkteBaum.ak-baum { max-height: none; overflow: visible; }
  html body #vfAkteBaum :is(.ak-ord, .ak-datei), html body #vfAkteBaum :is(.ak-ord, .ak-datei) * { white-space: normal;
    text-overflow: clip; }
  /* Q-74: Anfragen als Karten, der Titel ungekuerzt. */
  html body table.ck-tm-tabelle.ui-karten-mobil td, html body table.ck-tm-tabelle.ui-karten-mobil td * { white-space: normal;
    text-overflow: clip; max-width: none; }
}

/* ── QC Pass 2 (17.10.2026), n76: Barrierefreiheit und Bedienelemente ────────────────────────────────────────── */
:root { --sym-auswahl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355556A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --sym-kalender-grau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355556A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
/* Q-48: Die Tagesfelder im Fristenrechner zeigen den Fokus deutlich; eine leere Pflichtangabe steht in der Warnfarbe, nicht
   in der Fokusfarbe. */
html body .ft-stepper:focus-within { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
html body .ft-zahl.pflicht-leer .ft-stepper { border-color: var(--ui-warnung); box-shadow: 0 0 0 1px var(--ui-warnung); }
/* Q-52: Die Eingabe der Generatoren zeigt den Fokus. */
html body #clInput:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
/* Q-11: eine Auswahlliste mit demselben Pfeil wie die Menues; ein Kontrollkaestchen (18 px, Akzentfarbe, gleicher Fokusring). */
html body .ck-haupt select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 32px;
  background-image: var(--sym-auswahl); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
html body .ck-haupt input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ui-akzent); }   /* 20 px: Festlegung t_ui_feinschliff */
html body .ck-haupt input[type=checkbox]:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
html body .vf-sortieren { align-items: center; }
html body .vf-weitere:not([hidden]) { align-items: center; }
html body .vf-weitere > .vf-nur-fav { margin: 0; align-self: center; }
html body .vf-sortieren select { min-height: 40px; }
/* Q-26: Datums- und Zeitfelder gleich hoch und mit demselben Kalendersymbol. Das Zahlenformat folgt der Sprache des Browsers;
   in einem deutschen Browser steht dort TT.MM.JJJJ und 24 Stunden. */
html body .ck-haupt input:is([type=date], [type=datetime-local], [type=time]) { min-height: 40px; box-sizing: border-box; }
html body .ck-haupt input:is([type=date], [type=datetime-local])::-webkit-calendar-picker-indicator { width: 16px; height: 16px;
  padding: 0; background: var(--sym-kalender-grau) center / 16px no-repeat; color: transparent; cursor: pointer; opacity: 1; }

/* ── QC Pass 2 (17.10.2026), n77: uebrige Seiten ──────────────────────────────────────────────────────────── */
:root { --sym-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E"); }
/* Q-82: Der Pfad bleibt eine Zeile; lange Teile enden mit „…“, der ganze Titel steht im Tooltip. */
html.menue-v2 .mv2-krumen ol { flex-wrap: nowrap; }
html.menue-v2 .mv2-krumen li:not(:last-child) > :is(a, span) { display: inline-block; max-width: 28ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Q-90: Vorschlag in Zeile 1 (Wert und Herkunft), darunter rechts „Verwerfen“ (ruhig) und „Uebernehmen“ (mit Haken). */
html body .va-vv { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px 8px; }
html body .va-vv > .va-vv-q { grid-column: 3; grid-row: 1; flex: none; }
html body .va-vv > .va-vv-k { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin: 0; }
html body .va-vv-k .kc-knopf { min-height: 32px; height: 32px; padding: 0 12px; }
html body .va-vv-k [data-vv-nein] { border-color: transparent; background: none; color: var(--ui-text-2); }
html body .va-vv-k [data-vv-ja] { border-color: var(--ui-akzent); background: var(--ui-flaeche); color: var(--ui-akzent); }
html body .va-vv-k [data-vv-ja]::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--sym-haken) center / contain no-repeat; mask: var(--sym-haken) center / contain no-repeat; }
/* Q-44: Solange keine Unterlage gewaehlt ist, bekommt der Baum mehr Platz. */
@media (min-width: 901px) {
  html body .ak-raster:not(.baum-zu):has(#vfAkteSchau > .ck-leer:only-child) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* Q-73: Fehler am Feld (rot, mit Symbol). */
html body .nda-feldfehler { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--ui-fehler); font-size: 14px;
  font-weight: 600; }
html body .nda-feldfehler::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--sym-warn) center / contain no-repeat; mask: var(--sym-warn) center / contain no-repeat; }
html body #ndVorhaben[aria-invalid="true"] { border-color: var(--ui-fehler); box-shadow: 0 0 0 1px var(--ui-fehler); }
/* Q-88: „Gegenstand der Beschaffung“ traegt die Beschreibung: mindestens sechs Zeilen, waechst mit (wo der Browser es kann). */
html body #vfForm textarea[name=vorhaben] { min-height: 9.5em; max-height: 28em; field-sizing: content; overflow-y: auto; }
/* Q-55: innere Reiter des Bestellwesens als Segmente mit Abstand; „In den Warenkorb“ mit Korbsymbol. */
html body .bw-reiter.ui-segment { margin: 10px 0 14px; }
html body :is([data-bw="indenkorb"], [data-bw="frei"]).kc-knopf::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h8.1a2 2 0 0 0 2-1.5L22 7H6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h8.1a2 2 0 0 0 2-1.5L22 7H6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── QC Pass 2 (17.10.2026), n78: Generatoren ──────────────────────────────────────────────────────────────── */
/* Q-52: Die Fallauswahl („Fuer welches Verfahren?“) ist eine Liste mit Auswahlpunkt, die Beispiel-Chips bleiben Pillen. */
html body .cl-bubble:has(.cl-vf-frage) .cl-opts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
html body .cl-bubble:has(.cl-vf-frage) .cl-opt { position: relative; display: flex; align-items: center; justify-content: flex-start;
  min-height: 40px; padding: 8px 12px 8px 38px; border-radius: var(--ui-r-knopf, 8px); text-align: left; }
html body .cl-bubble:has(.cl-vf-frage) .cl-opt::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px;
  margin-top: -8px; border: 1.5px solid var(--ui-rand-stark); border-radius: 50%; background: var(--ui-flaeche); }
html body .cl-bubble:has(.cl-vf-frage) .cl-opt.sel::before { border-color: var(--ui-akzent); box-shadow: inset 0 0 0 3px var(--ui-flaeche);
  background: var(--ui-akzent); }
html body .cl-vf-frage { margin: 0 0 6px; }
/* Q-81: Vorschau der GAEB-Positionen im Chat. */
html body .cl-gaeb p { margin: 0 0 8px; }
html body .cl-gaeb-tab { max-height: 320px; overflow: auto; margin: 0 0 8px; border: 1px solid var(--ui-rand); border-radius: 8px; background: var(--ui-flaeche); }
html body .cl-gaeb-tab:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }
html body .cl-gaeb table { width: 100%; border-collapse: collapse; font-size: 13px; }
html body .cl-gaeb th { position: sticky; top: 0; background: var(--ui-grund); text-align: left; font-weight: 600; padding: 6px 8px; }
html body .cl-gaeb td { padding: 5px 8px; border-top: 1px solid var(--ui-rand); vertical-align: top; font-variant-numeric: tabular-nums; }
html body .cl-gaeb :is(th, td).z { text-align: right; white-space: nowrap; }
html body .cl-gaeb tr.abschnitt td { font-weight: 600; background: #FAFAFC; }
html body .cl-gaeb-mehr { color: var(--ui-text-2); font-size: 13px; }

/* ── QC-Nachpruefung (18.10.2026), n81 ─────────────────────────────────────────────────────────────────────────── */
/* G-01, Q-66, Q-94: Der Radius 8 px aus n72 galt nur auf :root. Die Flaechen .ck, .ck-blatt, .ag-seite und
   .ck-ben-kasten setzen den Token selbst (10 px), und dort liegen fast alle Knoepfe. */
:root, .ck, .ck-blatt, .ag-seite, .ck-ben-kasten { --ui-r-knopf: 8px; }
/* Q-34: Symbole an den Knoepfen, die etwas erzeugen oder verwalten */
:root {
  --sym-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
  --sym-tabelle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18'/%3E%3C/svg%3E");
  --sym-datei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --sym-paket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
}
html body #lvLosNeu::before, html body #lvPreisblatt::before, html body #lvDokumente::before, html body #vfAkteExport::before,
html body .lv-los-knoepfe [data-neu]::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--knopf-symbol) center / contain no-repeat; mask: var(--knopf-symbol) center / contain no-repeat; }
html body #lvLosNeu { --knopf-symbol: var(--sym-liste); }
html body #lvPreisblatt { --knopf-symbol: var(--sym-tabelle); }
html body #lvDokumente { --knopf-symbol: var(--sym-datei); }
html body #vfAkteExport { --knopf-symbol: var(--sym-paket); }
html body .lv-los-knoepfe [data-neu] { --knopf-symbol: var(--sym-neu); }
/* Q-23: alle Steuerelemente einer Feldzeile gleich hoch (36 px), auch Datum */
html body .ab-felder :is(input:not([type=checkbox]):not([type=radio]), select) { height: 36px; min-height: 36px; }
/* Q-25, Q-61: gesperrte Felder sehen gesperrt aus (graue Flaeche, gedaempfte Schrift); offene Felder bleiben weiss. */
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), textarea, select):disabled {
  background-color: var(--ui-grund); color: var(--ui-text-2); cursor: not-allowed; }
/* Q-53: Verfahrenszeilen im Angebotsvergleich als Links mit Hover und Pfeil, die ganze Zeile klickbar */
html body .ck-zusatz-liste li { position: relative; border-radius: 8px; }
html body .ck-zusatz-liste li:hover { background: var(--ui-akzent-hell); }
html body .ck-zusatz-liste li a::before { content: ""; position: absolute; inset: 0; }
html body .ck-zusatz-liste li a::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px;
  background: currentColor; -webkit-mask: var(--sym-rechts) center / contain no-repeat; mask: var(--sym-rechts) center / contain no-repeat; }
/* Q-65: die Generator-Chats im selben KI-Look wie Nerd und Startseite */
html body.ck-seite .cl-row.bot .cl-bubble:not(.at-host) { background: linear-gradient(135deg, #F7F3FF, #F2F6FF 55%, #EFFAF7); }
html body.ck-seite .cl-box { border: 1.5px solid transparent;
  background: linear-gradient(var(--ui-flaeche), var(--ui-flaeche)) padding-box, var(--ui-ki-linie) border-box; box-shadow: 0 0 0 4px rgba(107, 31, 209, .08); }
html body.ck-seite .cl-box:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--ui-flaeche), 0 0 0 4px var(--ui-akzent); }
html body.ck-seite .cl-send:not(:disabled) { background: var(--ui-ki-knopf); color: #fff; }
html body.ck-seite .cl-chip { border: 1px solid transparent; background: linear-gradient(var(--ui-flaeche), var(--ui-flaeche)) padding-box,
  linear-gradient(90deg, rgba(107, 31, 209, .4), rgba(59, 108, 255, .4), rgba(20, 184, 166, .4)) border-box; }
/* Q-73: „So geht es weiter“ in normaler Schriftfarbe, Pflichtfeld mit Stern */
html body .na-seitenblick ol { color: var(--ui-text); }
html body .na-pflicht { color: var(--ui-fehler); }
/* Q-61: Der Stilblock von erscheinungsbild.js setzt die Felder per ID auf Weiss; gesperrt sind sie grau. */
html body #ebBlock :is(input[type=text], textarea):disabled { background: var(--ui-grund); color: var(--ui-text-2);
  -webkit-text-fill-color: var(--ui-text-2); cursor: not-allowed; }

/* ── QC Pass 2, restliche Punkte (18.10.2026), n84 ───────────────────────────────────────────────────────────── */
/* Q-38: am Handy steht „Immer verfügbar“ im Menü ⋯ des Kopfs, nicht als eigene Zeile */
/* n85: die n75-Regel „html.menue-v2 body .vf-sl-immer { display: flex !important }“ hielt die Zeile sichtbar */
@media (max-width: 600px) { html.menue-v2 body #vfReiter .vf-sl-immer, html body #vfReiter .vf-sl-immer { display: none !important; } }
/* Q-77: am Handy Text und Kopfknopf untereinander, der Knopf in voller Breite; Bloecke der Bedarfsklaerung als Auswahl */
html body .bd-block-wahl { display: none; }
@media (max-width: 600px) {
  html body .vf-kopf-u3 .vf-kn { flex: 1 1 100%; }
  html body .vf-kopf-u3 #vfKopfAktion { flex: 1 1 100%; justify-content: center; }
  html body .bd-block-wahl { display: block; width: 100%; height: 40px; margin: 0 0 12px; }
  html body #bdBloecke { display: none; }
}
/* Q-83: Bezeichnung als Textfeld, das mit dem Titel waechst (wie der Gegenstand) */
html body #vfForm textarea[name=titel] { min-height: 40px; max-height: 9em; field-sizing: content; resize: none; overflow-y: auto; line-height: 1.45; }
/* Q-46: Posteingang nicht im Menue, wenn das Haus ihn dieser Person nicht zeigt */
html.ck-ohne-post #ckB_posteingang { display: none !important; }
/* Q-60: Team lesend im Reiter */
html body .hr-team { margin: 4px 0 16px; overflow-x: auto; }
html body .hr-team-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
html body .hr-team-tabelle :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--ui-linie); text-align: left; vertical-align: top; }
html body .hr-team-tabelle thead th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-text-2); }
html body .hr-team-tabelle tbody th { font-weight: 600; color: var(--ui-text); }
html body .hr-team-tabelle tbody th small { display: block; font-weight: 400; color: var(--ui-text-2); font-size: 12px; }
/* Q-30: Haken „Trotzdem abschließen“, darunter erst dann die Begruendung */
html body .ab-trotzdem { display: flex; flex-direction: column; gap: 8px; }
html body .ab-trotzdem .ab-haken { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
/* Q-70: zweite Person bitten */
html body .vf-zweite-bitte { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
html body .vf-zweite-bitte > label { font-weight: 600; }
html body .vf-zweite-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html body .vf-zweite-zeile select { min-width: 220px; height: 40px; }
html body .vf-zweite-ansage { margin: 0; font-size: 13px; color: var(--ui-text-2); }
/* Prueftoene t_ui_tokens und t_ui_kontrast (18.10.): Listenbeschriftungen 12 px statt 11 px; die Jahresplanung auf die
   Schriftstufen 12, 13, 14, 16, 20, 24; der KI-Vorschlag im Posteingang mit rgba statt color-mix (gleiche Farbe, lesbar fuer die Messung). */
html body .vf-k-l { font-size: 12px; }
html body .vp-jahr b { font-size: 16px; }
html body .vp-zeile-titel b, html body .vp-zeile-wert { font-size: 14px; }
html body .vp-kopf h2 { font-size: 16px; }
html body .pe-vs.still { background-color: rgba(255, 255, 255, .7); }
/* G-06: das Symbol im Leerstand auch beim NDA und im Angebotsvergleich (Symbol im Kreis, unabhaengig vom Innenabstand) */
html body :is(.na-leer, .ck-erg-leer):not(:has(svg))::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1FD1' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E") center / 20px no-repeat, var(--ui-akzent-hell); }