/* ══════════════════════════════════════════════════════════════════════
   SOLVIGO DESIGN SYSTEM · Token-Ebene
   ----------------------------------------------------------------------
   Alles wird unter .sv gescopet. Kein Selektor ohne diese Wurzel.
   Grund: Der Bestand führt 2.223 !important-Deklarationen. Ohne eigenen
   Namensraum mit höherer Spezifität gewinnt im Zweifel das alte CSS.

   Regel: Jede Farbe kommt aus einem Token. Kein Hex-Wert in einer
   Komponente. Wer einen neuen Farbwert braucht, legt ein Token an.
   ══════════════════════════════════════════════════════════════════════ */

.sv{
  /* ── Marke ─────────────────────────────────────────── */
  --sv-brand:        #0b7a75;   /* Primär: Aktion, Auswahl, Markenpräsenz */
  --sv-brand-deep:   #08605c;   /* Hover, gedrückt */
  --sv-brand-soft:   #e2f1ef;   /* Flächen, Chips */
  --sv-brand-line:   #b9dcd8;   /* Rahmen auf Markenflächen */

  --sv-accent:       #2ceaa3;   /* NUR für: wo stehe ich gerade */
  --sv-accent-ink:   #04493a;   /* Text auf Akzentfläche */
  --sv-accent-soft:  #dcfbef;

  --sv-ink:          #081c15;   /* Haupttext */
  --sv-ink-2:        #42594f;   /* Sekundärtext */
  --sv-ink-3:        #6f887d;   /* Hilfstext, Platzhalter */

  --sv-line:         #d4d5d8;   /* Trennlinien, Rahmen */
  --sv-line-soft:    #e3e9e6;   /* leise Trennung */

  --sv-bg:           #f3f7f5;   /* Seitengrund */
  --sv-surface:      #ffffff;   /* Karten, Panels */
  --sv-surface-2:    #eaf1ee;   /* eingelassene Flächen */
  --sv-surface-3:    #e0eae6;   /* Spuren, leere Balken */

  /* ── Semantik ──────────────────────────────────────── */
  /* Getrennt vom Akzent. Rot heißt kritisch, nie Marke.  */
  --sv-crit:         #a8281d;
  --sv-crit-soft:    #fbeae8;
  --sv-crit-line:    #f0c5bf;

  --sv-warn:         #8d5504;
  --sv-warn-soft:    #fbf1e0;
  --sv-warn-line:    #eed9b4;

  --sv-ok:           #0b7a75;   /* bewusst die Marke: frei = gut */
  --sv-ok-soft:      #e2f1ef;
  --sv-ok-line:      #b9dcd8;

  /* ── Typografie ────────────────────────────────────── */
  --sv-font:      "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sv-font-head: Archivo, "IBM Plex Sans", system-ui, sans-serif;
  --sv-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --sv-t-xs:   11px;   /* Label, Marker */
  --sv-t-sm:   12.5px; /* Hilfstext */
  --sv-t-base: 14px;   /* Fließtext, Bedienelemente */
  --sv-t-md:   16px;   /* Abschnittstitel */
  --sv-t-lg:   20px;   /* Kennzahlen */
  --sv-t-xl:   26px;   /* Seitentitel */

  --sv-lh:       1.5;
  --sv-lh-tight: 1.3;

  /* ── Abstand ───────────────────────────────────────── */
  --sv-1:  4px;
  --sv-2:  7px;
  --sv-3:  11px;
  --sv-4:  15px;
  --sv-5:  22px;
  --sv-6:  30px;

  /* ── Form ─────────────────────────────────────────── */
  --sv-r-sm: 8px;
  --sv-r-md: 12px;
  --sv-r-lg: 18px;
  --sv-r-pill: 999px;

  --sv-shadow:      0 1px 2px rgba(8,28,21,.05), 0 8px 24px -12px rgba(8,28,21,.16);
  --sv-shadow-lift: 0 2px 4px rgba(8,28,21,.06), 0 18px 40px -18px rgba(8,28,21,.28);

  --sv-focus: 0 0 0 2px var(--sv-surface), 0 0 0 4px var(--sv-brand);
}

/* ── Dunkel ─────────────────────────────────────────────
   Der Marken-Dunkelton #081c15 wird zum Grund.
   Petrol wird aufgehellt, sonst verschwindet es.        */
@media (prefers-color-scheme: dark){
.sv:not([data-sv-theme="light"]){
    --sv-brand:      #35b0a8;
    --sv-brand-deep: #4cc5bc;
    --sv-brand-soft: #11362f;
    --sv-brand-line: #1d5049;
    --sv-accent:     #2ceaa3;
    --sv-accent-ink: #081c15;
    --sv-accent-soft:#0f3b2d;
    --sv-ink:        #e8f1ed;
    --sv-ink-2:      #a6c1b7;
    --sv-ink-3:      #7c978c;
    --sv-line:       #22493a;
    --sv-line-soft:  #183628;
    --sv-bg:         #081c15;
    --sv-surface:    #0e2a21;
    --sv-surface-2:  #133327;
    --sv-surface-3:  #1a4033;
    --sv-crit:       #f58279;
    --sv-crit-soft:  #2c1512;
    --sv-crit-line:  #5b2822;
    --sv-warn:       #e0a44a;
    --sv-warn-soft:  #2a1e0b;
    --sv-warn-line:  #4a3512;
    --sv-ok:         #35b0a8;
    --sv-ok-soft:    #11362f;
    --sv-ok-line:    #1d5049;
    --sv-shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --sv-shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.75);
  }
}
.sv[data-sv-theme="dark"]{
  --sv-brand:#35b0a8; --sv-brand-deep:#4cc5bc; --sv-brand-soft:#11362f; --sv-brand-line:#1d5049;
  --sv-accent:#2ceaa3; --sv-accent-ink:#081c15; --sv-accent-soft:#0f3b2d;
  --sv-ink:#e8f1ed; --sv-ink-2:#a6c1b7; --sv-ink-3:#7c978c;
  --sv-line:#22493a; --sv-line-soft:#183628;
  --sv-bg:#081c15; --sv-surface:#0e2a21; --sv-surface-2:#133327; --sv-surface-3:#1a4033;
  --sv-crit:#f58279; --sv-crit-soft:#2c1512; --sv-crit-line:#5b2822;
  --sv-warn:#e0a44a; --sv-warn-soft:#2a1e0b; --sv-warn-line:#4a3512;
  --sv-ok:#35b0a8; --sv-ok-soft:#11362f; --sv-ok-line:#1d5049;
  --sv-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --sv-shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.75);
}

