/* SEO Text Drafts v4 (Produkttext-Manager) — sv4- prefix. Standalone, teilt nichts mit v3. */

.sv4 {
  /* Full width since #139: the power mode needs it, and it is the one visible change to the
     standard. Layout only. */
  max-width: none;
  margin: 0 auto;
  padding: 8px 20px 64px;
  font-family: var(--font-base);
  color: #1f2937;
}

/* ── Topline: Kontext links, Division-Umschalter rechts ── */
.sv4__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sv4__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* Kontextzeile links: Titel plus Saisonauswahl (immer genau eine, Plan §5.2). */
.sv4__context { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Markenumschalter rechts in der Topline. Segmentiert statt einzelne Pillen: die drei
   Marken schliessen sich aus, und ein zusammenhaengender Block zeigt das deutlicher als
   drei freistehende Knoepfe. */
.sv4__divisions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
}

.sv4-brand {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.sv4-brand:hover { color: #374151; background: #f1f5f9; }

.sv4-brand--active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.sv4-brand--active:hover { background: #ffffff; }

/* ── Kopfzeile ── */
.sv4__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.sv4__greeting {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #111827;
  margin: 0 0 6px;
}

.sv4__sub {
  margin: 0;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

.sv4-btn {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sv4-btn--primary { background: #111827; color: #fff; }
.sv4-btn--primary:hover { background: #1f2937; }

.sv4-btn--ghost { background: #fff; border-color: #e5e7eb; color: #374151; }
.sv4-btn--ghost:hover { border-color: #cbd5e1; }

/* ── KPI-Kacheln ── */
.sv4-kpis {
  display: grid;
  /* Vier Status seit #118. `auto-fit` statt repeat(4): auf mittleren Breiten bricht es auf zwei
     Kacheln je Reihe, statt vier auf 90 px zu quetschen. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .sv4-kpis { grid-template-columns: minmax(0, 1fr); }
}

.sv4-kpi {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
}

.sv4-kpi__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 10px;
}

.sv4-kpi__value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: #111827;
}

.sv4-kpi__hint {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
}

.sv4-kpi--offen .sv4-kpi__hint           { color: #b45309; }
.sv4-kpi--entwurf .sv4-kpi__hint         { color: #92400e; }
.sv4-kpi--lea_uebertragen .sv4-kpi__hint { color: #15803d; }
/* Bestand bewusst neutral: es ist keine Leistung von LEA und keine offene Arbeit. */
.sv4-kpi--bestand .sv4-kpi__hint         { color: #475569; }

/* ── Grundraster: Arbeitsvorrat + Seitenspalte ── */
.sv4__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1080px) {
  .sv4__grid { grid-template-columns: minmax(0, 1fr); }
}

.sv4__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sv4-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.sv4-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
}

.sv4-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.sv4-card__meta {
  font-size: 11px;
  color: #9ca3af;
}

.sv4-card__body { padding: 0 18px 18px; }

/* ── Filter-Pills ── */
.sv4-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 18px 12px;
}

/* Saison-, Divisions- und Kategorieauswahl in derselben Zeile wie die Statusfilter.
   Fester Abstand statt `margin-left: auto`: ganz rechts angeschlagen brach die Gruppe mit drei
   Auswahlfeldern in die zweite Zeile um. */
.sv4-season-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 20px;
}

.sv4-division-picker,
.sv4-category-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sv4-season-picker__label,
.sv4-division-picker__label,
.sv4-category-picker__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.sv4-season-picker__select,
.sv4-division-picker__select,
.sv4-category-picker__select {
  padding: 4px 26px 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9ca3af 50%),
                    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.sv4-season-picker__select:hover,
.sv4-division-picker__select:hover,
.sv4-category-picker__select:hover { border-color: #cbd5e1; }
.sv4-season-picker__select:focus,
.sv4-division-picker__select:focus,
.sv4-category-picker__select:focus { outline: none; border-color: var(--bam-slate); }

.sv4-filter {
  /* Seit #118 ein Link statt eines Knopfes (Serverfilter) — Unterstreichung weg, Ausrichtung
     wie vorher. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: #6b7280;
  cursor: pointer;
}

.sv4-filter:hover { background: #f3f4f6; color: #374151; }

.sv4-filter--active {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #111827;
  font-weight: 600;
}

.sv4-filter__count {
  margin-left: 5px;
  font-size: 11px;
  color: #9ca3af;
}

/* ── Arbeitsvorrat-Tabelle ── */
.sv4-queue { width: 100%; border-collapse: collapse; }

.sv4-queue th {
  padding: 8px 18px;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  white-space: nowrap;
}

.sv4-queue td {
  padding: 12px 18px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  vertical-align: middle;
}

/* Ganze Zeile ist klickbar (wie in v3) — der Link in der letzten Spalte bleibt zusätzlich. */
.sv4-queue tbody tr { position: relative; cursor: pointer; }
.sv4-queue tbody tr:hover { background: #fafbfc; }

.sv4-queue__product { min-width: 200px; }

a.sv4-queue__name {
  display: block;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
}

a.sv4-queue__name:hover { text-decoration: underline; }

.sv4-queue__article {
  font-size: 11px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}

/* Divisionskürzel in der Tabellenzeile — Vollname im Tooltip. Steht bewusst bei den
   Tabellenregeln, damit Aufräumarbeiten im Kopfbereich sie nicht wieder mitnehmen. */
.sv4-division-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sv4-queue__category { color: #6b7280; white-space: nowrap; }
.sv4-queue__season { color: #6b7280; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Sections, die für dieses Produkt schon im PIM stehen */
.sv4-sections { display: inline-flex; gap: 4px; }

.sv4-section-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sv4-section-chip--set { background: #dcfce7; color: #15803d; }

/* ── Statusfarben ── */
.sv4-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.sv4-status--offen           { background: #f1f5f9; color: #475569; }
.sv4-status--entwurf         { background: #fef3c7; color: #92400e; }
.sv4-status--lea_uebertragen { background: #dcfce7; color: #166534; }
/* Bestand liest sich als „da, aber nicht von uns": blau, nicht grün — grün ist LEAs Farbe. */
.sv4-status--bestand         { background: #e0f2fe; color: #075985; }

.sv4-queue__empty {
  padding: 28px 18px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

/* ── Deadlines-Card ── */
.sv4-progress + .sv4-progress { margin-top: 14px; }

.sv4-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.sv4-progress__name { font-size: 13px; font-weight: 600; color: #374151; }
.sv4-progress__due  { font-size: 11.5px; font-weight: 600; color: #6b7280; font-variant-numeric: tabular-nums; }

.sv4-progress--over .sv4-progress__due { color: #b91c1c; }
.sv4-progress--warn .sv4-progress__due { color: #b45309; }
.sv4-progress--ok   .sv4-progress__due { color: #15803d; }
.sv4-progress--muted .sv4-progress__name,
.sv4-progress--muted .sv4-progress__due { color: #cbd5e1; }

/* Natives <progress>: die Länge kommt aus value/max im Markup, das Aussehen komplett von hier.
   Farbe je Zustand über --sv4-bar, damit die Pseudo-Elemente nur einmal beschrieben werden. */
.sv4-progress__bar {
  --sv4-bar: #94a3b8;
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  appearance: none;
  -webkit-appearance: none;
}

.sv4-progress__bar::-webkit-progress-bar { background: #f1f5f9; border-radius: 999px; }
.sv4-progress__bar::-webkit-progress-value { background: var(--sv4-bar); border-radius: 999px; }
.sv4-progress__bar::-moz-progress-bar { background: var(--sv4-bar); border-radius: 999px; }

.sv4-progress--over  .sv4-progress__bar { --sv4-bar: #ef4444; }
.sv4-progress--warn  .sv4-progress__bar { --sv4-bar: #f59e0b; }
.sv4-progress--ok    .sv4-progress__bar { --sv4-bar: #22c55e; }
.sv4-progress--muted .sv4-progress__bar { --sv4-bar: #e5e7eb; }

.sv4-progress__note { margin-top: 4px; font-size: 11px; color: #9ca3af; }

/* ── PIM-Abgleich (dunkle Card) ── */
.sv4-card--dark {
  background: #111827;
  border-color: #111827;
  color: #e5e7eb;
}

.sv4-card--dark .sv4-card__title { color: #fff; }
.sv4-card--dark .sv4-card__meta  { color: #9ca3af; }

.sv4-syncrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.sv4-syncrow:first-child { border-top: 0; }
.sv4-syncrow__label { color: #9ca3af; }
.sv4-syncrow__value { font-weight: 600; color: #fff; white-space: nowrap; }

.sv4-card__footer { padding: 0 18px 18px; }

.sv4-card__footer .sv4-btn { display: block; text-align: center; }

/* ── Hinweisleiste der Vorschau ── */
.sv4__notice {
  margin: 22px 0 0;
  padding: 10px 14px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  color: #9ca3af;
  font-size: 12px;
  text-align: center;
}

/* ══ Einzeltext-Ansicht (Editor) ═══════════════════════════════════════════════════════ */

.sv4-editor__back {
  display: inline-block;
  margin-bottom: 10px;
  color: #6b7280;
  font-size: 12.5px;
  text-decoration: none;
}

/* Hilfe auf der Seite, neben dem Rückweg (#132). Kein Knopf: es ist ein Weg, kein Vorgang. */
.sv4-editor__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sv4-editor__help {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--sv4-muted, #6b7280);
  text-decoration: none;
}

.sv4-editor__help:hover { color: var(--sv4-text, #111827); }

.sv4-editor__help-badge {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
}

/* Suche über der Tabelle (#132). */
.sv4-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  flex-wrap: wrap;
}

.sv4-search__label {
  font-size: 0.8rem;
  color: var(--sv4-muted, #6b7280);
}

.sv4-search__input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--sv4-border, #d1d5db);
  border-radius: 0.375rem;
  font: inherit;
}

.sv4-search__reset {
  font-size: 0.8rem;
  color: var(--sv4-muted, #6b7280);
}

.sv4-queue__hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--sv4-muted, #6b7280);
}


.sv4-editor__back:hover { color: #111827; }

.sv4-editor__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sv4-editor__title {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: #111827;
}

.sv4-editor__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #9ca3af;
}

.sv4-editor__article { font-variant-numeric: tabular-nums; }
.sv4-editor__sep { color: #d1d5db; }

.sv4-editor__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Die Sammelknöpfe sitzen als eigene Formulare in der Kopfzeile — ohne eigenen Abstand,
   der Flex-Gap der Actions trägt sie. */
.sv4-editor__bulk { margin: 0; }

/* Der eine Judge-Schalter der Seite, links neben den Sammelknöpfen. */
/* Die Sprachumschaltung im Editor-Kopf. Zusammenhängende Gruppe statt einzelner Knöpfe — es
   ist EINE Auswahl, und der aktive Zustand muss ohne Lesen erkennbar sein. */
.sv4-locales {
  display: inline-flex;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  overflow: hidden;
}

.sv4-locale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
}

.sv4-locale:last-child { border-right: 0; }
.sv4-locale:hover { background: #f9fafb; color: #111827; }

.sv4-locale--active {
  background: var(--bam-slate);
  color: #fff;
}
.sv4-locale--active:hover { background: var(--bam-slate); color: #fff; }

/* Grün wie das Entwurfs-Badge unten: beides heisst „hier steht etwas". */
.sv4-locale__filled { color: #15803d; font-weight: 700; }
.sv4-locale--active .sv4-locale__filled { color: #86efac; }
.sv4-locale__empty { color: #d1d5db; }
.sv4-locale--active .sv4-locale__empty { color: rgba(255, 255, 255, .45); }

.sv4-editor__judge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.sv4-editor__judge input { margin: 0; cursor: pointer; }

.sv4-editor__saved { font-size: 12px; color: #9ca3af; white-space: nowrap; }

/* ── Das Dreispalten-Raster ── */
.sv4-editor__cols {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 328px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1240px) {
  .sv4-editor__cols { grid-template-columns: 240px minmax(0, 1fr); }
  .sv4-editor__right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
}

@media (max-width: 900px) {
  .sv4-editor__cols { grid-template-columns: minmax(0, 1fr); }
  .sv4-editor__right { grid-template-columns: minmax(0, 1fr); }
}

.sv4-editor__left,
.sv4-editor__center,
.sv4-editor__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Linke Spalte: Bild, Stammdaten, Vorgänger ── */
/* ── Briefing: was ist neu an diesem Produkt ──
   Steht an der Stelle des früheren Bildplatzhalters, oben in der linken Spalte. */
/* Das Briefing ist derselbe Baustein wie die Textfelder rechts und trägt deshalb
   .sv4-block__* — Zähler, Rahmen, Fokus, Platzhalter und Zustände sind dieselben. Eigen
   bleibt nur, was die schmale linke Spalte verlangt; das steht als `--compact` unten bei
   den Blockregeln, weil ein Modifier gleicher Spezifität nur nach dem Original gewinnt. */

.sv4-specs { margin: 0; }

.sv4-specs__label {
  float: left;
  clear: left;
  padding: 5px 0;
  font-size: 12px;
  color: #9ca3af;
}

.sv4-specs__value {
  margin: 0;
  padding: 5px 0;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}

.sv4-predecessor__name {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.sv4-predecessor__note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #9ca3af;
}

/* ── Mittlere Spalte: die Textbausteine ── */
.sv4-block {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px 12px;
}

.sv4-block__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.sv4-block__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #374151;
}

/* Zielfeld im PIM. Monospace, weil es ein Feldpfad ist und kein Fliesstext — so ist auf
   einen Blick klar, dass description.en woertlich so im PIM heisst. */
.sv4-block__target {
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  white-space: nowrap;
}

.sv4-block__target--missing {
  background: transparent;
  border: 1px dashed #e5e7eb;
  color: #9ca3af;
  font-family: inherit;
}

/* Zwischenstand aus dem laufenden Agenten (#64). Steht im Kopf neben dem Feldnamen, nicht
   unten bei den Badges: es ist eine Aussage ueber das, was JETZT im Feld steht, und der Blick
   geht beim Warten an den Kopf. Gedaempft statt farbig — es ist ein Zustand, keine Warnung. */
.sv4-block__state {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Das Finale ist naeher am Ergebnis als der Entwurf — gleiche Form, ruhigere Farbe. */
.sv4-block__state--final {
  background: #ecfdf5;
  color: #047857;
}

/* Der Judge urteilt noch (#64 §5b.2). Waermer als das Finale: der Text steht, aber es ist noch
   nicht entschieden — und das soll man sehen, ohne es fuer eine Warnung zu halten. */
.sv4-block__state--judge {
  background: #fffbeb;
  color: #b45309;
}

/* Die Korrektur nach einem Judge-FAIL. Dieselbe Familie, ein Ton dringlicher: hier wird gerade
   etwas ueberschrieben, das schon dastand. */
.sv4-block__state--judge_fix {
  background: #fef2f2;
  color: #b91c1c;
}

.sv4-block__state .sv4-dots span { background: currentColor; }

/* Die Vorschau (#52): so sieht der Text im Shop aus. Zugeklappt, weil der Block ohnehin voll
   ist und die Vorschau den Text ein zweites Mal zeigt — wer sie braucht, klappt sie auf. */
.sv4-block__preview {
  margin: 0 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}

.sv4-block__preview-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
  list-style: none;
}

.sv4-block__preview-head::-webkit-details-marker { display: none; }

.sv4-block__preview-head::before {
  content: "▸";
  font-size: 9px;
  color: #9ca3af;
}

.sv4-block__preview[open] .sv4-block__preview-head::before { content: "▾"; }

.sv4-block__preview-note {
  font-weight: 400;
  color: #9ca3af;
}

/* Der gerenderte Text. Absaetze bekommen ihren Abstand zurueck — genau das ist der Punkt der
   Vorschau: zu sehen, was die Auszeichnung tut. */
.sv4-block__preview-body {
  padding: 2px 10px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #111827;
}

.sv4-block__preview-body p { margin: 0 0 8px; }
.sv4-block__preview-body p:last-child { margin-bottom: 0; }
.sv4-block__preview-body ul,
.sv4-block__preview-body ol { margin: 0 0 8px 18px; }

.sv4-block__count {
  margin-left: auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
}

.sv4-block__count--over { color: #b91c1c; font-weight: 700; }

.sv4-block__max { margin-left: 3px; }

.sv4-block__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  color: #1f2937;
  resize: vertical;
}

.sv4-block__input:focus {
  outline: none;
  border-color: var(--bam-slate);
  box-shadow: 0 0 0 3px rgba(70, 90, 100, .12);
}

/* Die Rückfrage vor dem Neuschreiben. Sitzt zwischen Text und Knopfreihe, eingerückt und
   getönt — sie gehört zum Text darüber, ist aber nicht er. */
.sv4-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--bam-slate);
  border-radius: 7px;
  background: #f9fafb;
}

.sv4-feedback__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.sv4-feedback__hint {
  margin-left: 6px;
  font-weight: 400;
  color: #9ca3af;
}

.sv4-feedback__input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: #111827;
  resize: vertical;
}

.sv4-feedback__input:focus {
  outline: none;
  border-color: var(--bam-slate);
  box-shadow: 0 0 0 3px rgba(70, 90, 100, .12);
}

.sv4-feedback__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.sv4-block__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* Die Abhak-Marken in eigener Zeile unter den Knöpfen. Zu dritt oder viert teilten sie sich
   die Zeile mit den Knöpfen und wurden rechts abgeschnitten (#37). */
.sv4-block__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
}

/* Der Hinweis rutscht ans Ende der Markenzeile und bricht dort um, statt zu drängeln. */
.sv4-block__flags .sv4-block__note { margin-left: auto; text-align: right; }

/* Der Knopfblock ist die Bedienung und bleibt in einer Zeile: seit „Regeln prüfen" als dritter
   Knopf dazukam, drückte der Hinweis daneben ihn sonst in eine zweite und dritte Zeile. */
.sv4-block__buttons { display: flex; gap: 6px; flex: 0 0 auto; }

.sv4-chip {
  padding: 5px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
}

.sv4-chip:hover { border-color: #cbd5e1; background: #f9fafb; color: #111827; }

/* Speichern ist die Aktion, die den Zustand ändert — leicht hervorgehoben. */
.sv4-chip--save { border-color: #cbd5e1; color: #111827; font-weight: 600; }
.sv4-chip--save:hover { border-color: var(--bam-slate); background: #f3f4f6; }

/* "Lauf abbrechen" (#141 B): the one control that works while the block is busy, so it must
   read as active next to the greyed-out ones - the red of `.sv4-block__error`, as an outline. */
.sv4-chip--stop { border-color: #fca5a5; color: #b91c1c; font-weight: 600; }
.sv4-chip--stop:hover { border-color: #b91c1c; background: #fef2f2; }

/* Der Hinweis ist das Nachgiebige in der Fusszeile — wird es eng, bricht er um statt die
   Knöpfe zu verdrängen. */
.sv4-block__note { font-size: 11px; color: #9ca3af; text-align: right; }

/* Der Hinweis unter dem Briefing-Feld. Anders als `__note` steht er LINKS und im Fliesstext: er
   erklaert eine Eingabekonvention („nicht erwaehnen: …"), und die liest man von vorn. Etwas
   dunkler als `__note`, weil er eine Anleitung ist und keine Zustandsmeldung — wer ihn nie liest,
   loescht stattdessen einen Briefing-Punkt und wundert sich (#23). */
.sv4-block__hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #6b7280;
}

.sv4-block__hint code {
  padding: 1px 4px;
  border-radius: 3px;
  background: #f3f4f6;
  color: #374151;
  font-size: 10px;
}

/* Gespeicherter Entwurf: tritt zurück wie der Hinweis, ist aber eine Zustandsaussage. */
.sv4-block__saved {
  font-size: 11px;
  color: #15803d;
  white-space: nowrap;
}

/* Regel-Check-Badge am AI-Entwurf: gruen = letzte validate_text-Runde PASS, dezent
   warnfarben = FAIL oder nie validiert ("offen"). Nur sichtbar, wenn der Entwurf ein
   Verdict-Metadatum traegt — alte Entwuerfe haben keins. */
.sv4-block__verdict {
  font-size: 11px;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid;
}

.sv4-block__verdict--pass { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.sv4-block__verdict--open { color: #b45309; border-color: #fde68a; background: #fffbeb; }
/* Schnellmodus: mechanisch sauber, Judge steht aus — neutral blau, kein Alarm. */
.sv4-block__verdict--mech { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }

/* Der Zusatz, womit geprüft wurde. Gedämpft: er schränkt das Urteil ein, er ist nicht das Urteil. */
.sv4-block__verdict-mode { opacity: .7; font-weight: 400; }

.sv4-block__error {
  font-size: 11px;
  color: #b91c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Laufender Modellaufruf. Nur gedaempft, nicht ausgeblendet: der bisherige Text bleibt
   lesbar, solange der neue entsteht. */
.sv4-block--busy { border-color: #d1d5db; }
.sv4-block--busy .sv4-block__input { background: #fafafa; color: #6b7280; }

/* Kompakte Fassung für die linke Spalte (das Briefing). Muss NACH .sv4-block__input und
   .sv4-block__foot stehen: gleiche Spezifität, es entscheidet die Reihenfolge. */
.sv4-block__input--compact {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}

.sv4-block__foot--compact { gap: 10px; }

/* In der schmalen Spalte passt der Hinweis nicht in eine Zeile — hier darf er umbrechen. */
.sv4-block__foot--compact .sv4-block__note,
.sv4-block__foot--compact .sv4-block__saved,
.sv4-block__foot--compact .sv4-block__error {
  margin-left: auto;
  white-space: normal;
  text-align: right;
}

/* Laufende Punkte im „Formuliert"-Knopf. Ein echter Aufruf dauert eine bis anderthalb
   Minuten — ohne Bewegung sieht der Knopf aus, als hinge er.
   Animiert wird nur die Deckkraft, damit die Knopfbreite konstant bleibt und nichts zappelt. */
.sv4-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 3px;
}

.sv4-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  animation: sv4-dots 1.2s infinite ease-in-out;
}

.sv4-dots span:nth-child(2) { animation-delay: .18s; }
.sv4-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes sv4-dots {
  0%, 60%, 100% { opacity: .25; }
  30%           { opacity: 1; }
}

/* Wer Bewegung abbestellt hat, bekommt sie nicht — die Punkte bleiben trotzdem sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .sv4-dots span { animation: none; opacity: .6; }
}

.sv4-chip[disabled] {
  color: #9ca3af;
  cursor: default;
  background: #f9fafb;
}

.sv4-chip[disabled]:hover { border-color: #e5e7eb; background: #f9fafb; color: #9ca3af; }

/* Zuklappbare Divisionsstufe. Die Überschrift IST der Knopf — ein `summary`, das aussieht wie
   der Kopf einer nicht klappbaren Stufe.
   Das eigene Dreieck ist nötig, weil der Browser seinen Marker fallen lässt, sobald das
   `summary` nicht mehr `display: list-item` ist — und flex braucht es für die Kopfzeile. */
.sv4-fold__head {
  cursor: pointer;
  list-style: none;
}

.sv4-fold__head::-webkit-details-marker { display: none; }

.sv4-fold__head:hover .pr-stage-num { background: #37474f; }

.sv4-fold__caret {
  flex-shrink: 0;
  width: 0.75rem;
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1;
  transition: transform 0.12s;
}

.sv4-fold__caret::before { content: "▶"; }

.sv4-fold[open] > .sv4-fold__head .sv4-fold__caret { transform: rotate(90deg); }

/* Zugeklappt steht nur noch die Kopfzeile da — ohne den Abstand, den eine offene Stufe zur
   nächsten braucht. */
.sv4-fold:not([open]) > .sv4-fold__head { margin-bottom: 0; }
.sv4-fold:not([open]) { margin-bottom: 0.5rem; }

/* Filterleiste je Divisionsstufe. Masse und Typografie wie die Filterleiste der
   Ticket-Analyse (.ta-filter), damit beide Werkzeuge sich gleich anfühlen. */
.sv4-stage-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.sv4-stage-filters__field label {
  display: block;
  margin-bottom: 0.25rem;
  color: #6b7280;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sv4-stage-filters__select {
  max-width: 16rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  color: #374151;
}

.sv4-stage-filters__select:focus {
  outline: none;
  border-color: var(--bam-slate);
  box-shadow: 0 0 0 3px rgba(70, 90, 100, .12);
}

/* Gesetzter Filter hebt sich ab — bei sieben Stufen mit eigenen Filtern muss auf einen Blick
   erkennbar sein, welche Liste gerade eingeschränkt ist. */
.sv4-stage-filters__select--on {
  border-color: var(--bam-slate);
  background: #f1f5f9;
  color: #111827;
  font-weight: 600;
}

.sv4-stage-filters__reset {
  padding-bottom: 0.45rem;
  color: #6b7280;
  font-size: 0.8125rem;
}

/* Gefilterte Stufe: der Zähler sagt „3 von 21" und soll dabei nicht übersehen werden. */
.sv4-stage-count--on { color: var(--bam-slate); font-weight: 600; }

/* ── Prompt Rules: Gruppen der Übersicht ──
   Eine Marke je Gruppe, darin die Divisionen als pr-stage. Rahmen, Tabellen und Badges kommen
   aus prompt_rules.css, hier steht nur der Gruppenkopf. Bewusst formgleich mit
   .sv3-flow-group: wer beide Seiten benutzt, soll sich nicht umstellen müssen. */
/* Jeder Baustein als eigene Karte — die Blöcke heben sich klar voneinander ab. */
.sv4-group {
  max-width: 100%;
  margin: 0 auto 1.6rem;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Das harte Tor bekommt einen Ampel-Akzent, damit es als Kontrollstufe auffällt. */
.sv4-group--gate { border-left: 3px solid #f59e0b; }

/* Trenner vor den langen Feldregeln-Listen — setzt sie sichtbar vom oberen Teil ab. */
.sv4-fieldrules-lead {
  max-width: 100%;
  margin: 2.6rem auto 1.1rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e2e8f0;
}

.sv4-group__header {
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.sv4-group__title { font-size: 1.15rem; font-weight: 800; color: #0f172a; }

.sv4-group__desc {
  max-width: 860px;
  margin-top: 0.25rem;
  color: #64748b;
  font-size: 0.85rem;
}

/* ── Rechte Spalte: Regel-Check ── */
.sv4-checks { margin: 0; padding: 0; list-style: none; }

.sv4-check {
  display: flex;
  gap: 9px;
  padding: 6px 0;
}

.sv4-check__mark {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 4px;
  background: #22c55e;
  position: relative;
}

.sv4-check__mark::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.sv4-check--open .sv4-check__mark { background: #f59e0b; }
.sv4-check--open .sv4-check__mark::after { content: "!"; }

.sv4-check__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sv4-check__label { font-size: 12.5px; font-weight: 600; color: #374151; }
.sv4-check__detail { font-size: 11px; color: #9ca3af; }

/* ── Rechte Spalte: Brand-Voice-Score ── */
.sv4-score { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
.sv4-score__value { font-size: 34px; font-weight: 700; line-height: 1; color: #15803d; }
.sv4-score__scale { font-size: 12px; color: #9ca3af; }

.sv4-score__bar {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  appearance: none;
  -webkit-appearance: none;
}

.sv4-score__bar::-webkit-progress-bar { background: #f1f5f9; border-radius: 999px; }
.sv4-score__bar::-webkit-progress-value { background: #22c55e; border-radius: 999px; }
.sv4-score__bar::-moz-progress-bar { background: #22c55e; border-radius: 999px; }

.sv4-voice-notes { margin: 12px 0 0; padding: 0; list-style: none; }

.sv4-voice-note {
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.sv4-voice-note--warn { color: #c2410c; }

/* ── Rechte Spalte: PIM-Zielfelder ── */
.sv4-target {
  padding: 8px 0;
  border-top: 1px solid #f3f4f6;
}

.sv4-target:first-child { border-top: 0; padding-top: 0; }

/* Section-Bezeichnung über dem Zielfeld — sonst ist nicht erkennbar, welcher Text fehlt. */
.sv4-target__section {
  font-size: 11px;
  line-height: 1.4;
  color: #6b7280;
  margin-bottom: 3px;
}

.sv4-target__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sv4-target__name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #4b5563;
}

/* Section ohne Zielfeld: kein Feldname zum Anzeigen, deshalb gedämpft und kursiv. */
.sv4-target__name--none { color: #cbd5e1; font-style: italic; }

.sv4-target__state { font-size: 11.5px; font-weight: 700; color: #15803d; white-space: nowrap; }

/* Regel-Check: offener Punkt statt Fehler — gelbe Markierung, kein Rot. */
.sv4-check--open .sv4-check__mark { background: #cbd5e1; }
.sv4-check--open .sv4-check__mark::after { content: "–"; }

/* Zielfeld-Zustände */
.sv4-target__state--ready   { color: #15803d; }
.sv4-target__state--open    { color: #9ca3af; }
.sv4-target__state--missing { color: #b45309; }
.sv4-target__empty        { margin: 0; font-size: 12px; color: #9ca3af; }
.sv4-target__name         { overflow-wrap: anywhere; }

/* Leeres Textfeld: Platzhalter dezent */
.sv4-block__input::placeholder { color: #cbd5e1; }

.sv4-empty__text { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #6b7280; }
.sv4-empty__text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #374151; }



/* ── Prüfbericht (#37) ──────────────────────────────────────────────────────────
   Das vollständige Ergebnis einer Regelprüfung, offen im Feld statt in einem Tooltip.
   Bewusst KEINE Karte mit Schatten: es gehört zum Block darüber, nicht daneben. */
.sv4-report {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--line, #e5e7eb);
  border-left: 3px solid #9ca3af;
  background: #f9fafb;
  font-size: 13px;
  line-height: 1.55;
}

.sv4-report--fail { border-left-color: #c2410c; background: #fffbf7; }
.sv4-report--pass { border-left-color: #15803d; background: #f7fbf8; }

/* Der Wartezustand: derselbe Kasten, nur ohne Urteil. Er steht an der Stelle, an der gleich
   das Ergebnis erscheint — der Bericht springt dann nicht von unten ins Bild. */
.sv4-report--running { border-left-color: #2563eb; background: #f7f9ff; }
.sv4-report--running .sv4-report__title { color: #1d4ed8; }

.sv4-report__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}

.sv4-report__title { font-size: 14px; font-weight: 600; color: #111827; }
.sv4-report--fail .sv4-report__title { color: #9a3412; }
.sv4-report--pass .sv4-report__title { color: #15803d; }

.sv4-report__mode { font-size: 12px; color: #6b7280; }

.sv4-report__error { margin: 0 0 8px; color: #9a3412; font-family: ui-monospace, Menlo, monospace; }

.sv4-report__note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  color: #4b5563;
}

.sv4-report__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.sv4-report__item {
  padding: 10px 12px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
}
/* Verstoss und Hinweis sind zwei verschiedene Dinge — auch im Markup, nicht nur in der Farbe. */
.sv4-report__item--fail { border-color: #f0d9cc; }

.sv4-report__label { font-weight: 600; color: #111827; }

/* Die Belegstelle wörtlich — sie ist der Teil, an dem man den Text anfassen kann. */
.sv4-report__evidence {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 2px solid #d1d5db;
  color: #374151;
  font-style: italic;
  overflow-wrap: anywhere;
}

.sv4-report__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
}
.sv4-report__rule { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.sv4-report__source { font-weight: 500; }

.sv4-report__section { margin-top: 12px; }
.sv4-report__subhead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-weight: 600; color: #374151; margin-bottom: 6px;
}
.sv4-report__hint { font-weight: 400; font-size: 12px; color: #9ca3af; }

.sv4-report__stats {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 12px;
}
.sv4-report__stats div { display: flex; gap: 6px; }
.sv4-report__stats dt { color: #9ca3af; }
.sv4-report__stats dd { margin: 0; color: #374151; font-variant-numeric: tabular-nums; }

/* ── Recherche-Blöcke: was der Lauf gefunden hat, je Feld (#93) ──
   Ein <details> je Feld in der rechten Spalte. Zu, bis etwas Auffälliges drinsteht — keine
   Quelle oder ein offener Punkt aus dem Tor. Der Inhalt kommt aus `grounding.md`, also aus
   Text, den ein Modell geschrieben hat: deshalb `pre` mit Umbruch statt Prosa-Formatierung.
   Was dort steht, soll aussehen wie das, was dort steht. */
.sv4-research__card { padding: 0; }
.sv4-research__card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv4-research__card > summary::-webkit-details-marker { display: none; }
.sv4-research__card > summary::before {
  content: "▸";
  color: #9ca3af;
  font-size: 11px;
  line-height: 1;
}
.sv4-research__card[open] > summary::before { content: "▾"; }

.sv4-research__flag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #fee2e2;
  color: #b91c1c;
  white-space: nowrap;
}
.sv4-research__flag--offen { background: #fef3c7; color: #92400e; }

.sv4-research__part + .sv4-research__part { margin-top: 12px; }
.sv4-research__label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.sv4-research__body {
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sv4-research__part--gate .sv4-research__body { color: #92400e; }

/* Gefragte Quellen: eine Zeile je Werkzeug, die Null in Rot. Das ist die Zahl, wegen der der
   Block existiert — „wurde überhaupt etwas gefunden". */
.sv4-research__calls { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.sv4-research__call {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
  color: #374151;
}
.sv4-research__call-name { overflow-wrap: anywhere; }
.sv4-research__call-count { font-variant-numeric: tabular-nums; color: #6b7280; white-space: nowrap; }
.sv4-research__call--leer .sv4-research__call-name,
.sv4-research__call--leer .sv4-research__call-count { color: #b91c1c; }

.sv4-research__body--fehlt { color: #b91c1c; }

.sv4-research__factors {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 12px;
}
.sv4-research__factor-label { color: #6b7280; }
.sv4-research__factor-value { margin: 0; color: #374151; font-variant-numeric: tabular-nums; }

/* „Grounding aus <Feld> wiederverwendet" — ein Feld, das nicht selbst gegroundet hat. Leise,
   aber vorhanden: die Alternative war ein leerer Block, und leer liest sich wie „keine
   Recherche". */
.sv4-research__reused {
  margin: 0 0 10px;
  font-size: 11px;
  color: #6b7280;
}
.sv4-research__reused a { color: #4b5563; }

/* ── Legende der vier Status (#118) ── */
.sv4-kpis__legend { margin: 0 0 20px; }

.sv4-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 18px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.sv4-legend__term {
  font-weight: 600;
  color: #374151;
}

.sv4-legend__desc { margin: 0; }

/* Zusätze an der Statusspalte: Datum des PIM-Textes und der Sichtbarkeits-Hinweis. */
.sv4-queue__since,
.sv4-queue__hidden {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #94a3b8;
}

/* Kein Filter, nur ein Kennzeichen — deshalb zurückhaltend und nicht als Warnung. */
.sv4-queue__hidden {
  color: #a16207;
  cursor: help;
}

/* Der Stand der nächtlichen PIM-Kopie (#120). Gelb, wenn der Restore ausgefallen ist — dann
   sind die Bestandstexte älter, als die Karte sonst suggeriert. */
.sv4-syncrow--warn .sv4-syncrow__value { color: #fbbf24; font-weight: 600; }

.sv4-syncrow__hint {
  margin: 2px 0 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #fbbf24;
}

/* ── Power mode (#139) ─────────────────────────────────────────────────────────
   Everything below applies only with a sv4-power class, except the switch, which belongs to both
   modes. Colours from the sketch: one teal for "power", the rest from the existing palette. */
.sv4-mode { display: inline-flex; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.sv4-mode__option { padding: 7px 14px; font-size: 13px; color: #374151; text-decoration: none; background: #fff; }
.sv4-mode__option--on { background: #111827; color: #fff; font-weight: 600; }
.sv4-mode__option--power.sv4-mode__option--on { background: #0e7490; }
.sv4-mode__option:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }

.sv4-power-cols { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr) minmax(0, 1.6fr); }
@media (max-width: 1100px) {
  .sv4-power-cols { grid-template-columns: minmax(0, 1fr); }
}

.sv4-power-options__form { display: grid; gap: 10px; }
.sv4-power-options__opt { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #374151; }
.sv4-power-options__opt small { display: block; color: #6b7280; font-size: 11px; }
.sv4-power-options__variants { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #374151; flex-wrap: wrap; }
.sv4-power-options__n { display: inline-flex; gap: 4px; align-items: center; }
.sv4-power-options__note { margin: 8px 0 0; font-size: 11px; color: #6b7280; }

.sv4-power-chat { display: grid; gap: 14px; align-content: start; }
.sv4-power-chat__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sv4-power-chat__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sv4-power-chat__status { font-size: 12px; color: #15803d; }

.sv4-power-sheet { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; background: #f9fafb; display: grid; gap: 8px; }
.sv4-power-sheet__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sv4-power-sheet__title { font-weight: 700; font-size: 13px; }
.sv4-power-sheet__version { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #0e7490; background: #e0f2f5; padding: 1px 6px; border-radius: 4px; }
.sv4-power-sheet__pending { font-size: 11px; color: #92400e; }
.sv4-power-sheet__count { font-family: ui-monospace, Menlo, monospace; font-weight: 400; color: #6b7280; font-size: 11px; }
.sv4-power-sheet__source { font-size: 10px; color: #6b7280; font-family: ui-monospace, Menlo, monospace; }

.sv4-power-composer { display: grid; gap: 6px; }
.sv4-power-composer__label { font-size: 12px; font-weight: 700; }
.sv4-power-composer__input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px; background: #f9fafb; resize: vertical; }
.sv4-power-composer__note { margin: 0; font-size: 11px; color: #6b7280; }
.sv4-power-chat__status--pending { color: #92400e; }

/* ── Power mode, Teil B: build button, batches, variant cards ─────────────────── */
.sv4-power-build__form { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sv4-power-build__button.sv4-power-build__button--all { background: #0e7490; color: #fff; }
.sv4-power-build__button { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 7px; border: 1px solid #0e7490; color: #0e7490; background: #fff; cursor: pointer; }
.sv4-power-build__button:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }
.sv4-power-variants { display: grid; gap: 14px; }
.sv4-power-batch { display: grid; gap: 8px; }
.sv4-power-batch__head { font-size: 11px; color: #0e7490; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sv4-power-variant { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; display: grid; gap: 10px; background: #fff; }
/* Only on the first render with its batch: a streaming update replaces the card, and the animation
   would otherwise restart every 0.4 s. */
.sv4-power-variant--enter { animation: sv4-power-enter .35s cubic-bezier(.2, .8, .2, 1); }
/* The marker when the text is done (#144) — set by the final broadcast only, never by a streaming one. */
.sv4-power-variant__head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sv4-power-variant__field { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sv4-power-variant__direction { font-size: 11px; color: #6b7280; }
.sv4-power-variant__lane, .sv4-power-variant__sheet { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0 5px; }
.sv4-power-variant__taken { font-size: 11px; color: #15803d; font-weight: 700; }
.sv4-power-variant__text { margin: 0; font-size: 16px; line-height: 1.5; color: #111827; white-space: pre-wrap; }
.sv4-power-variant--short .sv4-power-variant__text { font-weight: 700; text-transform: uppercase; }
.sv4-power-variant__text--writing { color: #6b7280; font-style: italic; font-weight: 400 !important; text-transform: none !important; }
.sv4-power-variant__error { margin: 0; font-size: 13px; color: #92400e; }
.sv4-power-variant__acts { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.sv4-power-variant__form { margin: 0; display: inline; }
.sv4-power-variant__spacer { flex: 1; }
.sv4-power-act { font: inherit; font-size: 11px; padding: 2px 7px; border: 0; border-radius: 4px; background: transparent; color: #6b7280; cursor: pointer; }
.sv4-power-act:hover { background: #f9fafb; color: #111827; }
.sv4-power-act:focus-visible { outline: 2px solid #0e7490; outline-offset: 1px; }
.sv4-power-act--into { color: #0e7490; font-weight: 700; border: 1px solid #0e7490; }
.sv4-power-act--delete:hover { color: #92400e; background: #fdf3e2; }
@keyframes sv4-power-enter { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .sv4-power-variant--enter { animation: none; } }
.sv4-power-build__none { margin: 0; font-size: 12px; color: #6b7280; }
.sv4-power-brief { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; background: #fff; }
.sv4-power-brief__head { display: flex; gap: 8px; align-items: baseline; }
.sv4-power-brief__origin { font-size: 11px; color: #6b7280; }
.sv4-power-brief__text { margin: 0; font-size: 13px; line-height: 1.45; color: #111827; white-space: pre-wrap; }
.sv4-power-brief__edit > summary { display: inline-block; list-style: none; }
.sv4-power-brief__edit > summary::-webkit-details-marker { display: none; }
.sv4-power-brief__form { display: grid; gap: 6px; margin-top: 6px; }
.sv4-power-brief__acts { display: flex; gap: 8px; align-items: center; }

.sv4-power-variant__fork { font-size: 11px; color: #a16207; font-weight: 700; }

/* ── Power chat session (#144 Teil E) ─────────────────────────────────────────── */
.sv4-power-chatbox { display: grid; gap: 8px; }
.sv4-power-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.sv4-power-messages:empty { display: none; }
.sv4-power-message { display: grid; gap: 2px; max-width: 88%; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.sv4-power-message--user { justify-self: end; background: #e0f2f5; color: #0f172a; }
.sv4-power-message--assistant { justify-self: start; background: #f8fafc; border: 1px solid #e5e7eb; color: #111827; }
.sv4-power-message__who { font-size: 11px; font-weight: 700; color: #6b7280; }
.sv4-power-message__text { margin: 0; white-space: pre-wrap; }
.sv4-power-message__text--pending { color: #6b7280; font-style: italic; }
.sv4-power-chatform__form { display: grid; gap: 6px; }
.sv4-power-chatform__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sv4-power-chatform__notice { margin: 0; font-size: 12px; color: #92400e; }
.sv4-power-chatform__reset { margin-left: auto; }
.sv4-power-chatform__reset > summary { list-style: none; display: inline-block; }
.sv4-power-chatform__reset > summary::-webkit-details-marker { display: none; }

/* ── Rules from the standard (#144 Teil B) ─────────────────────────────────── */
.sv4-power-rules__count { font-size: 11px; color: #6b7280; margin-left: auto; }
.sv4-power-rules__form { display: grid; gap: 4px; }
.sv4-power-rules__rule { display: flex; gap: 8px; align-items: center; }
.sv4-power-rules__name { font: inherit; font-size: 13px; text-align: left; background: none; border: 0; padding: 2px 0; color: #0e7490; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.sv4-power-rules__name:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }
.sv4-power-rules__dialog { width: min(760px, calc(100vw - 32px)); max-height: 80vh; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0; }
.sv4-power-rules__dialog::backdrop { background: rgb(15 23 42 / .45); }
.sv4-power-rules__dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; }
.sv4-power-rules__text { margin: 0; padding: 16px; white-space: pre-wrap; font: 13px/1.55 ui-monospace, Menlo, monospace; color: #111827; }

/* ── Predecessor (#144 Teil C) ─────────────────────────────────────────────── */
.sv4-power-predecessor__form { display: grid; gap: 6px; }
.sv4-power-predecessor__opt { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.sv4-power-predecessor__opt small { display: block; color: #6b7280; font-size: 11px; }
.sv4-power-guidelines__list { margin: 0; padding-left: 18px; font-size: 13px; color: #111827; display: grid; gap: 2px; }
.sv4-power-guidelines { border-style: dashed; border-color: #0e7490; }
.sv4-power-guidelines__empty { color: #6b7280; font-style: italic; }

/* ── Sketch leftovers (#144 Teil F) ──────────────────────────────────────────── */

/* ── Arbeitslog „Lea arbeitet" (#145): exactly the band of Lars' sketch ─────────────────────
   Docked to the bottom of the work area, across ALL columns, light, a soft shadow upwards. One
   partial in one place for standard and power (show.html.haml, below the columns). Sticky, so it
   costs no space while the page scrolls and is always where one works. Below the fixed nav
   (1000), above the page content. */
.sv4-activity {
  position: sticky;
  bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: grid;
  margin-top: 16px;
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 -6px 24px rgb(15 20 25 / .08);
}
.sv4-activity__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 14px; border-bottom: 1px solid #e5e7eb; }
.sv4-activity--zu .sv4-activity__head { border-bottom: 0; }
.sv4-activity__brand { display: inline-flex; gap: 8px; align-items: center; }
.sv4-activity__title { font-weight: 700; font-size: 13px; }
.sv4-activity__pulse { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex: none; }
.sv4-activity__pulse--on { background: #15803d; animation: sv4-pulse 1.2s ease-in-out infinite; }
@keyframes sv4-pulse { 50% { opacity: .35; } }
.sv4-activity__timer { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; }
.sv4-activity__steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 11px; }
.sv4-activity__step { padding: 2px 8px; border-radius: 999px; background: #f9fafb; color: #6b7280; }
.sv4-activity__step--active { background: #e0f2f5; color: #0e7490; font-weight: 700; }
.sv4-activity__step--done { background: #e7f5ec; color: #15803d; }
.sv4-activity__spacer { flex: 1; }
.sv4-activity__filters { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sv4-activity__filter, .sv4-activity__toggle { font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; }
.sv4-activity__filter--on { background: #111827; color: #fff; border-color: #111827; }
.sv4-activity__filter:focus-visible, .sv4-activity__toggle:focus-visible, .sv4-activity__lane:focus-visible,
.sv4-activity__zoom:focus-visible { outline: 2px solid #0e7490; outline-offset: 1px; }
.sv4-activity__zoom { font: inherit; font-size: 11px; font-family: ui-monospace, Menlo, monospace; color: #0e7490; background: #e0f2f5; border: 0; padding: 2px 8px; border-radius: 4px; cursor: pointer; }
.sv4-activity__fulllog { font-size: 11px; color: #0e7490; text-decoration: none; }
.sv4-activity__fulllog:hover { text-decoration: underline; }
.sv4-activity__body { position: relative; }
.sv4-activity--zu .sv4-activity__body { display: none; }
.sv4-activity__lines { list-style: none; margin: 0; padding: 6px 14px 10px; max-height: 190px; overflow-y: auto; display: grid; gap: 1px; font-size: 12px; }
.sv4-activity__lines:empty { padding: 0; }
.sv4-activity--gross .sv4-activity__lines { max-height: 60vh; }
.sv4-activity__line { display: grid; grid-template-columns: 58px 74px 16px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 2px 0; animation: sv4-line-enter .25s ease-out; }
.sv4-activity__line[hidden] { display: none; }
@keyframes sv4-line-enter { from { opacity: 0; transform: translateY(4px); } }
.sv4-activity__at { font-family: ui-monospace, Menlo, monospace; color: #6b7280; font-variant-numeric: tabular-nums; font-size: 11px; }
.sv4-activity__lane { font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: 10px; line-height: 1.4; padding: 1px 6px; width: max-content; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border-radius: 4px; background: #f9fafb; color: #374151; border: 0; cursor: pointer; justify-self: start; }
.sv4-activity__lane--session { background: #111827; color: #fff; }
.sv4-activity__lane--grounding { background: #e7f5ec; color: #15803d; }
.sv4-activity__lane--variant { background: #e0f2f5; color: #0e7490; }
.sv4-activity__lane--error { background: #fdf3e2; color: #92400e; }
.sv4-activity__lane--user { background: #fef3c7; color: #78350f; }
.sv4-activity__icon { text-align: center; }
.sv4-activity__text { min-width: 0; overflow-wrap: anywhere; color: #374151; }
.sv4-activity__line--thought .sv4-activity__text { font-style: italic; color: #6b7280; }
.sv4-activity__line--reload { display: block; text-align: center; color: #6b7280; font-size: 11px; }
.sv4-activity__jump { position: absolute; right: 14px; bottom: 10px; font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid #0e7490; background: #fff; color: #0e7490; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sv4-activity__line, .sv4-activity__pulse--on { animation: none; } }
@media (max-width: 700px) { .sv4-activity__line { grid-template-columns: 52px 64px 14px minmax(0, 1fr); gap: 6px; } }
/* No lines yet: the band is its head alone — no empty strip below it. */
.sv4-activity:not(:has(.sv4-activity__line)) .sv4-activity__head { border-bottom: 0; }
.sv4-activity:not(:has(.sv4-activity__line)) .sv4-activity__lines { padding: 0; }

/* ── Fact sheet tiles, compact with an overlay (#146 A) ─────────────────────────────────────
   Head only in the overview, one wrapping row; the whole group in an overlay on hover, keyboard
   focus or tap (a tap focuses the button). Absolute, so the layout below does not move. */
.sv4-power-sheet__groups { display: flex; flex-wrap: wrap; gap: 6px; }
.sv4-power-sheet__group { position: relative; }
.sv4-power-sheet__tile { font: inherit; display: inline-flex; gap: 6px; align-items: baseline; max-width: 100%; padding: 4px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827; cursor: default; }
.sv4-power-sheet__tile:hover, .sv4-power-sheet__tile:focus-visible { border-color: #0e7490; }
.sv4-power-sheet__tile:focus-visible { outline: 2px solid #0e7490; outline-offset: 1px; }
.sv4-power-sheet__name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.sv4-power-sheet__pop { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; width: min(440px, 80vw); max-height: 60vh; overflow-y: auto; padding: 10px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 10px 30px rgb(15 20 25 / .14); }
.sv4-power-sheet__group:hover .sv4-power-sheet__pop,
.sv4-power-sheet__group:focus-within .sv4-power-sheet__pop { display: block; }
.sv4-power-sheet__pop-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.sv4-power-sheet__pop ul { margin: 0; padding-left: 16px; font-size: 12px; color: #374151; display: grid; gap: 3px; overflow-wrap: anywhere; }

/* ── Highlight of new and freshly written text, 8 s (#146 C) ─────────────────────────────────
   ONE duration for all three: a new variant card, the field after "Ins Feld", and every field
   the standard has just written (also "Alle offenen formulieren"). The sketch's effect: tinted
   light blue with a blue frame, fading over the whole 8 s to the normal look. With reduced motion
   there is no fade: the mark simply stands for the same time and then goes (step-end). */
.sv4 { --sv4-highlight: 8s; }
.sv4-power-variant--fresh,
.sv4-block--flash { animation: sv4-highlight var(--sv4-highlight, 8s) ease-out; }
@keyframes sv4-highlight {
  0%, 15% { background-color: #e0f2f5; border-color: #0e7490; box-shadow: 0 0 0 3px #e0f2f5; }
  100% { background-color: #fff; border-color: #e5e7eb; box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sv4-power-variant--fresh, .sv4-block--flash { animation-timing-function: step-end; }
}

/* Thinking and effort per product, both modes (#157 F). */
.sv4-mind { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.sv4-mind__effort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sv4-mind__level { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }