/* App-weite Suche (Strg+K), Vorbild Spotlight in macOS 27 Golden Gate (Entwurf 23.09.2026),
   Redesign mit ProKI nach Design-Uebergabe „Spotlight-Suche mit ProKI" (24.09.2026).
   ⚠ Nur Variablen, die app.css wirklich fuehrt (--text, --text-secondary, --text-muted, --brand,
   --brand-light, --brand-dark, --brand-ring, --bg-modal-solid, --shadow-sm). Die erste Fassung
   erfand --card-bg und --hover-bg; im Dunkelmodus blieb der Kasten dadurch weiss (22.09.2026).
   Alle eigenen Farbwerte stehen als --sp-* hier oben, nirgends sonst. */
#spOverlay { display: none; }
#spOverlay.an { display: block; position: fixed; inset: 0; z-index: 9000; }
#spOverlay {
  --sp-dimm: rgba(15, 23, 42, .10);
  --sp-glas: rgba(255, 255, 255, .82);
  --sp-glas-dicht: rgba(255, 255, 255, .88);
  --sp-glanz: rgba(255, 255, 255, .8);
  --sp-haar: rgba(15, 23, 42, .10);
  --sp-schatten-leiste: 0 20px 50px -14px rgba(15, 23, 42, .30);
  --sp-schatten-kasten: 0 24px 60px -16px rgba(15, 23, 42, .30);
  /* Leise Flaeche aus der Textfarbe, damit sie in hell und dunkel traegt (--bg-card-hover ist im
     hellen Modus fast weiss und verschwindet auf dem Kasten). */
  --sp-leise: color-mix(in srgb, var(--text) 6%, transparent);
  --sp-auswahl: color-mix(in srgb, var(--brand) 13%, transparent);
  --sp-auf-brand: #fff;
  /* Volle Markenflaeche mit Schrift: #07a1e2 hatte mit Weiss nur 2,9:1, das hier 5,1:1 (Bugcheck 27.09.2026). */
  --sp-brand-voll: #0572a1;
  --sp-token-text: var(--brand-dark);   /* ProKI-Marke im Modus: dezent, Kontrast im Hellen */
  --sp-ok-bg: oklch(0.96 0.03 150); --sp-ok-text: oklch(0.42 0.1 150); --sp-ok-punkt: oklch(0.62 0.15 150);
  /* Kategorie-Kacheln: Farbton je Bereich (--sp-h an der Kachel), Helligkeit/Buntheit hier. */
  --sp-kat-bg-l: 0.94; --sp-kat-bg-c: 0.04; --sp-kat-fg-l: 0.5; --sp-kat-fg-c: 0.12;
  /* Internetquellen: eigene ruhige Farbe (24.09.2026, pp-47) */
  --sp-web: #6552c9; --sp-web-leise: color-mix(in srgb, #6552c9 12%, transparent); --sp-auf-web: #fff;
  /* iPhone-Blatt: grauer Grund, weisse Gruppenkarten (iOS-Listen) */
  --sp-blatt: color-mix(in srgb, var(--text) 5%, var(--bg-modal-solid)); --sp-karte: var(--bg-modal-solid);
  /* 1e: PDF-Seite bleibt in beiden Modi Papier, Fundstelle in der Markenfarbe */
  --sp-papier: #fff; --sp-fund: color-mix(in srgb, var(--brand) 26%, transparent);
}
html.dark #spOverlay {
  --sp-dimm: rgba(0, 0, 0, .28);
  --sp-glas: rgba(32, 37, 48, .82);
  --sp-glas-dicht: rgba(28, 33, 43, .88);
  --sp-glanz: rgba(255, 255, 255, .06);
  --sp-haar: rgba(255, 255, 255, .12);
  --sp-schatten-leiste: 0 20px 50px -14px rgba(0, 0, 0, .6);
  --sp-schatten-kasten: 0 24px 60px -16px rgba(0, 0, 0, .6);
  --sp-auswahl: color-mix(in srgb, var(--brand) 14%, transparent);   /* Runde 3, Regel 11: nicht kraeftiger */
  /* Kontrast zu --brand (#2cb5f0) im Dunkeln: dunkle Schrift statt weiss */
  --sp-auf-brand: #062a3b;
  --sp-brand-voll: var(--brand);
  --sp-token-text: var(--brand-light);
  --sp-ok-bg: oklch(0.32 0.06 150); --sp-ok-text: oklch(0.86 0.1 150); --sp-ok-punkt: oklch(0.75 0.16 150);
  --sp-kat-bg-l: 0.34; --sp-kat-bg-c: 0.07; --sp-kat-fg-l: 0.82; --sp-kat-fg-c: 0.1;
  --sp-web: #a99dff; --sp-web-leise: color-mix(in srgb, #a99dff 16%, transparent); --sp-auf-web: #1b1440;
  --sp-blatt: var(--bg-modal-solid); --sp-karte: color-mix(in srgb, var(--text) 8%, var(--bg-modal-solid));
}

/* Spotlight legt sich ueber den Bildschirm, ohne ihn zu verstecken: nur leicht gedaempft,
   kein Weichzeichner mehr wie bei einem Dialog. */
.sp-hinter { position: absolute; inset: 0; background: var(--sp-dimm); }

/* Zwei getrennte Glasflaechen: die Leiste steht allein, die Flaeche darunter erscheint erst mit
   Inhalt (.voll, spKastenVoll). .sp-kasten selbst ist nur noch die unsichtbare Spalte.
   ⚠ Spalte mit HOEHENGRENZE, nur Liste/Antwort scrollen (Telefon, Mike 23.09.2026). dvh statt
   vh, weil iOS die Bildschirmtastatur nur in dvh einrechnet; vh bleibt als Rueckfall davor. */
.sp-kasten {
  position: relative;
  margin: min(120px, 14vh) auto 0;
  width: min(720px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - min(120px, 14vh) - 16px);
  max-height: calc(100dvh - min(120px, 14vh) - 16px);
  color: var(--text);
}
.sp-kopf, .sp-flaeche {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.sp-kopf {
  display: flex; align-items: center; gap: 10px; flex: none;
  height: 60px; padding: 0 12px 0 22px; border-radius: 30px;
  background: var(--sp-glas);
  box-shadow: 0 0 0 .5px var(--sp-haar), inset 0 1px 0 var(--sp-glanz), var(--sp-schatten-leiste);
}
.sp-flaeche {
  flex: 0 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: var(--sp-glas-dicht);
  box-shadow: 0 0 0 .5px var(--sp-haar), var(--sp-schatten-kasten);
}
.sp-kasten:not(.voll) .sp-flaeche { display: none; }
.sp-kopfreihe { display: flex; align-items: center; gap: 12px; flex: none; }
.sp-kopfreihe > .sp-kopf { flex: 1; min-width: 0; }
/* Nur auf Touch/iPhone: Abbrechen, Leeren, Blattkopf, Frage als Blase. .sp-gruppe gliedert die Liste
   fuer die iOS-Karten und ist auf dem Desktop unsichtbar (display: contents). */
.sp-abbrechen, .sp-blatt-kopf, .sp-frage-blase, .sp-leeren { display: none; }
.sp-gruppe { display: contents; }
.sp-lupe { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
.sp-feldfilter {
  flex: none; padding: 3px 10px; border-radius: 99px;
  background: var(--sp-brand-voll); color: var(--sp-auf-brand); font-size: 13px; font-weight: 600;
}
.sp-feldwrap { position: relative; flex: 1; min-width: 0; height: 100%; }
/* Feld und Vervollstaendigung liegen exakt uebereinander: gleiche Schrift, gleicher Innenabstand. */
#spFeld, .sp-ghost {
  position: absolute; inset: 0; width: 100%;
  /* Einzeln, nicht als Kurzschreibweise: "font: 400 22px/56px inherit" ist ungueltig und wird
     vom Browser komplett verworfen (Feld stand in 13 px, 23.09.2026). */
  font-family: inherit; font-size: 21px; font-weight: 400; line-height: 60px; letter-spacing: -.01em;
  padding: 0; margin: 0; border: 0; white-space: pre; overflow: hidden;
}
/* appearance:none, sonst gibt Safari (Mac, iPad) type=search eine eigene Innenpolsterung und die
   helle Vervollstaendigung liegt versetzt (Review 23.09.2026). */
#spFeld { background: transparent; outline: 0; color: var(--text); -webkit-appearance: none; appearance: none; }
#spFeld::-webkit-search-decoration { display: none; }
#spFeld::placeholder { color: var(--text-muted); }
#spFeld::-webkit-search-cancel-button { display: none; }
.sp-ghost { color: var(--text-muted); opacity: .55; pointer-events: none; }
.sp-ghost-q { color: transparent; }
/* Tastenkappe: ueberall dieselbe (esc, Tab, Enter, Fusszeile) */
.sp-esc, #spOverlay kbd {
  flex: none; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 6px; border-radius: 5px; border: 0;
  background: var(--sp-leise); color: var(--text-secondary);
}

/* Bereichsfilter als Symbolgruppe rechts im Feld (Desktop). Reihenfolge = SPR_FILTER.
   Touch-Geraete und schmale Fenster nehmen stattdessen die beschriftete Reihe .sp-filter. */
.sp-bereiche {
  flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 20px;
  background: var(--sp-leise);
}
.sp-bereiche[hidden] { display: none; }
.sp-bereich {
  width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--text-secondary);
}
.sp-bereich svg { width: 15px; height: 15px; display: block; }
.sp-bereich:hover { color: var(--text); }
.sp-bereich[aria-pressed="true"] { background: var(--bg-modal-solid); box-shadow: var(--shadow-sm); color: var(--brand); }
.sp-bereich:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  #spOverlay .sp-filter { display: none; }
}
@media (hover: none), (max-width: 640px) {
  .sp-bereiche { display: none; }
}

.sp-filter {
  display: flex; gap: 6px; flex: none;
  padding: 8px 12px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--sp-haar);
}
.sp-filter::-webkit-scrollbar { display: none; }
.sp-chip {
  flex: none; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1;
  padding: 6px 11px; border-radius: 99px; cursor: pointer;
  border: 0; background: var(--sp-leise); color: var(--text);
}
.sp-chip span { color: var(--text-muted); margin-left: 3px; }
.sp-chip:hover { background: var(--sp-auswahl); }
.sp-chip.an { background: var(--sp-brand-voll); color: var(--sp-auf-brand); }
.sp-chip.an span { color: inherit; opacity: .8; }