/* ══════════════════════════════════════════════════════════════════════
   SOLVIGO DESIGN SYSTEM · Komponenten
   Alles unter .sv. Jede Farbe aus einem Token.
   ══════════════════════════════════════════════════════════════════════ */

.sv, .sv *{ box-sizing: border-box; }
.sv{
  font-family: var(--sv-font);
  font-size: var(--sv-t-base);
  line-height: var(--sv-lh);
  color: var(--sv-ink);
  background: var(--sv-bg);
  -webkit-font-smoothing: antialiased;
}
.sv h1, .sv h2, .sv h3, .sv h4{
  font-family: var(--sv-font-head);
  margin: 0; line-height: var(--sv-lh-tight);
  letter-spacing: -.01em; text-wrap: balance;
}
/* Knoepfe tragen keine Browser-Optik. Der Reset (0,1,1) verliert gegen
   jede Komponente, weil alle Komponenten .sv-praefigiert sind (0,2,0) —
   sie bringen ihre Flaeche und ihren Rahmen also selbst mit. */
.sv button{
  font: inherit; color: inherit; cursor: pointer;
  border: 0; background: none; padding: 0;
}
.sv :focus-visible{ outline: none; box-shadow: var(--sv-focus); border-radius: var(--sv-r-sm); }
.sv .sv-mono{ font-family: var(--sv-font-mono); font-variant-numeric: tabular-nums; }
.sv .sv-num { font-family: var(--sv-font-head); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Chip ──────────────────────────────────────────────
   Ein Baustein für alles Etikettierte. Variante über
   Modifier, nie über eine neue Klasse.                  */
.sv .sv-chip{
  display: inline-flex; align-items: center; gap: var(--sv-1);
  font-size: var(--sv-t-sm); font-weight: 500; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--sv-r-pill);
  background: var(--sv-surface-2); color: var(--sv-ink-2);
  border: 1px solid var(--sv-line-soft);
}
.sv .sv-chip--phase{ background: var(--sv-brand-soft); color: var(--sv-brand-deep); border-color: var(--sv-brand-line); font-weight: 600; }
.sv .sv-chip--crit { background: var(--sv-crit-soft);  color: var(--sv-crit);  border-color: var(--sv-crit-line);  font-weight: 600; }
.sv .sv-chip--warn { background: var(--sv-warn-soft);  color: var(--sv-warn);  border-color: var(--sv-warn-line);  font-weight: 600; }
.sv .sv-chip--ok   { background: var(--sv-ok-soft);    color: var(--sv-ok);    border-color: var(--sv-ok-line);    font-weight: 600; }
.sv .sv-chip--now  { background: var(--sv-accent);     color: var(--sv-accent-ink); border-color: transparent; font-weight: 600; }
.sv .sv-chip__dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ── Ampel ─────────────────────────────────────────────
   ROT / GELB / GRÜN aus dem Bestand. Farbe allein trägt
   die Bedeutung nie — der Text steht immer dabei.       */
.sv .sv-ampel{
  display: inline-flex; align-items: center; gap: var(--sv-2);
  font-size: var(--sv-t-sm); font-weight: 600;
  padding: 3px 10px; border-radius: var(--sv-r-pill);
  border: 1px solid;
}
.sv .sv-ampel__dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sv .sv-ampel--rot  { background: var(--sv-crit-soft); color: var(--sv-crit); border-color: var(--sv-crit-line); }
.sv .sv-ampel--gelb { background: var(--sv-warn-soft); color: var(--sv-warn); border-color: var(--sv-warn-line); }
.sv .sv-ampel--gruen{ background: var(--sv-ok-soft);   color: var(--sv-ok);   border-color: var(--sv-ok-line); }

/* ── Knopf ─────────────────────────────────────────────
   Ein Knopf sagt, was passiert. Beim Routing-Knopf
   gehört das Ziel in die Beschriftung.                  */
.sv .sv-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sv-2);
  padding: 8px var(--sv-4); border-radius: var(--sv-r-sm);
  font-size: var(--sv-t-base); font-weight: 500; white-space: nowrap;
  border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink-2);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.sv .sv-btn:hover{ border-color: var(--sv-brand); color: var(--sv-brand); }
.sv .sv-btn--primary{ background: var(--sv-brand); border-color: var(--sv-brand); color: #fff; }
.sv .sv-btn--primary:hover{ background: var(--sv-brand-deep); border-color: var(--sv-brand-deep); color: #fff; }
.sv .sv-btn--danger{ border-color: var(--sv-crit-line); color: var(--sv-crit); background: var(--sv-crit-soft); }
.sv .sv-btn--danger:hover{ border-color: var(--sv-crit); color: var(--sv-crit); }
.sv .sv-btn--ghost{ border-color: transparent; background: transparent; }
.sv .sv-btn--ghost:hover{ background: var(--sv-surface-2); border-color: transparent; color: var(--sv-ink); }
.sv .sv-btn--sm{ padding: 4px var(--sv-3); font-size: var(--sv-t-sm); }
.sv .sv-btn[disabled]{ opacity: .45; cursor: not-allowed; }
.sv .sv-btn[disabled]:hover{ border-color: var(--sv-line); color: var(--sv-ink-2); background: var(--sv-surface); }
@media (prefers-reduced-motion: reduce){ .sv-btn{ transition: none; } }

/* ── Fläche ────────────────────────────────────────────
   Rahmen, Radius und Schatten kosten Aufmerksamkeit.
   Nur vergeben, wo wirklich ein eigenes Objekt steht.   */
.sv .sv-panel{
  background: var(--sv-surface); border: 1px solid var(--sv-line-soft);
  border-radius: var(--sv-r-lg); box-shadow: var(--sv-shadow);
}
.sv .sv-panel__head{
  padding: var(--sv-3) var(--sv-4);
  border-bottom: 1px solid var(--sv-line-soft);
  display: flex; align-items: baseline; gap: var(--sv-2); flex-wrap: wrap;
}
.sv .sv-panel__title{ font-family: var(--sv-font-head); font-weight: 600; font-size: var(--sv-t-base); }
.sv .sv-panel__note { font-size: var(--sv-t-sm); color: var(--sv-ink-3); margin-left: auto; }
.sv .sv-panel__body { padding: var(--sv-4); }

/* ── Fortschritt ───────────────────────────────────────
   EINE Zahl. Offene Punkte werden daneben gezählt,
   nie in den Prozentwert verrechnet.                    */
.sv .sv-meter__top{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--sv-4); flex-wrap: wrap; margin-bottom: var(--sv-3); }
.sv .sv-meter__n{ font-family: var(--sv-font-head); font-weight: 700; font-size: var(--sv-t-lg); font-variant-numeric: tabular-nums; }
.sv .sv-meter__n small{ font-weight: 500; font-size: var(--sv-t-base); color: var(--sv-ink-3); margin-left: var(--sv-1); }
.sv .sv-bar{ height: 9px; border-radius: 5px; background: var(--sv-surface-3); overflow: hidden; }
.sv .sv-bar > i{ display: block; height: 100%; background: var(--sv-brand); border-radius: 5px; }
.sv .sv-meter__note{ font-size: var(--sv-t-sm); color: var(--sv-ink-3); margin-top: var(--sv-2); }

/* ── Phasenschiene ─────────────────────────────────────
   Alle Phasen sichtbar. Erledigte gedämpft, die aktuelle
   in Akzent — oder in Rot, wenn sie feststeckt.         */
.sv .sv-rail__head{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--sv-3); flex-wrap: wrap; margin-bottom: var(--sv-3); }
.sv .sv-rail__label{ font-size: var(--sv-t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--sv-ink-3); font-weight: 600; }
.sv .sv-rail__pos{ font-size: var(--sv-t-sm); color: var(--sv-ink-2); }
.sv .sv-rail__track{ display: flex; gap: 3px; align-items: flex-end; overflow-x: auto; padding-bottom: var(--sv-1); }
.sv .sv-rail__step{ flex: 1 1 auto; min-width: 6px; height: 8px; border-radius: 3px; background: var(--sv-surface-3); }
.sv .sv-rail__step.is-done{ background: var(--sv-brand); opacity: .55; }
.sv .sv-rail__step.is-now { height: 22px; min-width: 26px; flex: 0 0 auto; background: var(--sv-accent); }
.sv .sv-rail__step.is-stuck{ height: 22px; min-width: 26px; flex: 0 0 auto; background: var(--sv-crit); }
.sv .sv-rail__names{ display: flex; justify-content: space-between; gap: var(--sv-3); margin-top: var(--sv-2); font-size: var(--sv-t-sm); flex-wrap: wrap; }
.sv .sv-rail__names .is-now{ font-family: var(--sv-font-head); font-weight: 600; color: var(--sv-ink); }
.sv .sv-rail__names span:not(.is-now){ color: var(--sv-ink-3); }

/* ── KI-Finding ────────────────────────────────────────
   Vorschlag, nie Entscheidung. Confidence sichtbar,
   Aktionen benennen ihre Folge.                         */
.sv .sv-finding{ display: grid; grid-template-columns: 3px 1fr; gap: 0; padding: var(--sv-3) var(--sv-4); border-bottom: 1px solid var(--sv-line-soft); }
.sv .sv-finding:last-child{ border-bottom: 0; }
.sv .sv-finding__stripe{ background: var(--sv-line); border-radius: 2px; margin-right: var(--sv-3); }
.sv .sv-finding--critical .sv-finding__stripe{ background: var(--sv-crit); }
.sv .sv-finding--warning  .sv-finding__stripe{ background: var(--sv-warn); }
.sv .sv-finding--info     .sv-finding__stripe{ background: var(--sv-brand); }
.sv .sv-finding__body{ min-width: 0; }
.sv .sv-finding__title{ font-weight: 600; }
.sv .sv-finding__meta { display: flex; gap: var(--sv-2); flex-wrap: wrap; align-items: center; margin-top: var(--sv-2); }
.sv .sv-finding__text { font-size: var(--sv-t-sm); color: var(--sv-ink-2); margin: var(--sv-2) 0 0; line-height: 1.45; }
.sv .sv-finding__acts { display: flex; gap: var(--sv-2); flex-wrap: wrap; margin-top: var(--sv-3); }
.sv .sv-finding.is-handled{ opacity: .62; }
.sv .sv-conf{ display: flex; gap: var(--sv-1); align-items: center; font-size: var(--sv-t-xs); color: var(--sv-ink-3); }
.sv .sv-conf__bar{ width: 46px; height: 5px; border-radius: 3px; background: var(--sv-surface-3); overflow: hidden; flex: 0 0 auto; }
.sv .sv-conf__bar > i{ display: block; height: 100%; background: var(--sv-brand); }

/* ── Offene Punkte: zwei Arten ─────────────────────────
   Die wichtigste Unterscheidung im ganzen System.
   Eigene Arbeit bleibt. Externe Abweichung geht raus.   */
.sv .sv-points{ display: grid; gap: var(--sv-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sv .sv-pgroup{ background: var(--sv-surface); border: 1px solid var(--sv-line-soft); border-radius: var(--sv-r-lg); box-shadow: var(--sv-shadow); overflow: hidden; border-top: 3px solid var(--sv-line); }
.sv .sv-pgroup--stays{ border-top-color: var(--sv-brand); }
.sv .sv-pgroup--leaves{ border-top-color: var(--sv-warn); }
.sv .sv-pgroup__head{ padding: var(--sv-3) var(--sv-4); border-bottom: 1px solid var(--sv-line-soft); }
.sv .sv-pgroup__title{ font-family: var(--sv-font-head); font-weight: 600; display: flex; align-items: center; gap: var(--sv-2); }
.sv .sv-pgroup__sub{ font-size: var(--sv-t-sm); color: var(--sv-ink-3); margin-top: 3px; line-height: 1.4; }
.sv .sv-swatch{ width: 13px; height: 13px; border-radius: var(--sv-1); flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); }
.sv .sv-point{ padding: var(--sv-3) var(--sv-4); border-bottom: 1px solid var(--sv-line-soft); }
.sv .sv-pgroup .sv-point:last-child{ border-bottom: 0; }
.sv .sv-point__title{ font-weight: 500; }
.sv .sv-point__meta { display: flex; gap: var(--sv-2); flex-wrap: wrap; margin-top: var(--sv-2); }

/* ── Hinweisblock ──────────────────────────────────────
   Für bestätigte Blocker und Prozesssperren.            */
.sv .sv-callout{ display: grid; grid-template-columns: 4px 1fr; border-radius: var(--sv-r-md); overflow: hidden; border: 1px solid; }
.sv .sv-callout__stripe{ background: currentColor; }
.sv .sv-callout__body{ padding: var(--sv-3) var(--sv-4); }
.sv .sv-callout__title{ font-weight: 600; display: flex; align-items: center; gap: var(--sv-2); }
.sv .sv-callout__text { font-size: var(--sv-t-sm); color: var(--sv-ink-2); margin: var(--sv-1) 0 0; }
.sv .sv-callout__acts { display: flex; gap: var(--sv-2); flex-wrap: wrap; margin-top: var(--sv-3); }
.sv .sv-callout--crit{ background: var(--sv-crit-soft); border-color: var(--sv-crit-line); color: var(--sv-crit); }
.sv .sv-callout--warn{ background: var(--sv-warn-soft); border-color: var(--sv-warn-line); color: var(--sv-warn); }
.sv .sv-callout--info{ background: var(--sv-brand-soft); border-color: var(--sv-brand-line); color: var(--sv-brand-deep); }

/* ── Feld ──────────────────────────────────────────────
   Mit Herkunftsmarker: aus Reonic, KI erkannt, vor Ort.
   Der Mitarbeiter sieht sofort, was er NICHT tun muss.  */
.sv .sv-field{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--sv-3); align-items: center; padding: var(--sv-2) 0; border-bottom: 1px solid var(--sv-line-soft); }
.sv .sv-field:last-child{ border-bottom: 0; }
.sv .sv-field__label{ font-size: var(--sv-t-base); display: flex; gap: var(--sv-1); align-items: center; flex-wrap: wrap; }
.sv .sv-field__req{ color: var(--sv-crit); font-weight: 700; }
.sv .sv-src{ font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 5px; letter-spacing: .02em; background: var(--sv-accent-soft); color: var(--sv-accent-ink); border: 1px solid var(--sv-accent); }
.sv .sv-src--manual{ background: var(--sv-surface-2); color: var(--sv-ink-3); border-color: var(--sv-line-soft); }
.sv .sv-input{ width: 100%; padding: 7px 10px; font: inherit; font-size: var(--sv-t-base); border: 1px solid var(--sv-line); border-radius: var(--sv-r-sm); background: var(--sv-surface); color: var(--sv-ink); }
.sv .sv-input::placeholder{ color: var(--sv-ink-3); }
.sv .sv-input.is-empty{ border-style: dashed; }
.sv .sv-unit{ display: flex; gap: var(--sv-2); align-items: center; }
.sv .sv-unit > span{ font-size: var(--sv-t-sm); color: var(--sv-ink-3); flex: 0 0 auto; }

/* ── Abschlussleiste ───────────────────────────────────
   Sagt immer, wohin der Abschluss führt — und warum
   er gesperrt ist, wenn er gesperrt ist.                */
.sv .sv-finish{ display: flex; gap: var(--sv-4); align-items: center; flex-wrap: wrap; padding: var(--sv-3) var(--sv-4); background: var(--sv-surface); border-top: 1px solid var(--sv-line); border-radius: 0 0 var(--sv-r-lg) var(--sv-r-lg); }
.sv .sv-finish__route{ flex: 1 1 280px; min-width: 0; }
.sv .sv-finish__label{ font-size: var(--sv-t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--sv-ink-3); font-weight: 600; }
.sv .sv-finish__to{ font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: var(--sv-2); flex-wrap: wrap; }
.sv .sv-finish__why{ font-size: var(--sv-t-sm); color: var(--sv-ink-2); margin-top: 3px; }

/* ── Aufgabenzeile ─────────────────────────────────── */
.sv .sv-task{ display: flex; gap: var(--sv-3); align-items: flex-start; padding: var(--sv-3); background: var(--sv-surface); border: 1px solid var(--sv-line-soft); border-radius: var(--sv-r-md); }
.sv .sv-task__box{ width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--sv-line); flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center; background: var(--sv-surface); }
.sv .sv-task.is-done .sv-task__box{ background: var(--sv-brand); border-color: var(--sv-brand); }
.sv .sv-task.is-done .sv-task__box::after{ content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
.sv .sv-task__title{ font-weight: 500; }
.sv .sv-task.is-done .sv-task__title{ color: var(--sv-ink-3); text-decoration: line-through; }
.sv .sv-task__meta{ display: flex; gap: var(--sv-2); flex-wrap: wrap; margin-top: var(--sv-2); align-items: center; }

/* ── Tabelle ───────────────────────────────────────── */
.sv .sv-tablewrap{ overflow-x: auto; border: 1px solid var(--sv-line-soft); border-radius: var(--sv-r-lg); background: var(--sv-surface); box-shadow: var(--sv-shadow); }
.sv .sv-table{ border-collapse: collapse; width: 100%; min-width: 640px; }
.sv .sv-table th{ text-align: left; font-size: var(--sv-t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--sv-ink-3); font-weight: 600; padding: var(--sv-3) var(--sv-4); border-bottom: 1px solid var(--sv-line-soft); white-space: nowrap; }
.sv .sv-table td{ padding: var(--sv-3) var(--sv-4); border-bottom: 1px solid var(--sv-line-soft); vertical-align: middle; }
.sv .sv-table tbody tr:last-child td{ border-bottom: 0; }
.sv .sv-table tbody tr:hover td{ background: var(--sv-surface-2); }

/* ── Leerzustand ───────────────────────────────────── */
.sv .sv-empty{ padding: var(--sv-6) var(--sv-5); text-align: center; color: var(--sv-ink-3); font-size: var(--sv-t-base); border: 1px dashed var(--sv-line); border-radius: var(--sv-r-lg); }
.sv .sv-empty strong{ display: block; color: var(--sv-ink-2); font-weight: 600; margin-bottom: var(--sv-1); }

/* ── Responsiv ─────────────────────────────────────── */
@media (max-width: 640px){
.sv .sv-field{ grid-template-columns: 1fr; gap: var(--sv-1); }
.sv .sv-finish{ flex-direction: column; align-items: stretch; }
.sv .sv-finish .sv-btn{ width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ARBEITSMAPPE — die Hülle, die alle 19 Phasen teilen
   ══════════════════════════════════════════════════════════════════════ */

.sv .sv-wb{ display: flex; flex-direction: column; gap: var(--sv-3); }

.sv .sv-wb__head{ padding-block: var(--sv-2) var(--sv-1); }
.sv .sv-wb__eyebrow{ font-size: var(--sv-t-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--sv-brand); font-weight: 600; }
.sv .sv-wb__name{ font-size: clamp(20px, 2.6vw, var(--sv-t-xl)); font-weight: 700; margin-top: var(--sv-1); }
.sv .sv-wb__sub{ display: flex; gap: var(--sv-2); flex-wrap: wrap; align-items: center; color: var(--sv-ink-2); margin-top: var(--sv-2); }

.sv .sv-wb__counts{ display: flex; gap: var(--sv-2); flex-wrap: wrap; }
.sv .sv-wb__sla-missing{ color: var(--sv-warn); font-weight: 600; }
.sv .sv-wb__sla-over{ color: var(--sv-crit); font-weight: 600; }

/* Kapitel als Schritte — Reihenfolge trägt Information */
.sv .sv-wb__steps{ display: flex; gap: var(--sv-2); overflow-x: auto; padding-bottom: var(--sv-1); }
.sv .sv-wb__step{
  flex: 1 1 180px; min-width: 168px; text-align: left;
  background: var(--sv-surface); border: 1px solid var(--sv-line-soft);
  border-radius: var(--sv-r-md); padding: var(--sv-3); box-shadow: var(--sv-shadow);
}
.sv .sv-wb__step[aria-current="step"]{ border-color: var(--sv-brand); box-shadow: 0 0 0 1px var(--sv-brand), var(--sv-shadow); }
.sv .sv-wb__step-n{
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sv-surface-3); color: var(--sv-ink-2);
  font-size: var(--sv-t-xs); font-weight: 700; margin-bottom: var(--sv-2);
}
.sv .sv-wb__step.is-done .sv-wb__step-n{ background: var(--sv-brand); color: #fff; }
.sv .sv-wb__step[aria-current="step"] .sv-wb__step-n{ background: var(--sv-accent); color: var(--sv-accent-ink); }
.sv .sv-wb__step-t{ display: block; font-weight: 600; line-height: var(--sv-lh-tight); }
.sv .sv-wb__step-c{ display: block; font-size: var(--sv-t-sm); color: var(--sv-ink-3); margin-top: 3px; }
.sv .sv-wb__step.has-flag .sv-wb__step-c{ color: var(--sv-warn); font-weight: 600; }

.sv .sv-wb__finishwrap{ padding: 0; overflow: hidden; }
.sv .sv-wb__finishwrap .sv-finish{ border-top: 0; border-radius: var(--sv-r-lg); }

/* Work Modes: gleiche Hülle, erkennbare Herkunft */
.sv .sv-wb[data-sv-mode="capture"]   .sv-wb__eyebrow{ color: var(--sv-accent-ink); }
.sv .sv-wb[data-sv-mode="execution"] .sv-wb__eyebrow{ color: var(--sv-warn); }
.sv .sv-wb[data-sv-mode="decision"]  .sv-wb__eyebrow{ color: var(--sv-ink-2); }

@media (prefers-color-scheme: dark){
.sv:not([data-sv-theme="light"]) .sv-wb[data-sv-mode="capture"] .sv-wb__eyebrow{ color: var(--sv-accent); }
}
.sv[data-sv-theme="dark"] .sv-wb[data-sv-mode="capture"] .sv-wb__eyebrow{ color: var(--sv-accent); }

/* ══════════════════════════════════════════════════════════════════════
   ANWENDUNGSRAHMEN
   Gilt auf der Portal-Seitenvorlage, die ohne Theme-Container rendert.
   Das Portal bestimmt seine Breite und seine Ränder dann selbst.
   ══════════════════════════════════════════════════════════════════════ */

body.solvigo-portal-page{ margin: 0; background: var(--sv-bg); }

.sv.sv-app{
  min-height: 100vh;
  padding-inline: clamp(16px, 3vw, 32px);
  padding-block: clamp(20px, 3vw, 34px) clamp(40px, 6vw, 72px);
  padding-top: calc(clamp(20px, 3vw, 34px) + env(safe-area-inset-top, 0px));
}

/* Datendichte Oberflaeche: breit, aber nicht grenzenlos.
   Jenseits von rund 1440 px reissen Zeilen zu weit auseinander. */
.sv.sv-app > *{ max-width: 1440px; margin-inline: auto; }

/* Angemeldet schiebt die WordPress-Adminleiste den Inhalt nach unten. */
.admin-bar .sv.sv-app{ padding-top: calc(clamp(20px, 3vw, 34px) + 32px); }
@media screen and (max-width: 782px){
  .admin-bar .sv.sv-app{ padding-top: calc(clamp(20px, 3vw, 34px) + 46px); }
}

/* Steht das Portal doch einmal in einer normalen Theme-Seite, soll es
   wenigstens die volle Breite des Containers nutzen. */
.sv:not(.sv-app){ width: 100%; }

/* Arbeitsmappe: Kapitelkarten sollen nicht ins Uferlose wachsen.
   Bei zwei Kapiteln wuerden sie sonst je 700 px breit. */
.sv .sv-wb__step{ max-width: 340px; }
.sv .sv-wb__steps{ justify-content: flex-start; }

/* Die Kennzahlenzeile trennt Zahl und Zaehler ueber die volle Breite.
   Auf breiten Schirmen wird der Abstand sonst zur Kluft. */
.sv .sv-wb__meter .sv-meter__top{ max-width: 980px; }

/* ══════════════════════════════════════════════════════════════════════
   WARTEZUSTAND
   Korrekturpunkte sind unterwegs. Das Projekt bleibt in dieser Phase —
   nur die Korrekturen wandern. Deshalb ein eigener, ruhiger Zustand:
   nicht rot wie ein Fehler, sondern sichtbar abwartend.
   ══════════════════════════════════════════════════════════════════════ */

.sv .sv-wait{
  background: var(--sv-warn-soft); border: 1px solid var(--sv-warn-line);
  border-radius: var(--sv-r-lg); overflow: hidden;
}
.sv .sv-wait__head{ padding: var(--sv-4); }
.sv .sv-wait__title{
  font-family: var(--sv-font-head); font-weight: 600; font-size: var(--sv-t-md);
  color: var(--sv-warn); display: flex; align-items: center; gap: var(--sv-2);
}
.sv .sv-wait__pulse{
  width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  flex: 0 0 auto; animation: sv-pulse 2.4s ease-in-out infinite;
}
@keyframes sv-pulse{ 0%,100%{ opacity: 1 } 50%{ opacity: .35 } }
@media (prefers-reduced-motion: reduce){ .sv .sv-wait__pulse{ animation: none } }
.sv .sv-wait__sub{ font-size: var(--sv-t-sm); color: var(--sv-ink-2); margin: var(--sv-2) 0 0; max-width: 62ch; line-height: 1.45; }
.sv .sv-wait__item{
  display: flex; gap: var(--sv-4); align-items: center; flex-wrap: wrap;
  padding: var(--sv-3) var(--sv-4);
  background: var(--sv-surface); border-top: 1px solid var(--sv-warn-line);
}
.sv .sv-wait__main{ flex: 1 1 260px; min-width: 0; }
.sv .sv-wait__what{ font-weight: 600; }
.sv .sv-wait__meta{ display: flex; gap: var(--sv-2); flex-wrap: wrap; margin-top: var(--sv-2); }
.sv .sv-wait__since{ font-family: var(--sv-font-head); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sv-ink-2); }
.sv .sv-wait__since.is-overdue{ color: var(--sv-crit); }

/* ══════════════════════════════════════════════════════════════════════
   PORTAL-HÜLLE
   ══════════════════════════════════════════════════════════════════════ */

/* ── App-Rahmen mit Modulleiste ──────────────────────────
   Die Leiste gehoert an den Fensterrand. Eine zentrierte 1440er
   Spalte laesst sie auf breiten Schirmen im Nichts haengen, mit
   totem Raum links daneben. Begrenzt wird der Inhalt, nicht der
   Rahmen: die Leiste steht aussen, der Inhalt bleibt lesbar.   */
.sv.sv-app:has( > .sv-shell){ padding: 0; }
.admin-bar .sv.sv-app:has( > .sv-shell){ padding: 0; }
.sv.sv-app > .sv-shell{ max-width: none; margin-inline: 0; }

.sv .sv-shell{
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 0; align-items: start; min-height: 100vh;
}
.sv .sv-shell__main{
  min-width: 0;
  padding-inline: clamp(16px, 3vw, 40px);
  padding-block: clamp(20px, 3vw, 34px) clamp(40px, 6vw, 72px);
}
/* Der Inhalt bleibt begrenzt: jenseits davon reissen Zeilen in
   einer datendichten Oberflaeche zu weit auseinander. */
.sv .sv-shell__main > *{ max-width: 1440px; margin-inline: auto; }

.sv .sv-rail-nav{
  background: var(--sv-surface);
  border: 0; border-right: 1px solid var(--sv-line-soft);
  border-radius: 0; box-shadow: none;
  padding: var(--sv-4) 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* Angemeldet haengt die WordPress-Adminleiste ueber allem. */
.admin-bar .sv .sv-rail-nav{ top: 32px; height: calc(100vh - 32px); }
@media screen and (max-width: 782px){
  .admin-bar .sv .sv-rail-nav{ top: 46px; height: calc(100vh - 46px); }
}
.sv .sv-rail-nav__brand{ display: flex; align-items: center; gap: var(--sv-2); padding: var(--sv-2) var(--sv-4) var(--sv-3); }
.sv .sv-mark{
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--sv-brand), var(--sv-brand-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.sv .sv-mark::after{ content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--sv-accent); }
.sv .sv-rail-nav__name{ display: block; font-family: var(--sv-font-head); font-weight: 700; letter-spacing: -.02em; }
.sv .sv-rail-nav__scope{ display: block; font-size: var(--sv-t-xs); color: var(--sv-ink-3); }

.sv .sv-rail-nav__role{
  margin: 0 var(--sv-3) var(--sv-3); padding: var(--sv-2) var(--sv-3);
  border-radius: var(--sv-r-md); background: var(--sv-brand-soft); border: 1px solid var(--sv-brand-line);
}
.sv .sv-rail-nav__role-label{ font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--sv-brand); font-weight: 600; }
.sv .sv-rail-nav__role-name{ font-family: var(--sv-font-head); font-weight: 600; font-size: var(--sv-t-sm); margin-top: 1px; }

.sv .sv-rail-nav__group{ padding: 0 var(--sv-3); }
.sv .sv-rail-nav__group-label{ font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--sv-ink-3); font-weight: 600; padding: var(--sv-3) var(--sv-2) var(--sv-1); }
.sv .sv-rail-nav__item{
  display: flex; align-items: center; gap: var(--sv-2); width: 100%;
  padding: 7px var(--sv-2); border-radius: var(--sv-r-sm);
  color: var(--sv-ink-2); font-size: var(--sv-t-sm); text-align: left;
  text-decoration: none;
}
.sv .sv-rail-nav__item:hover{ background: var(--sv-surface-2); color: var(--sv-ink); }
.sv .sv-rail-nav__item[aria-current="page"]{ background: var(--sv-brand); color: #fff; font-weight: 500; }
.sv .sv-rail-nav__count{
  margin-left: auto; font-size: var(--sv-t-xs); font-weight: 600;
  background: var(--sv-surface-2); color: var(--sv-ink-2);
  padding: 1px 6px; border-radius: var(--sv-r-pill); min-width: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sv .sv-rail-nav__count.is-alert{ background: var(--sv-crit-soft); color: var(--sv-crit); }
.sv .sv-rail-nav__item[aria-current="page"] .sv-rail-nav__count{ background: rgba(255,255,255,.2); color: #fff; }
.sv .sv-rail-nav__foot{ margin-top: auto; padding: var(--sv-3) var(--sv-4) var(--sv-1); border-top: 1px solid var(--sv-line-soft); display: flex; align-items: center; gap: var(--sv-2); }
.sv .sv-avatar{ width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--sv-surface-3); color: var(--sv-ink-2); font-size: var(--sv-t-xs); font-weight: 600; }
.sv .sv-rail-nav__user{ display: block; font-size: var(--sv-t-sm); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   LEITSTAND
   ══════════════════════════════════════════════════════════════════════ */

.sv .sv-board__head{ padding-block: var(--sv-1) var(--sv-4); }
.sv .sv-board__eyebrow{ font-size: var(--sv-t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--sv-brand); font-weight: 600; }
.sv .sv-board__title{ font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin-top: var(--sv-1); }
.sv .sv-board__lede{ color: var(--sv-ink-2); margin: var(--sv-2) 0 0; max-width: 68ch; }
.sv .sv-board__lede strong{ color: var(--sv-ink); font-weight: 600; }

/* Feste Spaltenzahl statt auto-fit: sonst bleibt bei vier Stufen und
   mittlerer Breite eine Kachel allein in der zweiten Reihe stehen. */
.sv .sv-triage{ display: grid; gap: var(--sv-3); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--sv-5); }
.sv .sv-tri{
  background: var(--sv-surface); border: 1px solid var(--sv-line-soft); border-top: 3px solid var(--sv-line);
  border-radius: var(--sv-r-lg); padding: var(--sv-3) var(--sv-4); box-shadow: var(--sv-shadow);
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
}
.sv .sv-tri:hover{ box-shadow: var(--sv-shadow-lift); }
.sv .sv-tri__n{ font-family: var(--sv-font-head); font-size: 31px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sv .sv-tri__label{ font-weight: 600; margin-top: var(--sv-1); }
.sv .sv-tri__note{ font-size: var(--sv-t-sm); color: var(--sv-ink-3); }
.sv .sv-tri--crit{ border-top-color: var(--sv-crit) } .sv .sv-tri--crit .sv-tri__n{ color: var(--sv-crit) }
.sv .sv-tri--warn{ border-top-color: var(--sv-warn) } .sv .sv-tri--warn .sv-tri__n{ color: var(--sv-warn) }
.sv .sv-tri--mine{ border-top-color: var(--sv-brand) } .sv .sv-tri--mine .sv-tri__n{ color: var(--sv-brand) }
.sv .sv-tri--due{ border-top-color: var(--sv-accent) }

.sv .sv-board__split{ display: grid; gap: var(--sv-5); grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: start; }
.sv .sv-board__group{ margin-bottom: var(--sv-5); scroll-margin-top: var(--sv-5); }
.sv .sv-board__group-head{ display: flex; align-items: baseline; gap: var(--sv-3); margin-bottom: var(--sv-3); flex-wrap: wrap; }
.sv .sv-board__group-title{ font-size: var(--sv-t-md); font-weight: 600; }
.sv .sv-board__group-note{ font-size: var(--sv-t-sm); color: var(--sv-ink-3); }
.sv .sv-board__rows{ display: flex; flex-direction: column; gap: var(--sv-2); }

.sv .sv-row{
  display: grid; grid-template-columns: 4px minmax(0,1fr) auto;
  background: var(--sv-surface); border: 1px solid var(--sv-line-soft);
  border-radius: var(--sv-r-md); overflow: hidden; text-align: left; width: 100%;
  box-shadow: var(--sv-shadow);
  color: inherit; text-decoration: none;
}
.sv .sv-row:hover{ border-color: var(--sv-brand); }
.sv .sv-row__stripe{ background: var(--sv-line); }
.sv .sv-row--crit .sv-row__stripe{ background: var(--sv-crit) }
.sv .sv-row--warn .sv-row__stripe{ background: var(--sv-warn) }
.sv .sv-row--mine .sv-row__stripe{ background: var(--sv-brand) }
.sv .sv-row--due  .sv-row__stripe{ background: var(--sv-accent) }
.sv .sv-row__body{ padding: var(--sv-3) var(--sv-4); min-width: 0; }
.sv .sv-row__top{ display: flex; align-items: center; gap: var(--sv-2); flex-wrap: wrap; }
.sv .sv-row__customer{ font-weight: 600; }
.sv .sv-row__id{ font-size: var(--sv-t-sm); color: var(--sv-ink-3); }
.sv .sv-row__what{ display: block; color: var(--sv-ink-2); margin-top: 3px; font-size: var(--sv-t-sm); }
.sv .sv-row__meta{ display: flex; gap: var(--sv-2); flex-wrap: wrap; margin-top: var(--sv-2); align-items: center; }
.sv .sv-row__side{
  padding: var(--sv-3) var(--sv-4); display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 2px;
  border-left: 1px solid var(--sv-line-soft); min-width: 104px;
}
.sv .sv-row__age{ font-family: var(--sv-font-head); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv .sv-row--crit .sv-row__age, .sv .sv-row--warn .sv-row__age{ color: var(--sv-crit); }
.sv .sv-row__age-note{ font-size: var(--sv-t-xs); color: var(--sv-ink-3); white-space: nowrap; }

.sv .sv-panel__lede{ font-size: var(--sv-t-sm); color: var(--sv-ink-3); margin: 0 0 var(--sv-3); }
.sv .sv-dist{ display: flex; flex-direction: column; gap: var(--sv-2); }
.sv .sv-dist__row{ display: grid; grid-template-columns: minmax(0,1fr) 34px; gap: var(--sv-2); align-items: center; }
.sv .sv-dist__bar{ position: relative; height: 25px; border-radius: 6px; background: var(--sv-surface-2); overflow: hidden; }
.sv .sv-dist__fill{ position: absolute; inset: 0 auto 0 0; background: var(--sv-brand); opacity: .9; border-radius: 6px; }
.sv .sv-dist__row.is-stuck .sv-dist__fill{ background: var(--sv-crit); }
.sv .sv-dist__name{ position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--sv-2); font-size: var(--sv-t-sm); font-weight: 500; }
.sv .sv-dist__n{ font-family: var(--sv-font-head); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--sv-ink-2); }
.sv .sv-dist__row.is-stuck .sv-dist__n{ color: var(--sv-crit); }

@media (max-width: 1080px){
  .sv .sv-board__split{ grid-template-columns: 1fr; }
  .sv .sv-triage{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .sv .sv-shell{ grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .sv .sv-rail-nav{
    position: sticky; top: 0; height: auto; overflow-y: visible;
    flex-direction: row; align-items: center; overflow-x: auto;
    padding: var(--sv-2) var(--sv-3); gap: var(--sv-1);
    border-right: 0; border-bottom: 1px solid var(--sv-line-soft);
    z-index: 2;
  }
  .admin-bar .sv .sv-rail-nav{ height: auto; }
  .sv .sv-rail-nav__brand{ padding: 0 var(--sv-2) 0 0; flex: 0 0 auto; }
  .sv .sv-rail-nav__role, .sv .sv-rail-nav__group-label, .sv .sv-rail-nav__foot{ display: none; }
  .sv .sv-rail-nav__group{ display: flex; gap: var(--sv-1); padding: 0; }
  .sv .sv-rail-nav__item{ width: auto; white-space: nowrap; }
  /* Vier volle Kacheln schieben die eigentliche Liste vom Schirm.
     Zu zweit bleibt der Einstieg sichtbar. */
  .sv .sv-triage{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-2); margin-bottom: var(--sv-4); }
  .sv .sv-tri{ padding: var(--sv-2) var(--sv-3); }
  .sv .sv-tri__note{ display: none; }
  .sv .sv-row{ grid-template-columns: 4px minmax(0,1fr); }
  .sv .sv-row__side{ grid-column: 2; border-left: 0; border-top: 1px solid var(--sv-line-soft); flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--sv-2); padding: var(--sv-2) var(--sv-4); }
}