/* ============================================================
   JustClose · Dashboard Component Styles
   Depends on tokens.css. Self-contained — no other component
   styles required. Class names are the contract.
   ============================================================ */

/* ----- App shell (skeleton, just so the dashboard has a frame) ----- */

.app-shell {
  background: #F4F4F2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.app-shell__pane {
  background: var(--c-white);
  border-left: 1px solid var(--c-border-soft);
  overflow-y: auto;
}

/* ----- Sticky pane head (used above the dashboard) ----- */

.pane-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border-soft);
  padding: 18px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
}
.pane-head__l { display: flex; flex-direction: column; gap: 4px; }
.pane-head__kicker {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-text-hint); font-weight: 600;
}
.pane-head__title {
  font-family: var(--ff-hero);
  font-size: 22px; font-weight: 500; letter-spacing: -.02em;
  color: var(--c-text-strong);
  margin: 0;
}
.pane-head__r { display: flex; gap: 12px; align-items: center; }

/* Skills-Repo-Hash-Badge (jc-fulfillment-skills HEAD). Liefert dem User
   einen schnellen Blick auf den aktuellen Repo-Stand. Tooltip
   (`title`-Attribut) zeigt sha + Datum + Remote-URL. */
.pane-head__skills-repo {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--c-text-soft, #6b7280);
  font-family: inherit;
  cursor: help;
}
.pane-head__skills-repo-label {
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.pane-head__skills-repo-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 2px 6px;
  background: var(--c-surface-2, #f3f4f6); border-radius: 4px;
  color: var(--c-text-strong, #111);
}

.crumb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--c-highlight-bg); color: var(--c-blue);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.crumb:hover { background: #d4e5ff; }

/* ============================================================
   DASHBOARD
   ============================================================ */

.dash { padding: 28px 32px 48px; }

/* ----- Hero intro ----- */

.dash__intro {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
  margin-bottom: 28px;
}
.dash__intro h1 {
  font-family: var(--ff-hero);
  font-size: 36px; font-weight: 500; letter-spacing: -.028em; line-height: 1.08;
  color: var(--c-text-strong);
  margin: 0 0 12px;
}
.dash__intro .lead {
  font-size: 15px; line-height: 1.55; color: var(--c-text);
  margin: 0; max-width: 520px;
}
.dash__intro .cust {
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: 12px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.dash__intro .cust .lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-hint); font-weight: 600; }
.dash__intro .cust .name { font-family: var(--ff-hero); font-size: 18px; font-weight: 500; letter-spacing: -.015em; color: var(--c-text-strong); }
.dash__intro .cust .sub { font-size: 13px; color: var(--c-text-muted); }
.dash__intro .cust .row { display: flex; gap: 16px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--c-border-soft); }
.dash__intro .cust .row .c { flex: 1; }
.dash__intro .cust .row .c .l { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-hint); font-weight: 600; margin-bottom: 3px; }
.dash__intro .cust .row .c .v { font-size: 13px; font-weight: 600; color: var(--c-text-strong); }


.sec__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 8px 0 14px;
}
.sec__title {
  font-family: var(--ff-hero);
  font-size: 18px; font-weight: 500; letter-spacing: -.015em;
  color: var(--c-text-strong);
  margin: 0;
}
.sec__sub { font-size: 12px; color: var(--c-text-hint); }

.pcard {
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: 12px;
  padding: 20px 22px 18px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; font: inherit; color: inherit;
}
.pcard:hover { border-color: var(--c-blue); box-shadow: 0 6px 20px rgba(77,151,254,.08); }
.pcard--active { border-color: var(--c-blue); box-shadow: inset 0 0 0 1px var(--c-blue); }
.pcard--locked { opacity: .7; cursor: default; }
.pcard--locked:hover { border-color: var(--c-border-soft); box-shadow: none; }

.pcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard__num {
  font-family: var(--ff-hero);
  font-size: 28px; font-weight: 400; letter-spacing: -.03em;
  color: var(--c-blue); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pcard--locked .pcard__num { color: #b0aea6; }
.pcard--done .pcard__num { color: var(--c-blue); }

.pcard__title { font-family: var(--ff-hero); font-size: 17px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.pcard__goal { font-size: 13px; line-height: 1.5; color: var(--c-text-muted); margin: 2px 0 6px; }

.pcard__skills { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--c-border-soft); padding-top: 10px; }
.pcard__skill { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 12.5px; }
.pcard__skill .n {
  color: var(--c-text-strong); font-weight: 500;
  /* min-width:0 erlaubt dem 1fr-Grid-Item zu schrumpfen, damit das Label
     per Ellipsis kürzen kann, statt die Karte zu sprengen. */
  min-width: 0;
  /* flex-wrap (E2E-Befund #453): Name, Artefakt-Symbole, Score und Chat teilten sich
     bisher zwingend EINE Zeile — bei vielen Artefakten wurde der Name gekuerzt
     („Success-Sheet Analy…"). Jetzt brechen die Symbole in eine zweite Zeile um,
     der Name behaelt seine volle Breite. Die Ellipsis bleibt als letzte Rettung fuer
     Namen, die allein schon breiter sind als die Karte. */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px;
}
/* Wrapper trägt den Tooltip (kein overflow:hidden, sonst würde er
   abgeschnitten). Der innere .pcard__skill-name kürzt per Ellipsis. */
.pcard__skill-label {
  position: relative;
  min-width: 0; flex: 0 1 auto;
  display: inline-flex;
}
.pcard__skill-name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Icons (Artefakt, Score, Chat, Reset, Video) bleiben immer voll sichtbar —
   nur das Namens-Label wird gekürzt. */
.pcard__skill .n > :not(.pcard__skill-label) { flex: 0 0 auto; }

/* Statuszeile der Skill-Zeile (E2E-Befund #453): „wird gestartet (bis zu 1 Min.) · Du
   kannst die Seite verlassen", „arbeitet seit m:ss" und das Fehler-Badge tragen ganze
   Saetze. Inline neben dem Namen schoben sie sich unter den „STARTET…"-Knopf der
   Tail-Spalte und verdeckten den Skill-Namen. Sie bekommen deshalb eine EIGENE Zeile
   unter dem Namen: order:2 haengt sie hinter Name und Symbole, flex-basis:100% erzwingt
   den Umbruch. Damit beanspruchen Badge und Pille nie dieselbe Flaeche — gilt fuer
   Dashboard-Karte und Drawer gleichermassen, weil beide dieselbe SkillRow rendern. */
.pcard__skill .n > .pcard__skill-status {
  order: 2;
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}
/* Im Wrapper braucht die Pille keinen eigenen Abstand mehr — der Umbruch macht ihn. */
.pcard__skill-status > .pcard__skill-busy,
.pcard__skill-status > .pcard__skill-failed { margin-left: 0; }
/* Hover-Tooltip mit dem vollen Namen, direkt über dem gekürzten Text.
   Nur wenn das Label tatsächlich abgeschnitten ist (is-truncated). */
.pcard__skill-label.is-truncated:hover::after {
  content: attr(data-fullname);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  white-space: nowrap;
  background: var(--c-text-strong);
  color: #fff;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px; font-weight: 500; line-height: 1.3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .20);
  pointer-events: none;
}
.pcard__skill .kind {
  font-size: 9.5px; letter-spacing: .10em; text-transform: uppercase; font-weight: 600;
  padding: 2px 7px; border-radius: 3px;
  background: var(--c-neutral-bg); color: var(--c-text-hint);
}

/* Nächster zu startender Skill — subtile Hervorhebung der Zeile */
.pcard__skill--next {
  background: var(--c-highlight-bg);
  border-radius: 6px;
  margin: 0 -8px;
  padding: 5px 8px;
}

/* Tail-Container der Skill-Zeile (3. Grid-Spalte): hält den optionalen
   „Starten"-Button und das Kind-Badge nebeneinander. Status-Icon bleibt
   weiterhin links in der 1. Grid-Spalte. */
.pcard__skill-tail {
  display: inline-flex; align-items: center; gap: 6px;
}

/* Inline-Start-Button (Issue #129) — gut sichtbarer „Starten"-Button links
   vom Kind-Badge. Echot die Maße des .kind-Badges, aber blau/weiß und
   klickbar, damit der nächste fällige Skill prominent startbar ist. */
.pcard__skill-start {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; letter-spacing: .10em; text-transform: uppercase; font-weight: 700;
  padding: 2px 8px; border-radius: 3px;
  background: var(--c-blue); color: var(--c-white);
  border: none; cursor: pointer;
  font-family: inherit; line-height: 1.5;
  transition: background 0.12s;
}
.pcard__skill-start__icon { font-size: 7px; line-height: 1; }
.pcard__skill-start:hover,
.pcard__skill-start:focus-visible {
  background: #2272d0;
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

/* Start abgeschickt, serverseitig noch nicht sichtbar (#251). Der Zustandswechsel dauert
   real ~15 s — ohne sofortige Rückmeldung klickt der Nutzer mehrfach. Der Button bleibt
   sichtbar an derselben Stelle (kein Layout-Sprung), nimmt aber keine Klicks mehr an. */
.pcard__skill-start--busy,
.pcard__skill-start[aria-disabled="true"] {
  background: var(--c-text-hint, #94a3b8);
  cursor: default;
}
/* Hover faerbt nicht mehr — der Fokusring bleibt aber sichtbar: der Button behaelt bewusst
   den Fokus (aria-disabled statt disabled), damit Tastaturnutzer ihre Position nicht verlieren. */
.pcard__skill-start--busy:hover { background: var(--c-text-hint, #94a3b8); }
/* Kontingent leer (#502): gesperrt wie busy, aber ohne Animation und mit Verbots-Cursor. */
.pcard__skill-start--locked,
.pcard__skill-start--locked:hover { background: var(--c-text-hint, #94a3b8); cursor: not-allowed; }
.pcard__skill-start--busy .pcard__skill-start__icon {
  display: inline-block;
  animation: wv-start-spin 1s linear infinite;
}
@keyframes wv-start-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pcard__skill-start--busy .pcard__skill-start__icon { animation: none; }
}

/* Inline-Fortsetzen-Button (Issue #139) — ersetzt das 💬-Icon für laufende
   Coach-Skills; gleiche Maße wie .pcard__skill-start, aber orange/amber. */
.pcard__skill-resume {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; letter-spacing: .10em; text-transform: uppercase; font-weight: 700;
  padding: 2px 8px; border-radius: 3px;
  background: var(--c-pending-dot, #f59e0b); color: var(--c-white);
  border: none; cursor: pointer;
  font-family: inherit; line-height: 1.5;
  transition: background 0.12s;
}
.pcard__skill-resume:hover,
.pcard__skill-resume:focus-visible {
  background: #d97706;
  outline: 2px solid var(--c-pending-dot, #f59e0b);
  outline-offset: 2px;
}

.pcard__gate {
  margin-top: 2px;
  /* flex-wrap seit #532: die dauerhafte Aufforderungs-Liste (.pcard__gate-todo) belegt
     eine eigene zweite Zeile unter Label und Knöpfen. */
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; border-radius: 8px;
  background: var(--c-neutral-bg);
  font-size: 12px;
  position: relative;
}

/* ----- Dauerhafte Aufforderung in der Freigabe-Zeile (#532) -----
   Sagt ohne Klick auf das Warndreieck, WAS zu tun ist. Enthält nur die offenen
   Punkte; die vollständige Liste (auch die erfüllten Checks) bleibt im
   aufklappbaren .pcard__gate-info. */
.pcard__gate-todo {
  flex: 0 0 100%;
  margin: 0;
  text-align: left;
}
.pcard__gate-todo__intro {
  margin: 0 0 4px;
  font-size: 12px; line-height: 1.4; font-weight: 600;
  color: var(--c-text-strong);
}
.pcard__gate-todo__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.pcard__gate-todo__item {
  position: relative;
  padding-left: 14px;
  font-size: 12px; line-height: 1.4;
  color: var(--c-text, inherit);
}
/* #547: Der Punktestand-Hinweis ist ein ganzer Satz mit Namen aus der Prozessdefinition.
   Lange Namen brechen um, statt die Karte breiter zu ziehen (min-width: 0 am Flex-Kind,
   overflow-wrap fuer Namen ohne Leerzeichen). */
.pcard__gate-todo { min-width: 0; }
.pcard__gate-todo__item { overflow-wrap: anywhere; }
.pcard__gate-todo__num { font-weight: 700; color: var(--c-text-strong); }
.pcard__gate-todo__reason { font-style: italic; }
.pcard__gate-todo__link {
  color: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.pcard__gate-todo__link:hover,
.pcard__gate-todo__link:focus-visible { text-decoration-thickness: 2px; }
.pcard__gate-todo__item::before {
  content: "";
  position: absolute; left: 3px; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-pending-dot, #f59e0b);
}
.pcard__gate .l { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-hint); font-weight: 600; }
.pcard__gate .t { color: var(--c-text-strong); font-weight: 600; flex: 1; }
.pcard--active .pcard__gate { background: var(--c-pending-bg); }
.pcard--active .pcard__gate .t { color: var(--c-pending-fg); }
.pcard--done .pcard__gate { background: var(--c-highlight-bg); }
.pcard--done .pcard__gate .t { color: var(--c-blue); }

.pcard__gate-cta {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-pending-strong);
}

/* ----- Gate Warning Button (Issue #113) ----- */
.pcard__gate-warn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: none; border-radius: 4px;
  background: transparent; cursor: pointer; flex-shrink: 0;
  color: var(--c-pending-dot);
  transition: background 0.15s;
}
.pcard__gate-warn-btn:hover { background: rgba(240,180,41,0.15); }
.pcard__gate-warn-btn:focus-visible { outline: 2px solid var(--c-pending-dot); outline-offset: 1px; }

/* ----- Gate Info Modal (Issue #113) ----- */
.pcard__gate-info {
  position: absolute; z-index: 10;
  background: #fff; border: 1px solid #e2e0d8; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 240px; max-width: 320px;
  padding: 0; overflow: hidden;
  bottom: calc(100% + 6px); left: 0;
}
.pcard__gate-info__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--c-pending-bg);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-pending-fg);
}
.pcard__gate-info__close {
  border: none; background: transparent; cursor: pointer; padding: 0 2px;
  font-size: 13px; color: var(--c-pending-fg); line-height: 1;
}
.pcard__gate-info__list {
  list-style: none; margin: 0; padding: 6px 0;
}
.pcard__gate-info__item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 10px; font-size: 12px; line-height: 1.4;
}
.pcard__gate-info__icon {
  font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.pcard__gate-info__item--ok { color: #1a6e3c; }
.pcard__gate-info__item--ok .pcard__gate-info__icon { color: #27ae60; }
.pcard__gate-info__item--fail { color: #8b1a1a; }
.pcard__gate-info__item--fail .pcard__gate-info__icon { color: #c0392b; }

/* ----- Badge (used inside pcard head) ----- */

.badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
}
.badge--active { background: var(--c-pending-bg); color: var(--c-pending-fg); }
.badge--done   { background: var(--c-highlight-bg); color: var(--c-blue); }
.badge--locked { background: #F4F4F2; color: #b0aea6; }

/* ----- Status icon (used inside pcard__skill) ----- */

.status-icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   DARK-THEME-DURCHGANG (portal-dark)
   Nur Farben/Flaechen/Radien — Layout, DOM und Vue-Templates
   bleiben unangetastet. Alles unter dem data-theme-Selektor,
   damit artifact.html/operator.html hell bleiben.
   ============================================================ */

[data-theme="portal-dark"] .app-shell { background: var(--c-bg); }
[data-theme="portal-dark"] .app-shell__pane {
  background: transparent;
  border-left: 1px solid var(--c-surface-border);
}

/* ----- Pane-Head ----- */
[data-theme="portal-dark"] .pane-head {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-surface-border);
  border-radius: var(--r-inner);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
}
[data-theme="portal-dark"] .pane-head__kicker { color: var(--c-text-hint); }
[data-theme="portal-dark"] .pane-head__title { color: var(--c-text); }
[data-theme="portal-dark"] .pane-head__skills-repo { color: var(--c-text-muted); }
[data-theme="portal-dark"] .pane-head__skills-repo-sha {
  background: var(--c-surface-2);
  color: var(--c-text);
}

[data-theme="portal-dark"] .crumb {
  background: var(--c-highlight-bg);
  color: var(--c-accent);
  border: 1px solid var(--c-surface-border);
}
[data-theme="portal-dark"] .crumb:hover { background: rgba(64, 229, 196, .20); }

/* ----- Hero-Intro / Kundenkarte ----- */
[data-theme="portal-dark"] .dash__intro h1 { color: var(--c-text); }
[data-theme="portal-dark"] .dash__intro .lead { color: var(--c-text-muted); }
[data-theme="portal-dark"] .dash__intro .cust {
  background: var(--c-surface);
  border: 1px solid var(--c-surface-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
}
[data-theme="portal-dark"] .dash__intro .cust .lbl,
[data-theme="portal-dark"] .dash__intro .cust .row .c .l { color: var(--c-text-hint); }
[data-theme="portal-dark"] .dash__intro .cust .name { color: var(--c-text); }
[data-theme="portal-dark"] .dash__intro .cust .sub { color: var(--c-text-muted); }
[data-theme="portal-dark"] .dash__intro .cust .row { border-top: 1px solid var(--c-surface-border); }
[data-theme="portal-dark"] .dash__intro .cust .row .c .v { color: var(--c-text); }

/* ----- Abschnittsueberschriften ----- */
[data-theme="portal-dark"] .sec__title { color: var(--c-text); }
[data-theme="portal-dark"] .sec__sub { color: var(--c-text-hint); }

/* ----- Phasen-Karten ----- */
[data-theme="portal-dark"] .pcard {
  background: var(--c-surface);
  border: 1px solid var(--c-surface-border);
  border-radius: var(--r-card);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
}
[data-theme="portal-dark"] .pcard:hover {
  border-color: var(--c-border-accent);
  box-shadow: var(--shadow-card), 0 0 24px rgba(64, 229, 196, .12);
}
[data-theme="portal-dark"] .pcard--active {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(64, 229, 196, .45);
}
[data-theme="portal-dark"] .pcard--locked { opacity: .55; }
[data-theme="portal-dark"] .pcard--locked:hover {
  border-color: var(--c-surface-border);
  box-shadow: var(--shadow-card);
}
[data-theme="portal-dark"] .pcard__num { color: var(--c-accent); }
[data-theme="portal-dark"] .pcard--locked .pcard__num { color: var(--c-text-faint); }
[data-theme="portal-dark"] .pcard--done .pcard__num { color: var(--c-status-done); }
[data-theme="portal-dark"] .pcard__title { color: var(--c-text); }
[data-theme="portal-dark"] .pcard__goal { color: var(--c-text-muted); }

[data-theme="portal-dark"] .pcard__skills { border-top: 1px solid var(--c-surface-border); }
[data-theme="portal-dark"] .pcard__skill .n { color: var(--c-text); }
[data-theme="portal-dark"] .pcard__skill-label.is-truncated:hover::after {
  background: #10202A;
  color: var(--c-text);
  border: 1px solid var(--c-surface-border);
  box-shadow: var(--shadow-md);
}
[data-theme="portal-dark"] .pcard__skill .kind {
  background: var(--c-surface-2);
  color: var(--c-text-hint);
  border-radius: var(--r-pill);
}
[data-theme="portal-dark"] .pcard__skill--next { background: var(--c-highlight-bg); }

[data-theme="portal-dark"] .pcard__skill-start {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--r-pill);
}
[data-theme="portal-dark"] .pcard__skill-start:hover,
[data-theme="portal-dark"] .pcard__skill-start:focus-visible {
  background: var(--c-accent-soft);
  outline-color: var(--c-accent);
}
[data-theme="portal-dark"] .pcard__skill-start--busy,
[data-theme="portal-dark"] .pcard__skill-start[aria-disabled="true"],
[data-theme="portal-dark"] .pcard__skill-start--busy:hover {
  background: rgba(255, 255, 255, .14);
  color: var(--c-text-muted);
}
[data-theme="portal-dark"] .pcard__skill-resume {
  background: var(--c-status-progress);
  color: #2A1B00;
  border-radius: var(--r-pill);
}
[data-theme="portal-dark"] .pcard__skill-resume:hover,
[data-theme="portal-dark"] .pcard__skill-resume:focus-visible {
  background: #FFCB6B;
  outline-color: var(--c-status-progress);
}

[data-theme="portal-dark"] .pcard__gate {
  background: var(--c-surface-2);
  border-radius: var(--r-inner);
}
[data-theme="portal-dark"] .pcard__gate .l { color: var(--c-text-hint); }
[data-theme="portal-dark"] .pcard__gate .t { color: var(--c-text); }
[data-theme="portal-dark"] .pcard--active .pcard__gate { background: var(--c-status-progress-bg); }
[data-theme="portal-dark"] .pcard--active .pcard__gate .t { color: var(--c-status-progress); }
[data-theme="portal-dark"] .pcard--done .pcard__gate { background: var(--c-status-done-bg); }
[data-theme="portal-dark"] .pcard--done .pcard__gate .t { color: var(--c-status-done); }
[data-theme="portal-dark"] .pcard__gate-cta { color: var(--c-status-progress); }

[data-theme="portal-dark"] .pcard__gate-warn-btn { color: var(--c-status-progress); }
[data-theme="portal-dark"] .pcard__gate-warn-btn:hover { background: rgba(245, 181, 68, .16); }
[data-theme="portal-dark"] .pcard__gate-warn-btn:focus-visible { outline-color: var(--c-status-progress); }

[data-theme="portal-dark"] .pcard__gate-info {
  background: #10202A;
  border: 1px solid var(--c-surface-border);
  border-radius: var(--r-inner);
  box-shadow: var(--shadow-lg);
  color: var(--c-text);
}
[data-theme="portal-dark"] .pcard__gate-info__header {
  background: var(--c-status-progress-bg);
  color: var(--c-status-progress);
}
[data-theme="portal-dark"] .pcard__gate-info__close { color: var(--c-status-progress); }
[data-theme="portal-dark"] .pcard__gate-info__item--ok { color: var(--c-status-done); }
[data-theme="portal-dark"] .pcard__gate-info__item--ok .pcard__gate-info__icon { color: var(--c-status-done); }
[data-theme="portal-dark"] .pcard__gate-info__item--fail { color: var(--c-status-warning); }
[data-theme="portal-dark"] .pcard__gate-info__item--fail .pcard__gate-info__icon { color: var(--c-status-warning); }
/* #532: Aufforderungs-Liste im dunklen Schema — gleiche Lesbarkeit wie die Checks. */
[data-theme="portal-dark"] .pcard__gate-todo__intro { color: var(--c-text); }
[data-theme="portal-dark"] .pcard__gate-todo__item { color: var(--c-text); }
[data-theme="portal-dark"] .pcard__gate-todo__item::before { background: var(--c-status-progress); }
[data-theme="portal-dark"] .pcard__gate-todo__num { color: var(--c-text); }
[data-theme="portal-dark"] .pcard__gate-todo__link { color: var(--c-accent); }

/* ----- Badges ----- */
[data-theme="portal-dark"] .badge--active { background: var(--c-status-progress-bg); color: var(--c-status-progress); }
[data-theme="portal-dark"] .badge--done   { background: var(--c-status-done-bg);     color: var(--c-status-done); }
[data-theme="portal-dark"] .badge--locked { background: rgba(255, 255, 255, .06);    color: var(--c-text-faint); }

/* ----- Bewegung aus, Endzustand sichtbar ----- */
@media (prefers-reduced-motion: reduce) {
  .pcard { transition: none; }
}

/* ============================================================
   HEADER P2 (#453) — Begruessung, Datum/Phase, Status-Chip
   Ersetzt den sticky pane-head und die Kundenkarte im Hero.
   ============================================================ */

.dash__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.dash__header-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash__greeting {
  font-family: var(--ff-hero);
  font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  margin: 0;
  color: var(--c-text-strong);
}
.dash__subline { font-size: 13.5px; color: var(--c-text-muted); }
.dash__status {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--c-text-muted);
  background: var(--c-neutral-bg);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  padding: 9px 16px;
}
.dash__status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-blue);
  flex-shrink: 0;
}

/* Dark-Durchgang */
[data-theme="portal-dark"] .dash { padding: 0 0 8px; }
[data-theme="portal-dark"] .dash__greeting { color: var(--c-text); }
[data-theme="portal-dark"] .dash__subline { color: var(--c-text-muted); }
[data-theme="portal-dark"] .dash__status {
  color: var(--c-text-muted);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--c-surface-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="portal-dark"] .dash__status-dot {
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(64, 229, 196, .7);
}
[data-theme="portal-dark"] .dash__status--busy .dash__status-dot {
  background: var(--c-status-progress);
  box-shadow: 0 0 10px rgba(245, 181, 68, .7);
}
/* Der Hero besteht nach dem Wegfall der Kundenkarte nur noch aus dem Lead-Absatz. */
[data-theme="portal-dark"] .dash__intro {
  display: block;
  margin-bottom: 22px;
}

/* ============================================================
   P3 (#453) — Kacheln: Fokus heute, Fortschritts-Donut,
   Ausblick, Reise-Liste, aktive Phase
   ------------------------------------------------------------
   Struktur (Grid, Maße) steht ungebunden, die Flächen/Farben
   kommen aus dem Dark-Durchgang weiter unten. Das Dashboard
   wird ausschliesslich in index.html gerendert, also immer mit
   data-theme="portal-dark"; die ungebundenen Regeln sind reine
   Layout-Grundlage, kein zweites Farbschema.
   ============================================================ */

.kpi-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
  min-width: 0;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  min-width: 0;
}
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
}

.card {
  border-radius: 26px;
  padding: 26px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.card--donut { align-items: center; justify-content: center; padding: 24px; }
.card--outlook { padding: 20px 22px 22px; position: relative; }
.card__spacer { flex: 1; }
.card__eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.card__title { font-size: 15.5px; font-weight: 700; margin: 0; }
.card__hint { font-size: 12px; }
.card--empty { font-size: 13.5px; padding: 26px; }

/* ----- Karte 1: Fokus heute ----- */
.focus__title {
  font-size: 22px; font-weight: 700; margin-top: 12px;
  line-height: 1.3; letter-spacing: -.01em;
}
.focus__sub { font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; overflow-wrap: anywhere; }
.focus__foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.focus__bar { flex: 1; height: 7px; border-radius: 99px; overflow: hidden; min-width: 40px; }
.focus__bar-fill { height: 100%; border-radius: 99px; }
.focus__count { font-size: 12.5px; font-weight: 700; flex-shrink: 0; }

/* Huelle des primaeren CTA (P7, #453). Traegt data-testid/data-kind und den
   Klick-Listener; darin liegt entweder die vendored WebGL-Komponente
   <induction-button> oder — ohne Custom Element bzw. ohne WebGL — die CSS-Pille
   darunter. Die Huelle hat KEINE eigene Optik, nur Groesse und Zustand. */
.cta-host { display: inline-flex; flex-shrink: 0; line-height: 0; }
.cta-host--fill { display: flex; width: 100%; }
.cta-host--fill .cta-primary { width: 100%; }
.cta-host induction-button { display: inline-block; }
/* Deaktiviert: gedaempft und nicht anklickbar. Der Klick-Waechter in PrimaryCta
   haelt zusaetzlich den Emit an — pointer-events allein waere per DevTools
   oder synthetischem Klick umgehbar. */
.cta-host.is-disabled { pointer-events: none; opacity: .5; }

/* Der eine primäre CTA. CSS-Fallback für den spaeteren WebGL-Button
   (<induction-button> im Zielbild): dunkle Pille, heller Text, pulsierender
   Bogen-Glow. Wird der WebGL-Button eingesetzt, ersetzt er das Innere
   dieser Pille — Groesse und Position bleiben. */
.cta-primary {
  flex-shrink: 0;
  min-width: 190px; height: 50px;
  border: none;
  border-radius: 999px;
  background: #05171A;
  color: #DCFDF4;
  font-family: inherit;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.34, 1.4, .5, 1);
  animation: ctaArc 3.2s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(64, 229, 196, .55), 0 1px 4px rgba(0, 0, 0, .8);
}
.cta-primary:hover { transform: translateY(-2px); }
.cta-primary:active { transform: translateY(1px) scale(.99); }
.cta-primary:focus-visible { outline: 2px solid rgba(64, 229, 196, .8); outline-offset: 3px; }
.cta-primary:disabled,
.cta-primary[aria-disabled="true"] {
  cursor: default;
  animation: none;
  opacity: .6;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
  transform: none;
}
@keyframes ctaArc {
  0%   { box-shadow: 0 0 0 1px rgba(64, 229, 196, .55), 0 0 18px 2px rgba(64, 229, 196, .35), 0 0 40px 6px rgba(47, 140, 232, .18); }
  50%  { box-shadow: 0 0 0 1px rgba(138, 242, 220, .9), 0 0 26px 4px rgba(64, 229, 196, .55), 0 0 56px 10px rgba(47, 140, 232, .28); }
  100% { box-shadow: 0 0 0 1px rgba(64, 229, 196, .55), 0 0 18px 2px rgba(64, 229, 196, .35), 0 0 40px 6px rgba(47, 140, 232, .18); }
}

/* ----- Karte 2: Fortschritts-Donut ----- */
.donut { position: relative; width: 110px; height: 110px; }
.donut__svg { transform: rotate(-90deg); }
.donut__value { animation: ringIn 1.6s .3s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ringIn {
  from { stroke-dashoffset: 301; }
  to   { stroke-dashoffset: var(--ring-off, 0); }
}
.donut__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut__pct { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.donut__label { font-size: 10px; letter-spacing: .1em; }
.donut__caption { font-size: 13px; font-weight: 700; margin-top: 14px; }
.donut__detail { font-size: 12px; margin-top: 3px; }

/* ----- Karte 3: Ausblick — animierte Motiv-Bühne ----- */
.motif {
  position: relative;
  height: 104px;
  border-radius: 16px;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, white 0%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 50%, white 0%, transparent 100%);
}
.motif__row {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.motif__node {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: iconWave 4.5s infinite;
}
.motif__beam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  animation: beamMove 5s linear infinite;
}
.motif__spark {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  animation: twinkle 2.6s .2s infinite;
}
.motif__spark--b { animation-duration: 3.1s; animation-delay: .9s; }
@keyframes beamMove { 0% { transform: translateX(-120px); } 100% { transform: translateX(120px); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes iconWave {
  0%, 100% { transform: translateY(0) scale(1); }
  8%   { transform: translateY(-4px) scale(1.1); }
  16%  { transform: translateY(0) scale(1); }
}
.outlook__title { font-size: 15px; font-weight: 700; margin-top: 4px; }
.outlook__goal { font-size: 12.5px; line-height: 1.5; margin: 5px 0 0; }
.outlook__lock {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; font-size: 12px; font-weight: 600;
}

/* ----- Reihe 2 links: Deine Reise ----- */
.journey { display: flex; flex-direction: column; }
.journey__row {
  display: flex; gap: 16px;
  border: none; background: transparent;
  text-align: left;
  font-family: inherit;
  border-radius: 14px;
  margin: 0 -10px;
  padding: 0 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.journey__row--last { padding: 5px 10px; }
.journey__rail { display: flex; flex-direction: column; align-items: center; }
.journey__node {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.journey__line { width: 2px; flex: 1; min-height: 22px; }
.journey__body { padding: 5px 0 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.journey__row--last .journey__body { padding: 0; }
.journey__title { font-size: 14px; font-weight: 700; }
.journey__sub { font-size: 12px; }

/* ============================================================
   P3 — Dark-Durchgang
   ============================================================ */
[data-theme="portal-dark"] .card {
  background: var(--c-surface);
  border: 1px solid var(--c-surface-border);
  color: var(--c-text);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
}
[data-theme="portal-dark"] .card--focus {
  background: linear-gradient(160deg, rgba(64, 229, 196, .14), rgba(47, 140, 232, .10));
  border-color: rgba(64, 229, 196, .3);
}
[data-theme="portal-dark"] .card__eyebrow { color: var(--c-text-hint); }
[data-theme="portal-dark"] .card__eyebrow--accent { color: var(--c-accent-soft); }
[data-theme="portal-dark"] .card__title { color: var(--c-text); }
[data-theme="portal-dark"] .card__hint { color: var(--c-text-hint); }
[data-theme="portal-dark"] .card--empty { color: var(--c-text-muted); }

[data-theme="portal-dark"] .focus__title { color: var(--c-text); }
[data-theme="portal-dark"] .focus__sub { color: var(--c-text-muted); }
[data-theme="portal-dark"] .focus__bar { background: rgba(255, 255, 255, .1); }
[data-theme="portal-dark"] .focus__bar-fill {
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
}
[data-theme="portal-dark"] .focus__count { color: var(--c-accent-soft); }

[data-theme="portal-dark"] .donut__track { stroke: rgba(255, 255, 255, .08); }
[data-theme="portal-dark"] .donut__pct { color: var(--c-text); }
[data-theme="portal-dark"] .donut__label { color: var(--c-text-hint); }
[data-theme="portal-dark"] .donut__caption { color: var(--c-text); }
[data-theme="portal-dark"] .donut__detail { color: var(--c-accent); }

[data-theme="portal-dark"] .motif { background: rgba(255, 255, 255, .03); }
[data-theme="portal-dark"] .motif__node {
  background: rgba(248, 248, 248, .02);
  box-shadow: 0 0 8px 0 rgba(64, 229, 196, .22) inset, 0 22px 18px -14px rgba(0, 0, 0, .4);
  color: var(--c-text-muted);
}
[data-theme="portal-dark"] .motif__node--mid { color: rgba(238, 246, 245, .85); }
[data-theme="portal-dark"] .motif__node--accent {
  box-shadow: 0 0 10px 0 rgba(64, 229, 196, .3) inset, 0 26px 20px -14px rgba(0, 0, 0, .45);
  color: var(--c-accent-soft);
}
[data-theme="portal-dark"] .motif__beam {
  background: linear-gradient(180deg, transparent, var(--c-accent), transparent);
}
[data-theme="portal-dark"] .motif__spark { background: var(--c-accent-soft); }
[data-theme="portal-dark"] .motif__spark--b { background: var(--c-text); }
[data-theme="portal-dark"] .outlook__title { color: var(--c-text); }
[data-theme="portal-dark"] .outlook__goal { color: var(--c-text-muted); }
[data-theme="portal-dark"] .outlook__lock { color: var(--c-text-hint); }

[data-theme="portal-dark"] .journey__row:hover { background: rgba(64, 229, 196, .06); }
[data-theme="portal-dark"] .journey__row:focus-visible {
  outline: 2px solid var(--c-border-accent);
  outline-offset: -2px;
}
[data-theme="portal-dark"] .journey__row--active { background: rgba(64, 229, 196, .06); }
[data-theme="portal-dark"] .journey__node {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--c-text-faint);
}
[data-theme="portal-dark"] .journey__row--done .journey__node {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  border: none;
  color: var(--c-on-accent);
}
[data-theme="portal-dark"] .journey__row--active .journey__node {
  background: #0B1A17;
  border: 1.5px solid var(--c-accent);
  color: var(--c-accent);
  box-shadow: 0 0 20px rgba(64, 229, 196, .3);
  animation: ringPulse 3s infinite;
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(64, 229, 196, .35); }
  70%  { box-shadow: 0 0 0 12px rgba(64, 229, 196, 0); }
  100% { box-shadow: 0 0 0 0 rgba(64, 229, 196, 0); }
}
[data-theme="portal-dark"] .journey__line { background: rgba(255, 255, 255, .08); }
[data-theme="portal-dark"] .journey__row--done .journey__line {
  background: linear-gradient(180deg, var(--c-accent), rgba(64, 229, 196, .4));
}
[data-theme="portal-dark"] .journey__title { color: var(--c-text); }
[data-theme="portal-dark"] .journey__sub { color: var(--c-text-hint); }
[data-theme="portal-dark"] .journey__row--active .journey__title { color: var(--c-accent-soft); }
[data-theme="portal-dark"] .journey__row--locked .journey__title {
  color: var(--c-text-muted); font-weight: 600;
}
[data-theme="portal-dark"] .journey__row--locked .journey__sub { color: var(--c-text-faint); }

/* Die aktive Phase steht jetzt als Glas-Karte in Reihe 2 — gleiche Flaeche,
   gleicher Radius wie die Nachbarkarten. Verhalten unveraendert. */
[data-theme="portal-dark"] .row2 > .pcard {
  border-radius: var(--r-card);
  padding: 26px;
  width: 100%;
  margin: 0;
}

/* Bewegung aus, Endzustand sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .cta-primary,
  .donut__value,
  .motif__node,
  .motif__beam,
  .motif__spark,
  [data-theme="portal-dark"] .journey__row--active .journey__node {
    animation: none !important;
  }
  .cta-primary { transition: none; }
  .journey__row { transition: none; }
}

/* ============================================================
   PHASEN-DRAWER P4 (#453) — Innenleben
   Die Huelle (.wv-drawer, Andockung/Slide-in/Backdrop) steht in app.css.
   ============================================================ */

[data-theme="portal-dark"] .drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  color: var(--c-text);
}

/* ----- Kopf ----- */
[data-theme="portal-dark"] .drawer__head {
  flex: 0 0 auto;
  padding: 26px 26px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="portal-dark"] .drawer__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
[data-theme="portal-dark"] .drawer__eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--c-text-muted);
}
[data-theme="portal-dark"] .drawer__eyebrow--active { color: var(--c-accent); }
[data-theme="portal-dark"] .drawer__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--c-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}
[data-theme="portal-dark"] .drawer__close:hover,
[data-theme="portal-dark"] .drawer__close:focus-visible {
  background: rgba(255, 255, 255, .07);
  color: var(--c-text);
  outline: none;
}
[data-theme="portal-dark"] .drawer__title {
  font-family: var(--ff-hero);
  font-size: 24px; font-weight: 700; letter-spacing: -.01em;
  margin: 0;
  color: var(--c-text);
}
[data-theme="portal-dark"] .drawer__goal {
  font-size: 13.5px; line-height: 1.55;
  color: var(--c-text-muted);
  margin: -6px 0 0;
}
[data-theme="portal-dark"] .drawer__progress {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px;
}
[data-theme="portal-dark"] .drawer__bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
[data-theme="portal-dark"] .drawer__bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  transition: width 320ms cubic-bezier(.22, 1, .36, 1);
}
[data-theme="portal-dark"] .drawer__count {
  font-size: 12px; font-weight: 700;
  color: var(--c-accent-soft);
  white-space: nowrap;
}

/* ----- Rumpf ----- */
[data-theme="portal-dark"] .drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
[data-theme="portal-dark"] .drawer__section { display: flex; flex-direction: column; }
[data-theme="portal-dark"] .drawer__section-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--c-text-faint);
  margin-bottom: 6px;
}
[data-theme="portal-dark"] .drawer__tbd {
  font-size: 13.5px; line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
}

/* ----- Baustein-Zeile im Drawer (SkillRow variant="drawer") ----- */
[data-theme="portal-dark"] .pcard__skill--drawer {
  align-items: flex-start;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  border-radius: 0;
  background: transparent;
}
[data-theme="portal-dark"] .pcard__skill--drawer:last-child { border-bottom: none; }
[data-theme="portal-dark"] .pcard__skill--drawer .n {
  flex-wrap: wrap;
  row-gap: 8px;
}
[data-theme="portal-dark"] .pcard__skill--drawer .pcard__skill-label { font-size: 14px; }
[data-theme="portal-dark"] .pcard__skill--drawer .pcard__skill-name { font-weight: 600; }
[data-theme="portal-dark"] .pcard__skill-type {
  font-size: 10px; letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  color: var(--c-text-muted);
  white-space: nowrap;
}
/* Artefakt als beschrifteter Chip statt als blosses Symbol — im Drawer ist Platz, und der
   Kunde soll sehen, WAS dort liegt, ohne den Tooltip abwarten zu muessen. */
[data-theme="portal-dark"] .pcard__skill-artifact--chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-accent-soft);
  background: rgba(64, 229, 196, .08);
  border: 1px solid rgba(64, 229, 196, .25);
  border-radius: 999px;
  padding: 5px 11px;
  max-width: 100%;
  text-decoration: none;
}
[data-theme="portal-dark"] .pcard__skill-artifact--chip:hover,
[data-theme="portal-dark"] .pcard__skill-artifact--chip:focus-visible {
  background: rgba(64, 229, 196, .16);
  outline: none;
}
[data-theme="portal-dark"] .pcard__skill-artifact__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
[data-theme="portal-dark"] .pcard__skill--drawer .pcard__skill-score {
  font-size: 11px; font-weight: 700;
  color: var(--c-accent-soft);
  background: rgba(64, 229, 196, .1);
  border-radius: 999px;
  padding: 3px 9px;
}

/* ----- Freigabe-Block ----- */
[data-theme="portal-dark"] .drawer__gate {
  background: rgba(64, 229, 196, .08);
  border: 1px solid rgba(64, 229, 196, .3);
  border-radius: var(--r-inner);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme="portal-dark"] .drawer__gate--passed {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .08);
}
[data-theme="portal-dark"] .drawer__gate-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  color: var(--c-on-accent);
}
[data-theme="portal-dark"] .drawer__gate-label {
  font-size: 10.5px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase;
  color: var(--c-accent);
}
[data-theme="portal-dark"] .drawer__gate-text {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(238, 246, 245, .7);
}
[data-theme="portal-dark"] .drawer__checks {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
[data-theme="portal-dark"] .drawer__check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; line-height: 1.4;
  color: var(--c-text-muted);
}
[data-theme="portal-dark"] .drawer__check--ok { color: rgba(238, 246, 245, .7); }
[data-theme="portal-dark"] .drawer__check--ok svg { color: var(--c-accent); flex-shrink: 0; }
[data-theme="portal-dark"] .drawer__check-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(238, 246, 245, .3);
  flex-shrink: 0;
}
[data-theme="portal-dark"] .drawer__gate-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
}
[data-theme="portal-dark"] .drawer__gate-btn {
  font: inherit;
  font-size: 12.5px; font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(64, 229, 196, .14);
  border: 1px solid rgba(64, 229, 196, .4);
  color: var(--c-accent-soft);
  transition: background 140ms ease;
}
[data-theme="portal-dark"] .drawer__gate-btn:hover { background: rgba(64, 229, 196, .24); }
[data-theme="portal-dark"] .drawer__gate-btn--force {
  background: rgba(255, 122, 122, .1);
  border-color: rgba(255, 122, 122, .38);
  color: var(--c-status-warning);
}
[data-theme="portal-dark"] .drawer__gate-btn--force:hover { background: rgba(255, 122, 122, .2); }

[data-theme="portal-dark"] .drawer__note {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; line-height: 1.5;
  color: var(--c-text-faint);
  padding: 0 4px;
  margin: 0;
}
[data-theme="portal-dark"] .drawer__note svg { flex-shrink: 0; margin-top: 2px; }

/* ----- Fusszeile ----- */
[data-theme="portal-dark"] .drawer__foot {
  flex: 0 0 auto;
  padding: 18px 26px 24px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-theme="portal-dark"] .drawer__cta { width: 100%; justify-content: center; }
[data-theme="portal-dark"] .drawer__foot-text {
  font-size: 12.5px; line-height: 1.5;
  color: var(--c-text-muted);
  text-align: center;
}
[data-theme="portal-dark"] .drawer__pill {
  font: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(64, 229, 196, .15), rgba(47, 140, 232, .12));
  border: 1px solid rgba(64, 229, 196, .35);
  color: var(--c-accent-soft);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
}
[data-theme="portal-dark"] .drawer__pill:hover {
  background: linear-gradient(135deg, rgba(64, 229, 196, .26), rgba(47, 140, 232, .2));
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="portal-dark"] .drawer__bar-fill { transition: none; }
}

/* ============================================================================
   P0b (#453): die Arten des naechsten Schritts sichtbar unterscheiden.
   Nur Ergaenzungen im Dark-Durchgang — die Grundformen (.cta-primary,
   .pcard__skill-start, .drawer__gate) bleiben unveraendert.
   ========================================================================= */

/* Retry: derselbe Knopf, aber in Warnfarbe abgesetzt — „erneut" ist keine
   normale Fortsetzung, und der Pulsschlag des Standard-CTA waere hier ein
   falsches Versprechen. */
[data-theme="portal-dark"] .cta-primary--retry {
  background: #2A1410;
  color: #FFD9CF;
  animation: none;
  box-shadow: 0 0 0 1px rgba(255, 122, 122, .55), 0 0 18px 2px rgba(255, 122, 122, .22);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
[data-theme="portal-dark"] .cta-primary--retry:hover {
  box-shadow: 0 0 0 1px rgba(255, 122, 122, .85), 0 0 24px 4px rgba(255, 122, 122, .32);
}
[data-theme="portal-dark"] .cta-primary--retry:focus-visible { outline-color: rgba(255, 122, 122, .9); }

/* Freigabe: neutral-akzentuiert. Sie ist eine Pruefung, kein Start — der
   Dauerpuls des Standard-CTA wuerde zum Klicken draengen, wo nichts laeuft. */
[data-theme="portal-dark"] .cta-primary--gate {
  background: linear-gradient(135deg, rgba(64, 229, 196, .16), rgba(47, 140, 232, .14));
  color: var(--c-accent-soft);
  animation: none;
  box-shadow: 0 0 0 1px rgba(64, 229, 196, .4);
  text-shadow: none;
}
[data-theme="portal-dark"] .cta-primary--gate:hover {
  background: linear-gradient(135deg, rgba(64, 229, 196, .26), rgba(47, 140, 232, .2));
}

/* Retry-Variante des Zeilen-Knopfes. */
[data-theme="portal-dark"] .pcard__skill-start--retry {
  background: var(--c-warning);
  color: #2A0F0F;
}
[data-theme="portal-dark"] .pcard__skill-start--retry:hover,
[data-theme="portal-dark"] .pcard__skill-start--retry:focus-visible {
  background: #FF9C9C;
  outline-color: var(--c-warning);
}

/* Wer erteilt die Freigabe, wenn hier kein Knopf steht. */
[data-theme="portal-dark"] .drawer__gate-hint {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--c-text-muted);
}

/* Sprung aus dem Gate-CTA in den Freigabe-Block: kurzes Aufleuchten statt
   stiller Positionswechsel. Der Block ist per tabindex="-1" fokussierbar —
   sein Fokusring darf deshalb nicht ausbleiben. */
[data-theme="portal-dark"] .drawer__gate:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
[data-theme="portal-dark"] .drawer__gate--flash {
  animation: drawerGateFlash 1.4s ease-out 1;
}
@keyframes drawerGateFlash {
  0%   { box-shadow: 0 0 0 0 rgba(64, 229, 196, .55); }
  40%  { box-shadow: 0 0 0 6px rgba(64, 229, 196, .18); }
  100% { box-shadow: 0 0 0 0 rgba(64, 229, 196, 0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="portal-dark"] .drawer__gate--flash { animation: none; }
  [data-theme="portal-dark"] .cta-primary--retry,
  [data-theme="portal-dark"] .cta-primary--gate { transition: none; }
}