.sp-liste {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.sp-kopfzeile { padding: 12px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sp-kopfzeile:first-child { padding-top: 4px; }
.sp-zeile {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 7px 10px; border-radius: 10px; cursor: pointer;
}
.sp-zeile:hover { background: var(--sp-leise); }
/* Auswahl leise getoent statt vollflaechig Brand: die Schrift bleibt dunkel und lesbar. */
.sp-zeile.hot, .sp-zeile.hot:hover { background: var(--sp-auswahl); }
/* Kachel je Bereich: Farbton kommt aus der Klasse k-<filter> (spKachel) */
.sp-sym {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: oklch(var(--sp-kat-bg-l) var(--sp-kat-bg-c) var(--sp-h, 235));
  color: oklch(var(--sp-kat-fg-l) var(--sp-kat-fg-c) var(--sp-h, 235));
}
.sp-sym svg { width: 15px; height: 15px; display: block; }
.sp-sym.k-vorgaenge { --sp-h: 235; }
.sp-sym.k-dokumente { --sp-h: 55; }
.sp-sym.k-mails { --sp-h: 280; }
.sp-sym.k-objekte { --sp-h: 155; }
.sp-sym.k-finanzen { --sp-h: 320; }
.sp-sym.k-befehle { background: var(--sp-leise); color: var(--text-secondary); }
.sp-zeile.top { padding: 10px; border-radius: 12px; gap: 12px; }
.sp-zeile.top .sp-sym { width: 40px; height: 40px; border-radius: 11px; }
.sp-zeile.top .sp-sym svg { width: 20px; height: 20px; }
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-t { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-zeile.top .sp-t { font-size: 15px; font-weight: 600; }
.sp-u { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-zeile.top .sp-u { font-size: 12.5px; color: var(--text-secondary); }
/* Typ-Label rechts entfaellt: die Gruppe sagt den Typ (bleibt im DOM fuer die Probe). */
.sp-art { display: none; }
/* Liste und Vorschau nebeneinander (1b): die Vorschau-Spalte gibt es erst ab 1024 px */
.sp-mitte { flex: 0 1 auto; min-height: 0; display: flex; }
.sp-mitte > .sp-liste { flex: 1 1 auto; min-width: 0; }
.sp-kasten.mit-vorschau { width: min(880px, calc(100vw - 32px)); }
.sp-kasten.mit-vorschau .sp-mitte { height: 540px; }
.sp-kasten.mit-vorschau .sp-mitte > .sp-liste { flex: 0 0 400px; border-right: 1px solid var(--sp-haar); }
/* Lesemodus: Mail im Spotlight (Mike 25.09.2026). Kasten gross, Liste schmal links, Mail rechts
   auf weissem Papier (Mails setzen weissen Grund voraus, wie .sp-qs-seite). */
.sp-kasten.lesen { width: min(1280px, calc(100vw - 32px)); }
.sp-kasten.lesen .sp-mitte { height: calc(100vh - min(120px, 14vh) - 100px); height: calc(100dvh - min(120px, 14vh) - 100px); }
.sp-kasten.lesen .sp-mitte > .sp-liste { flex: 0 0 360px; }
.sp-kasten.lesen .sp-vorschau { padding: 0; gap: 0; }
.sp-kasten.lesen #spAntwort { display: none; }
.sp-lese { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--sp-leise); }
.sp-lese .sp-qs-kopf .sp-sym { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.sp-lese .sp-qs-titel h4 { font-size: 16px; white-space: normal; }
.sp-lese .sp-qs-titel p { font-size: 12.5px; }
.sp-lese-daten { flex: none; display: grid; gap: 3px; padding: 10px 18px 4px; font-size: 13px; color: var(--text-secondary); }
.sp-lese-daten > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-lese-daten span { display: inline-block; width: 34px; color: var(--text-muted); }
.sp-lese-papier { flex: 1 1 auto; min-height: 0; margin: 8px 16px 16px; border-radius: 10px; overflow: hidden;
  background: var(--sp-papier); box-shadow: 0 0 0 .5px var(--sp-haar); }
.sp-lese-hinweis { margin: 18px; font-size: 13px; color: var(--text-muted); }
.sp-lese-text { display: block; width: 100%; height: 100%; border: 0; }
.sp-lese .sp-qs-pills { padding: 4px 18px 2px; }
.sp-lese .sp-qs-pill { max-width: 320px; }
.sp-lese a.sp-qs-oeffnen { text-decoration: none; }
.sp-alle {
  align-self: flex-start; margin: 6px 0 2px; padding: 6px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; font-family: inherit; font-size: 12.5px; color: var(--brand-dark);
}
html.dark .sp-alle { color: var(--brand); }
.sp-alle:hover { background: var(--sp-leise); }
.sp-vorschau {
  flex: 1 1 auto; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 20px; padding: 24px 28px;
}
.sp-vorschau[hidden] { display: none; }
/* Kinder nie stauchen: mit langem Inhalt (Verlauf eines Vorgangs) drueckte die Flex-Spalte .sp-v-daten (overflow:hidden) auf 0 px, gescrollt wird die Spalte. */
.sp-vorschau > * { flex-shrink: 0; }
.sp-v-kopf { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-v-kopf .sp-sym { width: 56px; height: 56px; border-radius: 15px; }
.sp-v-kopf .sp-sym svg { width: 26px; height: 26px; }
.sp-v-kopf > div { min-width: 0; }
.sp-v-kopf h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.sp-v-kopf p { margin: 3px 0 0; font-size: 14px; color: var(--text-secondary); overflow-wrap: anywhere; }
.sp-v-daten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  border-radius: 12px; overflow: hidden; background: var(--sp-haar); box-shadow: 0 0 0 1px var(--sp-haar);
}
.sp-v-daten > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; background: var(--bg-modal-solid); }
.sp-v-daten span { font-size: 12px; color: var(--text-muted); }
.sp-v-daten b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.sp-v-titel { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: -12px; }
.sp-v-offen { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sp-v-offen li { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.sp-v-offen li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.sp-v-offen li.wv::before { background: var(--orange); }
.sp-v-offen span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-v-offen small { flex: none; margin-left: auto; font-size: 13px; color: var(--text-muted); }
.sp-v-fund { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.sp-v-text { white-space: pre-line; overflow-wrap: anywhere; }
.sp-v-fund mark { background: color-mix(in srgb, var(--brand) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.sp-v-aktionen { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-v-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--sp-leise); color: var(--text); font-family: inherit; font-size: 13.5px;
}
.sp-v-knopf:hover { background: var(--sp-auswahl); }
.sp-v-knopf.primaer { background: var(--sp-brand-voll); color: var(--sp-auf-brand); font-weight: 600; }
#spOverlay .sp-v-knopf.primaer kbd { background: color-mix(in srgb, var(--sp-auf-brand) 20%, transparent); color: inherit; }
.sp-v-knopf .sp-funke { width: 12px; height: 12px; color: var(--brand); }
.sp-v-knopf:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Ruhezustand (leeres Feld): Kacheln, ProKI-Vorschlaege, Befehle, Fusszeile */
.sp-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: none; }
.sp-kachel {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 12px; border-radius: 14px; cursor: pointer;
}
.sp-kachel:hover { background: var(--sp-leise); }
.sp-kachel.hot { background: var(--sp-auswahl); }
.sp-kachel .sp-sym { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 8px; }
.sp-kachel-t { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-kachel-u { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 4px; flex: none; }
.sp-vorschlag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--sp-leise); color: var(--text);
  font-family: inherit; font-size: 13px; line-height: 1.2; text-align: left;
}
.sp-vorschlag:hover { background: var(--sp-auswahl); }
.sp-vorschlag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sp-vorschlag .sp-funke { width: 11px; height: 11px; color: var(--brand); }
.sp-fuss {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; border-top: 1px solid var(--sp-haar);
  font-size: 12px; color: var(--text-muted);
}
.sp-fuss[hidden] { display: none; }
.sp-fuss-tasten { display: flex; gap: 14px; }
.sp-fuss kbd { margin-right: 4px; }
.sp-lokal { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.sp-lokal::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-ok-punkt); }
@media (max-width: 640px) {
  .sp-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: none), (max-width: 640px) {
  .sp-fuss-tasten { display: none; }
}

.sp-leer { padding: 24px 16px; text-align: center; color: var(--text-muted); }
.sp-hinweis { padding: 8px 10px 4px; font-size: 11px; color: var(--text-muted); }


  .sp-kasten { animation: spAuf .16s ease-out; }
  @keyframes spAuf {
    from { transform: scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }


/* ── ProKI (24.09.2026, Entwurf C/1 von Mike) ─────────────────────────────────────────────── */
/* [hidden] verliert gegen jedes display aus dem Stylesheet: ohne diese Zeilen standen Marke und
   leere Filterreihe (die schon vorher als Streifen unter dem Feld) immer da. */
.sp-ki-marke[hidden], .sp-filter[hidden] { display: none; }
.sp-liste:empty { display: none; }
.sp-antwort:has(+ .sp-liste:empty) { border-bottom: 0; }
.sp-funke { width: 14px; height: 14px; flex: none; }
.sp-ki-knopf {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 7px 11px; border-radius: 99px; border: 0;
  background: var(--sp-leise); color: var(--text-secondary); cursor: pointer;
}
.sp-ki-knopf .sp-funke { width: 12px; height: 12px; color: var(--brand); }
.sp-ki-knopf:hover { color: var(--text); }
.sp-ki-knopf[aria-pressed="true"] { background: var(--sp-auswahl); color: var(--brand); }
.sp-ki-knopf:focus-visible, .sp-q-knopf:focus-visible, .sp-kopieren:focus-visible, .sp-mehr:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
/* ProKI-Modus: Marke links, Fokusring um die Leiste, keine Lupe, Frage etwas kleiner */
.sp-ki-marke {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px 7px 10px; border-radius: 99px;
  background: linear-gradient(var(--brand-light), var(--brand)); color: var(--sp-auf-brand);
  font-size: 14px; font-weight: 600; line-height: 1;
}
.sp-ki-marke .sp-funke { width: 12px; height: 12px; }
/* Titel oben im ProKI-Modus (Telefon): dieselbe farbige Marke wie in der Leiste, etwas groesser */
.sp-blatt-titel .sp-titel-marke { font-size: 15px; padding: 7px 13px 7px 11px; vertical-align: middle; }
.sp-blatt-titel .sp-titel-marke .sp-funke { width: 14px; height: 14px; }
.sp-kasten.ki .sp-kopf {
  padding-left: 14px;
  box-shadow: 0 0 0 4px var(--brand-ring), 0 0 0 .5px var(--sp-haar), inset 0 1px 0 var(--sp-glanz), var(--sp-schatten-leiste);
}
.sp-kasten.ki .sp-lupe { display: none; }
.sp-kasten.ki #spFeld { font-size: 18px; letter-spacing: -.005em; }
/* ── Runde 3 (Regeln 1, 2, 10): ProKI-Modus schlicht und deckend. Keine Bereichssymbole, kein
   ProKI-Knopf, Marke dezent, Leiste 56 px, Kasten ohne Glas (nichts scheint durch). ─────────────── */
.sp-kasten.ki .sp-ki-knopf { display: none; }
.sp-kasten.ki .sp-kopf { height: 56px; }
.sp-kasten.ki #spFeld { line-height: 56px; }
.sp-kasten.ki .sp-ki-marke {
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--sp-token-text);
  padding: 6px 11px 6px 9px; font-size: 13.5px;
}
.sp-kasten.ki .sp-kopf, .sp-kasten.ki .sp-flaeche {
  background: var(--bg-modal-solid); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sp-ki-fuss {
  flex: none; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 22px; border: 0; border-top: 1px solid var(--sp-haar); background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--text-muted); text-align: left;
}
.sp-ki-fuss[hidden] { display: none; }
.sp-ki-fuss svg { width: 14px; height: 14px; flex: none; }
.sp-ki-fuss span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ki-fuss:hover { color: var(--text); background: var(--sp-leise); }

/* Zeile 1 der Liste: "ProKI fragen: q". Kein farbiger Block mehr, Kachel mit Brand-Verlauf. */
.sp-ki-zeile {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 7px 10px; border-radius: 10px; cursor: pointer;
  color: var(--text); font-size: 13.5px;
}
.sp-ki-zeile:hover { background: var(--sp-leise); }
.sp-ki-sym {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: var(--sp-auf-brand);
}
.sp-ki-sym .sp-funke { width: 12px; height: 12px; }
.sp-ki-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ki-t em { font-style: normal; color: var(--text-muted); }
.sp-ki-hinweis { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px 14px; font-size: 13px; color: var(--text-muted); }
.sp-ki-hinweis span { display: inline-flex; align-items: center; gap: 6px; }

/* Antwort (1c): einspaltig, Meta-Zeile mit Lokal-Siegel, Kernsatz, Fakten, Punkte, Tabellen,
   Quellen als Karten, Textknoepfe, Nachfragen. Ueber der Trefferliste mit eigener Hoehengrenze,
   damit die Treffer darunter nie ganz verschwinden; im ProKI-Modus (keine Liste) volle Hoehe. */
.sp-antwort {
  flex: 0 1 auto; min-height: 0; max-height: min(62vh, 560px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 28px; border-bottom: 1px solid var(--sp-haar);
}
.sp-antwort[hidden] { display: none; }
/* Kinder nie stauchen: .sp-tabelle (overflow hidden) schrumpfte sonst auf einen Streifen statt die Antwort scrollen zu lassen. */
.sp-antwort > * { flex-shrink: 0; }
.sp-kasten.ki .sp-antwort { flex: 1 1 auto; max-height: none; border-bottom: 0; }
.sp-antwort-kopf {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0;
  font-size: 12.5px; color: var(--text-muted);
}
.sp-antwort-marke { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-weight: 600; }
.sp-antwort-marke .sp-funke { width: 12px; height: 12px; }
.sp-antwort-text { display: flex; flex-direction: column; gap: 14px; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.sp-antwort-text p, .sp-antwort-text ul { margin: 0; }
.sp-antwort-text .sp-kern { font-size: 18px; line-height: 1.5; letter-spacing: -.012em; }   /* Runde 3, Regel 4 */
.sp-kern strong { font-weight: 600; }
.sp-absatz { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.sp-punkte { list-style: none; padding: 0; display: grid; gap: 8px; }
.sp-punkte li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.sp-punkte li::before {
  content: ''; position: absolute; left: 3px; top: .66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted);
}
/* Markdown-Tabellen aus der Antwort */
/* Rahmen als echter Rand, nicht als Innenschatten: der fehlte rechts und links, sobald die Tabelle breiter als der Kasten war (Mike 07.10.2026, 373). */
.sp-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.sp-karte { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sp-haar); font-size: 13px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.sp-karte b { font-size: 14px; }
.sp-karte .sp-karte-rolle { color: var(--text-muted); }
.sp-karte a { color: var(--brand); }
.sp-karte .sp-karte-knopf { align-self: flex-end; margin-top: 6px; font-weight: 600; text-decoration: none; }
.sp-karte .sp-karte-knopf:hover { text-decoration: underline; }
.sp-tabelle { border-radius: 14px; border: 1px solid var(--sp-haar); overflow-x: auto; }
.sp-tab-link { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sp-tab-link:hover { text-decoration: underline; }
.sp-tabelle table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-tabelle th {
  padding: 9px 14px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--sp-leise);
}
.sp-tabelle td { padding: 9px 14px; border-top: 1px solid var(--sp-haar); color: var(--text); }
.sp-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-mehr, .sp-aktion {
  font-family: inherit; font-size: 13px; color: var(--text-secondary);
  background: none; border: 0; padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.sp-mehr { align-self: flex-start; margin: -10px 0 0 -10px; color: var(--brand); font-weight: 600; }
.sp-mehr:hover, .sp-aktion:hover { background: var(--sp-leise); color: var(--text); }
.sp-aktion:focus-visible, .sp-mehr:focus-visible, .sp-senden:focus-visible,
.sp-nf-vorschlag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Verweis im Satz: kleine Nummer direkt am Wort; Ueberfahren hebt auch die Quellenkarte hervor */
.sp-ref {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px; vertical-align: 1px;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  border: 0; border-radius: 5px; background: var(--sp-leise); color: var(--text-secondary); cursor: pointer;
}
.sp-ref:hover, .sp-ref:focus-visible, .sp-ref.aktiv { background: var(--sp-brand-voll); color: var(--sp-auf-brand); outline: none; }

/* Internetquellen (24.09.2026): eigene, ruhige Farbe, damit interne und externe Belege auf einen Blick
   unterscheidbar sind (Recherche: Mitarbeiter trauen internen Belegen zu Recht mehr). */
.sp-ref.web { background: var(--sp-web-leise); color: var(--sp-web); }
.sp-ref.web:hover, .sp-ref.web:focus-visible, .sp-ref.web.aktiv { background: var(--sp-web); color: var(--sp-auf-web); }
.sp-quelle.web .sp-q-nr { color: var(--sp-web); }
.sp-q-hinweis {
  flex: none; align-self: flex-start; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 99px;
  color: var(--orange-text, var(--orange)); background: color-mix(in srgb, var(--orange) 12%, transparent);
}
.sp-aktion.sp-web-knopf { display: inline-flex; align-items: center; gap: 5px; color: var(--sp-web); }
.sp-aktion.sp-web-knopf:hover { background: var(--sp-web-leise); }
.sp-web-knopf .sp-funke { width: 12px; height: 12px; }
.sp-web-gesucht { margin-top: -12px; font-size: 12px; color: var(--text-muted); }

.sp-antwort-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: -6px 0 0 -10px; }
.sp-antwort-hinweis { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* Quellenliste (fruehere Runden) */
.sp-quellen { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-quelle:not(.sp-qchip) {
  font: inherit; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--text); text-align: left; cursor: pointer;
}
.sp-quelle:not(.sp-qchip):hover, .sp-quelle:not(.sp-qchip):focus-visible { background: var(--sp-leise); outline: none; }
.sp-q-nr { flex: none; width: 18px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sp-q-titel { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-q-meta { flex: none; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sp-q-erg { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.sp-q-erg::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sp-q-erg.ja { color: var(--green-text, var(--green)); }
.sp-q-erg.nein { color: var(--red-text, var(--red)); }

/* Gefundene Dokumente vor der Antwort (20.10.2026, Entwurf ProKI-Fundstellen) */
.sp-kand-kopf { margin: 0 0 2px 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
.sp-kand-kopf span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.sp-antwort-text + .sp-kand, .sp-antwort-fuss ~ .sp-kand-rest { margin-top: 12px; padding-top: 10px; border-top: .5px solid var(--sp-haar); }
.sp-kand-liste { margin-top: 0; }
.sp-quelle.sp-kand.offen { background: var(--sp-auswahl); }
.sp-kand-sym { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--sp-leise); color: var(--text-secondary); }
.sp-kand-sym svg { width: 14px; height: 14px; }
.sp-kand-vorschau { margin: 4px 8px 8px 40px; padding: 10px 12px; border-radius: 10px; background: var(--sp-leise); font-size: 12.5px; color: var(--text-secondary); }
.sp-kand-oeffnen { display: block; margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--brand-dark); cursor: pointer; }
.sp-kand-rest > summary { cursor: pointer; list-style: none; margin: 0 0 2px 8px; font-size: 12.5px; color: var(--text-muted); }
.sp-kand-rest > summary::-webkit-details-marker { display: none; }
.sp-kand-rest > summary::before { content: '›'; display: inline-block; width: 12px; transition: transform .15s; }
.sp-kand-rest[open] > summary::before { transform: rotate(90deg); }
.sp-kand-rest .sp-quelle { opacity: .75; }

/* Gespraech und Nachfrage */
.sp-runde { padding-bottom: 10px; border-bottom: 1px solid var(--sp-haar); }
.sp-runde > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.sp-runde > summary::-webkit-details-marker { display: none; }
.sp-runde > summary::before { content: '›'; color: var(--text-muted); transition: transform .15s; }
.sp-runde[open] > summary::before { transform: rotate(90deg); }
.sp-runde-kern { font-size: 13.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-runde[open] .sp-runde-kern { display: none; }
.sp-runde .sp-antwort-text { margin-top: 8px; }
.sp-runde .sp-antwort-text .sp-kern { font-size: 14.5px; }
.sp-runde-frage { font-size: 13px; font-weight: 600; color: var(--text-secondary); flex: none; max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-frage-jetzt { max-width: none; white-space: normal; margin-bottom: -6px; }
/* Nachfragen: klebt unten an der Antwort, ueber die volle Breite */
.sp-nachfrage-zeile {
  position: sticky; bottom: -22px; z-index: 1; flex: none;
  margin: 0 -28px -22px; padding: 12px 22px 14px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--sp-haar);
  background: var(--sp-glas-dicht);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.sp-nachfrage-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-nf-vorschlag {
  font-family: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--sp-leise); color: var(--text); text-align: left;
}
.sp-nf-vorschlag:hover { background: var(--sp-auswahl); }
.sp-nachfrage-feld { display: flex; align-items: center; gap: 10px; }
.sp-nachfrage {
  flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14.5px; color: var(--text);
}
.sp-nachfrage::placeholder { color: var(--text-muted); }
.sp-senden {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--sp-leise); color: var(--text-muted);
}
.sp-senden svg { width: 15px; height: 15px; }
.sp-nachfrage:not(:placeholder-shown) + .sp-senden { background: var(--sp-brand-voll); color: var(--sp-auf-brand); }

@media (max-width: 640px) {
  .sp-antwort { padding: 12px 4px 16px; border-bottom: 0; }
  .sp-nachfrage-zeile { bottom: -16px; margin: 0 -4px -16px; padding: 10px 4px 12px; background: var(--sp-blatt); }
  .sp-antwort-hinweis { margin-left: 10px; width: 100%; }
  .sp-q-meta, .sp-ki-zeile kbd { display: none; }
  .sp-ki-knopf { font-size: 0; gap: 0; padding: 7px 8px; }
}
@media (hover: none) and (pointer: coarse) {
  .sp-ki-zeile kbd, .sp-ki-hinweis span:last-child { display: none; }
}
/* ProKI arbeitet: Schrittliste aus den "schritt"-Nachrichten, Skelett in Antwortform, Fusszeile. */
.sp-lauf { display: flex; flex-direction: column; gap: 18px; }
.sp-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.sp-schritte li { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-secondary); }
.sp-schritte li > span:not(.sp-schritt-sek), .sp-schritte li > strong {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-schritte i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.sp-schritte li.erledigt i { background: var(--sp-ok-bg); }
.sp-schritte li.erledigt i::after {
  content: ''; width: 7px; height: 4px; margin-top: -2px;
  border-left: 1.6px solid var(--sp-ok-text); border-bottom: 1.6px solid var(--sp-ok-text); transform: rotate(-45deg);
}
.sp-schritte li.jetzt i { box-shadow: inset 0 0 0 1.5px var(--brand-ring); }
.sp-schritte li.jetzt i::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.sp-schritte li.jetzt strong { font-weight: 600; color: var(--text); }
.sp-schritt-sek { flex: none; margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

  .sp-schritte li.jetzt i::after { animation: spPuls 1.6s ease-in-out infinite; }
  @keyframes spPuls { 50% { opacity: .35; transform: scale(.75); } }

.sp-skelett { display: flex; flex-direction: column; gap: 10px; }
.sp-skelett b { display: block; height: 14px; border-radius: 7px; background: var(--sp-leise); width: 92%; }
.sp-skelett b + b { width: 78%; }
.sp-skelett div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sp-skelett i { height: 64px; border-radius: 14px; background: var(--sp-leise); }
.sp-lauf-fuss { display: flex; align-items: center; font-size: 12px; color: var(--text-muted); }
.sp-lauf-fuss .sp-lokal { margin-left: 0; }
.sp-anhalten {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12px; color: var(--text-muted);
  background: none; border: 0; padding: 4px 6px; border-radius: 8px; cursor: pointer;
}
.sp-anhalten:hover { color: var(--text); background: var(--sp-leise); }
.sp-anhalten:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) {
  .sp-skelett div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Runde 3, Antwort verdichtet (Regeln 3-9, 18): Meta mit Objekt, Faktenzeile, Chips, Symbole ── */
.sp-antwort-kopf { font-size: 12.5px; color: var(--text-muted); }
.sp-meta-objekt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-antwort-kopf .sp-lokal { margin-left: auto; font-size: 12px; cursor: help; }
.sp-fakten {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sp-haar);
}
.sp-fakt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 14px; }
.sp-fakt + .sp-fakt { box-shadow: inset 1px 0 0 var(--sp-haar); }
.sp-fakt span { font-size: 12px; color: var(--text-muted); }
.sp-fakt b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-fakt small { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.sp-netz { border-radius: 12px; background: var(--sp-leise); }
.sp-netz > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; font-size: 13.5px; color: var(--text);
}
.sp-netz > summary::-webkit-details-marker { display: none; }
.sp-netz > summary svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.sp-netz-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-netz-her { flex: none; font-size: 12px; color: var(--text-muted); }
.sp-netz-her::after { content: '›'; display: inline-block; margin-left: 8px; transition: transform .15s; }
.sp-netz[open] .sp-netz-her::after { transform: rotate(90deg); }
.sp-netz > .sp-antwort-text { padding: 2px 14px 12px; }
.sp-netz-hinweis { font-size: 12px; color: var(--text-muted); }
.sp-fundstellen { margin: 8px 0; }
.sp-fund { font-size: 13px; margin: 6px 0; }
.sp-fund-nr { font-weight: 600; }
.sp-fund-titel { font-size: 12px; color: var(--text-muted); }
.sp-fund-warn { font-size: 12px; color: var(--red-text, #b42318); }
.sp-antwort-fuss { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: nowrap; }
.sp-qchips { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
.sp-qchips > .sp-qchip { flex: 0 1 auto; min-width: 0; }
.sp-qchips > .sp-q-mehr { flex: none; }
.sp-qchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px;
  padding: 4px 10px 4px 5px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--sp-leise); color: var(--text-secondary);
  font-family: inherit; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-qchip > span, .sp-qs-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-qchip b {
  flex: none; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 99px;
  font-size: 11px; font-weight: 600; background: var(--bg-modal-solid); color: var(--text-secondary);
}
.sp-qchip:hover, .sp-qchip.aktiv { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text); }
.sp-qchip.web b { color: var(--sp-web); }
.sp-qchip.web:hover, .sp-qchip.web.aktiv { background: var(--sp-web-leise); }
.sp-qchip .sp-q-erg { gap: 0; }
.sp-q-mehr { padding: 4px 10px; color: var(--text-muted); }
.sp-qchip:focus-visible, .sp-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sp-aktionen { flex: none; display: flex; gap: 2px; }
.sp-aktion.sp-icon { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); }
.sp-icon svg { width: 16px; height: 16px; }
.sp-icon.ok { color: var(--sp-ok-punkt); }
.sp-icon.schlecht { color: var(--red-text, #b42318); }
.sp-kommentar { display: flex; gap: 6px; align-items: center; margin: 6px 0 2px; }
.sp-kommentar-feld {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border, color-mix(in srgb, var(--text) 18%, transparent)); background: var(--bg-modal-solid); color: var(--text);
}
/* Kommentar-Popup nach Daumen runter (07.10.2026) */
.sp-kommentar-pop { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, #000 35%, transparent); }
.sp-kommentar-karte { width: min(460px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px;
  background: var(--bg-modal-solid); color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.sp-kommentar-karte p { margin: 0; font-size: 13px; color: var(--text-muted); }
.sp-kommentar-karte textarea.sp-kommentar-feld { flex: none; resize: vertical; min-height: 84px; }
.sp-kommentar-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.sp-kommentar-knoepfe .sp-kommentar-senden { font-weight: 600; }
.sp-kommentar-dank { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 2px; }
.sp-aktion.sp-web-knopf.sp-icon { color: var(--sp-web); }
/* Nachfragen: nur das Feld, deckend (nichts scheint durch), Vorschlaege erst bei Fokus */
#spOverlay .sp-nachfrage-zeile {
  background: var(--bg-modal-solid); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-top: 0; padding-top: 6px; gap: 8px;
}
.sp-nachfrage-vorschlaege { display: none; }
.sp-nachfrage-zeile:focus-within .sp-nachfrage-vorschlaege { display: flex; }
.sp-nachfrage-feld {
  height: 46px; border-radius: 23px; padding: 0 8px 0 16px;
  background: color-mix(in srgb, var(--text) 6%, var(--bg-modal-solid));
}

/* ── Runde 3, Objekt-Suche (Rahmen 3b): Gruppenzahl, Kuerzel im Symbol, Statuspunkt, Objekt kompakt ── */
.sp-kopfzeile { display: flex; align-items: center; }
.sp-kopf-zahl {
  margin-left: auto; padding: 1px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.sp-kopf-zahl:hover { background: var(--sp-leise); color: var(--text); }
.sp-sym.sp-kuerzel { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.sp-sym.sp-punkt-feld { background: none; }
.sp-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.sp-punkt.alt { background: var(--orange); }   /* offen und seit 14 Tagen ohne Bewegung: Farbe mit Bedeutung */
.sp-zeile.top.objekt .sp-sym { width: 36px; height: 36px; border-radius: 10px; }
.sp-zeile.top.objekt .sp-sym svg { width: 18px; height: 18px; }
.sp-zeile.top.objekt .sp-t { font-size: 14.5px; }
.sp-v-zahlen { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.sp-v-zahlen > div { display: flex; flex-direction: column; gap: 1px; }
.sp-v-zahlen b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-v-zahlen span { font-size: 12.5px; color: var(--text-muted); }
.sp-v-zahlen .orange b { color: var(--orange-text, var(--orange)); }
.sp-v-zuletzt { list-style: none; margin: 0; padding: 0; }
.sp-v-zuletzt li { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; min-width: 0; }
.sp-v-zuletzt li + li { border-top: 1px solid var(--sp-haar); }
.sp-v-zuletzt time { flex: 0 0 72px; color: var(--text-muted); }
.sp-v-zuletzt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-v-kontakte { display: grid; gap: 4px; font-size: 14px; }
.sp-v-kontakte span { color: var(--text-secondary); }

/* ── 1e Gespräch erweitert (ab 2. Runde oder nach Klick auf eine Quelle, ab 1180 px) ─────────────
   Links das Gespräch, rechts 400 px die gewählte Quelle: PDF-Seite mit markierter Fundstelle,
   sonst der Auszug als Text; unten Quellen-Pills zum Umschalten. Suchleiste bleibt oben. */
.sp-qspalte[hidden], .sp-neues-gespraech { display: none; }
.sp-kasten.gespraech { width: min(1080px, calc(100vw - 32px)); }
.sp-kasten.gespraech .sp-flaeche {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr) auto;
  height: 680px;
}
.sp-kasten.gespraech .sp-antwort { grid-area: 1 / 1; max-height: none; border-bottom: 0; }
.sp-kasten.gespraech .sp-ki-fuss { grid-area: 2 / 1; }
.sp-kasten.gespraech .sp-qspalte { grid-area: 1 / 2 / 3 / 3; }
.sp-kasten.gespraech .sp-mitte, .sp-kasten.gespraech .sp-fuss { display: none; }
.sp-kasten.gespraech .sp-neues-gespraech {
  display: inline-block; margin-left: 10px; padding: 4px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--sp-leise); font-family: inherit; font-size: 12px; color: var(--text-secondary);
}
.sp-kasten.gespraech .sp-neues-gespraech:hover { color: var(--text); }
.sp-kasten.gespraech .sp-frage-jetzt {
  align-self: flex-end; max-width: 80%; padding: 9px 14px; border-radius: 18px;
  background: var(--sp-leise); font-size: 14.5px; font-weight: 400; color: var(--text); margin-bottom: 0;
}
.sp-kasten.gespraech .sp-nachfrage-feld { border-radius: 24px; }
.sp-kasten.gespraech .sp-senden { width: 32px; height: 32px; }

.sp-qspalte {
  min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--sp-haar); background: var(--sp-leise);
}
.sp-qs-kopf { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sp-haar); }
.sp-qs-nr {
  flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center;
  background: var(--sp-brand-voll); color: var(--sp-auf-brand); font-size: 11.5px; font-weight: 700;
}
.sp-qs-nr.web { background: var(--sp-web); color: var(--sp-auf-web); }
.sp-qs-titel { flex: 1; min-width: 0; }
.sp-qs-titel h4 { margin: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-qs-titel p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-qs-oeffnen {
  flex: none; padding: 5px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brand-dark);
}
html.dark .sp-qs-oeffnen { color: var(--brand); }
.sp-qs-oeffnen:hover { background: var(--sp-leise); }
.sp-qs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.sp-qs-seite { position: relative; margin: 0 auto; border-radius: 6px; overflow: hidden; background: var(--sp-papier);
  box-shadow: 0 0 0 .5px var(--sp-haar), 0 6px 18px -8px var(--sp-haar); }
.sp-qs-seite canvas { display: block; }
.sp-qs-treffer { position: absolute; border-radius: 3px; background: var(--sp-fund); mix-blend-mode: multiply; pointer-events: none; }
.sp-qs-blatt {
  padding: 16px 18px; border-radius: 12px; background: var(--bg-modal-solid);
  box-shadow: 0 0 0 .5px var(--sp-haar); font-size: 13.5px; line-height: 1.6; color: var(--text);
}
.sp-qs-blatt p { margin: 0 0 10px; }
/* Aufgeklappter Auszug unter der Antwort (schmale Geraete, Responsive-Test 30.09.2026) */
.sp-auszug { margin: 12px 0; }
.sp-auszug-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.sp-auszug-kopf b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-auszug-zu { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--sp-haar); color: var(--text); font: inherit; cursor: pointer; }
.sp-auszug .sp-qs-blatt { max-height: 50vh; overflow: auto; }
.sp-qs-blatt p:last-child { margin-bottom: 0; }
.sp-qs-unter { font-size: 12px; color: var(--text-muted); }
.sp-qs-mark { background: var(--sp-fund); color: inherit; padding: 1px 2px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sp-qs-volltext { white-space: pre-wrap; }
.sp-qs-leer, .sp-qs-lade { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.sp-qs-pills { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 14px; }
.sp-qs-pills:empty { display: none; }
.sp-qs-pill {
  display: inline-flex; align-items: center; gap: 5px; max-width: 170px; padding: 5px 10px; border: 0; border-radius: 99px;
  background: var(--sp-leise); cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-qs-pill:hover { color: var(--text); }
.sp-qs-pill.an { background: var(--sp-brand-voll); color: var(--sp-auf-brand); }

/* ⚠ Die Geraete-Bloecke stehen bewusst am Ende: sie muessen die Grundregeln oben uebersteuern. */
/* ── Touch (iPad, iPhone): keine Tastenkappen, Touch-Masse, runder ProKI-Knopf, Leeren-Knopf ──── */
@media (hover: none) and (pointer: coarse) {
  #spOverlay kbd, .sp-esc, .sp-fuss-tasten { display: none; }
  .sp-leeren:not([hidden]) {
    display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 50%; background: var(--sp-leise); color: var(--text-secondary); cursor: pointer;
  }
  .sp-leeren svg { width: 14px; height: 14px; }
  .sp-ki-knopf {
    width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: var(--sp-auf-brand);
  }
  .sp-ki-knopf .sp-funke { width: 16px; height: 16px; color: inherit; }
  .sp-ki-knopf[aria-pressed="true"] { background: linear-gradient(135deg, var(--brand-light), var(--brand)); box-shadow: 0 0 0 3px var(--brand-ring); color: var(--sp-auf-brand); }
  .sp-zeile { min-height: 52px; }
  .sp-zeile.top { min-height: 60px; }
  .sp-ki-zeile { min-height: 48px; }
  .sp-aktion, .sp-v-knopf, .sp-anhalten { min-height: 44px; }
  /* Bugcheck 27.09.2026: diese lagen bei 15-30 px */
  .sp-tab-stand, .sp-tab-zw, .sp-qchip, .sp-qs-pill, .sp-tab-excel { min-height: 36px; }
  .sp-senden { width: 36px; height: 36px; }
  .sp-tab-spalten > summary, .sp-runde > summary { min-height: 36px; display: flex; align-items: center; }
  .sp-tab-spalten input { width: 20px; height: 20px; }
  .sp-ref { min-width: 24px; min-height: 24px; }
  .sp-nachfrage, .sp-kommentar-feld { font-size: 16px; }
  .sp-chip {
    padding: 9px 15px; font-size: 14px;
    background: var(--sp-glas-dicht); box-shadow: 0 0 0 .5px var(--sp-haar);
  }
  .sp-chip.an { background: var(--text); color: var(--bg-modal-solid); }
  #spFilter { padding: 0 2px; border-bottom: 0; }
}
/* iPad: schwebend, Seitenrand 32 px, Feld 56 px, daneben "Abbrechen" */
@media (hover: none) and (pointer: coarse) and (min-width: 641px) {
  .sp-kasten, .sp-kasten.mit-vorschau {
    width: min(880px, calc(100vw - 64px)); margin-top: 24px;
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  }
  .sp-kopf { height: 56px; padding-right: 8px; }
  #spFeld, .sp-ghost { line-height: 56px; font-size: 19px; }
  .sp-abbrechen {
    display: block; flex: none; padding: 8px 2px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 17px; color: var(--brand);
  }
  .sp-flaeche { border-radius: 24px; }
}
/* iPhone: Vollbild-Blatt, Feld unten ueber der Tastatur (visualViewport, spViewport), iOS-Listen */
@media (max-width: 640px) {
  .sp-hinter { display: none; }
  /* Deckender Grund ueber den GANZEN Bildschirm (lvh = mit eingefahrenen Leisten): seit iOS 26 schweben Safaris Leisten
     (Adress-Pille, Haekchen-Leiste) ueber der Seite, unter dem Blatt schien dort die Seite durch (Mike 30.09.2026). */
  #spOverlay.an::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; background: var(--sp-blatt); }
  .sp-kasten {
    position: fixed; left: 0; right: 0; top: var(--sp-vtop, 0px);
    height: 100vh; height: var(--sp-vh, 100dvh); width: auto; max-height: none; margin: 0;
    gap: 10px; padding: calc(env(safe-area-inset-top) + 6px) 12px calc(env(safe-area-inset-bottom) + 8px);
    background: var(--sp-blatt);
  }
  .sp-blatt-kopf { display: flex; align-items: center; gap: 8px; order: 0; flex: none; min-height: 44px; padding: 0 4px; }
  .sp-blatt-titel { flex: 1; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
  .sp-fertig, .sp-zurueck {
    flex: none; padding: 8px 0; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 17px; color: var(--brand);
  }
  .sp-zurueck { display: none; }
  .sp-kasten.ki .sp-zurueck { display: block; }
  .sp-kasten.ki .sp-blatt-titel { font-size: 17px; text-align: center; }
  #spFilter { order: 1; }
  .sp-kasten .sp-flaeche {
    order: 2; flex: 1 1 auto; border-radius: 0; background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .sp-kopfreihe { order: 3; margin-top: auto; }
  .sp-kopf { height: 50px; border-radius: 25px; padding: 0 7px 0 16px; background: var(--sp-karte); }
  .sp-kasten.ki .sp-kopf { padding-left: 8px; }
  #spFeld, .sp-ghost { font-size: 17px; line-height: 50px; }
  .sp-ki-knopf { width: 36px; height: 36px; }
  .sp-kasten.ki.antwort-fertig .sp-kopfreihe { display: none; }
  /* Runde 3 auf dem Telefon: Blattgrund statt weissem Kasten, Fakten untereinander */
  .sp-kasten.ki .sp-flaeche { background: transparent; }
  .sp-fakten { grid-auto-flow: row; }
  .sp-fakt + .sp-fakt { box-shadow: inset 0 1px 0 var(--sp-haar); }
  .sp-liste { padding: 0; gap: 0; }
  .sp-kopfzeile { padding: 16px 6px 6px; }
  .sp-gruppe { display: block; flex: none; background: var(--sp-karte); border-radius: 16px; overflow: hidden; }
  .sp-gruppe .sp-zeile { position: relative; border-radius: 0; min-height: 56px; padding: 8px 14px; }
  .sp-gruppe .sp-zeile + .sp-zeile::after {
    content: ''; position: absolute; left: 50px; right: 0; top: 0; height: 1px; background: var(--sp-haar);
  }
  .sp-zeile.hot, .sp-zeile.hot:hover { background: transparent; }
  .sp-ki-zeile { background: var(--sp-auswahl); border-radius: 16px; min-height: 56px; padding: 10px 14px; margin-bottom: 8px; }
  .sp-kacheln .sp-kachel { background: var(--sp-karte); }
  .sp-kacheln .sp-kachel.hot { background: var(--sp-karte); }
  /* Tastatur offen (spViewport): jede Zeile zaehlt, Titel wie in iOS eingeklappt, Fusszeile weg. */
  #spOverlay.tastatur .sp-blatt-titel { font-size: 17px; text-align: center; }
  #spOverlay.tastatur .sp-kasten:not(.ki) .sp-blatt-kopf::before { content: ''; width: 44px; flex: none; }
  #spOverlay.tastatur .sp-fuss { display: none; }
  .sp-frage-blase {
    display: block; align-self: flex-end; max-width: 85%;
    padding: 9px 14px; border-radius: 18px; background: var(--sp-leise); font-size: 15px;
  }
}


/* Einstellungen > Suche (04.10.2026): Quellen als ruhige Liste mit Status, Balken nur, wo gerade
   etwas laeuft; Texterkennung und Dokumentkarten als Fortschritt mit Kopfzeile, Balken, Nebentext. */
.si-aktiv {
  display: flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card-hover);
  font-size: 13px; color: var(--text);
}
.si-aktiv:empty { display: none; }
.si-aktiv-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--brand); }
.si-aktiv-punkt.ruhe { background: var(--clr-ok-text); }

  .si-aktiv-punkt:not(.ruhe) { animation: siPuls 2s ease-in-out infinite; }
  @keyframes siPuls { 50% { opacity: .35; } }


.si-quelle {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 92px;
  align-items: center; gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.si-quelle:last-child { border-bottom: 0; }
.si-quelle .si-name { font-size: 13px; color: var(--text); }
.si-quelle .si-wert { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.si-quelle-balken { grid-column: 1 / -1; }
.si-quelle .si-status, .si-fach summary .si-status { justify-self: end; }
.si-fach { border-top: 1px solid var(--border-light); }
.si-fach summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; align-items: center; gap: 4px 14px;
  padding: 10px 0; cursor: pointer; list-style: none;
}
.si-fach summary::-webkit-details-marker { display: none; }
.si-fach summary .si-name { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.si-fach summary .si-name::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.si-fach[open] summary .si-name::before { transform: rotate(45deg); }
.si-fach summary .si-wert { font-size: 12px; color: var(--text-muted); }
.si-fach summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.si-fach .si-quelle { padding-left: 14px; }

.si-status {
  font-size: 11.5px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--bg-card-hover); color: var(--text-muted);
}
.si-status.ok { background: var(--clr-ok-bg); color: var(--clr-ok-text); }
.si-status.laeuft { background: var(--clr-info-bg); color: var(--clr-info-text); }
.si-status.pause { background: var(--clr-warn-bg); color: var(--clr-warn-text); }
.si-status.fehler { background: var(--clr-err-bg); color: var(--clr-err-text); }

.si-balken {
  height: 8px; border-radius: 99px; background: var(--bg-card-hover);
  border: 1px solid var(--border-light); overflow: hidden;
}
.si-balken i { display: block; height: 100%; background: var(--brand); transition: width var(--transition, .25s); }
/* Unbestimmt: es laeuft, die Gesamtzahl steht noch nicht fest. Ein wanderndes Stueck statt
   einer Breite, die 0 % behaupten wuerde. */
.si-balken.unbestimmt i { width: 35%; animation: siWandern 1.4s ease-in-out infinite; }
@keyframes siWandern { 0% { transform: translateX(-100%); } 100% { transform: translateX(285%); } }

.si-fortschritt { padding: 10px 0 14px; }
.si-fortschritt + .si-fortschritt { border-top: 1px solid var(--border-light); padding-top: 14px; }
.si-fortschritt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.si-fortschritt-kopf .si-name { font-size: 13px; font-weight: 600; color: var(--text); }
.si-fortschritt-kopf .si-wert { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.si-fortschritt-kopf .si-wert b { color: var(--text); font-weight: 600; }
.si-neben { margin-top: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.si-karten-zustand { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.si-knoten {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin: 8px 0 6px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 10px;
}
.si-knoten-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-knoten .si-name { font-size: 13px; color: var(--text); }
.si-knoten .si-wert { font-size: 12px; color: var(--text-muted); }
.si-schalter { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.si-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.si-schalter span { position: absolute; inset: 0; border-radius: 20px; background: var(--border); transition: background .2s; pointer-events: none; }
.si-schalter span::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .2s;
}
.si-schalter input:checked + span { background: var(--brand); }
.si-schalter input:checked + span::after { transform: translateX(16px); }
/* Touch: Treffflaeche 44 px um den kleinen Schalter */
@media (pointer: coarse) { .si-schalter input { width: 44px; height: 44px; left: -4px; top: -12px; } }
.si-schalter input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.si-fussnote { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); max-width: 72ch; }

/* Dokumentkarten (04.10.2026): Antwort "wann fertig", ein Balken je Grafikkarte, eine Kachel je Grafikkarte.
   Farben: Büro-Server = --brand, RTX 5090 = --teal-text, offen = Spur. */
.si-kk-wann { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--text); line-height: 1.25; margin-top: 2px; }
.si-kk-unter { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); max-width: 72ch; font-variant-numeric: tabular-nums; }
.si-kk-balken { display: flex; height: 12px; margin-top: 14px; border-radius: 6px; overflow: hidden; background: var(--border-light); }
.si-kk-balken i { display: block; height: 100%; transition: width .4s ease; }
.si-kk-balken i + i { box-shadow: inset 2px 0 0 var(--bg-card, transparent); }
.b4090 { background: var(--brand); }
.b5090 { background: var(--teal-text); }
.boffen { background: var(--border-light); }
.si-kk-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.si-kk-legende span { display: inline-flex; align-items: center; gap: 6px; }
.si-kk-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.si-kk-legende .si-kk-pz { margin-left: auto; color: var(--text); font-weight: 600; }
.si-kk-summe { margin-top: 16px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.si-kk-summe + .si-kk-karten { margin-top: 8px; }
.si-kk-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.si-gpu { padding: 12px 14px; border-radius: 12px; background: var(--surface-2, var(--bg-card-hover)); border-left: 4px solid; min-width: 0; }
.si-gpu.g4090 { border-left-color: var(--brand); }
.si-gpu.g5090 { border-left-color: var(--teal-text); }
.si-gpu-kopf { display: flex; align-items: center; gap: 8px; }
.si-gpu-kopf .si-name { font-size: 14px; font-weight: 600; color: var(--text); margin-right: auto; }
.si-gpu-modell { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.si-gpu-zahl { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 8px; font-variant-numeric: tabular-nums; }
.si-gpu-neben { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.si-plan { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.si-plan summary { cursor: pointer; list-style: none; line-height: 1.45; }
.si-plan summary::-webkit-details-marker { display: none; }
.si-plan summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.si-plan-link { color: var(--brand-text, var(--brand)); white-space: nowrap; }
.si-plan[open] .si-plan-link { display: none; }
.si-plan label { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; color: var(--text); font-size: 12.5px; }
.si-plan select { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card, transparent); color: var(--text); }
.si-plan label.si-plan-check { flex-direction: row; align-items: center; gap: 8px; }
@media (pointer: coarse) { .si-plan select { font-size: 16px; min-height: 44px; } }
.si-kk-rw { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 640px) {
  .si-kk-wann { font-size: 17px; }
  .si-kk-legende .si-kk-pz { margin-left: 0; width: 100%; }
}
.si-knoepfe { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.si-leer { padding: 12px 0; color: var(--text-muted); font-size: 13px; }
.si-fehler { color: var(--clr-err-text); }

@media (max-width: 767px) {
  .si-quelle, .si-fach summary { grid-template-columns: minmax(0, 1fr) auto; }
  .si-quelle .si-wert, .si-fach summary .si-wert { grid-column: 1 / 2; grid-row: 2; text-align: left; }
  .si-quelle .si-status, .si-fach summary .si-status { grid-column: 2; grid-row: 1; }
  .si-fortschritt-kopf { flex-direction: column; gap: 2px; }
  .si-fortschritt-kopf .si-wert { text-align: left; }
}

/* ── ProKI: Listen als Tabelle (27.09.2026) ── */
/* Nur die Datentabellen (data-k): die Markdown-Tabelle der Antwort behielt sonst weder Scrollen noch Kopfabstand. */
.sp-tabelle[data-k] { margin: 12px 0 4px; border-radius: 12px; border: 1px solid var(--sp-haar); overflow: hidden; }
.sp-tab-kopf { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13.5px; }
.sp-tab-kopf b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tab-kopf span { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex: none; }
.sp-tab-excel, .sp-tab-stand, .sp-tab-zw { font-family: inherit; }
.sp-tab-excel { flex: none; white-space: nowrap; margin-left: auto; border: 0; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: var(--sp-leise); color: var(--text); cursor: pointer; }
.sp-tab-excel.betont { background: var(--sp-brand-voll); color: var(--sp-auf-brand); }
.sp-tab-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 9px; }
.sp-tab-stand { border: 0; border-radius: 14px; padding: 4px 11px; font-size: 12.5px; background: var(--sp-leise); color: var(--text); cursor: pointer; }
.sp-tab-stand b { font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.sp-tab-stand.an { background: var(--sp-brand-voll); color: var(--sp-auf-brand); }
.sp-tab-stand.an b { color: inherit; }
/* Kein zweiter Scrollbereich in der Antwort (Mike 07.10.2026: "das doppelte Scrollen ist schwierig"): die Tabelle ist so hoch wie ihr Inhalt. */
.sp-tab-rahmen { overflow-x: auto; }
.sp-tabelle[data-k] table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-tabelle[data-k] th { position: sticky; top: 0; background: var(--bg-modal-solid); box-shadow: inset 0 -1px 0 var(--sp-haar); text-align: left; padding: 0; }
.sp-tab-sort { width: 100%; border: 0; background: none; padding: 7px 10px; font: inherit; font-weight: 600; color: var(--text-secondary);
  text-align: left; white-space: nowrap; cursor: pointer; }
.sp-tabelle[data-k] td { padding: 6px 10px; box-shadow: inset 0 -1px 0 var(--sp-haar); vertical-align: top; }
.sp-tabelle[data-k] td:first-child, .sp-tabelle[data-k] th:first-child .sp-tab-sort { padding-left: 14px; }
.sp-tabelle[data-k] tr:last-child td { box-shadow: none; }
.sp-tab-zweck { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 9px; font-size: 12.5px; }
.sp-tab-zweck > span { color: var(--text-muted); margin-right: 2px; }
.sp-tab-zw { border: 1px solid var(--sp-haar); border-radius: 14px; padding: 4px 11px; font-size: 12.5px; background: none; color: var(--text); cursor: pointer; }
.sp-tab-zw.an { background: var(--sp-brand-voll); border-color: var(--sp-brand-voll); color: var(--sp-auf-brand); }
.sp-tab-spalten { flex-basis: 100%; }
.sp-tab-spalten > summary { cursor: pointer; color: var(--text-muted); font-size: 12.5px; }
.sp-tab-spalten label { display: inline-flex; align-items: center; gap: 4px; margin: 6px 12px 0 0; font-size: 12.5px; }
.sp-tab-hinweis { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--text-muted); font-style: italic; }
.sp-tab-excel:disabled { opacity: .45; cursor: not-allowed; }

/* ── Bugcheck 27.09.2026: Nachbesserungen, bewusst am Dateiende (muessen die Regeln oben uebersteuern) ── */
/* Markdown-Tabelle: eigene Breite und waagerecht scrollen statt Spalten Buchstabe fuer Buchstabe umzubrechen. */
.sp-tabelle:not([data-k]) table { width: max-content; min-width: 100%; }
.sp-tabelle td, .sp-tabelle th { overflow-wrap: normal; }
.sp-tabelle:not([data-k]) td { max-width: 22em; }
/* Quellen-Chips: umbrechen statt kuerzen (Mike 28.09.2026: "Buchungen Objekt 20..." war unlesbar). */
.sp-antwort-fuss { flex-wrap: wrap; align-items: flex-start; }
.sp-qchips { flex-wrap: wrap; overflow: visible; }
.sp-qchips > .sp-qchip { flex: none; max-width: min(340px, 100%); }
@media (max-width: 640px) {
  /* Die deckende Grundregel mit #spOverlay steht weiter oben: gleiche Spezifitaet, deshalb hier am Ende. */
  #spOverlay .sp-nachfrage-zeile { background: var(--sp-blatt); }
  #spOverlay .sp-tabelle[data-k] th { background: var(--sp-blatt); }
}
/* Kurze Zellen (IBAN, "WE 1", Datum) nicht umbrechen; lange Texte duerfen weiter umbrechen. */
.sp-tabelle td.kurz { white-space: nowrap; }
.sp-qs-seite { cursor: zoom-in; }
.sp-qs-seite:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Quellspalte (28.09.2026): alle Seiten scrollbar im selben Betrachter wie die grosse Ansicht; Tabellen der Buchungen hier. */
.sp-qs-body:has(.sp-qs-seiten) { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.sp-qs-seiten { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 0; display: flex;
  flex-direction: column; cursor: zoom-in; background: var(--sp-leise); }
.sp-qs-seiten:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sp-qs-body .sp-tabelle[data-k] { margin-top: 0; }
/* Desktop mit Platz (27 Zoll): Gespraech breiter, Quellspalte deutlich breiter (Mike 28.09.2026). */
@media (min-width: 1440px) {
  .sp-kasten.gespraech { width: min(1400px, calc(100vw - 64px)); }
  .sp-kasten.gespraech .sp-flaeche { grid-template-columns: minmax(0, 1fr) minmax(460px, 46%); height: min(860px, calc(100vh - 150px)); }
}
@media (min-width: 1900px) {
  .sp-kasten.gespraech { width: min(1720px, calc(100vw - 96px)); }
  .sp-kasten.gespraech .sp-flaeche { grid-template-columns: minmax(0, 1fr) minmax(560px, 50%); height: min(980px, calc(100vh - 150px)); }
}
.sp-qs-pill { max-width: 300px; }

/* Antwort mit Datentabelle (Mieter-/Eigentuemerliste): Kasten breit, Tabelle hoeher (Mike 28.09.2026). */
.sp-tab-excel + .sp-tab-excel { margin-left: 0; }
@media (min-width: 1024px) {
  .sp-kasten.breit { width: min(1400px, calc(100vw - 64px)); }
}
@media (min-width: 1900px) { .sp-kasten.breit { width: min(1720px, calc(100vw - 96px)); } }

/* Liste faehrt auf (Mike 28.09.2026): erst weitet sich der Kasten, dann klappt die Tabelle nach unten auf und die
   Zeilen laufen kurz nacheinander ein. Bewusst ohne prefers-reduced-motion-Ausnahme: jede RDP-Sitzung meldet
   "reduce", auf dem Terminalserver saehe sonst niemand etwas (wie bei der Navigation). --auf verschiebt alles
   um die Zeit seit dem ersten Zeichnen, damit ein Neuzeichnen die Bewegung fortsetzt statt neu startet. */
.sp-kasten.breit { transition: width .46s cubic-bezier(.2, .8, .2, 1); }
.sp-tabelle.sp-tab-auf { animation: spTabAuf .42s cubic-bezier(.2, .8, .2, 1) calc(var(--auf, 0ms) + 120ms) both; transform-origin: top; }
/* backwards statt both: nach dem Auffahren gilt wieder die echte Hoechsthoehe (--zh ist nur geschaetzt) */
.sp-tabelle.sp-tab-auf .sp-tab-rahmen { animation: spTabRahmen .62s cubic-bezier(.3, .7, .2, 1) calc(var(--auf, 0ms) + 180ms) backwards; }
.sp-tabelle.sp-tab-auf tbody tr { animation: spTabZeile .34s ease-out calc(var(--auf, 0ms) + 300ms + var(--i, 16) * 28ms) both; }
@keyframes spTabAuf { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } }
/* Ziel = geschaetzte Hoehe der sichtbaren Zeilen, sonst waere ein kurzer Rahmen nach wenigen ms schon offen */
@keyframes spTabRahmen { from { max-height: 0; } to { max-height: var(--zh, 420px); } }
@keyframes spTabZeile { from { opacity: 0; transform: translateY(-8px); } }


/* ProKI im Hintergrund fertig (28.09.2026): Punkt am Suchfeld oben, dreimal sanft aufleuchten.
   Bewusst OHNE prefers-reduced-motion-Ausnahme: RDP-Sitzungen (.240) melden immer "reduce" und das Leuchten waere dort nie
   zu sehen (Mike 28.09.2026: "dass es auch unter RDP laeuft"). Nur Farbe/Leuchten, keine Bewegung. */
#spKnopf.sp-fertig-hinweis { position: relative; border-color: var(--brand); color: var(--text); animation: sp-fertig-puls 1.1s ease-in-out 3; }
#spKnopf.sp-fertig-hinweis::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 2px var(--bg-header, var(--bg, #fff));
}
@keyframes sp-fertig-puls {
  /* 0 %/100 % ohne Angabe: der Knopf behaelt dort seinen eigenen Hintergrund */
  50% { background-color: color-mix(in srgb, var(--brand) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
}

/* Vorschau Vorgang: Verlaufseintraege mit dem Suchwort (30.09.2026) */
.sp-v-eintrag { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--sp-leise, color-mix(in srgb, var(--text) 5%, transparent)); }
.sp-v-eintrag-kopf { font-size: 12px; color: var(--text-muted); }

/* ── Niedrige Hoehe, breit (iPhone quer, ~844x390; Bugcheck 30.09.2026): Kopf, Raender und Abstaende
   kompakter, damit der Antwortbeginn samt Tabellenanfang ohne Scrollen im Kasten steht. Unter 641 px
   Breite gilt das Vollbild-Blatt, hohe Fenster (Hochformat, Tablet, Desktop) bleiben unberuehrt. ── */
@media (max-height: 450px) and (min-width: 641px) {
  .sp-kasten, .sp-kasten.mit-vorschau {
    margin-top: 8px; gap: 6px;
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  }
  .sp-kopf, .sp-kasten.ki .sp-kopf { height: 44px; }
  #spFeld, .sp-ghost, .sp-kasten.ki #spFeld { line-height: 44px; font-size: 17px; }
  .sp-antwort { gap: 10px; padding: 12px 22px; }
  .sp-antwort-text { gap: 8px; }
  .sp-antwort-text .sp-kern { font-size: 16px; line-height: 1.4; }
  .sp-fakt { padding: 6px 12px; }
  .sp-nachfrage-zeile { bottom: -12px; margin: 0 -22px -12px; padding: 6px 18px 8px; gap: 6px; }
}

/* Testlauf (06.10.2026): Stand der Labor-Messlaeufe in Einstellungen > Suche */
.si-test-kopf { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 4px; }
.si-test-zweck { color: var(--text-secondary); font-size: 13px; margin-bottom: 10px; }
.si-test-zahl { font-size: 13px; color: var(--text-secondary); margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.si-test-schritte { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.si-test-schritte li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.si-test-schritte .si-status { min-width: 64px; text-align: center; }
.si-test-ergebnis { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, var(--bg-card-hover)); font-size: 13px; white-space: pre-line; }
.si-test-zuletzt { margin-top: 10px; font-size: 13px; }
.si-test-zuletzt summary { cursor: pointer; color: var(--text-secondary); min-height: 32px; display: flex; align-items: center; }
.si-test-zuletzt ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); }
/* KI-Marke der App (proKiMarke() in spotlight.js), 06.10.2026 */
.proki-marke { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; font-weight:600; font-style:normal; text-transform:none; vertical-align:-1px; }
.proki-marke .sp-funke { width:1em; height:1em; }

/* Gegliederte Antwort (Vorgangsakte, 08.10.2026): Themen-Ueberschriften. */
.sp-antwort-text h4.sp-titel, h4.sp-titel { margin: 16px 0 4px; font-size: 14.5px; font-weight: 700; color: var(--text); }

/* ── Einstellungen > Suche, Umbau 09.10.2026: Grafikkarten oben, Bereiche eingeklappt (suchindex-stand.js siGpusHtml) ── */
.si-gpus { margin: 4px 0 18px; }
.si-gk-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.si-gk { border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-card); min-width: 0; }
.si-gk.g5090 { border-left-color: var(--teal-text, var(--green-text)); }
.si-gk header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.si-gk h4 { margin: 0; font-size: 15px; }
.si-gk-modell { font-size: 12.5px; color: var(--text-3); }
.si-gk-job { font-size: 16px; font-weight: 650; margin: 2px 0 8px; color: var(--text); }
.si-gk-balken { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.si-gk-balken .si-balken { flex: 1; height: 10px; }
.si-gk-balken span { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14px; min-width: 3.2em; text-align: right; }
.si-gk-zahl { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.si-gk-gerade { font-size: 13.5px; color: var(--text-2); margin-top: 4px; overflow-wrap: anywhere; }
.si-gk-zeit { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.si-gk-fuss { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }
.si-gk .si-gpu-neben { margin-top: 8px; }
.si-gk .si-plan { margin-top: 8px; }
.si-gk-schalter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; cursor: pointer; }
.si-bereich > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.si-bereich > summary::-webkit-details-marker { display: none; }
.si-bereich > summary::before { content: "▸"; color: var(--text-3); width: 1em; transition: transform .15s; }
.si-bereich[open] > summary::before { transform: rotate(90deg); }
.si-bereich > summary .sett-block-title { margin: 0; }
.si-bereich-sum { font-size: 13.5px; color: var(--text-2); }
.si-bereich[open] > summary { margin-bottom: 8px; }
.si-bereich > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }