/* ── PlaybookOS – Confident Closer ── */
:root {
  /* === Oberflächen (Cool Light) === */
  --bg-app:           #F4F6F8;
  --bg-surface:       #FFFFFF;
  --bg-surface-hover: #F8FAFB;
  --bg-elevated:      #FFFFFF;
  --bg-inset:         #EEF1F4;

  /* Compatibility aliases */
  --bg:        var(--bg-app);
  --surface:   var(--bg-surface);
  --surface-2: var(--bg-inset);

  /* === Text (Navy-Hierarchie) === */
  --text:         #0F1A2E;
  --text-2:       #5A7194;
  --text-3:       #8DA2BE;
  --icon-color:   #5A7194;
  --text-inverse: #FFFFFF;

  /* === Borders (cool) === */
  --border:        #E2E8F0;
  --border-subtle: #EEF2F6;
  --border-strong: #CBD5E1;

  --border-gold:  var(--border);
  --border-thick: 1px solid var(--border);

  /* === Teal-Akzent === */
  --accent:       #10B981;
  --accent-hover: #059669;
  --accent-muted: rgba(16, 185, 129, 0.08);
  --accent-text:  #047857;

  --accent-glow: rgba(16, 185, 129, 0.10);
  --accent-rgb:  16, 185, 129;
  --yellow:      #10B981;

  /* === Sidebar (Navy – immer dunkel) === */
  --sidebar-bg:     #0F1A2E;
  --sidebar-border: rgba(255, 255, 255, 0.06);

  /* === Status === */
  --status-success:    #10B981;
  --status-warning:    #F59E0B;
  --status-danger:     #EF4444;
  --status-info:       #3B82F6;
  --status-success-bg: rgba(16, 185, 129, 0.06);
  --status-warning-bg: rgba(245, 158, 11, 0.06);
  --status-danger-bg:  rgba(239, 68, 68, 0.06);
  --status-info-bg:    rgba(59, 130, 246, 0.06);

  --red: #EF4444;

  /* === Typografie === */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', monospace;

  /* === Type Scale === */
  --type-xs:     14px;
  --type-sm:     16px;
  --type-base:   18px;
  --type-lg:     22px;
  --type-xl:     28px;
  --type-2xl:    36px;
  --type-metric: 44px;

  /* === Spacing === */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
  --space-4:  16px;  --space-5:  20px;  --space-6:  24px;
  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;

  --space-xs:  8px;  --space-sm:  12px; --space-md:  16px;
  --space-lg:  24px; --space-xl:  32px; --space-2xl: 48px;
  --space-3xl: 64px;

  /* === Radii === */
  --radius-sm: 6px;  --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px;
  --radius:      var(--radius-sm);
  --radius-soft: var(--radius-sm);

  /* === Icon Scale === */
  --icon-xs:   16px; --icon-sm: 18px;
  --icon-base: 20px; --icon-lg: 24px;

  /* === Schatten === */
  --shadow-card:      0 1px 3px rgba(15, 26, 46, 0.04), 0 0 0 1px var(--border);
  --shadow-dropdown:  0 4px 16px rgba(15, 26, 46, 0.10), 0 0 0 1px var(--border);
  --shadow-modal:     0 24px 64px rgba(15, 26, 46, 0.16);
  --shadow-hard:      0 2px 12px rgba(15, 26, 46, 0.08);
  --shadow-hard-sm:   0 1px 6px rgba(15, 26, 46, 0.05);

  /* === Transitions === */
  --transition-fast:   120ms ease-out;
  --transition-normal: 200ms ease-out;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--type-base);
  line-height: 1.65;
  font-weight: 400;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

}


/* ── PlaybookOS: Navy Sidebar (immer dunkel) ── */
#sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  color: rgba(255, 255, 255, 0.7);
}
#sidebar .logo-text, #sidebar .logo-wrap { color: #FFFFFF; }
#sidebar .phase-label, #sidebar .phase-number { color: rgba(255, 255, 255, 0.6); }
#sidebar .phase-progress { color: rgba(255, 255, 255, 0.3); }
#sidebar .nav-step-label { color: rgba(255, 255, 255, 0.6); }
#sidebar .nav-step-item:hover { background: rgba(255, 255, 255, 0.04); }
#sidebar .nav-step-item:hover .nav-step-label { color: #FFFFFF; }
#sidebar .nav-step-item.active { background: rgba(255, 255, 255, 0.08); }
#sidebar .nav-step-item.active .nav-step-label { color: #FFFFFF; font-weight: 600; }
#sidebar .nav-step-dot { border-color: rgba(255, 255, 255, 0.25); }
#sidebar .nav-step-item.active .nav-step-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
#sidebar .nav-step-item.done .nav-step-dot { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.4); }
#sidebar .phase-header { color: rgba(255, 255, 255, 0.6); }
#sidebar .phase-header:hover { background: rgba(255, 255, 255, 0.04); }
#sidebar .phase-header.active-phase { color: #FFFFFF; }
#sidebar .phase-header.active-phase .phase-number { background: var(--accent); border-color: var(--accent); color: var(--sidebar-bg); }
#sidebar .phase-header.phase-done .phase-label { color: rgba(255, 255, 255, 0.35); }
#sidebar .phase-header.phase-done .phase-number { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5); }
#sidebar .phase-chevron { color: rgba(255, 255, 255, 0.25); }
#sidebar .sidebar-section-header { border-color: rgba(255, 255, 255, 0.06); }
#sidebar .sidebar-section-header span { color: rgba(255, 255, 255, 0.4); }
#sidebar #new-run-btn { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.1); }
#sidebar #new-run-btn:hover { background: rgba(255, 255, 255, 0.1); }
#sidebar .run-item { border-color: rgba(255, 255, 255, 0.06); }
#sidebar .run-item.active { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
#sidebar .run-name { color: rgba(255, 255, 255, 0.7); }
#sidebar .run-item.active .run-name { color: #FFFFFF; }
#sidebar .run-step { color: rgba(255, 255, 255, 0.35); }
#sidebar .run-delete-btn, #sidebar .run-rename-btn { color: rgba(255, 255, 255, 0.3); }
#sidebar .run-delete-btn:hover, #sidebar .run-rename-btn:hover { color: #FFFFFF; }
#sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }

/* ── PlaybookOS: Text-Logo statt Bild ── */
.logo-img { display: none; }
.logo-text { font-family: var(--font-sans); font-weight: 800; font-size: 18px; letter-spacing: -0.3px; }

/* ── Sidebar ── */
#sidebar {
  width: 280px;
  min-width: 280px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}







#runs-list {
  padding: 0 12px;
  overflow-y: auto;
  flex: 1;
}

.run-item {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-soft);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 2px solid transparent;
  position: relative;
  transition: all 0.1s;
}

.run-item:hover {
  background: var(--surface-2);
  border: var(--border-thick);
  transform: none;
  box-shadow: none;
}

.run-item:active {
  transform: none;
  box-shadow: none;
}

.run-item.active {
  background: var(--accent-glow);
  border: 1px solid rgba(var(--accent-rgb),0.35);
  box-shadow: none;
  transform: none;
}

.run-item.active:active {
  transform: none;
  box-shadow: none;
}

.run-name { font-weight: 700; font-size: var(--type-base); letter-spacing: 0.01em; }
.run-delete-btn, .run-rename-btn {
  display: none; position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-3); font-size: var(--type-sm); cursor: pointer;
  padding: 4px 6px; border-radius: 4px; line-height: 1;
}
.run-delete-btn { right: 8px; }
.run-rename-btn { right: 34px; }
.run-item:hover .run-delete-btn,
.run-item:hover .run-rename-btn { display: block; }
.run-delete-btn:hover { background: var(--red); color: white; }
.run-rename-btn:hover { background: var(--accent-glow); color: var(--accent); }
.run-step { font-size: var(--type-sm); font-weight: 400; color: var(--text-3); letter-spacing: 0.02em; }
.run-item.active .run-step { color: var(--accent); }
.run-item.active .run-name { color: var(--accent); }



/* ── Main ── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#global-header {
  width: 100%;
  height: 64px;
  min-height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 20;
}
#topbar-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 100%;
}
#app-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }



#status-badge {
  font-size: var(--type-sm);
  font-weight: 500;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
  box-shadow: none;
}

#conn-badge {
  font-size: var(--type-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

#conn-dot { width: var(--icon-xs); height: var(--icon-xs); border-radius: 50%; background: var(--text-3); border: none; }
#conn-dot.ok { background: #5DB87A; box-shadow: 0 0 6px rgba(93,184,122,0.5); }

/* ── Steps Progress ── */
#steps-bar {
  background: var(--surface);
  border-bottom: var(--border-thick);
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 8px;
}
#steps-bar::-webkit-scrollbar { display: none; }

.step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 100%;
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.2s, border-color 0.2s;
}

.step-pill:hover { color: var(--text-2); }
.step-pill.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 800; }
.step-pill.done { color: var(--text-3); }
.step-pill.locked { opacity: 0.25; cursor: not-allowed; }

.step-dot {
  width: var(--icon-xs); height: var(--icon-xs);
  border-radius: 50%;
  border: 1px solid var(--text-3);
  background: transparent;
  flex-shrink: 0;
}
.step-pill.active .step-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),0.5); }
.step-pill.done .step-dot { background: var(--text-3); border-color: var(--text-3); }

/* ── Content ── */
#content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-10) var(--space-10) var(--space-16);
}

#content > .card,
#content > .bento-container,
#content > .welcome-state {
  max-width: min(1200px, 100%);
  margin-inline: auto;
}

/* ── Editorial Bento Grid ── */
.bento-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.bento-box {
  background: var(--surface);
  border: var(--border-thick);
  border-radius: var(--radius-soft);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: transform 0.1s;
}

.bento-box:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.bento-box h3 {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 12px;
}

.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }

/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

label {
  font-size: var(--type-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

label span.req { color: var(--red); margin-left: 2px; }
label span.opt { color: var(--text-3); font-weight: 400; font-size: var(--type-sm); text-transform: none; letter-spacing: 0; margin-left: 4px; }

input[type="text"],
input[type="email"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: var(--type-base);
  font-weight: 400;
  padding: 16px 20px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-soft);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb),0.5);
  background: var(--surface-2);
  transform: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  transform: none;
}

textarea { resize: vertical; min-height: 80px; line-height: 1.6; font-weight: 400; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-soft);
  font-family: var(--font-sans);
  font-size: var(--type-base);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid var(--border-gold);
  box-shadow: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn:hover {
  transform: none;
  box-shadow: 0 0 16px var(--accent-glow);
}

.btn:active {
  transform: none;
  box-shadow: none !important;
  opacity: 0.8;
}

.btn-primary {
  background: var(--accent);
  color: #0C0C10;
  border-color: var(--accent);
  font-weight: 600;
  padding: 14px 24px;
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 24px rgba(var(--accent-rgb),0.35);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--text-3);
  box-shadow: none;
  border-color: var(--border-gold);
}

.btn-secondary { background: var(--surface-2); color: var(--text-2); }
.btn-secondary:hover { background: var(--surface); color: var(--text); }

.btn-approve { background: var(--accent); color: #0C0C10; border-color: var(--accent); font-weight: 600; }
.btn-reject { background: var(--surface-2); color: var(--text-2); }
.btn-skip { background: transparent; color: var(--text-3); }

.btn-text {
  background: none;
  border: none;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: var(--type-base);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s;
}
.btn-text:hover { color: var(--text); }

/* ── Status Chips ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: var(--type-sm);
  font-weight: 500;
  border: 1px solid var(--border);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}

.chip-waiting, .chip-pending { background: transparent; color: var(--text-3); border-color: var(--border); }
.chip-approved { background: rgba(93,184,122,0.08); color: #5DB87A; border-color: rgba(93,184,122,0.2); }
.chip-rejected { background: rgba(217,92,92,0.08); color: var(--red); border-color: rgba(217,92,92,0.2); }
.chip-skipped  { background: transparent; color: var(--text-3); border-color: var(--border); }

/* ── Gate Box ── */
.gate-box {
  margin-top: var(--space-6);
  border: 1px solid var(--border-gold);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-soft);
  padding: var(--space-6);
  background: var(--surface);
  box-shadow: none;
  position: relative;
}

.gate-box::before {
  content: none;
}

.gate-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); padding-left: var(--space-2); }
.feedback-area { margin-top: var(--space-md); display: none; padding-left: var(--space-2); }
.feedback-area.visible { display: block; }

.gate-question {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 500;
  font-style: italic;
  color: var(--text);
  margin-bottom: var(--space-5);
}

.gate-primary-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}

.gate-tertiary-actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  margin-bottom: var(--space-1);
}

/* ── Standard Cards (For other steps) ── */
.card {
  background: var(--surface);
  border: var(--border-thick);
  border-radius: var(--radius-soft);
  margin-bottom: var(--space-8);
  overflow: visible;
}

.card-header {
  padding: var(--space-6) var(--space-8);
  border-bottom: var(--border-thick);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
}

.card-title { display: flex; align-items: center; gap: 16px; }

.step-num {
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-gold);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-sm);
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-2);
  flex-shrink: 0;
}

.step-num.active {
  background: var(--accent-glow);
  border-color: rgba(var(--accent-rgb),0.5);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.step-num.done { background: transparent; border-color: rgba(var(--accent-rgb),0.2); color: var(--text-3); }

.card-title h2 {
  font-family: var(--font-serif);
  font-size: var(--type-xl);
  font-weight: 500;
  font-style: italic;
  color: var(--text);
  letter-spacing: -0.01em;
}

.card-body { padding: var(--space-8); }
/* ── Success Banner (dark) – text inversion ── */
.success-banner-num { color: var(--accent); } /* Neon number on dark = maximum punch */


/* ── Tables ── */
.topics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-base);
  border: var(--border-thick);
  background: var(--surface);
}

.topics-table th {
  text-align: left;
  padding: 14px;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--text-3);
  border-bottom: var(--border-thick);
  border-right: var(--border-thick);
  background: var(--surface-2);
}

.topics-table td {
  padding: 14px;
  border-bottom: var(--border-thick);
  border-right: var(--border-thick);
  font-weight: 500;
}

.topics-table tr:hover td { background: var(--bg); }

/* Inline Editing */
.editable-cell { cursor: pointer; position: relative; }
.editable-cell:hover { background: var(--bg) !important; }
.edit-icon { opacity: 0; margin-left: 5px; font-size: var(--type-sm); color: var(--icon-color); transition: opacity 0.15s; }
.editable-cell:hover .edit-icon { opacity: 1; }
.inline-edit-wrap { display: flex; flex-direction: column; gap: 6px; }
.inline-edit-input {
  width: 100%; font-family: inherit; font-size: inherit; font-weight: inherit;
  background: var(--bg); border: 2px solid var(--accent); border-radius: 4px;
  padding: 10px 12px; box-sizing: border-box; outline: none; resize: vertical;
}
.inline-edit-input:focus { border-color: var(--text); }
.inline-edit-actions { display: flex; gap: 6px; }
.ie-save { background: var(--accent); border: var(--border-thick); border-radius: 4px; padding: 6px 14px; font-size: var(--type-base); font-weight: 800; cursor: pointer; }
.ie-cancel { background: var(--surface); border: var(--border-thick); border-radius: 4px; padding: 6px 14px; font-size: var(--type-base); font-weight: 800; cursor: pointer; }
.inline-select { font-family: inherit; font-size: var(--type-base); font-weight: 700; background: var(--bg); border: var(--border-thick); border-radius: 4px; padding: 4px 6px; cursor: pointer; }

.funktion-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: var(--type-sm);
  font-weight: 500;
  border: 1px solid var(--border-gold);
  background: var(--surface);
}
/* Funktions-Badge Farben – Awareness / Bildung / Conversion / Dialog */
.funktion-badge.fn-A, .funktion-badge[data-fn="A"] { background: rgba(139,92,246,0.12); color: #A78BFA; border-color: rgba(139,92,246,0.25); } /* Violet – Awareness */
.funktion-badge.fn-B, .funktion-badge[data-fn="B"] { background: rgba(93,184,122,0.1); color: #5DB87A; border-color: rgba(93,184,122,0.25); } /* Emerald – Bildung */
.funktion-badge.fn-C, .funktion-badge[data-fn="C"] { background: rgba(var(--accent-rgb),0.1); color: var(--accent); border-color: rgba(var(--accent-rgb),0.25); } /* Gold – Conversion */
.funktion-badge.fn-D, .funktion-badge[data-fn="D"] { background: rgba(56,189,248,0.08); color: #67C4E8; border-color: rgba(56,189,248,0.2); } /* Sky – Dialog */

/* ── Posts (Masonry Grid) ── */
.post-card {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-soft);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-hard-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.post-card:hover { transform: none; border-color: rgba(var(--accent-rgb),0.3); box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(var(--accent-rgb),0.2); }

.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.post-nr { font-weight: 600; font-size: var(--type-sm); font-family: 'JetBrains Mono', monospace; background: var(--surface-2); color: var(--accent); padding: 3px 8px; border-radius: 20px; border: 1px solid rgba(var(--accent-rgb),0.2); }
.post-text { font-size: var(--type-base); line-height: 1.75; white-space: pre-wrap; font-weight: 400; color: var(--text); }
.post-cta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-gold); }
.cta-label { font-size: var(--type-sm); font-weight: 500; margin-bottom: 4px; color: var(--text-2); }

/* ── Format-Tooltip Popup ── */
.format-badge-wrap {
  position: relative;
  display: inline-block;
}
.format-tooltip-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 500;
  background: var(--surface);
  border: var(--border-thick);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-hard);
  padding: 14px 16px;
  min-width: 240px;
  max-width: 300px;
  font-size: var(--type-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  pointer-events: none;
}
.format-tooltip-popup.open {
  display: block;
  pointer-events: auto;
}
.format-tooltip-popup strong {
  display: block;
  font-size: var(--type-sm);
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.format-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-soft);
  padding: 8px 16px;
  font-size: var(--type-base);
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow-hard-sm);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.format-badge-btn:hover {
  background: var(--surface-2);
  border-color: rgba(var(--accent-rgb),0.4);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.12), 0 0 0 1px rgba(var(--accent-rgb),0.3);
}
.format-badge-btn.active {
  background: var(--accent-glow);
  border-color: rgba(var(--accent-rgb),0.5);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.4);
  color: var(--accent);
}
.format-badge-btn .fmt-count {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: var(--radius-soft);
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: var(--type-sm);
}
.format-badge-btn .fmt-hint {
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--text-3);
}

/* ── Info Toggle (aufklappbare Erklärungen) ── */
.info-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-soft);
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-family: 'DM Sans', sans-serif;
  vertical-align: middle;
  margin-left: 10px;
}
.info-toggle-btn:hover {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),0.4);
}
.info-toggle-box {
  display: none;
  margin-top: 12px;
  background: var(--bg);
  border: var(--border-thick);
  border-radius: var(--radius-soft);
  padding: 16px 20px;
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.6;
  border-left: 4px solid var(--accent);
}
.info-toggle-box.open { display: block; }

/* ── Utilities ── */
.spinner {
  display: inline-block;
  width: var(--icon-base); height: var(--icon-base);
  border: 3px solid rgba(var(--accent-rgb),0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast {
  position: fixed; bottom: 28px; right: 28px; padding: 14px 20px;
  border: 1px solid var(--border-gold); border-radius: var(--radius-soft); font-size: var(--type-sm); font-weight: 400;
  box-shadow: var(--shadow-hard); z-index: 9999; opacity: 0; transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1); pointer-events: none; background: var(--surface); text-transform: none;
  backdrop-filter: blur(8px);
}
#toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#toast.success { background: var(--surface); border-color: rgba(93,184,122,0.4); }
#toast.error { background: var(--surface); border-color: rgba(217,92,92,0.4); color: var(--red); }

#new-run-btn { width: 100%; justify-content: center; padding: 16px; font-size: var(--type-base); }

#costs-bar { font-size: var(--type-sm); font-weight: 500; display: flex; gap: 6px; align-items: center; border: none; padding: 0; background: transparent; color: var(--text-3); }

::-webkit-scrollbar { width: var(--icon-xs); height: var(--icon-xs); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Step 19: Finaler Content-Kalender ── */
#steps-bar-wrap {
  position: relative;
  background: var(--surface);
  border-bottom: var(--border-thick);
  display: flex;
  align-items: stretch;
  height: 52px;
  min-height: 52px;
}
#steps-bar-wrap::before,
#steps-bar-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.15s;
  opacity: 0;
}
#steps-bar-wrap::before { left: 0; background: linear-gradient(to right, var(--surface) 20%, transparent); }
#steps-bar-wrap::after  { right: 0; background: linear-gradient(to left, var(--surface) 20%, transparent); }
#steps-bar-wrap.can-scroll-left::before  { opacity: 1; }
#steps-bar-wrap.can-scroll-right::after  { opacity: 1; }
.steps-scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: var(--icon-lg); height: var(--icon-lg); border: var(--border-thick); background: var(--accent);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: var(--type-sm); font-weight: 800; box-shadow: var(--shadow-hard-sm);
  transition: all 0.1s; opacity: 0; pointer-events: none; border-radius: var(--radius-soft);
}
.steps-scroll-btn:hover { transform: translateY(-50%) translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--border); }
#steps-scroll-left { left: 4px; }
#steps-scroll-right { right: 4px; }
#steps-bar-wrap.can-scroll-left  #steps-scroll-left  { opacity: 1; pointer-events: auto; }
#steps-bar-wrap.can-scroll-right #steps-scroll-right { opacity: 1; pointer-events: auto; }
#steps-bar { flex: 1; padding: 0 24px; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; gap: 8px; }
#steps-bar::-webkit-scrollbar { display: none; }

/* Kalender Toolbar */
.kalender-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 32px;
  padding: 16px 20px; background: var(--surface);
  border: var(--border-thick); box-shadow: var(--shadow-hard);
}
.kalender-toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kalender-filter-btn {
  padding: 6px 14px; border: 1px solid var(--border-gold); background: var(--surface-2);
  font-family: 'DM Sans', sans-serif; font-size: var(--type-sm); font-weight: 500;
  cursor: pointer; color: var(--text-2);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s; border-radius: var(--radius-soft);
}
.kalender-filter-btn:hover { background: var(--surface); border-color: rgba(var(--accent-rgb),0.35); color: var(--text); }
.kalender-filter-btn.active { background: var(--accent-glow); border-color: rgba(var(--accent-rgb),0.5); color: var(--accent); box-shadow: none; }

/* CSV Banner */
.csv-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; margin-bottom: 32px;
  border: var(--border-thick); box-shadow: var(--shadow-hard);
  background: var(--surface);
}
.csv-banner.ready { background: var(--accent); }
.csv-banner-text { font-size: var(--type-base); font-weight: 800; color: var(--text); }
.csv-banner-text small { font-weight: 500; font-size: var(--type-sm); margin-left: 12px; }

/* Wochen */
.kalender-woche { margin-bottom: 40px; }
.kalender-woche-header {
  font-size: var(--type-sm); font-weight: 500;
  margin-bottom: 16px; padding: 8px 0;
  background: transparent; color: var(--text-3);
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border-gold);
}
.kalender-woche-header span {
  background: var(--accent-glow); color: var(--accent);
  padding: 2px 10px; font-size: var(--type-sm); border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 20px;
}
.kalender-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

/* Post-Kachel */
.post-kachel {
  background: var(--surface); border: var(--border-thick);
  box-shadow: var(--shadow-hard); display: flex; flex-direction: column;
  transition: transform 0.1s, box-shadow 0.1s; border-radius: var(--radius-soft);
}
.post-kachel:hover { border-color: rgba(var(--accent-rgb),0.35); box-shadow: 0 4px 20px rgba(0,0,0,0.1), 0 0 0 1px rgba(var(--accent-rgb),0.25); }

.post-kachel-head {
  padding: 12px 16px; border-bottom: var(--border-thick);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg);
}
.post-kachel-nr {
  font-weight: 800; font-size: var(--type-sm); background: var(--text); color: var(--surface);
  padding: 2px 8px; border-radius: var(--radius-soft); min-width: 32px; text-align: center;
}
.post-kachel-slot { font-size: var(--type-sm); font-weight: 600; color: var(--text-2); }

.post-kachel-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 14px; }

/* Hook-Selector */
.hook-selector-label {
  font-size: var(--type-sm); font-weight: 700;
  margin-bottom: 6px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.hook-selector-label .label-badge {
  background: var(--yellow); color: var(--text);
  padding: 2px 6px; font-size: var(--type-sm); border: 1px solid var(--border);
  border-radius: var(--radius-soft);
}
.hook-selector-label .label-badge.done { background: var(--accent); }
.hook-option-btn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border-gold); background: var(--surface-2);
  cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif;
  font-size: var(--type-base); font-weight: 400; line-height: 1.6; color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; width: 100%; margin-bottom: 6px; border-radius: var(--radius-soft);
}
.hook-option-btn:last-child { margin-bottom: 0; }
.hook-option-btn:hover { background: var(--surface); border-color: rgba(var(--accent-rgb),0.35); box-shadow: var(--shadow-hard-sm); }
.hook-option-btn.selected {
  background: var(--accent-glow);
  border-color: rgba(var(--accent-rgb),0.5);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.3);
  color: var(--accent);
}
.hook-trigger-tag {
  flex-shrink: 0; font-size: var(--type-sm); font-weight: 600;
  padding: 3px 7px; border: 1px solid var(--border);
  background: var(--surface); white-space: nowrap; margin-top: 2px; border-radius: var(--radius-soft);
}
.hook-option-btn.selected .hook-trigger-tag { background: var(--text); color: var(--surface); }
.hook-option-btn.rec-indicator .hook-trigger-tag::after { content: ' ★'; }

/* Kachel-Sections */
.kachel-section-label {
  font-size: var(--type-sm); font-weight: 600;
  color: var(--text-2); margin-bottom: 6px;
}
.kachel-post-text {
  font-size: var(--type-base); line-height: 1.7; font-weight: 500; white-space: pre-wrap;
  max-height: 140px; overflow-y: auto; padding: 12px;
  background: var(--bg); border: var(--border-thick); border-radius: var(--radius-soft);
}
.kachel-post-text.expanded { max-height: none; }
.expand-btn {
  font-size: var(--type-sm); font-weight: 500;
  color: var(--accent); cursor: pointer; background: none; border: none;
  font-family: 'DM Sans', sans-serif; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px;
}
.kachel-cta {
  font-size: var(--type-sm); font-weight: 600; padding: 12px;
  background: var(--yellow); border: var(--border-thick);
  border-radius: var(--radius-soft); line-height: 1.5;
}
.kachel-bild {
  font-size: var(--type-sm); font-weight: 500; padding: 12px;
  background: var(--bg); border: var(--border-thick); border-radius: var(--radius-soft);
  color: var(--text-2); line-height: 1.5;
}
.kachel-bild code {
  font-size: var(--type-sm); font-weight: 800; background: var(--surface);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--radius-soft);
  text-transform: uppercase;
}

/* Kachel Footer */
.post-kachel-footer {
  padding: 10px 16px; border-top: var(--border-thick);
  display: flex; align-items: center; justify-content: flex-end;
  background: var(--bg);
}
.btn-copy {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px;
  font-family: 'DM Sans', sans-serif; font-size: var(--type-sm); font-weight: 600;
  border: 1px solid var(--border-gold); background: var(--surface); cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; box-shadow: var(--shadow-hard-sm); border-radius: var(--radius-soft);
}
.btn-copy:hover { background: var(--surface-2); border-color: rgba(var(--accent-rgb),0.4); box-shadow: 0 0 12px rgba(var(--accent-rgb),0.12), 0 0 0 1px rgba(var(--accent-rgb),0.25); }
.btn-copy:active { opacity: 0.7; }
.btn-copy.copied { background: var(--accent-glow); border-color: rgba(var(--accent-rgb),0.5); color: var(--accent); }

/* Modal */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  backdrop-filter: blur(4px);
}
#modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-hard); padding: 32px; width: 280px; border-radius: var(--radius-soft);
  transform: translateY(-6px) scale(0.98); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
#modal-overlay.visible .modal-box { transform: translateY(0) scale(1); }
.modal-title { font-family: var(--font-serif); font-size: var(--type-xl); font-weight: 500; font-style: italic; margin-bottom: var(--space-5); }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* Tip-Buttons & Tip-Overlay */
.tip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-base); height: var(--icon-base); border-radius: 50%;
  font-size: var(--type-sm); font-weight: 900; font-family: 'DM Sans', sans-serif;
  background: transparent; border: 1px solid var(--text-3);
  color: var(--text-3); cursor: pointer; transition: all 0.15s;
  vertical-align: middle; margin-left: 4px; flex-shrink: 0;
  line-height: 1; padding: 0;
}
.tip-btn:hover { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
#tip-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  z-index: 1100; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  backdrop-filter: blur(4px);
}
#tip-overlay.visible { opacity: 1; pointer-events: auto; }
.tip-box {
  background: var(--surface); border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-hard); padding: 32px; width: 480px; max-width: 90vw;
  border-radius: var(--radius-soft); max-height: 80vh; overflow-y: auto;
  transform: translateY(-8px) scale(0.97); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
#tip-overlay.visible .tip-box { transform: translateY(0) scale(1); }
.tip-box-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.tip-box-title { font-family: var(--font-serif); font-size: var(--type-xl); font-weight: 500; font-style: italic; color: var(--text); line-height: 1.2; }
.tip-close { background: none; border: 1px solid var(--border); color: var(--text-2); cursor: pointer; padding: 4px 10px; font-size: var(--type-base); border-radius: var(--radius-soft); transition: all 0.15s; flex-shrink: 0; margin-top: 4px; }
.tip-close:hover { border-color: var(--accent); color: var(--accent); }
.tip-section { margin-bottom: 16px; }
.tip-section-label { font-size: var(--type-sm); font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.tip-section-text { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }
.tip-example { background: var(--surface-2); border-left: 3px solid var(--accent); padding: 10px 14px; font-size: var(--type-base); color: var(--text); line-height: 1.6; font-style: italic; border-radius: 0 var(--radius-soft) var(--radius-soft) 0; }
.tip-warning { background: rgba(217,92,92,0.08); border-left: 3px solid var(--red); padding: 10px 14px; font-size: var(--type-base); color: var(--text-2); line-height: 1.6; border-radius: 0 var(--radius-soft) var(--radius-soft) 0; }

/* Step Intro */
.step-intro {
  background: var(--surface-2);
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.step-intro-main { font-size: var(--type-base); color: var(--text-2); line-height: 1.7; margin-bottom: 10px; }
.step-intro-main::first-letter {
  font-family: var(--font-serif);
  font-size: 2.6em;
  float: left;
  line-height: 0.85;
  margin-right: 0.06em;
  margin-top: 0.06em;
  color: var(--text);
  font-weight: 600;
}
[data-theme="dark"] .step-intro-main::first-letter {
  color: var(--ed-accent, #133826);
}
.step-intro-task { font-size: var(--type-base); color: var(--text); line-height: 1.6; }
.step-intro-task-label { color: var(--accent); font-weight: 700; }

/* Progress */
#progress-indicator {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--type-sm); font-weight: 600;
  border: var(--border-thick); padding: 6px 12px;
  background: var(--surface); border-radius: var(--radius-soft);
}
#progress-bar-track { width: 80px; height: 6px; background: var(--bg); border: 1px solid var(--border); }
#progress-bar-fill { height: 100%; background: var(--accent); transition: width 0.3s; }

/* Dirty Warning */
#dirty-warning {
  display: none; align-items: center; gap: 6px;
  font-size: var(--type-sm); font-weight: 700;
  background: var(--yellow); border: var(--border-thick); padding: 4px 10px;
  border-radius: var(--radius-soft); box-shadow: var(--shadow-hard-sm);
}
#dirty-warning.visible { display: flex; }

/* Empty Kalender */
.kalender-empty {
  text-align: center; padding: 64px 32px;
  border: var(--border-thick); box-shadow: var(--shadow-hard); background: var(--surface);
}
.kalender-empty p { font-family: 'Instrument Serif', serif; font-size: var(--type-lg); font-style: italic; margin-bottom: 12px; }
.kalender-empty small { font-size: var(--type-sm); font-weight: 600; color: var(--text-2); }


/* ── Global Header Logo ── */
.logo-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 var(--space-5);
  height: 100%;
  flex-shrink: 0;
  width: 320px;
  box-sizing: border-box;
}
.logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Runs section */
.sidebar-runs {
  border-bottom: 1px solid var(--border-gold);
  flex-shrink: 0;
}
.sidebar-section-header {
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-section-header span {
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-3);
}
.sidebar-section-header .btn {
  width: 100%;
  justify-content: center;
}
#runs-list {
  padding: 0 12px 12px;
  max-height: 160px;
  overflow-y: auto;
}

/* Phase Navigation */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
}
.phase-group { margin-bottom: 4px; }
.phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  border-left: 3px solid transparent;
}
.phase-header:hover { background: var(--surface-2); }
.phase-header.active-phase {
  border-left-color: var(--accent);
  background: var(--accent-glow);
}
.phase-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.phase-number {
  width: var(--icon-lg); height: var(--icon-lg);
  border: 1px solid var(--border-gold);
  background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--type-sm); font-weight: 700; font-family: 'JetBrains Mono', monospace;
  color: var(--text-3);
  flex-shrink: 0;
}
.phase-header.active-phase .phase-number { background: var(--accent-glow); border-color: rgba(var(--accent-rgb),0.4); color: var(--accent); }
.phase-header.phase-done .phase-number { border-color: rgba(var(--accent-rgb),0.15); color: var(--text-3); }
.phase-header.phase-done { opacity: 0.55; }
.phase-header.phase-done:hover { opacity: 1; }
.phase-label {
  font-size: var(--type-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-2);
}
.phase-progress {
  font-size: var(--type-sm);
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
}
.phase-header.active-phase .phase-progress { color: var(--text); }
.phase-chevron {
  font-size: var(--type-sm);
  color: var(--text-3);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.phase-header.open .phase-chevron { transform: rotate(90deg); }

/* Step items inside phase */
.phase-steps {
  display: none;
  padding: 2px 0 6px 0;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.phase-steps.open { display: block; }
.nav-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 24px;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
  position: relative;
}
.nav-step-item:hover:not(.locked) { background: rgba(255,255,255,0.03); }
.nav-step-item.active {
  background: var(--accent-glow);
  border-left-color: var(--accent);
}
.nav-step-item.locked { opacity: 0.4; cursor: not-allowed; }
.nav-step-dot {
  width: var(--icon-xs); height: var(--icon-xs);
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
  background: transparent;
  flex-shrink: 0;
}
.nav-step-item.done .nav-step-dot { background: rgba(var(--accent-rgb),0.3); border-color: rgba(var(--accent-rgb),0.3); }
.nav-step-item.active .nav-step-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),0.5); }
.nav-step-label {
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text-3);
  line-height: 1.3;
}
.nav-step-item.active .nav-step-label { color: var(--accent); font-weight: 700; font-size: var(--type-base); }
.nav-step-item.done .nav-step-label { color: var(--text-2); }
.nav-step-nr {
  font-size: var(--type-sm);
  font-weight: 800;
  color: var(--text-3);
  flex-shrink: 0;
  width: 18px;
}
.nav-step-opt {
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
  margin-left: auto;
}

@media (max-width: 1100px) {
  .bento-container { grid-template-columns: 1fr; }
  .bento-span-2, .bento-span-3 { grid-column: span 1; }
  .kalender-grid { grid-template-columns: 1fr; }
}

/* ── UX: Smooth Expand (max-height transition statt display:none) ── */
.kachel-post-text {
  transition: max-height 0.25s ease;
  overflow: hidden;
}
.kachel-post-text.expanded { max-height: 2000px !important; }

/* ── UX: Toast mit Schließ-Button ── */
#toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  max-width: 420px;
}
#toast-close {
  background: none; border: none; cursor: pointer;
  font-size: var(--type-base); font-weight: 800; color: inherit;
  padding: 0 0 0 8px; line-height: 1; flex-shrink: 0;
  opacity: 0.7; transition: opacity 0.1s;
}
#toast-close:hover { opacity: 1; }
#toast-msg { flex: 1; }

/* ── UX: Approve-Pulse Animation ── */
@keyframes approvedPulse {
  0%   { box-shadow: var(--shadow-hard-sm); }
  50%  { box-shadow: 0 0 0 4px var(--accent-glow), 0 0 20px rgba(var(--accent-rgb),0.3); }
  100% { box-shadow: var(--shadow-hard-sm); }
}
.approve-flash { animation: approvedPulse 0.6s ease; }

/* ── UX: Loading-Overlay für parallele API-Calls ── */
#loading-overlay {
  position: fixed; inset: 0; background: rgba(12,12,16,0.75);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  backdrop-filter: blur(6px);
}
#loading-overlay.visible { opacity: 1; pointer-events: auto; }
.loading-box {
  background: var(--surface); border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-hard); padding: var(--space-6) var(--space-8);
  display: flex; align-items: center; gap: var(--space-4); border-radius: var(--radius-soft);
  font-weight: 400; font-size: var(--type-sm); color: var(--text-2);
}

/* ── UX: Reconnect Button ── */
#conn-reconnect {
  display: none; font-size: var(--type-sm); font-weight: 500; text-transform: none;
  background: none; color: var(--text-3); border: none;
  padding: 0; cursor: pointer; letter-spacing: 0;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.15s;
}
#conn-reconnect:hover { color: var(--text-2); }
#conn-badge.disconnected #conn-reconnect { display: inline; }

/* ── UX: Min font-size fix für hook-trigger-tag ── */
.hook-trigger-tag { font-size: var(--type-sm) !important; }

/* ── UX: Sidebar runs max-height flexibel ── */
#runs-list { max-height: 30vh; }

/* ── UX: Feedback-Textarea Validation-State ── */
textarea.input-error { border-color: rgba(217,92,92,0.55) !important; box-shadow: 0 0 0 3px rgba(217,92,92,0.1) !important; }

/* ── UX: JSON-Hilfe-Block für Step 18 ── */
.json-help {
  background: var(--bg); border: var(--border-thick); border-radius: var(--radius-soft);
  padding: var(--space-md) var(--space-5); margin-bottom: var(--space-md); font-size: var(--type-base);
}
.json-help summary { font-weight: 700; cursor: pointer; font-size: var(--type-base); }
.json-help pre {
  margin-top: 12px; font-family: monospace; font-size: var(--type-base);
  background: var(--surface); border: 1px solid var(--border); padding: 12px;
  border-radius: var(--radius-soft); overflow-x: auto; line-height: 1.5;
}

/* ── UX: Welcome / Landing Screen ── */
.welcome-state {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; overflow-y: auto;
}
.ws-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
}
.ws-logo {
  font-family: var(--font-serif); font-size: var(--type-sm); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--space-xl);
}
.ws-headline {
  font-family: var(--font-serif); font-size: var(--type-2xl); font-weight: 400;
  line-height: 1.2; color: var(--text); margin-bottom: var(--space-lg);
}
.ws-lead {
  font-size: var(--type-base); font-weight: 400; line-height: 1.7; color: var(--text);
  margin-bottom: var(--space-sm);
}
.ws-sub {
  font-size: var(--type-base); color: var(--text-2);
  margin-bottom: var(--space-2xl);
}
.ws-cta {
  display: flex; gap: var(--space-md); justify-content: center; align-items: center;
  margin-bottom: var(--space-3xl);
}
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  font-weight: 600; border-radius: var(--radius-soft); cursor: pointer;
  font-family: var(--font-sans); transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: var(--text-3); color: var(--text); }
.ws-results {
  text-align: left; border-top: 1px solid var(--border); padding-top: var(--space-xl);
}
.ws-results-label {
  font-size: var(--type-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); margin-bottom: var(--space-lg);
}
.ws-results-grid {
  display: flex; flex-direction: column; gap: var(--space-md);
}
.ws-result-item {
  display: flex; flex-direction: column; gap: 4px;
}
.ws-result-title {
  font-size: var(--type-base); font-weight: 600; color: var(--text);
}
.ws-result-desc {
  font-size: var(--type-base); color: var(--text-2); line-height: 1.6;
}

/* ── UX: Confirm-Dialog für teure Aktionen ── */
#confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  backdrop-filter: blur(4px);
}
#confirm-overlay.visible { opacity: 1; pointer-events: auto; }
.confirm-box {
  background: var(--surface); border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-hard); padding: 32px; width: 400px; border-radius: var(--radius-soft);
}
.confirm-title {
  font-family: var(--font-serif); font-size: var(--type-xl);
  font-weight: 500; font-style: italic; margin-bottom: 12px;
}
.confirm-msg { font-size: var(--type-base); font-weight: 400; color: var(--text-2); margin-bottom: 24px; line-height: 1.6; }
.confirm-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* ── UX: Step-Nr in Sidebar als ARIA-Tooltip via title, cursor default auf locked ── */
.nav-step-item.locked { pointer-events: none; }

/* ── Auth Screen ──────────────────────────────────────────────────────────────── */
#auth-screen {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;

}
.auth-box {
  background: var(--surface); border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-hard); padding: 48px 40px;
  width: 400px; border-radius: var(--radius-soft);
}
.auth-logo {
  font-family: var(--font-serif);
  font-size: var(--type-xl); font-weight: 500; font-style: italic;
  margin-bottom: 6px; text-align: center; letter-spacing: -0.02em;
  color: var(--text);
}
.auth-tagline {
  font-size: var(--type-sm); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--text-3); text-align: center;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--border-gold); padding-bottom: 24px;
}
.auth-tabs {
  display: flex; margin-bottom: 28px; border: 1px solid var(--border-gold); border-radius: var(--radius-soft); overflow: hidden;
}
.auth-tab {
  flex: 1; padding: 10px; font-size: var(--type-sm); font-weight: 500;
  cursor: pointer;
  background: transparent; border: none; font-family: var(--font-sans);
  color: var(--text-3); transition: background 0.2s, color 0.2s;
}
.auth-tab.active { background: var(--accent-glow); color: var(--accent); }
.auth-error {
  background: rgba(217,92,92,0.1); color: var(--red); padding: 10px 14px;
  font-size: var(--type-sm); font-weight: 400; margin-bottom: 16px;
  border-radius: var(--radius-soft); border: 1px solid rgba(217,92,92,0.25); display: none;
}
.auth-error.visible { display: block; }

/* ── Settings Screen ──────────────────────────────────────────────────────────── */
#settings-screen {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 4000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  backdrop-filter: blur(4px);
}
#settings-screen.visible { opacity: 1; pointer-events: auto; }
.settings-box {
  background: var(--surface); border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-hard); padding: 40px; width: 480px; border-radius: var(--radius-soft);
}
.settings-title {
  font-family: var(--font-serif); font-size: var(--type-xl);
  font-weight: 500; font-style: italic; margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-gold);
}
.settings-section {
  margin-bottom: 28px;
}
.settings-section-label {
  font-size: var(--type-sm); font-weight: 600;
  color: var(--text-3); margin-bottom: 12px;
}
.key-status {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--type-sm); font-weight: 400; margin-bottom: 12px;
}
.key-status-dot {
  width: var(--icon-xs); height: var(--icon-xs); border-radius: 50%;
  background: var(--text-3); border: none;
}
.key-status-dot.ok { background: #5DB87A; box-shadow: 0 0 6px rgba(93,184,122,0.4); }
.settings-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-gold); }

/* ─────────────────────────────────────────────────────────────────────────────
   PREMIUM ANIMATIONS – kalibriert auf Editorial Brutalism
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. View Transitions (Step-Wechsel) ─────────────────────────────────────── */
#content { view-transition-name: content-area; contain: layout; }

@keyframes vtOut {
  from { opacity: 1;   transform: translateY(0);   }
  to   { opacity: 0;   transform: translateY(-6px); }
}
@keyframes vtIn {
  from { opacity: 0;   transform: translateY(10px); }
  to   { opacity: 1;   transform: translateY(0);    }
}
::view-transition-old(content-area) {
  animation: vtOut 0.14s ease forwards;
}
::view-transition-new(content-area) {
  animation: vtIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── 2. Staggered Reveal ────────────────────────────────────────────────────── */
@keyframes stepFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── 3. Skeleton Loading ────────────────────────────────────────────────────── */
@keyframes skelShimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
.skel {
  background: linear-gradient(
    90deg,
    var(--bg)      25%,
    var(--surface) 50%,
    var(--bg)      75%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.5s ease infinite;
  border: var(--border-thick);
  border-radius: var(--radius-soft);
}
.skel-block {
  background: var(--surface);
  border: var(--border-thick);
  border-radius: var(--radius-soft);
  padding: 24px;
  box-shadow: var(--shadow-hard);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 4. Gate-Chip Stempel-Animation ─────────────────────────────────────────── */
@keyframes chipStamp {
  0%   { transform: scale(0.65); opacity: 0.3; }
  65%  { transform: scale(1.10); opacity: 1;   }
  100% { transform: scale(1);    opacity: 1;   }
}
.chip-stamp {
  animation: chipStamp 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  display: inline-flex; /* sicherstellen dass transform wirkt */
}

/* ── 5. Magnetic Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  will-change: transform, box-shadow;
}

/* ── User-Badge in Topbar ─────────────────────────────────────────────────────── */
#user-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--type-sm); font-weight: 600;
  background: var(--surface); padding: 6px 12px;
  border: 1px solid var(--border-gold); border-radius: var(--radius-soft);
  box-shadow: var(--shadow-hard-sm); cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
#user-badge:hover { background: var(--surface-2); border-color: rgba(var(--accent-rgb),0.4); box-shadow: 0 0 16px rgba(var(--accent-rgb),0.12), 0 0 0 1px rgba(var(--accent-rgb),0.25); }
.user-avatar {
  width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-soft);
  background: var(--accent); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--type-sm); font-weight: 900; flex-shrink: 0;
}

/* ── Theme Toggle Button ─────────────────────────────────────────────────────── */
#theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-soft);
  padding: 5px 11px;
  cursor: pointer;
  color: var(--text-2);
  font-size: var(--type-sm);
  line-height: 1;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
#theme-toggle-btn:hover { background: var(--surface-2); color: var(--text); }

/* ── Light Mode ──────────────────────────────────────────────────────────────── */


[data-theme="light"] body {
  font-weight: 400;
}
/* ── Stripe-Pattern: Stat-Grids (kein Border/Bg, vertikale Divider) ────────── */
[class*="-overview"], [class*="-stats-row"], [class*="-sig-grid"],
[class*="-hero-stats"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-bottom: 1px solid var(--border);
  background: transparent;
  border-radius: 0;
  gap: 0;
}
[class*="-stat-card"], [class*="-sig-card"] {
  padding: 28px 24px;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-radius: 0;
  box-shadow: none;
}
[class*="-stat-card"]:last-child,
[class*="-sig-card"]:last-child  { border-right: none !important; }

/* Hero-Metriken: DM Serif Display */
[class*="-stat-val"], [class*="-sig-val"], [class*="-kpi-val"],
[class*="-hero-verdict"] {
  font-family: var(--font-serif) !important;
  font-size: var(--type-metric) !important;
  font-weight: 400 !important;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
[class*="-stat-label"], [class*="-sig-key"], [class*="-kpi-label"],
[class*="-kpi-key"] {
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
}

/* Strategie-Statements, Rang-Zahlen, Modal-Titel, Step-Fragen → Serif */
.sc4-hero-statement, .sc7-card-rank, .sc8-rang,
.modal-title, .confirm-title, .tip-box-title,
.step-screen-question, .gate-question,
.ws-headline, .card-title h2 {
  font-family: var(--font-serif);
}


/* ── Dark Mode ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-app:           #111110;
  --bg-surface:       #1A1918;
  --bg-surface-hover: #222120;
  --bg-elevated:      #2A2928;
  --bg-inset:         #0D0D0C;
  --bg:        var(--bg-app);
  --surface:   var(--bg-surface);
  --surface-2: var(--bg-elevated);
  --text:         #EDECE8;
  --text-2:       #A09E96;
  --text-3:       #706E66;
  --text-inverse: #111110;
  --border:        #2E2C28;
  --border-subtle: #201F1C;
  --border-strong: #3E3C38;
  --border-gold:   rgba(212, 168, 83, 0.20);
  --border-thick:  1px solid var(--border-gold);
  --accent-hover:  #E0B865;
  --accent-text:   #D4A853;
  --sidebar-bg:    #161615;
  --sidebar-border: #2E2C28;
  --status-success:    #34D399;
  --status-warning:    #FBBF24;
  --status-danger:     #F87171;
  --status-info:       #60A5FA;
  --status-success-bg: rgba(52, 211, 153, 0.08);
  --status-warning-bg: rgba(251, 191, 36, 0.08);
  --status-danger-bg:  rgba(248, 113, 113, 0.08);
  --status-info-bg:    rgba(96, 165, 250, 0.08);
  --red: #F87171;
  --shadow-card:     none;
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border);
  --shadow-modal:    0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-hard:     0 2px 12px rgba(0,0,0,0.18);
  --shadow-hard-sm:  0 1px 6px rgba(0,0,0,0.12);
}



[data-theme="light"] .phase-steps {
  background: rgba(0,0,0,0.03);
  border-top-color: rgba(0,0,0,0.06);
  border-bottom-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .nav-step-item:hover:not(.locked) {
  background: rgba(0,0,0,0.04);
}

[data-theme="light"] .btn-primary {
  color: #FFFFFF;
}

[data-theme="light"] #modal-overlay,
[data-theme="light"] #confirm-overlay,
[data-theme="light"] #tip-overlay,
[data-theme="light"] #settings-screen {
  background: rgba(0,0,0,0.45);
}

[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }

.reject-tag {
  padding: 10px 18px;
  font-size: var(--type-base);
  font-weight: 500;
  border-radius: var(--radius-soft);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.reject-tag:hover { border-color: var(--text-3); color: var(--text); }
.reject-tag.active {
  background: var(--accent-glow);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
  font-weight: 600;
}

.demo-banner {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.06));
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 10px;
  padding: 10px 18px;
  margin-bottom: 16px;
  font-size: var(--type-sm);
  color: var(--text-2);
  text-align: center;
}
.demo-banner a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
}
.demo-banner a:hover { text-decoration: underline; }

/* ── Step Screen – Moderierte Denkfläche ────────────────────────────────────── */
.step-screen {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: var(--space-xl) 0;
}
.step-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

/* =============================================
   STEP-ILLUSTRATIONEN
   ============================================= */

.step-illustration {
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--space-8) auto;
  text-align: center;
  line-height: 0;
}

.step-illustration__img {
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06));
}

.step-illustration:empty,
.step-illustration:has(img[style*="display: none"]) {
  display: none;
  margin: 0;
}

.step-illustration--step-09 {
  max-width: 300px;
}

[data-theme="dark"] .step-illustration {
  max-width: 800px;
  margin-bottom: var(--space-10);
}

[data-theme="dark"] .step-illustration__img {
  border-radius: 0;
  filter: drop-shadow(0 1px 4px rgba(19, 56, 38, 0.08));
}

/* ── Editorial Separator (Ornament zwischen Illustration und Headline) ───── */
.step-editorial-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto var(--space-8) auto;
  max-width: 280px;
  color: var(--border-strong);
}
.step-editorial-sep::before,
.step-editorial-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.step-editorial-sep__ornament {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.3em;
  color: var(--text-3);
  opacity: 0.6;
}
[data-theme="dark"] .step-editorial-sep__ornament {
  color: var(--ed-accent, #2D5E44);
  opacity: 0.45;
}
[data-theme="dark"] .step-editorial-sep::before,
[data-theme="dark"] .step-editorial-sep::after {
  background: var(--ed-border, #D8DDD9);
}

@media (max-width: 768px) {
  .step-illustration {
    max-width: 100%;
    margin-bottom: var(--space-6);
  }
}

.step-screen-question {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: var(--space-md);
}
.step-screen-question::first-letter {
  font-family: var(--font-serif);
  font-size: 3.2em;
  float: left;
  line-height: 0.85;
  margin-right: 0.08em;
  margin-top: 0.05em;
  color: var(--text);
  font-weight: 600;
}
[data-theme="dark"] .step-screen-question::first-letter {
  color: var(--ed-accent, #133826);
}
.step-screen-task {
  font-size: var(--type-base);
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.step-screen-body {
  margin-bottom: var(--space-xl);
}

/* ── Phase Summary – Dokument-Charakter ─────────────────────────────────────── */
.summary-document {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: var(--space-2xl) 0;
}
.summary-header {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.summary-section {
  margin-bottom: var(--space-xl);
}
.summary-section-title {
  font-family: var(--font-serif); font-size: var(--type-base); font-weight: 500;
  font-style: italic; color: var(--accent);
  margin-bottom: var(--space-sm); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.summary-section-body {
  font-size: var(--type-base); line-height: 1.75; color: var(--text); white-space: pre-wrap;
}
.summary-footer {
  display: flex; align-items: center; gap: var(--space-lg);
  padding-top: var(--space-xl); border-top: 1px solid var(--border);
  margin-top: var(--space-2xl);
}

/* ── Typografie-Hierarchie ───────────────────────────────────────────────────── */
/* Utility-Klassen für dynamisch generierten HTML-Content */
.type-h1,
.card-body h1 {
  font-family: var(--font-serif); font-size: var(--type-2xl); font-weight: 500;
  font-style: italic; line-height: 1.15; letter-spacing: -0.02em; color: var(--text);
}
.type-h2,
.card-body h2 {
  font-family: var(--font-serif); font-size: var(--type-xl); font-weight: 500;
  font-style: italic; line-height: 1.25; letter-spacing: -0.01em; color: var(--text);
  margin-bottom: var(--space-md);
}
.type-h3,
.card-body h3 {
  font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 500;
  font-style: italic; line-height: 1.35; color: var(--text);
  margin-bottom: var(--space-sm); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-gold);
}
.type-body {
  font-size: var(--type-base); font-weight: 400; line-height: 1.65; color: var(--text);
}
.type-secondary {
  font-size: var(--type-sm); font-weight: 400; line-height: 1.55; color: var(--text-2);
}
.type-meta {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-2);
}

/* ── Step 7: Prioritäts-Dashboard ──────────────────────────────────────────── */
.sc7-dashboard { display: flex; flex-direction: column; gap: 28px; }

/* Board */
.sc7-board { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc7-board-header { padding: 14px 20px; border-bottom: 1px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.07), transparent); display: flex; align-items: center; gap: 12px; }
.sc7-board-title { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 600; font-style: italic; color: var(--text); flex: 1; }
.sc7-legend { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sc7-legend-dot { width: var(--icon-xs); height: var(--icon-xs); border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sc7-legend-lbl { font-size: var(--type-xs); font-weight: 600; color: var(--text-3); white-space: nowrap; }
.sc7-chart-container { width: 100%; min-height: 240px; padding: 8px 4px; }

/* HITL-Kurzfassung */
.sc7-hitl-summary { border-top: 1px solid var(--border-gold); padding: 14px 22px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.sc7-hitl-row { display: flex; gap: 10px; align-items: flex-start; }
.sc7-hitl-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); min-width: 150px; padding-top: 3px; flex-shrink: 0; }
.sc7-hitl-text { font-size: var(--type-base); color: var(--text-2); line-height: 1.55; }

/* Chips */
.sc7-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; }
.sc7-chip-high { background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--accent); }
.sc7-chip-mid  { background: rgba(128,128,160,0.1); border: 1px solid var(--border); color: var(--text-2); }
.sc7-chip-low  { background: transparent; border: 1px solid var(--border); color: var(--text-3); }
.sc7-chip-risk { background: rgba(217,92,92,0.12); border: 1px solid rgba(217,92,92,0.35); color: var(--red); }
.sc7-chip-qw   { background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.25); color: var(--accent); }

/* Karten-Bereich */
.sc7-cards-section {}
.sc7-section-header { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 500; font-style: italic; color: var(--text-2); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-gold); }
.sc7-cards { display: flex; flex-direction: column; gap: 10px; }
.sc7-card { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; display: flex; overflow: hidden; transition: border-color 0.15s; }
.sc7-card:hover { border-color: rgba(var(--accent-rgb),0.45); }
.sc7-card-rank-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 14px 8px; min-width: 52px; border-right: 1px solid var(--border-gold); background: var(--surface-2); gap: 1px; }
.sc7-card-rank { font-family: var(--font-serif); font-size: var(--type-2xl); font-weight: 600; color: var(--accent); line-height: 1; }
.sc7-card-score { font-size: var(--type-xs); font-weight: 700; font-family: var(--font-mono); color: var(--text-3); margin-top: 4px; }
.sc7-card-score-label { font-size: var(--type-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); opacity: 0.7; }
.sc7-card-body { flex: 1; padding: 14px 18px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.sc7-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sc7-card-title { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 600; color: var(--text); line-height: 1.35; flex: 1; }
.sc7-card-chips { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; padding-top: 2px; }
.sc7-card-prueffrage { font-size: var(--type-base); font-style: italic; color: var(--text-3); line-height: 1.5; padding-left: 10px; border-left: 1px solid var(--border-gold); margin-bottom: 6px; }

/* Metriken */
.sc7-metrics { display: flex; flex-direction: column; gap: 7px; }
.sc7-metric { display: flex; align-items: center; gap: 10px; }
.sc7-metric-label { font-size: var(--type-xs); font-weight: 600; color: var(--text-3); min-width: 160px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.sc7-bar-wrap { flex: 1; height: 4px; background: var(--border); border-radius: 10px; overflow: hidden; }
.sc7-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.5)); border-radius: 10px; }
.sc7-metric-val { font-size: var(--type-xs); font-weight: 700; font-family: var(--font-mono); color: var(--text-2); min-width: 28px; text-align: right; }

/* Detail-Toggle */
.sc7-detail-toggle { align-self: flex-start; background: none; border: 1px solid var(--border); border-radius: var(--radius-soft); color: var(--text-3); font-size: var(--type-xs); font-family: var(--font-sans); font-weight: 700; padding: 4px 14px; cursor: pointer; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.05em; }
.sc7-detail-toggle:hover { border-color: rgba(var(--accent-rgb),0.5); color: var(--accent); }
.sc7-detail-body { border-top: 1px solid var(--border-gold); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.sc7-detail-row { display: flex; flex-direction: column; gap: 4px; }
.sc7-detail-row-head { display: flex; align-items: center; gap: 8px; }
.sc7-detail-row-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.sc7-detail-score { font-size: var(--type-xs); font-family: var(--font-mono); font-weight: 700; color: var(--accent); background: var(--accent-glow); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: 12px; padding: 1px 8px; }
.sc7-detail-row-text { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }
.sc7-detail-hinweis .sc7-detail-row-label { color: var(--yellow); }
.sc7-detail-hinweis .sc7-detail-row-text { color: var(--text); }

@media (max-width: 700px) {
  .sc7-board-header { flex-wrap: wrap; }
  .sc7-legend { flex-wrap: wrap; gap: 8px; }
  .sc7-card { flex-direction: column; }
  .sc7-card-rank-col { flex-direction: row; min-width: unset; border-right: none; border-bottom: 1px solid var(--border-gold); padding: 10px 14px; gap: 8px; }
  .sc7-metric-label { min-width: 100px; }
}

/* ─── Step 1: Diagnose-Dashboard ─────────────────────────────────────────── */
.sc1-dashboard { display: flex; flex-direction: column; gap: 22px; }

/* Stats + Donut */
.sc1-stats-row { display: flex; align-items: center; gap: 24px; background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; padding: 20px 28px; flex-wrap: wrap; }
.sc1-stats-label {
  width: 100%;
  font-family: var(--font-serif);
  font-size: var(--type-xs);
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .sc1-stats-label {
  color: var(--ed-text-2, #5C6660);
  border-bottom-color: var(--ed-border, #D8DDD9);
}
.sc1-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; }
.sc1-stat-val { font-family: var(--font-serif); font-size: var(--type-2xl); font-weight: 600; color: var(--text); line-height: 1; }
.sc1-stat-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.sc1-stat-crit .sc1-stat-val { color: #D95C5C; }
.sc1-stat-mid  .sc1-stat-val { color: var(--accent); }
.sc1-stat-low  .sc1-stat-val { color: var(--text-3); }
.sc1-donut-wrap { margin-left: auto; }
.sc1-donut-chart { width: var(--icon-lg); height: var(--icon-lg); }

/* Chips */
.sc1-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; white-space: nowrap; flex-shrink: 0; }
.sc1-chip-kritisch { background: rgba(217,92,92,0.14); border: 1px solid rgba(217,92,92,0.4); color: #D95C5C; }
.sc1-chip-mittel   { background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--accent); }
.sc1-chip-gering   { background: transparent; border: 1px solid var(--border); color: var(--text-3); }

/* Karten */
.sc1-cards { display: flex; flex-direction: column; gap: 10px; }
.sc1-card { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; display: flex; overflow: hidden; transition: border-color 0.15s; }
.sc1-card:hover { border-color: rgba(var(--accent-rgb),0.4); }
.sc1-card-icon-col { display: flex; align-items: flex-start; justify-content: center; padding: 18px 14px; background: var(--surface-2); border-right: 1px solid var(--border-gold); min-width: 52px; flex-shrink: 0; }
.sc1-domain-icon { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2.25; flex-shrink: 0; }
.sc1-card-body { flex: 1; padding: 14px 18px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sc1-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sc1-card-bereich { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.25; flex: 1; }
.sc1-card-beschoenigung { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }
.sc1-risk-toggle { align-self: flex-start; background: none; border: 1px solid var(--border); border-radius: var(--radius-soft); color: var(--text-3); font-size: var(--type-xs); font-family: var(--font-sans); font-weight: 700; padding: 4px 14px; cursor: pointer; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.05em; }
.sc1-risk-toggle:hover { border-color: rgba(217,92,92,0.4); color: #D95C5C; }
.sc1-risk-body { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; }
.sc1-risk-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #D95C5C; margin-bottom: 5px; }
.sc1-risk-text { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }

@media (max-width: 700px) {
  .sc1-stats-row { gap: 14px; padding: 16px 18px; }
  .sc1-donut-wrap { margin-left: 0; }
  .sc1-card { flex-direction: column; }
  .sc1-card-icon-col { flex-direction: row; min-width: unset; border-right: none; border-bottom: 1px solid var(--border-gold); padding: 10px 14px; }
}

/* ─── Step 2: Fragen zum Briefing ────────────────────────────────────────── */

/* Status-Leiste */
.sc2-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border-gold); border-radius: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.sc2-status-counts { display: flex; align-items: center; gap: 8px; }
.sc2-status-item { font-size: var(--type-sm); font-weight: 600; color: var(--text-2); }
.sc2-status-num { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); margin-right: 2px; }
.sc2-status-sep { color: var(--text-3); font-size: var(--type-sm); }
.sc2-all-done .sc2-status-num { color: var(--accent); }
.sc2-open-count .sc2-status-num { color: var(--accent); }
.sc2-progress-track { width: 120px; height: 4px; background: var(--border); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.sc2-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.5)); border-radius: 10px; transition: width 0.4s ease; }

/* Karten */
.sc2-card { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; margin-bottom: 16px; transition: border-color 0.15s; position: relative; }
.sc2-card-open     { border-left: 3px solid var(--accent); }
.sc2-card-answered { border-left: 3px solid var(--border); }
.sc2-card:hover    { border-color: rgba(var(--accent-rgb),0.4); }

/* ── Editorial Separator zwischen Frage-Cards ─────────────────────────────── */
.sc2-card-sep-editorial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
  color: var(--text-3);
  opacity: 0.4;
}
.sc2-card-sep-editorial::before,
.sc2-card-sep-editorial::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.sc2-card-sep-editorial__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* Karten-Kopfzeile – Editorial: große Ziffer + Domain */
.sc2-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border-gold); }
.sc2-card-meta { display: flex; align-items: center; gap: 7px; }
.sc2-card-num { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.sc2-card-nr-big {
  display: none;
}
.sc2-card-sep { color: var(--text-3); font-size: var(--type-xs); }
.sc2-domain-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; }
.sc2-card-bereich { font-size: var(--type-sm); font-weight: 600; color: var(--text-2); }

/* Editorial Theme: große Frage-Nummer als Designelement */
[data-theme="dark"] .sc2-card-header {
  background: transparent;
  border-bottom: none;
  padding: 20px 22px 0;
  gap: 14px;
}
[data-theme="dark"] .sc2-card-num { display: none; }
[data-theme="dark"] .sc2-card-sep { display: none; }
[data-theme="dark"] .sc2-card-nr-big {
  display: block;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  color: var(--ed-accent, #133826);
  opacity: 0.18;
  flex-shrink: 0;
  margin-right: 4px;
}
[data-theme="dark"] .sc2-card-meta {
  flex: 1;
  gap: 8px;
}
[data-theme="dark"] .sc2-card-bereich {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ed-text-2, #5C6660);
}

/* Status-Chip */
.sc2-status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.sc2-chip-open { background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); }
.sc2-chip-done { background: transparent; border: 1px solid var(--border); color: var(--text-3); }
.sc2-chip-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; }

/* Kernfrage – Pull-Quote-Stil */
.sc2-card-question { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 600; color: var(--text); line-height: 1.4; padding: 20px 22px 0; }
[data-theme="dark"] .sc2-card-question {
  border-left: 2px solid var(--ed-accent, #2D5E44);
  margin: 16px 22px 0;
  padding: 4px 0 4px 18px;
}

/* Widerspruch-Block */
.sc2-widerspruch { margin: 14px 22px 0; padding: 11px 14px; background: var(--surface-2); border-left: 2px solid rgba(var(--accent-rgb),0.3); border-radius: 0 6px 6px 0; }
.sc2-widerspruch-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sc2-widerspruch-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--icon-color); cursor: default; flex-shrink: 0; }
.sc2-widerspruch-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); cursor: default; }
.sc2-widerspruch-text { font-size: var(--type-sm); color: var(--text-2); line-height: 1.6; }

/* Editorial Theme: Widerspruch als redaktionelle Marginalie */
[data-theme="dark"] .sc2-widerspruch {
  background: transparent;
  border-left: none;
  border-top: 1px solid var(--ed-border, #D8DDD9);
  border-radius: 0;
  padding: 12px 22px 0;
  margin: 14px 22px 0;
}
[data-theme="dark"] .sc2-widerspruch-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--type-xs);
  color: var(--ed-text-2, #5C6660);
}
[data-theme="dark"] .sc2-widerspruch-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-sm);
  color: var(--ed-text-2, #5C6660);
  line-height: 1.65;
}

/* Antwort-Bereich */
.sc2-answer-area { padding: 16px 22px 22px; }
.sc2-answer-label { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 8px; }
.sc2-answer-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--icon-color); flex-shrink: 0; }
.sc2-textarea { width: 100%; min-height: 120px; resize: vertical; font-size: var(--type-base); line-height: 1.65; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-soft); padding: 14px 16px; font-family: var(--font-sans); transition: border-color 0.15s, box-shadow 0.15s; }
.sc2-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }

/* Empty State */
.sc2-empty { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-soft); color: var(--text-2); font-size: var(--type-sm); }
.sc2-empty-icon { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2.5; color: var(--icon-color); flex-shrink: 0; }

@media (max-width: 700px) {
  .sc2-status-bar { gap: 10px; padding: 10px 14px; }
  .sc2-progress-track { width: 80px; }
  .sc2-card-question { font-size: var(--type-base); padding: 16px 16px 0; }
  .sc2-widerspruch { margin: 12px 16px 0; }
  .sc2-answer-area { padding: 14px 16px 18px; }
}

/* ─── Step 3: Korrigiertes Briefing ─────────────────────────────────────── */
.sc3-dashboard { display: flex; flex-direction: column; gap: 24px; }

/* Stat-Übersicht */
.sc3-overview { display: flex; gap: 12px; flex-wrap: wrap; }
.sc3-stat-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; padding: 24px 20px; min-width: 170px; flex: 1; }
.sc3-stat-icon { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2.25; color: var(--icon-color); flex-shrink: 0; }
.sc3-stat-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 2px; }
.sc3-stat-val { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.1; }
.sc3-stat-ready .sc3-stat-icon { color: var(--accent); }
.sc3-stat-ready .sc3-stat-val  { color: var(--accent); }
.sc3-stat-warn .sc3-stat-icon  { color: var(--yellow, #C9A84C); }
.sc3-stat-warn .sc3-stat-val   { color: var(--yellow, #C9A84C); }

/* Sektionen */
.sc3-section { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc3-section-header { display: flex; align-items: center; gap: 9px; padding: 14px 20px; border-bottom: 1px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.06), transparent); }
.sc3-section-header > span:first-of-type { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); flex: 1; }
.sc3-section-icon { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc3-section-count { font-size: var(--type-xs); font-weight: 700; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); border-radius: 20px; padding: 1px 9px; }

/* Tabs */
.sc3-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-gold); background: var(--surface-2); overflow-x: auto; }
.sc3-tab { display: flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: var(--type-sm); font-weight: 600; color: var(--text-3); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-sans); white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.sc3-tab:hover { color: var(--text-2); }
.sc3-tab-active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); }
.sc3-tab-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }

/* Tab-Panels: Snap-Felder */
.sc3-tab-panels { padding: 0; }
.sc3-tab-panel { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap: 1px; background: var(--border-gold); padding: 0; }
.sc3-snap-field { background: var(--surface); padding: 14px 18px; display: flex; flex-direction: column; gap: 5px; }
.sc3-snap-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); cursor: default; }
.sc3-snap-val { font-size: var(--type-base); font-weight: 500; color: var(--text); line-height: 1.6; }

/* Korrekturen-Block */
.sc3-korrekturen-block { margin: 0; border-top: 1px solid var(--border-gold); padding: 16px 20px; background: var(--surface-2); }
.sc3-korrekturen-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.sc3-korrekturen-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; }
.sc3-korrekturen-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); }
.sc3-korrekturen-text { font-size: var(--type-base); color: var(--text-2); line-height: 1.65; }
.sc3-aenderungen-block {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 18px 22px;
}
.sc3-aenderungen-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sc3-aenderungen-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc3-aenderungen-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.sc3-aenderungen-text { font-size: var(--type-base); color: var(--text); line-height: 1.65; margin: 0; }

/* Vergleichskarten */
.sc3-compare-cards { display: flex; flex-direction: column; gap: 0; }
.sc3-compare-card { padding: 24px 22px; border-bottom: 1px solid var(--border-gold); }
.sc3-compare-card:last-child { border-bottom: none; }
.sc3-compare-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sc3-compare-feld { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); flex: 1; }
.sc3-compare-chip { display: inline-flex; padding: 2px 9px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.sc3-chip-widerspruch { background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); }
.sc3-chip-korrektur   { background: rgba(128,128,160,0.1); border: 1px solid var(--border); color: var(--text-2); }
.sc3-compare-split { display: flex; gap: 0; border: 1px solid var(--border-gold); border-radius: 8px; overflow: hidden; }
.sc3-compare-side { flex: 1; padding: 13px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc3-compare-before { background: var(--surface-2); border-right: 1px solid var(--border-gold); }
.sc3-compare-after  { background: var(--surface); }
.sc3-compare-side-label { display: flex; align-items: center; gap: 5px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); cursor: default; }
.sc3-compare-side-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc3-compare-after .sc3-compare-side-label { color: var(--accent); }
.sc3-compare-after .sc3-compare-side-icon  { color: var(--accent); }
.sc3-compare-side-text { font-size: var(--type-base); color: var(--text-2); line-height: 1.55; }
.sc3-compare-after .sc3-compare-side-text { color: var(--text); font-weight: 500; }
.sc3-compare-divider { display: flex; align-items: center; justify-content: center; padding: 0 8px; background: var(--surface-2); border-right: 1px solid var(--border-gold); flex-shrink: 0; }
.sc3-arrow-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--icon-color); }
.sc3-compare-why { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); opacity: 0.8; }
.sc3-compare-why-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); white-space: nowrap; padding-top: 3px; min-width: 90px; flex-shrink: 0; }
.sc3-compare-why-text { font-size: var(--type-sm); color: var(--text-3); line-height: 1.6; }

/* Offene Lücken */
.sc3-luecken { display: flex; flex-direction: column; gap: 0; }
.sc3-luecke { padding: 14px 20px; border-bottom: 1px solid var(--border-gold); }
.sc3-luecke:last-child { border-bottom: none; }
.sc3-luecke-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.sc3-luecke-feld { font-size: var(--type-sm); font-weight: 600; color: var(--text); }
.sc3-luecke-mark { font-size: var(--type-xs); font-weight: 700; font-family: var(--font-mono); color: var(--yellow, #C9A84C); background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); border-radius: 4px; padding: 1px 6px; }
.sc3-luecke-problem { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; margin-bottom: 6px; }
.sc3-luecke-impact { display: flex; align-items: center; gap: 5px; font-size: var(--type-xs); color: var(--text-3); font-weight: 600; }
.sc3-luecke-impact-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }

/* Hinweis + Empty */
.sc3-hinweis { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; background: rgba(217,92,92,0.06); border: 1px solid rgba(217,92,92,0.25); border-radius: 8px; font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }
.sc3-hinweis-icon { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.5; color: #D95C5C; flex-shrink: 0; margin-top: 1px; }
.sc3-empty-panel { padding: 20px 22px; color: var(--text-3); font-size: var(--type-base); font-style: italic; }

@media (max-width: 700px) {
  .sc3-overview { gap: 8px; }
  .sc3-stat-card { min-width: 140px; padding: 24px 20px; }
  .sc3-compare-split { flex-direction: column; }
  .sc3-compare-divider { display: none; }
  .sc3-compare-before { border-right: none; border-bottom: 1px solid var(--border-gold); }
  .sc3-tab-panel { grid-template-columns: 1fr; }
}

/* ─── Step 4: Strategie Dashboard ─────────────────────────────────────────── */
.sc4-dashboard { display: flex; flex-direction: column; gap: 32px; }

/* Executive Summary Row */
.sc4-summary-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sc4-summary-card { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; padding: 24px 20px; flex: 1; min-width: 190px; }
.sc4-summary-strategy { flex-basis: 100%; flex-shrink: 0; border-left: 3px solid var(--accent); }
.sc4-summary-icon-wrap { width: var(--icon-lg); height: var(--icon-lg); display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb),0.1); border-radius: 8px; flex-shrink: 0; }
.sc4-icon-stop-wrap  { background: rgba(217,92,92,0.1); }
.sc4-icon-risk-wrap  { background: rgba(201,168,76,0.12); }
.sc4-summary-icon  { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); }
.sc4-icon-stop     { color: #D95C5C; }
.sc4-icon-risk     { color: var(--yellow, #C9A84C); }
.sc4-summary-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 4px; }
.sc4-summary-val   { font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.4; }
.sc4-summary-italic { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; }

/* Sections */
.sc4-section { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc4-section-header { display: flex; align-items: center; gap: 9px; padding: 14px 20px; border-bottom: 1px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.06), transparent); }
.sc4-section-header > span:first-of-type { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); flex: 1; }
.sc4-section-icon  { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc4-section-count { font-size: var(--type-xs); font-weight: 700; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); border-radius: 20px; padding: 1px 9px; }

/* Hero: Strategie in einem Satz */
.sc4-hero-section  { border-left: 3px solid var(--accent); }
.sc4-hero-body     { padding: 24px 28px 20px; display: flex; flex-direction: column; gap: 20px; }
.sc4-hero-statement { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 600; font-style: italic; color: var(--text); line-height: 1.55; }
.sc4-logic-row     { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap: 10px; }
.sc4-logic-card    { background: var(--surface-2); border: 1px solid var(--border-gold); border-radius: 8px; padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; }
.sc4-logic-label   { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); }
.sc4-logic-icon    { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc4-logic-text    { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }

/* ECharts Prioritäten-Übersicht */
.sc4-chart-wrap { width: 100%; min-height: 80px; padding: 6px 8px; border-bottom: 1px solid var(--border-gold); background: var(--surface-2); }

/* Leitprinzipien Cards */
.sc4-prinzip-cards { display: flex; flex-direction: column; }
.sc4-prinzip-card  { display: flex; border-bottom: 1px solid var(--border-gold); }
.sc4-prinzip-card:last-child { border-bottom: none; }
.sc4-prinzip-rank  { display: flex; align-items: flex-start; justify-content: center; padding: 16px 12px; min-width: 44px; font-family: var(--font-serif); font-size: var(--type-xl); font-weight: 600; color: var(--accent); background: var(--surface-2); border-right: 1px solid var(--border-gold); line-height: 1; flex-shrink: 0; }
.sc4-prinzip-body  { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc4-prinzip-rule  { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.55; cursor: default; }
.sc4-prinzip-hint  { font-size: var(--type-base); color: var(--text-3); line-height: 1.6; }
.sc4-detail-toggle { align-self: flex-start; background: none; border: none; border-radius: 0; color: var(--text-3); font-size: var(--type-xs); font-family: var(--font-sans); font-weight: 600; padding: 2px 0; cursor: pointer; transition: color 0.15s; opacity: 0.6; }
.sc4-detail-toggle:hover { color: var(--accent); opacity: 1; }
.sc4-prinzip-detail { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.sc4-detail-label  { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); cursor: default; }
.sc4-detail-text   { font-size: var(--type-base); color: var(--text-3); line-height: 1.6; }

/* No-List Cards */
.sc4-stop-cards    { display: flex; flex-direction: column; }
.sc4-stop-card     { display: flex; border-bottom: 1px solid var(--border-gold); }
.sc4-stop-card:last-child { border-bottom: none; }
.sc4-stop-marker   { display: flex; align-items: flex-start; justify-content: center; padding: 18px 12px; background: rgba(217,92,92,0.05); border-right: 1px solid var(--border-gold); min-width: 44px; flex-shrink: 0; }
.sc4-stop-icon     { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.5; color: #D95C5C; }
.sc4-stop-body     { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc4-stop-title    { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.35; cursor: default; margin-bottom: 2px; }
.sc4-stop-price    { display: flex; align-items: baseline; gap: 7px; font-size: var(--type-base); color: var(--text-2); }
.sc4-stop-price-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); flex-shrink: 0; cursor: default; }
.sc4-stop-reason   { font-size: var(--type-sm); color: var(--text-3); line-height: 1.6; font-style: italic; opacity: 0.8; }
.sc4-chip-running  { display: inline-flex; padding: 4px 10px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(217,92,92,0.08); border: 1px solid rgba(217,92,92,0.28); color: #D95C5C; align-self: flex-start; margin-top: 2px; }

/* Politische Realität / Hürden */
.sc4-hurde-split   { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); }
.sc4-hurde-col     { padding: 16px 20px; border-right: 1px solid var(--border-gold); display: flex; flex-direction: column; gap: 6px; }
.sc4-hurde-col:last-child { border-right: none; }
.sc4-hurde-col-action { background: var(--surface-2); }
.sc4-hurde-col-label { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); cursor: default; }
.sc4-hurde-icon    { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc4-hurde-col-action .sc4-hurde-col-label { color: var(--accent); }
.sc4-hurde-col-action .sc4-hurde-icon      { color: var(--accent); }
.sc4-hurde-col-text { font-size: var(--type-base); font-weight: 400; color: var(--text-3); line-height: 1.6; }
.sc4-hurde-col-action .sc4-hurde-col-text  { font-size: var(--type-base); font-weight: 500; color: var(--text); }

@media (max-width: 700px) {
  .sc4-summary-card  { min-width: 160px; }
  .sc4-logic-row     { grid-template-columns: 1fr; }
  .sc4-hurde-split   { grid-template-columns: 1fr; }
  .sc4-hurde-col     { border-right: none; border-bottom: 1px solid var(--border-gold); }
  .sc4-hurde-col:last-child { border-bottom: none; }
  .sc4-hero-statement { font-size: var(--type-lg); }
}

/* ─── Step 5: Initiativen-Universum Dashboard ──────────────────────────────── */
.sc5-dashboard   { display: flex; flex-direction: column; gap: 28px; }

/* Executive area */
.sc5-exec        { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.sc5-exec-stats  { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 240px; }
.sc5-exec-chart  { flex: 0 0 280px; min-height: 110px; background: var(--surface); border: 1px solid var(--border-gold); border-radius: 8px; padding: 6px 4px; }

/* Stat cards */
.sc5-stat        { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 8px; padding: 12px 16px; flex: 1; min-width: 100px; display: flex; flex-direction: column; justify-content: center; }
.sc5-stat-val    { font-family: var(--font-serif); font-size: var(--type-xl); font-weight: 600; color: var(--text); line-height: 1; margin-bottom: 5px; }
.sc5-stat-label  { font-size: var(--type-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; }
.sc5-val-accent  { color: var(--accent); }
.sc5-val-warn    { color: var(--yellow, #C9A84C); }
.sc5-val-ok      { color: #5C9E5C; font-size: var(--type-lg); }
.sc5-val-risk    { color: #D95C5C; font-size: var(--type-lg); }

/* Gruppen */
.sc5-groups        { display: flex; flex-direction: column; gap: 20px; }
.sc5-group         { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc5-group-header  { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-bottom: 1px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.05), transparent); }
.sc5-group-cat     { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--accent); line-height: 1; min-width: 16px; }
.sc5-group-label   { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); flex: 1; }
.sc5-group-count   { font-size: var(--type-xs); font-weight: 700; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); border-radius: 20px; padding: 1px 9px; }

/* Karten */
.sc5-group-cards   { display: flex; flex-direction: column; }
.sc5-card          { border-bottom: 1px solid var(--border-gold); }
.sc5-card:last-child { border-bottom: none; }

/* Karten-Kopf */
.sc5-card-head     { padding: 13px 20px 10px; border-bottom: 1px solid rgba(var(--accent-rgb),0.08); }
.sc5-card-nr       { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); margin-bottom: 3px; }
.sc5-card-title    { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.3; }
.sc5-card-chips    { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

/* Karten-Body */
.sc5-card-body     { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 10px; }

/* Hypothese – Hauptaussage */
.sc5-hypothese     { font-size: var(--type-base); color: var(--text-2); line-height: 1.7; }

/* Meta-Zeile (ruhig, nachrangig) */
.sc5-meta-row      { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 2px; border-top: 1px solid var(--border); }
.sc5-meta-item     { display: flex; align-items: center; gap: 4px; cursor: default; }
.sc5-meta-icon     { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--icon-color); flex-shrink: 0; }
.sc5-meta-label    { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.sc5-meta-val      { font-size: var(--type-xs); font-weight: 700; color: var(--text-2); margin-left: 2px; }

/* Meta-Farben */
.sc5-col-ok        { color: #5C9E5C; }
.sc5-col-accent    { color: var(--accent); }
.sc5-col-warn      { color: var(--yellow, #C9A84C); }
.sc5-col-risk      { color: #D95C5C; }
.sc5-col-muted     { color: var(--text-3); }

/* Chips */
.sc5-chip          { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sc5-chip-icon     { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc5-chip-qw       { background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.28); color: var(--accent); }
.sc5-chip-fr       { background: rgba(217,92,92,0.08); border: 1px solid rgba(217,92,92,0.28); color: #D95C5C; }
.sc5-chip-ext      { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); }

/* Detail / Collapsible */
.sc5-detail-toggle { background: none; border: none; color: var(--text-3); font-size: var(--type-xs); font-family: var(--font-sans); font-weight: 600; padding: 0; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; }
.sc5-detail-toggle:hover { opacity: 1; color: var(--accent); }
.sc5-detail        { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.sc5-detail-label  { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.sc5-detail-text   { font-size: var(--type-base); color: var(--text-3); line-height: 1.6; }

@media (max-width: 700px) {
  .sc5-exec        { flex-direction: column; }
  .sc5-exec-chart  { flex: 0 0 auto; width: 100%; }
  .sc5-stat        { min-width: 120px; }
}

/* ─── Step 6: Quality Gate Dashboard ──────────────────────────────────────── */
.sc6-dashboard   { display: flex; flex-direction: column; gap: 28px; }

/* Executive area */
.sc6-exec        { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.sc6-exec-stats  { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 240px; }
.sc6-exec-chart  { flex: 0 0 110px; height: 110px; background: var(--surface); border: 1px solid var(--border-gold); border-radius: 8px; padding: 4px; }

/* Stat cards */
.sc6-stat        { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 8px; padding: 12px 16px; flex: 1; min-width: 100px; display: flex; flex-direction: column; justify-content: center; }
.sc6-stat-val    { font-family: var(--font-serif); font-size: var(--type-xl); font-weight: 600; color: var(--text); line-height: 1; margin-bottom: 5px; }
.sc6-stat-label  { font-size: var(--type-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; cursor: default; }
.sc6-val-ok      { color: #5C9E5C; }
.sc6-val-cut     { color: #D95C5C; }
.sc6-val-warn    { color: var(--yellow, #C9A84C); }
.sc6-val-risk    { color: #D95C5C; font-size: var(--type-lg); }
.sc6-val-accent  { color: var(--accent); }

/* Sections */
.sc6-section         { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc6-section-header  { display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-bottom: 1px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.05), transparent); }
.sc6-section-header > span:first-of-type { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); flex: 1; }
.sc6-section-icon    { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc6-section-count   { font-size: var(--type-xs); font-weight: 700; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); border-radius: 20px; padding: 1px 9px; }
.sc6-icon-ok   { color: #5C9E5C; }
.sc6-icon-cut  { color: #D95C5C; }
.sc6-icon-edge { color: var(--yellow, #C9A84C); }
.sc6-count-ok  { background: rgba(92,158,92,0.12); border-color: rgba(92,158,92,0.3); color: #5C9E5C; }
.sc6-count-cut { background: rgba(217,92,92,0.1); border-color: rgba(217,92,92,0.28); color: #D95C5C; }

/* Gemeinsame Karten-Basis */
.sc6-card-nr    { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); margin-bottom: 3px; }
.sc6-card-title { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.3; }
.sc6-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

/* Chips */
.sc6-chip        { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; }
.sc6-chip-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc6-chip-qw     { background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.28); color: var(--accent); }
.sc6-chip-fr     { background: rgba(217,92,92,0.08); border: 1px solid rgba(217,92,92,0.28); color: #D95C5C; }
.sc6-chip-prio   { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); }
.sc6-chip-sofort { background: rgba(92,158,92,0.1); border-color: rgba(92,158,92,0.3); color: #5C9E5C; }
.sc6-chip-kill   { background: rgba(217,92,92,0.07); border: 1px solid rgba(217,92,92,0.2); color: #D95C5C; font-size: var(--type-xs); }
.sc6-chip-freed  { background: rgba(92,158,92,0.08); border: 1px solid rgba(92,158,92,0.25); color: #5C9E5C; }

/* Meta-Zeile */
.sc6-meta-row    { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; border-top: 1px solid var(--border); }
.sc6-meta-item   { display: flex; align-items: center; gap: 4px; cursor: default; }
.sc6-meta-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--icon-color); flex-shrink: 0; }
.sc6-meta-label  { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.sc6-meta-val    { font-size: var(--type-xs); font-weight: 700; margin-left: 2px; }
.sc6-col-ok      { color: #5C9E5C; }
.sc6-col-accent  { color: var(--accent); }
.sc6-col-risk    { color: #D95C5C; }
.sc6-col-warn    { color: var(--yellow, #C9A84C); }
.sc6-col-muted   { color: var(--text-3); }

/* Detail / Collapsible */
.sc6-detail-toggle { background: none; border: none; color: var(--text-3); font-size: var(--type-xs); font-family: var(--font-sans); font-weight: 600; padding: 0; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; }
.sc6-detail-toggle:hover { opacity: 1; color: var(--accent); }
.sc6-detail      { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.sc6-detail-row  { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.sc6-detail-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.sc6-detail-text  { font-size: var(--type-base); color: var(--text-3); line-height: 1.6; }

/* Weiterverfolgen-Karten */
.sc6-kept-cards  { display: flex; flex-direction: column; }
.sc6-kept-card   { border-bottom: 1px solid var(--border-gold); }
.sc6-kept-card:last-child { border-bottom: none; }
.sc6-kept-head   { padding: 13px 20px 10px; border-bottom: 1px solid rgba(var(--accent-rgb),0.08); }
.sc6-kept-body   { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.sc6-kept-reason { font-size: var(--type-base); color: var(--text-2); line-height: 1.7; }

/* Streich-Karten */
.sc6-cut-cards   { display: flex; flex-direction: column; }
.sc6-cut-card    { display: flex; border-bottom: 1px solid var(--border-gold); }
.sc6-cut-card:last-child { border-bottom: none; }
.sc6-cut-marker  { display: flex; align-items: flex-start; justify-content: center; padding: 16px 12px; background: rgba(217,92,92,0.04); border-right: 1px solid var(--border-gold); min-width: 40px; flex-shrink: 0; }
.sc6-cut-icon    { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: #D95C5C; margin-top: 4px; }
.sc6-cut-body    { flex: 1; padding: 13px 20px 13px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc6-cut-title   { color: var(--text-2); }
.sc6-cut-reason  { font-size: var(--type-base); color: var(--text-3); line-height: 1.65; font-style: italic; }
.sc6-cut-meta    { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }

/* Härtester-Schnitt-Karte */
.sc6-edge-card   { margin: 0; }
.sc6-edge-head   { padding: 14px 20px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-gold); }
.sc6-edge-badge  { display: inline-flex; padding: 3px 12px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.sc6-edge-badge-kept { background: rgba(92,158,92,0.12); border: 1px solid rgba(92,158,92,0.3); color: #5C9E5C; }
.sc6-edge-badge-cut  { background: rgba(217,92,92,0.1);  border: 1px solid rgba(217,92,92,0.28); color: #D95C5C; }
.sc6-edge-body   { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.sc6-edge-row    { display: flex; flex-direction: column; gap: 5px; }
.sc6-edge-row-decision { background: var(--surface-2); border-radius: 8px; padding: 12px 14px; }
.sc6-edge-label  { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.sc6-edge-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc6-edge-text   { font-size: var(--type-base); color: var(--text-2); line-height: 1.65; }
.sc6-edge-row-decision .sc6-edge-label { color: var(--accent); }
.sc6-edge-row-decision .sc6-edge-icon  { color: var(--accent); }
.sc6-edge-row-decision .sc6-edge-text  { color: var(--text); }

/* Wiederaufnahme */
.sc6-wieder-cards  { display: flex; flex-direction: column; }
.sc6-wieder-card   { padding: 24px 20px; border-bottom: 1px solid var(--border-gold); display: flex; flex-direction: column; gap: 6px; }
.sc6-wieder-card:last-child { border-bottom: none; }
.sc6-wieder-reason { font-size: var(--type-base); color: var(--text-2); line-height: 1.65; }
.sc6-wieder-cond   { display: flex; align-items: flex-start; gap: 6px; font-size: var(--type-xs); color: var(--yellow, #C9A84C); line-height: 1.5; }
.sc6-wieder-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; }

@media (max-width: 700px) {
  .sc6-exec       { flex-direction: column; }
  .sc6-exec-chart { flex: 0 0 auto; width: 100%; height: 100px; }
  .sc6-stat       { min-width: 120px; }
}

/* ─── Step 8: HITL-Checkpoint 1 Dashboard ─────────────────────────────────── */
.sc8-dashboard       { display: flex; flex-direction: column; gap: 28px; }

/* KI-Einschätzungsblock */
.sc8-hitl-block      { background: var(--surface); border: 1px solid var(--border-gold); border-left: 3px solid var(--accent); border-radius: 10px; overflow: hidden; }
.sc8-hitl-header     { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-bottom: 1px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.06), transparent); }
.sc8-hitl-header > span { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); }
.sc8-hitl-brain      { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc8-hitl-body       { display: flex; gap: 0; }
.sc8-hitl-rows       { flex: 1; display: flex; flex-direction: column; }
.sc8-hitl-chart      { flex: 0 0 160px; border-left: 1px solid var(--border-gold); min-height: 90px; }
.sc8-hitl-row        { display: flex; align-items: flex-start; gap: 10px; padding: 11px 20px; border-bottom: 1px solid var(--border-gold); }
.sc8-hitl-row:last-child { border-bottom: none; }
.sc8-hitl-icon       { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; margin-top: 3px; }
.sc8-hitl-ok   .sc8-hitl-icon { color: #5C9E5C; }
.sc8-hitl-warn .sc8-hitl-icon { color: var(--yellow, #C9A84C); }
.sc8-hitl-cut  .sc8-hitl-icon { color: #D95C5C; }
.sc8-hitl-content    { display: flex; flex-direction: column; gap: 2px; }
.sc8-hitl-label      { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.sc8-hitl-ok   .sc8-hitl-label { color: #5C9E5C; }
.sc8-hitl-warn .sc8-hitl-label { color: var(--yellow, #C9A84C); }
.sc8-hitl-cut  .sc8-hitl-label { color: #D95C5C; }
.sc8-hitl-text       { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }

/* Section-Header (Initiativen) */
.sc8-section-header  { display: flex; align-items: center; gap: 9px; padding: 11px 20px; border-bottom: 1px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.04), transparent); }
.sc8-section-header > span:first-of-type { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); flex: 1; }
.sc8-section-icon    { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc8-section-count   { font-size: var(--type-xs); font-weight: 700; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); border-radius: 20px; padding: 1px 9px; }

/* Initiative-Section */
.sc8-init-section    { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc8-init-cards      { display: flex; flex-direction: column; }
.sc8-init-card       { border-bottom: 1px solid var(--border-gold); }
.sc8-init-card:last-child { border-bottom: none; }

/* Karten-Kopf */
.sc8-init-head       { display: flex; align-items: flex-start; gap: 14px; padding: 13px 20px 10px; }
.sc8-rang            { font-family: var(--font-serif); font-size: var(--type-xl); font-weight: 600; color: var(--accent); line-height: 1; min-width: 30px; cursor: default; flex-shrink: 0; padding-top: 2px; }
.sc8-init-head-right { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sc8-init-title      { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.3; }
.sc8-init-chips      { display: flex; flex-wrap: wrap; gap: 6px; }

/* Chips */
.sc8-chip            { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; }
.sc8-chip-icon       { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc8-chip-high       { background: rgba(92,158,92,0.1);           border: 1px solid rgba(92,158,92,0.3);           color: #5C9E5C; }
.sc8-chip-mid        { background: rgba(var(--accent-rgb),0.1);   border: 1px solid rgba(var(--accent-rgb),0.28);  color: var(--accent); }
.sc8-chip-risk       { background: rgba(217,92,92,0.08);          border: 1px solid rgba(217,92,92,0.28);          color: #D95C5C; }
.sc8-chip-prio-high  { background: rgba(var(--accent-rgb),0.12);  border: 1px solid rgba(var(--accent-rgb),0.35);  color: var(--accent); }
.sc8-chip-prio-mid   { background: var(--surface-2);              border: 1px solid var(--border);                 color: var(--text-3); }
.sc8-chip-qw         { background: rgba(var(--accent-rgb),0.08);  border: 1px solid rgba(var(--accent-rgb),0.22);  color: var(--accent); }

/* Karten-Body (kritisch_hinweis) */
.sc8-init-body       { padding: 0 20px 10px 64px; }
.sc8-kritisch-block  { display: flex; align-items: flex-start; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.sc8-kritisch-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.sc8-kritisch-text   { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }

/* Prüffrage (sekundär) */
.sc8-pruef-block     { padding: 8px 20px 12px 64px; border-top: 1px solid var(--border); }
.sc8-pruef-label     { display: flex; align-items: center; gap: 4px; font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 3px; }
.sc8-pruef-icon      { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--icon-color); flex-shrink: 0; }
.sc8-pruef-text      { font-size: var(--type-xs); color: var(--text-3); line-height: 1.6; font-style: italic; }

/* Finale Entscheidungsbox */
.sc8-step-meta       { font-size: var(--type-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }
.sc8-final-box       { background: var(--surface); border: 1px solid var(--border-gold); border-top: 3px solid var(--accent); border-radius: 10px; overflow: hidden; margin-top: 8px; }
.sc8-final-header    { display: flex; align-items: center; gap: 9px; padding: 14px 22px; border-bottom: 2px solid var(--border-gold); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.08), transparent); }
.sc8-final-header > span { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); }
.sc8-final-icon      { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc8-final-body      { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.sc8-final-hint      { font-size: var(--type-base); color: var(--text-3); line-height: 1.65; margin: 0; }
.sc8-field           { display: flex; flex-direction: column; gap: 6px; }
.sc8-field-hint      { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); font-weight: 600; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; line-height: 1.5; }
.sc8-field-hint-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc8-final-actions   { display: flex; justify-content: flex-end; padding-top: 8px; }
.sc8-submit-icon     { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }

@media (max-width: 700px) {
  .sc8-hitl-body   { flex-direction: column; }
  .sc8-hitl-chart  { border-left: none; border-top: 1px solid var(--border-gold); flex: 0 0 auto; height: 100px; }
  .sc8-init-body   { padding-left: 20px; }
  .sc8-pruef-block { padding-left: 20px; }
  .sc8-rang        { font-size: var(--type-lg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 9 – Kapazitätsprüfung
   ═══════════════════════════════════════════════════════════════════════════ */

.sc9-dashboard { display: flex; flex-direction: column; gap: 18px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sc9-hero {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc9-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc9-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 32px 28px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sc9-hero-badge.sc9-status-gruen { background: rgba(80,180,100,0.12); color: #6ECF83; border: 1px solid rgba(80,180,100,0.25); }
.sc9-hero-badge.sc9-status-gelb  { background: rgba(201,168,76,0.12); color: var(--accent); border: 1px solid var(--border-gold); }
.sc9-hero-badge.sc9-status-rot   { background: rgba(217,92,92,0.12);  color: var(--red);    border: 1px solid rgba(217,92,92,0.25); }

.sc9-badge-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc9-hero-eyebrow { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 400; font-style: italic; letter-spacing: 0.02em; text-transform: none; color: var(--text-2); }

.sc9-hero-verdict {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  line-height: 1.4;
}

.sc9-ctx {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--type-sm);
  line-height: 1.6;
}
.sc9-ctx-warn { color: var(--red); }
.sc9-ctx-note { color: var(--text-3); }
.sc9-ctx-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; }

/* Kapazitätsmeter */
.sc9-meter        { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.sc9-meter-track  {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: visible;
  display: flex;
  cursor: default;
}
.sc9-meter-fill      { height: 100%; border-radius: 4px 0 0 4px; transition: width 0.4s ease; }
.sc9-meter-fill-ok   { background: #6ECF83; }
.sc9-meter-fill-gelb { background: var(--accent); }
.sc9-meter-fill-rot  { background: var(--red); border-radius: 4px 0 0 4px; }
.sc9-meter-over      { height: 100%; background: rgba(217,92,92,0.35); }
.sc9-meter-threshold {
  position: absolute;
  left: 100%;
  top: -3px;
  width: 2px;
  height: 14px;
  background: var(--accent);
  border-radius: 1px;
  transform: translateX(-50%);
}
.sc9-meter-caption { font-size: var(--type-xs); color: var(--text-3); font-family: var(--font-mono); }

/* ── KPI-Karten ─────────────────────────────────────────────────────────── */
.sc9-kpi-row {
  display: grid;
  gap: 10px;
}
.sc9-kpi-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sc9-kpi-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sc9-kpi-cols-4 { grid-template-columns: repeat(4, 1fr); }

.sc9-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px 14px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  cursor: default;
  transition: border-color 0.15s;
}
.sc9-kpi:hover       { border-color: var(--border-gold); }
.sc9-kpi-icon        { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--icon-color); }
.sc9-kpi-val         { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 600; line-height: 1.1; }
.sc9-kpi-key         { font-size: var(--type-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.sc9-kpi-sub         { font-size: var(--type-xs); color: var(--text-3); margin-top: 1px; }

.sc9-val-gruen { color: #6ECF83; }
.sc9-val-gelb  { color: var(--accent); }
.sc9-val-rot   { color: var(--red); }

/* ── Mittlere Zeile ──────────────────────────────────────────────────────── */
.sc9-mid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.sc9-mid-full  { display: block; }

/* ── ECharts ─────────────────────────────────────────────────────────────── */
.sc9-chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc9-chart-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sc9-chart-label-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc9-chart { height: 200px; width: 100%; }

/* ── Decision Panel ─────────────────────────────────────────────────────── */
.sc9-decision {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sc9-decision-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.07), transparent);
}
.sc9-decision-head > span    { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); }
.sc9-decision-head-icon      { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc9-decision-body           { padding: 14px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: 360px; }

.sc9-dec-block               { display: flex; flex-direction: column; gap: 8px; }
.sc9-dec-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sc9-dec-label-icon          { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }

.sc9-dec-list                { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sc9-dec-list li             { display: flex; align-items: flex-start; gap: 6px; font-size: var(--type-sm); color: var(--text-2); line-height: 1.6; }
.sc9-dec-li-icon             { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; color: var(--accent); margin-top: 3px; }

/* Fragen-Karten (scannbar) */
.sc9-fragens                 { display: flex; flex-direction: column; gap: 7px; }
.sc9-frage {
  border-left: 3px solid var(--border);
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sc9-frage-res               { border-left-color: var(--accent); }
.sc9-frage-bud               { border-left-color: var(--red); }
.sc9-frage-ent               { border-left-color: #7B8CDE; }

.sc9-frage-typ {
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sc9-frage-kern {
  font-size: var(--type-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}
.sc9-frage-detail            { font-size: var(--type-base); color: var(--text-3); line-height: 1.6; margin-top: 2px; }

/* ── Akkordeons ─────────────────────────────────────────────────────────── */
.sc9-accs   { display: flex; flex-direction: column; gap: 6px; }

.sc9-acc    { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sc9-acc[open] { border-color: var(--border-gold); }

.sc9-acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  cursor: pointer;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.sc9-acc-head::-webkit-details-marker { display: none; }
.sc9-acc-head:hover                   { color: var(--text); background: var(--surface-2); }
.sc9-acc[open] .sc9-acc-head          { color: var(--text); border-bottom: 1px solid var(--border-gold); }
.sc9-acc-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc9-acc-count { margin-left: auto; font-size: var(--type-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }
.sc9-acc-body  { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }

/* ── Initiativendetail-Karten ────────────────────────────────────────────── */
.sc9-inits     { gap: 7px; }
.sc9-init-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s;
}
.sc9-init-card:hover { border-color: var(--border-gold); }

.sc9-init-head { display: flex; align-items: baseline; gap: 10px; }
.sc9-init-name { flex: 1; font-size: var(--type-base); font-weight: 600; color: var(--text); min-width: 0; }
.sc9-init-pt   {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
  cursor: default;
}

.sc9-init-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.sc9-init-fill  { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.sc9-ibar-ok    { background: #6ECF83; }
.sc9-ibar-gelb  { background: var(--accent); }
.sc9-ibar-rot   { background: var(--red); }

.sc9-init-tags  { display: flex; flex-wrap: wrap; gap: 5px; }
.sc9-init-tag   { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); border-radius: 4px; padding: 2px 8px; font-weight: 600; }
.sc9-tag-risk   { background: rgba(217,92,92,0.1); color: var(--red); border: 1px solid rgba(217,92,92,0.2); }
.sc9-tag-bud    { background: rgba(217,92,92,0.07); color: var(--red); border: 1px solid rgba(217,92,92,0.15); }
.sc9-tag-ok     { background: rgba(80,180,100,0.1); color: #6ECF83; border: 1px solid rgba(80,180,100,0.2); }
.sc9-tag-note   { background: var(--surface); color: var(--text-3); border: 1px solid var(--border); }
.sc9-tag-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }

/* ── Engpässe ────────────────────────────────────────────────────────────── */
.sc9-engs     { gap: 6px; }
.sc9-eng-row  { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; }
.sc9-eng-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--icon-color); flex-shrink: 0; margin-top: 2px; }
.sc9-eng-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.sc9-eng-name { font-size: var(--type-sm); font-weight: 600; color: var(--text); }
.sc9-eng-ausl { font-family: var(--font-mono); font-size: var(--type-xs); font-weight: 700; }
.sc9-eng-hint { font-size: var(--type-base); color: var(--text-3); flex: 1; min-width: 120px; }

/* ── KV-Paare (Pfad, Baseline) ──────────────────────────────────────────── */
.sc9-kv-row         { display: flex; gap: 12px; font-size: var(--type-sm); line-height: 1.55; border-bottom: 1px solid var(--border); padding-bottom: 7px; }
.sc9-kv-row:last-child { border-bottom: none; padding-bottom: 0; }
.sc9-kv-key         { flex: 0 0 180px; font-weight: 600; color: var(--text-3); }
.sc9-kv-val         { flex: 1; color: var(--text-2); min-width: 0; }

.sc9-kv-list        { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.sc9-kv-list li     { font-size: var(--type-sm); color: var(--text-2); line-height: 1.55; padding-left: 14px; position: relative; }
.sc9-kv-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-size: var(--type-xs); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sc9-kpi-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .sc9-kpi-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .sc9-mid-split  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sc9-kpi-cols-2, .sc9-kpi-cols-3, .sc9-kpi-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .sc9-kv-key     { flex: 0 0 130px; }
  .sc9-hero       { padding: 32px 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 10 – Blocker- & Abhängigkeitsdiagnose
   ═══════════════════════════════════════════════════════════════════════════ */

.sc10-dashboard { display: flex; flex-direction: column; gap: 18px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sc10-hero {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc10-hero-top      { display: flex; align-items: center; gap: 12px; }
.sc10-hero-eyebrow  { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 400; font-style: italic; letter-spacing: 0.02em; text-transform: none; color: var(--text-2); }
.sc10-hero-verdict  { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 600; font-style: italic; color: var(--text); line-height: 1.4; }

.sc10-hero-ctx      { display: flex; align-items: flex-start; gap: 7px; font-size: var(--type-base); color: var(--text-3); line-height: 1.6; }
.sc10-ctx-warn      { color: var(--red); }
.sc10-ctx-icon      { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; margin-top: 3px; }

/* Status badges (shared) */
.sc10-hero-badge,
.sc10-rolle-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 24px 28px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sc10-badge-grün,
.sc10-badge-gruen    { background: rgba(80,180,100,0.12); color: #6ECF83; border: 1px solid rgba(80,180,100,0.25); }
.sc10-badge-gelb     { background: rgba(201,168,76,0.12); color: var(--accent); border: 1px solid var(--border-gold); }
.sc10-badge-rot      { background: rgba(217,92,92,0.12);  color: var(--red);    border: 1px solid rgba(217,92,92,0.25); }
.sc10-badge-icon,
.sc10-rolle-badge-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }

/* ── Signal-Karten ──────────────────────────────────────────────────────── */
.sc10-sigs         { display: grid; gap: 10px; }
.sc10-sigs-1       { grid-template-columns: 1fr 1fr; }
.sc10-sigs-2       { grid-template-columns: repeat(2, 1fr); }
.sc10-sigs-3       { grid-template-columns: repeat(3, 1fr); }
.sc10-sigs-4       { grid-template-columns: repeat(4, 1fr); }

.sc10-sig {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px 14px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  cursor: default;
  transition: border-color 0.15s;
}
.sc10-sig:hover     { border-color: var(--border-gold); }
.sc10-sig-icon      { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--icon-color); }
.sc10-sig-val       { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; line-height: 1.1; }
.sc10-sig-key       { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.sc10-sig-sub       { font-size: var(--type-xs); color: var(--text-3); }

.sc10-sig-rot       { border-color: rgba(217,92,92,0.2); }
.sc10-sig-rot .sc10-sig-val  { color: var(--red); }
.sc10-sig-gelb .sc10-sig-val { color: var(--accent); }
.sc10-sig-ok .sc10-sig-val   { color: #6ECF83; }
.sc10-sig-neutral .sc10-sig-val { color: var(--text-3); }

/* ── Mittlere Zeile ──────────────────────────────────────────────────────── */
.sc10-mid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.sc10-mid-full  { display: block; }

/* ── ECharts ─────────────────────────────────────────────────────────────── */
.sc10-chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc10-chart-label      { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.sc10-chart-label-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc10-chart            { height: 170px; width: 100%; }

/* ── Action Panel ────────────────────────────────────────────────────────── */
.sc10-action {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sc10-action-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.07), transparent);
}
.sc10-action-head > span    { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); }
.sc10-action-head-icon      { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc10-action-body           { padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 320px; }

.sc10-act {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 7px;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
}
.sc10-act-high { border-left-color: var(--red); }
.sc10-act-med  { border-left-color: var(--accent); }

.sc10-act-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; flex-shrink: 0; margin-top: 2px; color: var(--icon-color); }
.sc10-act-high .sc10-act-icon { color: var(--red); }
.sc10-act-med  .sc10-act-icon { color: var(--accent); }

.sc10-act-body  { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sc10-act-kat   { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.sc10-act-kat em { font-style: normal; color: var(--accent); }
.sc10-act-kern  { font-size: var(--type-base); color: var(--text); line-height: 1.55; font-weight: 500; }

/* ── Sections (Level 2) ──────────────────────────────────────────────────── */
.sc10-section       { display: flex; flex-direction: column; gap: 12px; }
.sc10-section-head  {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sc10-section-head > span { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); }
.sc10-section-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc10-section-count { margin-left: auto; font-size: var(--type-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }

/* ── Schlüsselrollen ─────────────────────────────────────────────────────── */
.sc10-rollen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
  gap: 10px;
}
.sc10-rolle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s;
}
.sc10-rolle-card:hover  { border-color: var(--border-gold); }
.sc10-rolle-krit        { border-color: rgba(217,92,92,0.25); }

.sc10-rolle-head        { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sc10-rolle-name        { font-size: var(--type-sm); font-weight: 600; color: var(--text); }
.sc10-rolle-begr        { font-size: var(--type-base); color: var(--text-2); line-height: 1.6; }

.sc10-rolle-massnahme,
.sc10-rolle-betroffen {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--type-xs);
  line-height: 1.55;
}
.sc10-rolle-massnahme { color: #6ECF83; }
.sc10-rolle-betroffen { color: var(--text-3); }
.sc10-rolle-m-icon,
.sc10-rolle-b-icon    { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; }

.sc10-rolle-chips      { display: flex; flex-wrap: wrap; gap: 5px; }
.sc10-rolle-chip       { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--text-3); }
.sc10-rolle-chip-icon  { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc10-rolle-chip-warn  { background: rgba(217,92,92,0.08); border-color: rgba(217,92,92,0.2); color: var(--red); }

.sc10-inline-detail         { margin-top: 2px; }
.sc10-inline-detail summary { font-size: var(--type-xs); color: var(--text-3); cursor: pointer; list-style: none; display: flex; gap: 5px; }
.sc10-inline-detail summary::-webkit-details-marker { display: none; }
.sc10-inline-detail-body    { font-size: var(--type-xs); color: var(--text-3); line-height: 1.6; margin-top: 5px; border-left: 2px solid var(--border); padding-left: 10px; }

/* ── Politische Blockaden ────────────────────────────────────────────────── */
.sc10-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(360px,1fr));
  gap: 10px;
}
.sc10-block-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid #7B8CDE;
  border-radius: 9px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc10-block-head   { display: flex; flex-direction: column; gap: 4px; }
.sc10-block-typ    { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #7B8CDE; }
.sc10-block-titel  { font-size: var(--type-sm); font-weight: 600; color: var(--text); line-height: 1.4; }

.sc10-block-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--type-base);
  line-height: 1.55;
}
.sc10-block-icon  { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; }
.sc10-block-frueh      { color: var(--accent); }
.sc10-block-szen       { color: var(--red); }
.sc10-block-konsequenz { color: #E08A5C; }
.sc10-block-praev      { color: #6ECF83; }

/* ── Akkordeons ─────────────────────────────────────────────────────────── */
.sc10-accs         { display: flex; flex-direction: column; gap: 6px; }
.sc10-acc          { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sc10-acc[open]    { border-color: var(--border-gold); }

.sc10-acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  cursor: pointer;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.sc10-acc-head::-webkit-details-marker  { display: none; }
.sc10-acc-head:hover                    { color: var(--text); background: var(--surface-2); }
.sc10-acc[open] .sc10-acc-head          { color: var(--text); border-bottom: 1px solid var(--border-gold); }
.sc10-acc-icon   { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc10-acc-count  { margin-left: auto; font-size: var(--type-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }
.sc10-acc-krit   { font-size: var(--type-xs); font-weight: 700; background: rgba(217,92,92,0.1); color: var(--red); border: 1px solid rgba(217,92,92,0.2); border-radius: 10px; padding: 1px 7px; }

.sc10-acc-body   { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }

/* Technische Abhängigkeiten */
.sc10-tech-body  { gap: 6px; }
.sc10-tech-row {
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 3px solid var(--border);
}
.sc10-tech-krit  { border-left-color: var(--red); }

.sc10-tech-path  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc10-tech-node  { font-size: var(--type-sm); font-weight: 600; color: var(--text-2); }
.sc10-tech-arrow { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--icon-color); flex-shrink: 0; }
.sc10-tech-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); font-weight: 700; background: rgba(217,92,92,0.1); color: var(--red); border: 1px solid rgba(217,92,92,0.2); border-radius: 4px; padding: 2px 7px; cursor: default; }
.sc10-krit-icon  { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc10-tech-typ   { font-size: var(--type-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.sc10-tech-szena { font-size: var(--type-base); color: var(--text-3); line-height: 1.55; padding-left: 2px; }

/* Quick Wins */
.sc10-qw-list    { gap: 8px; }
.sc10-qw-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-2);
  border-radius: 7px;
  padding: 24px 20px;
}
.sc10-qw-nr {
  flex-shrink: 0;
  width: var(--icon-lg); height: var(--icon-lg);
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--accent);
  margin-top: 1px;
}
.sc10-qw-body     { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc10-qw-titel    { font-size: var(--type-sm); font-weight: 600; color: var(--text); line-height: 1.4; }
.sc10-qw-meta     { display: flex; flex-wrap: wrap; gap: 6px; }
.sc10-qw-chip     { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); font-weight: 600; color: var(--accent); background: rgba(var(--accent-rgb),0.08); border: 1px solid var(--border-gold); border-radius: 4px; padding: 2px 8px; }
.sc10-qw-chip-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc10-qw-effekt   { color: #6ECF83; background: rgba(80,180,100,0.08); border-color: rgba(80,180,100,0.2); }
.sc10-qw-begr     { font-size: var(--type-base); color: var(--text-3); line-height: 1.6; }

/* KV-Paare (Kritischer Pfad, Kapazitätsanalyse) */
.sc10-kv-row         { display: flex; gap: 12px; font-size: var(--type-sm); line-height: 1.55; border-bottom: 1px solid var(--border); padding-bottom: 7px; }
.sc10-kv-row:last-child { border-bottom: none; padding-bottom: 0; }
.sc10-kv-key         { flex: 0 0 200px; font-weight: 600; color: var(--text-3); }
.sc10-kv-val         { flex: 1; color: var(--text-2); min-width: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sc10-sigs-3, .sc10-sigs-4 { grid-template-columns: repeat(2, 1fr); }
  .sc10-mid-split             { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sc10-sigs-1, .sc10-sigs-2, .sc10-sigs-3, .sc10-sigs-4 { grid-template-columns: repeat(2, 1fr); }
  .sc10-rollen-grid, .sc10-block-grid { grid-template-columns: 1fr; }
  .sc10-kv-key  { flex: 0 0 130px; }
  .sc10-hero    { padding: 32px 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 11 — Executive Risk & Pre-Mortem Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.sc11-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 24px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.sc11-hero {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sc11-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sc11-hero-eyebrow {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-2);
}
.sc11-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 32px 28px;
  cursor: default;
}
.sc11-badge-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }

.sc11-badge-kritisch { background: rgba(217,92,92,0.12); color: var(--red); border: 1px solid rgba(217,92,92,0.3); }
.sc11-badge-hoch     { background: rgba(224,138,92,0.12); color: #E08A5C; border: 1px solid rgba(224,138,92,0.3); }
.sc11-badge-mittel   { background: rgba(201,168,76,0.12); color: var(--accent); border: 1px solid var(--border-gold); }
.sc11-badge-niedrig  { background: rgba(110,207,131,0.10); color: #6ECF83; border: 1px solid rgba(110,207,131,0.25); }

.sc11-hero-verdict {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  line-height: 1.45;
  color: var(--text);
  font-weight: 500;
}
.sc11-hero-kern {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-base);
  font-weight: 600;
  padding: 32px 28px;
  border-radius: 6px;
  align-self: flex-start;
}
.sc11-kern-ok     { background: rgba(110,207,131,0.08); color: #6ECF83; border: 1px solid rgba(110,207,131,0.2); }
.sc11-kern-gefahr { background: rgba(217,92,92,0.08); color: var(--red); border: 1px solid rgba(217,92,92,0.2); }
.sc11-kern-icon   { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }

/* ── Signal-Karten ─────────────────────────────────────────────────────────── */
.sc11-sigs {
  display: grid;
  gap: 10px;
}
.sc11-sigs-1 { grid-template-columns: minmax(0, 280px); }
.sc11-sigs-2 { grid-template-columns: repeat(2, 1fr); }
.sc11-sigs-3 { grid-template-columns: repeat(3, 1fr); }
.sc11-sigs-4 { grid-template-columns: repeat(4, 1fr); }

.sc11-sig {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
  transition: border-color 0.15s;
}
.sc11-sig:hover { border-color: var(--border-gold); }
.sc11-sig-icon { width: var(--icon-base); height: var(--icon-base); stroke-width: 1.8; flex-shrink: 0; margin-bottom: 2px; }
.sc11-sig-val  { font-size: var(--type-lg); font-weight: 600; font-family: var(--font-serif); line-height: 1.1; }
.sc11-sig-key  { font-size: var(--type-xs);
  text-transform: uppercase; font-weight: 700; color: var(--text-3); letter-spacing: 0.06em; }
.sc11-sig-sub  { font-size: var(--type-xs); color: var(--text-3); }

.sc11-sig-rot     { border-color: rgba(217,92,92,0.2); }
.sc11-sig-rot .sc11-sig-icon, .sc11-sig-rot .sc11-sig-val { color: var(--red); }
.sc11-sig-gelb    { border-color: rgba(201,168,76,0.2); }
.sc11-sig-gelb .sc11-sig-icon, .sc11-sig-gelb .sc11-sig-val { color: var(--accent); }
.sc11-sig-ok      { border-color: rgba(110,207,131,0.2); }
.sc11-sig-ok .sc11-sig-icon, .sc11-sig-ok .sc11-sig-val { color: #6ECF83; }
.sc11-sig-neutral .sc11-sig-icon, .sc11-sig-neutral .sc11-sig-val { color: var(--text-2); }

/* ── Mittlere Zone (Chart + Action) ────────────────────────────────────────── */
.sc11-mid-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  align-items: start;
}
.sc11-mid-full { display: block; }

.sc11-chart-wrap  { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.sc11-chart-label { display: flex; align-items: center; gap: 7px; font-size: var(--type-xs); font-weight: 600; color: var(--text-3); margin-bottom: 10px; }
.sc11-chart-label-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc11-chart       { height: 230px; width: 100%; }

/* ── Action Panel ───────────────────────────────────────────────────────────── */
.sc11-action {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  overflow: hidden;
}
.sc11-action-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(var(--accent-rgb), 0.05);
  border-bottom: 1px solid var(--border-gold);
  font-size: var(--type-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
}
.sc11-action-head-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc11-action-body { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }

.sc11-act {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 16px;
  transition: background 0.12s;
}
.sc11-act:hover  { background: var(--surface-2); }
.sc11-act-icon   { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; color: var(--icon-color); }
.sc11-act-body   { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc11-act-kat    { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.sc11-act-kat em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sc11-act-kern   { font-size: var(--type-base); color: var(--text); line-height: 1.5; }
.sc11-act-high .sc11-act-icon  { color: var(--red); }
.sc11-act-high .sc11-act-kat   { color: var(--red); }
.sc11-act-med  .sc11-act-icon  { color: var(--accent); }
.sc11-act-med  .sc11-act-kat   { color: var(--accent); }

/* ── Section-Wrapper ────────────────────────────────────────────────────────── */
.sc11-section { display: flex; flex-direction: column; gap: 10px; }
.sc11-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sc11-section-icon { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.5; flex-shrink: 0; color: var(--accent); }
.sc11-section-head span:nth-child(2) { font-size: var(--type-base); font-weight: 700; color: var(--text); }
.sc11-section-count {
  margin-left: 2px;
  font-size: var(--type-xs);
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  color: var(--text-3);
}
.sc11-section-sub {
  margin-left: auto;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: default;
}

/* ── Top-Risiken Grid ───────────────────────────────────────────────────────── */
.sc11-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(340px,1fr));
  gap: 10px;
}
.sc11-risk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-gold);
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.sc11-risk-card:hover { border-color: var(--border-gold); }
.sc11-risk-krit { border-top-color: var(--red); }
.sc11-risk-hoch { border-top-color: #E08A5C; }

.sc11-risk-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sc11-risk-nr {
  flex-shrink: 0;
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--accent);
  margin-top: 2px;
}
.sc11-risk-title-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc11-risk-kat   { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.sc11-risk-titel { font-size: var(--type-sm); font-weight: 700; color: var(--text); line-height: 1.35; }

.sc11-score-badge {
  flex-shrink: 0;
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  font-weight: 800;
  cursor: default;
}
.sc11-score-krit  { background: rgba(217,92,92,0.12); color: var(--red); border: 1px solid rgba(217,92,92,0.25); }
.sc11-score-hoch  { background: rgba(224,138,92,0.12); color: #E08A5C; border: 1px solid rgba(224,138,92,0.25); }
.sc11-score-mittel { background: rgba(201,168,76,0.10); color: var(--accent); border: 1px solid var(--border-gold); }

.sc11-risk-warum, .sc11-risk-frueh, .sc11-risk-ceo {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--type-base);
  line-height: 1.55;
  color: var(--text-2);
}
.sc11-risk-warum-icon, .sc11-risk-frueh-icon, .sc11-risk-ceo-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--icon-color);
}
.sc11-risk-frueh-icon { color: var(--accent); }
.sc11-risk-ceo-icon   { color: #6ECF83; }
.sc11-risk-frueh strong, .sc11-risk-ceo strong { color: var(--text-3); font-weight: 600; }

/* ── Pre-Mortem Grid ────────────────────────────────────────────────────────── */
.sc11-pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(360px,1fr));
  gap: 10px;
}
.sc11-pm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sc11-pm-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.sc11-pm-head-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--red); margin-top: 2px; }
.sc11-pm-titel {
  flex: 1;
  font-size: var(--type-sm);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  min-width: 120px;
}
.sc11-pm-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.sc11-pm-badge {
  font-size: var(--type-xs);
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  cursor: default;
}
.sc11-pm-badge-krit  { background: rgba(217,92,92,0.1); color: var(--red); border: 1px solid rgba(217,92,92,0.2); }
.sc11-pm-badge-gelb  { background: rgba(201,168,76,0.1); color: var(--accent); border: 1px solid var(--border-gold); }
.sc11-pm-badge-ok    { background: rgba(110,207,131,0.08); color: #6ECF83; border: 1px solid rgba(110,207,131,0.2); }
.sc11-pm-badge-wkeit { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }

.sc11-pm-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--type-base);
  line-height: 1.55;
}
.sc11-pm-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; margin-top: 3px; color: var(--icon-color); }
.sc11-pm-ursache { color: var(--text-2); }
.sc11-pm-eskal   { color: var(--text-2); }
.sc11-pm-konseq  { color: var(--red); font-weight: 500; }
.sc11-pm-ursache strong, .sc11-pm-eskal strong { color: var(--text-3); font-weight: 600; }

/* ── Akkordeons ─────────────────────────────────────────────────────────────── */
.sc11-accs { display: flex; flex-direction: column; gap: 6px; }
.sc11-acc  { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.sc11-acc[open] { border-color: var(--border-gold); }

.sc11-acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  cursor: pointer;
  font-size: var(--type-sm);
  font-weight: 700;
  color: var(--text-2);
  list-style: none;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.sc11-acc-head::-webkit-details-marker { display: none; }
.sc11-acc-head:hover { color: var(--text); background: var(--surface-2); }
.sc11-acc[open] .sc11-acc-head { color: var(--text); border-bottom: 1px solid var(--border-gold); }
.sc11-acc-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc11-acc-count { margin-left: auto; font-size: var(--type-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }
.sc11-acc-sub   { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.sc11-acc-kern-badge { font-size: var(--type-xs); font-weight: 700; border-radius: 4px; padding: 2px 8px; }
.sc11-acc-kern-ok    { background: rgba(110,207,131,0.08); color: #6ECF83; border: 1px solid rgba(110,207,131,0.2); }
.sc11-acc-kern-krit  { background: rgba(217,92,92,0.08); color: var(--red); border: 1px solid rgba(217,92,92,0.2); }

.sc11-acc-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }

/* ── 50%-Szenario Grid ──────────────────────────────────────────────────────── */
.sc11-szen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(340px,1fr));
  gap: 10px;
}
.sc11-szen-item {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc11-szen-full { grid-column: 1 / -1; }
.sc11-szen-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sc11-szen-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc11-szen-val  { font-size: var(--type-base); color: var(--text-2); line-height: 1.5; }
.sc11-szen-kern-ok   { color: #6ECF83; font-weight: 700; }
.sc11-szen-kern-krit { color: var(--red); font-weight: 700; }
.sc11-szen-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sc11-szen-chip  { display: inline-flex; align-items: center; font-size: var(--type-xs); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 9px; color: var(--text-3); }

/* ── Vollständige Risikolage (Matrix) ───────────────────────────────────────── */
.sc11-matrix-body { gap: 6px; }
.sc11-matrix-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 8px;
}
.sc11-matrix-main  { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc11-matrix-meta  { display: flex; flex-wrap: wrap; gap: 5px; }
.sc11-matrix-kat   { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7B8CDE; }
.sc11-matrix-chip  { font-size: var(--type-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.sc11-matrix-titel { font-size: var(--type-sm); font-weight: 700; color: var(--text); line-height: 1.35; }
.sc11-matrix-beschr { font-size: var(--type-base); color: var(--text-3); line-height: 1.55; }
.sc11-matrix-frueh, .sc11-matrix-praev { display: flex; align-items: flex-start; gap: 6px; font-size: var(--type-xs); line-height: 1.5; }
.sc11-matrix-frueh { color: var(--accent); }
.sc11-matrix-praev { color: #6ECF83; }
.sc11-matrix-icon  { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; }

/* ── Vorbereitete Maßnahmen (Gegenmassnahmen) ───────────────────────────────── */
.sc11-gm-body { gap: 8px; }
.sc11-gm-card {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sc11-gm-risiko { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.sc11-gm-risiko-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc11-gm-row  { display: flex; align-items: flex-start; gap: 7px; font-size: var(--type-base); line-height: 1.55; }
/* Semantic fix: primäre Lese-Texte Step 11 */
.sc11-risk-warum { font-size: var(--type-base); color: var(--text); line-height: 1.65; margin: 0; }
.sc11-risk-frueh { font-size: var(--type-base); color: var(--text); line-height: 1.65; margin: 0; }
/* Semantic fix: primäre Lese-Texte Step 17 */
.sc17-esk-val { font-size: var(--type-base); color: var(--text); line-height: 1.65; margin: 0; }
.sc11-gm-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; margin-top: 3px; }
.sc11-gm-praev { color: var(--text-2); }
.sc11-gm-praev .sc11-gm-icon { color: #6ECF83; }
.sc11-gm-reak  { color: var(--text-2); }
.sc11-gm-reak  .sc11-gm-icon { color: var(--accent); }
.sc11-gm-praev strong, .sc11-gm-reak strong { color: var(--text-3); font-weight: 600; }
.sc11-gm-footer { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sc11-gm-chip   { font-size: var(--type-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; }
.sc11-gm-chip-knh { font-style: italic; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sc11-mid-split  { grid-template-columns: 1fr; }
  .sc11-sigs-3, .sc11-sigs-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sc11-sigs-1, .sc11-sigs-2, .sc11-sigs-3, .sc11-sigs-4 { grid-template-columns: repeat(2, 1fr); }
  .sc11-risk-grid, .sc11-pm-grid { grid-template-columns: 1fr; }
  .sc11-hero { padding: 32px 28px; }
  .sc11-hero-verdict { font-size: var(--type-lg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 12 — Finales Commitment
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.sc12-layout { display: flex; flex-direction: column; gap: 24px; }
.sc12-form   { display: flex; flex-direction: column; gap: 24px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sc12-hero {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sc12-hero-eyebrow {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-2);
}
.sc12-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 32px 28px;
  border-radius: 20px;
  cursor: default;
}
.sc12-badge-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc12-status-gruen { background: rgba(80,180,100,0.12); color: #6ECF83;        border: 1px solid rgba(80,180,100,0.25); }
.sc12-status-gelb  { background: rgba(201,168,76,0.12);  color: var(--accent); border: 1px solid var(--border-gold); }
.sc12-status-rot   { background: rgba(217,92,92,0.12);   color: var(--red);    border: 1px solid rgba(217,92,92,0.25); }
.sc12-hero-verdict {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
}

/* ── Section ─────────────────────────────────────────────────────────────── */
.sc12-section { display: flex; flex-direction: column; gap: 14px; }
.sc12-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-gold);
}
.sc12-section-head > span {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
}
.sc12-section-icon { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }

/* ── Risiko-Karten ───────────────────────────────────────────────────────── */
.sc12-risk-list { display: flex; flex-direction: column; gap: 10px; }
.sc12-risk-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 9px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc12-risk-kritisch { border-left-color: var(--red); }
.sc12-risk-hoch     { border-left-color: var(--red); }
.sc12-risk-mittel   { border-left-color: var(--accent); }
.sc12-risk-top  { display: flex; align-items: flex-start; gap: 10px; }
.sc12-risk-icon { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; flex-shrink: 0; margin-top: 2px; color: var(--icon-color); }
.sc12-risk-kritisch .sc12-risk-icon,
.sc12-risk-hoch     .sc12-risk-icon { color: var(--red); }
.sc12-risk-mittel   .sc12-risk-icon { color: var(--accent); }
.sc12-risk-desc { font-size: var(--type-base); font-weight: 500; color: var(--text); line-height: 1.5; margin: 0; }
.sc12-risk-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sc12-risk-chip {
  font-size: var(--type-xs);
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 9px;
}
.sc12-risk-chip-schwere { cursor: default; }
.sc12-risk-ceo {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--type-base);
  line-height: 1.5;
  color: var(--accent);
  padding-top: 6px;
  border-top: 1px solid var(--border);
  cursor: default;
}
.sc12-risk-ceo-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; margin-top: 1px; color: var(--accent); }

/* ── Commitment-Fragen ───────────────────────────────────────────────────── */
.sc12-fragen-list { display: flex; flex-direction: column; gap: 14px; }
.sc12-frage-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-gold);
  border-radius: 9px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc12-frage-verlust { border-left-color: var(--red); }
.sc12-frage-worst   { border-left-color: var(--accent); }
.sc12-frage-default { border-left-color: var(--border-gold); }
.sc12-frage-typ {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.sc12-frage-verlust .sc12-frage-typ { color: var(--red); }
.sc12-frage-worst   .sc12-frage-typ { color: var(--accent); }
.sc12-frage-text {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 500;
  font-style: italic;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

/* ── Finale Box ──────────────────────────────────────────────────────────── */
.sc12-final-box {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
}
.sc12-final-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.08), transparent);
}
.sc12-final-header > span {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
}
.sc12-final-icon    { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc12-final-body    { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.sc12-final-hint    { font-size: var(--type-base); color: var(--text-3); line-height: 1.65; margin: 0; }
.sc12-final-actions { display: flex; justify-content: flex-end; padding-top: 8px; }
.sc12-submit-btn    { display: inline-flex; align-items: center; gap: 7px; font-size: var(--type-base); padding: 14px 28px; }
.sc12-submit-icon   { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sc12-hero         { padding: 32px 28px; }
  .sc12-hero-verdict { font-size: var(--type-lg); }
  .sc12-frage-text   { font-size: var(--type-base); }
  .sc12-final-body   { padding: 16px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 13 — Quartals-Roadmap
   ═══════════════════════════════════════════════════════════════════════════ */

.sc13-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0 28px;
}

/* ── Meta-Header ─────────────────────────────────────────────────────────── */
.sc13-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sc13-quartalsziel {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
}
.sc13-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.sc13-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
  transition: border-color 0.15s;
}
.sc13-kpi:hover   { border-color: var(--border-gold); }
.sc13-kpi-icon    { width: var(--icon-base); height: var(--icon-base); stroke-width: 1.8; color: var(--accent); margin-bottom: 2px; }
.sc13-kpi-val     { font-size: var(--type-base); font-weight: 600; font-family: var(--font-serif); color: var(--text); line-height: 1.2; }
.sc13-kpi-label   { font-size: var(--type-xs);
  text-transform: uppercase; font-weight: 700; color: var(--text-3); letter-spacing: 0.06em; }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.sc13-chart-wrap      { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 13px 16px; }
.sc13-chart-label     { display: flex; align-items: center; gap: 7px; font-size: var(--type-xs); font-weight: 600; color: var(--text-3); margin-bottom: 8px; }
.sc13-chart-label-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc13-chart           { height: 136px; width: 100%; }

/* ── Timeline ────────────────────────────────────────────────────────────── */
.sc13-timeline  { display: flex; flex-direction: column; gap: 24px; }

.sc13-phase { display: flex; flex-direction: column; gap: 8px; }
.sc13-phase-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0 8px 2px;
  border-bottom: 2px solid var(--border-gold);
}
.sc13-phase-icon  { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; }
.sc13-phase-name  { font-size: var(--type-sm); font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.sc13-phase-count { margin-left: auto; font-size: var(--type-xs); color: var(--text-3); font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 1px 8px; }

.sc13-phase-body { display: flex; flex-direction: column; gap: 6px; }

/* ── Wochenkarte ─────────────────────────────────────────────────────────── */
.sc13-woche-card {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.sc13-woche-card:hover { border-color: var(--border-gold); }
.sc13-woche-puffer {
  border-color: rgba(123,140,222,0.3);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(123,140,222,0.04) 100%);
}
.sc13-woche-puffer:hover { border-color: rgba(123,140,222,0.5); }

.sc13-woche-left {
  flex: 0 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 10px 12px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.sc13-woche-nr {
  font-family: var(--font-serif);
  font-size: var(--type-xl);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.sc13-woche-puffer .sc13-woche-nr { color: #7B8CDE; }

.sc13-auslast {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: default;
}
.sc13-auslast-bar {
  width: 100%;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.sc13-auslast-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.sc13-auslast-gruen .sc13-auslast-fill { background: #6ECF83; }
.sc13-auslast-gelb  .sc13-auslast-fill { background: var(--accent); }
.sc13-auslast-rot   .sc13-auslast-fill { background: var(--red); }
.sc13-auslast-pct   { font-size: var(--type-xs); font-family: var(--font-mono); font-weight: 700; }
.sc13-auslast-gruen .sc13-auslast-pct { color: #6ECF83; }
.sc13-auslast-gelb  .sc13-auslast-pct { color: var(--accent); }
.sc13-auslast-rot   .sc13-auslast-pct  { color: var(--red); }

.sc13-typ-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: default;
  white-space: nowrap;
}
.sc13-typ-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc13-woche-puffer .sc13-typ-chip { color: #7B8CDE; border-color: rgba(123,140,222,0.25); background: rgba(123,140,222,0.08); }

.sc13-woche-body {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* ── Puffer-Hinweis ──────────────────────────────────────────────────────── */
.sc13-puffer-hinweis {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-base);
  font-weight: 600;
  color: #7B8CDE;
  padding: 6px 10px;
  background: rgba(123,140,222,0.08);
  border: 1px solid rgba(123,140,222,0.2);
  border-radius: 6px;
}
.sc13-puffer-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }

/* ── Initiativen-Liste ───────────────────────────────────────────────────── */
.sc13-ini-list { display: flex; flex-direction: column; gap: 6px; }
.sc13-ini-item { display: flex; flex-direction: column; gap: 3px; }
.sc13-ini-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.sc13-ini-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--type-xs);
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.sc13-ini-chip-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }

.sc13-chip-start       { background: rgba(201,168,76,0.1); color: var(--accent); border: 1px solid var(--border-gold); }
.sc13-chip-meilenstein { background: rgba(201,168,76,0.15); color: var(--accent); border: 2px solid var(--border-gold); }
.sc13-chip-laufend     { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
.sc13-chip-done        { background: rgba(110,207,131,0.1); color: #6ECF83; border: 1px solid rgba(110,207,131,0.25); }

.sc13-ini-titel {
  font-size: var(--type-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.sc13-ini-krit .sc13-ini-titel { color: var(--text); }
.sc13-ini-ziel {
  font-size: var(--type-base);
  color: var(--text-3);
  line-height: 1.5;
  padding-left: 2px;
}
.sc13-krit-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  background: rgba(217,92,92,0.08);
  border: 1px solid rgba(217,92,92,0.2);
  border-radius: 4px;
  cursor: default;
}
.sc13-krit-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--red); }

/* ── Frühwarnung in Wochenkarte ──────────────────────────────────────────── */
.sc13-fruehwarn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--type-base);
  color: var(--accent);
  line-height: 1.5;
  padding: 5px 8px;
  background: rgba(201,168,76,0.06);
  border-radius: 5px;
  border: 1px solid rgba(201,168,76,0.15);
}
.sc13-fruehwarn-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; }

/* ── Section-Wrapper ─────────────────────────────────────────────────────── */
.sc13-section { display: flex; flex-direction: column; gap: 10px; }
.sc13-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sc13-section-icon    { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.5; flex-shrink: 0; color: var(--accent); }
.sc13-section-head > span:nth-child(2) { font-size: var(--type-sm); font-weight: 700; color: var(--text); }
.sc13-section-count   { margin-left: 4px; font-size: var(--type-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }

/* ── Entscheidungspunkte ─────────────────────────────────────────────────── */
.sc13-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(360px,1fr));
  gap: 10px;
}
.sc13-decision-card {
  background: var(--surface);
  border: 1px solid rgba(123,140,222,0.25);
  border-top: 3px solid #7B8CDE;
  border-radius: 9px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc13-decision-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.sc13-decision-woche  { font-family: var(--font-mono); font-size: var(--type-sm); font-weight: 700; color: #7B8CDE; }
.sc13-decision-label  { font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.sc13-go-no-go        { font-size: var(--type-base); font-weight: 600; color: var(--text); line-height: 1.45; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; border-left: 3px solid #7B8CDE; }

.sc13-decision-checks { display: flex; flex-direction: column; gap: 7px; }
.sc13-decision-check  { display: flex; flex-direction: column; gap: 2px; }
.sc13-decision-q {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sc13-decision-q-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc13-decision-a      { font-size: var(--type-base); color: var(--text-2); line-height: 1.5; padding-left: 16px; }

.sc13-optionen-detail  { margin-top: 2px; }
.sc13-optionen-sum     { display: flex; align-items: center; gap: 5px; font-size: var(--type-xs); font-weight: 600; color: var(--text-3); cursor: pointer; list-style: none; }
.sc13-optionen-sum::-webkit-details-marker { display: none; }
.sc13-optionen-sum-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; transition: transform 0.15s; }
details[open] .sc13-optionen-sum-icon { transform: rotate(90deg); }
.sc13-optionen-list   { margin: 6px 0 0 16px; padding: 0; list-style: disc; display: flex; flex-direction: column; gap: 4px; }
.sc13-optionen-list li { font-size: var(--type-sm); color: var(--text-3); line-height: 1.5; }

/* ── Risiken ─────────────────────────────────────────────────────────────── */
.sc13-risiko-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
  gap: 8px;
}
.sc13-risiko-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sc13-risiko-head  { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.sc13-risiko-woche { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); font-weight: 700; color: var(--text-3); }
.sc13-risiko-clock { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc13-risiko-frueh { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); color: var(--accent); }
.sc13-risiko-bell  { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc13-risiko-text  { font-size: var(--type-base); color: var(--text-2); line-height: 1.55; }
.sc13-sm-detail    { margin-top: 2px; }
.sc13-sm-sum       { display: flex; align-items: center; gap: 5px; font-size: var(--type-xs); color: #6ECF83; cursor: pointer; list-style: none; font-weight: 600; }
.sc13-sm-sum::-webkit-details-marker { display: none; }
.sc13-sm-icon      { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc13-sm-body      { font-size: var(--type-sm); color: var(--text-3); line-height: 1.55; margin-top: 5px; border-left: 2px solid rgba(110,207,131,0.3); padding-left: 10px; }

/* ── Abhängigkeiten ──────────────────────────────────────────────────────── */
.sc13-abh-list { display: flex; flex-direction: column; gap: 6px; }
.sc13-abh-row  {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sc13-abh-main  {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--type-sm);
}
.sc13-abh-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc13-abh-nach  { font-weight: 700; color: var(--text); }
.sc13-abh-arrow { font-size: var(--type-sm); color: var(--icon-color); font-style: italic; }
.sc13-abh-von   { font-weight: 600; color: var(--text-2); }
.sc13-abh-start { font-size: var(--type-xs); font-weight: 700; font-family: var(--font-mono); color: var(--accent); background: rgba(201,168,76,0.08); border: 1px solid var(--border-gold); border-radius: 4px; padding: 1px 7px; cursor: default; }
.sc13-abh-bis   { font-size: var(--type-xs); color: var(--text-3); }
.sc13-ueber-detail { margin-top: 1px; }
.sc13-ueber-sum  { display: flex; align-items: center; gap: 5px; font-size: var(--type-xs); color: var(--text-3); cursor: pointer; list-style: none; font-weight: 600; }
.sc13-ueber-sum::-webkit-details-marker { display: none; }
.sc13-ueber-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc13-ueber-body { font-size: var(--type-sm); color: var(--text-3); line-height: 1.55; margin-top: 4px; border-left: 2px solid var(--border); padding-left: 10px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sc13-decision-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sc13-woche-card    { flex-direction: column; }
  .sc13-woche-left    { flex: none; flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 14px; justify-content: flex-start; }
  .sc13-woche-nr      { font-size: var(--type-lg); }
  .sc13-chart         { height: 100px; }
  .sc13-kpi-row       { grid-template-columns: repeat(2, 1fr); }
  .sc13-risiko-grid   { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 14 — Task-Board & Verantwortlichkeiten
   ═══════════════════════════════════════════════════════════════════════════ */

.sc14-dashboard { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 28px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.sc14-hero { display: flex; flex-direction: column; gap: 12px; }

.sc14-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; }
.sc14-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 4px;
  cursor: default; transition: border-color 0.15s;
}
.sc14-kpi:hover   { border-color: var(--border-gold); }
.sc14-kpi-warn    { border-color: rgba(217,92,92,0.25); }
.sc14-kpi-icon    { width: var(--icon-base); height: var(--icon-base); stroke-width: 1.8; color: var(--accent); margin-bottom: 2px; }
.sc14-kpi-warn .sc14-kpi-icon { color: var(--red); }
.sc14-kpi-val     { font-size: var(--type-lg); font-weight: 600; font-family: var(--font-serif); color: var(--text); line-height: 1.15; }
.sc14-kpi-warn .sc14-kpi-val { color: var(--red); }
.sc14-kpi-label   { font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; color: var(--text-3); }

.sc14-chart-wrap      { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 13px 16px; }
.sc14-chart-label     { display: flex; align-items: center; gap: 7px; font-size: var(--type-xs); font-weight: 600; color: var(--text-3); margin-bottom: 8px; }
.sc14-chart-label-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc14-chart           { height: 120px; width: 100%; }

/* ── Section ─────────────────────────────────────────────────────────────── */
.sc14-section      { display: flex; flex-direction: column; gap: 10px; }
.sc14-section-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sc14-section-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--accent); }
.sc14-icon-warn    { color: var(--red); }
.sc14-section-head > span { font-size: var(--type-sm); font-weight: 700; color: var(--text); }

/* ── Warnkarten (Überlastung) ────────────────────────────────────────────── */
.sc14-warn-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 8px; }
.sc14-warn-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--red); border-radius: 8px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.sc14-warn-head  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc14-warn-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--red); flex-shrink: 0; }
.sc14-warn-name  { font-size: var(--type-sm); font-weight: 700; color: var(--text); }
.sc14-warn-meta  { font-size: var(--type-xs); color: var(--text-3); }
.sc14-warn-h     { font-size: var(--type-xs); font-family: var(--font-mono); font-weight: 700; color: var(--red); background: rgba(217,92,92,0.08); border: 1px solid rgba(217,92,92,0.2); border-radius: 4px; padding: 1px 7px; }
.sc14-warn-text  { font-size: var(--type-base); color: var(--text-2); line-height: 1.55; }

/* ── Delegation ──────────────────────────────────────────────────────────── */
.sc14-deleg { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 9px; overflow: hidden; }
.sc14-deleg-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(var(--accent-rgb), 0.05); border-bottom: 1px solid var(--border-gold);
  font-size: var(--type-sm); font-weight: 700; color: var(--accent);
}
.sc14-deleg-head-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc14-deleg-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); font-size: var(--type-sm); cursor: default;
  transition: background 0.12s;
}
.sc14-deleg-row:last-child { border-bottom: none; }
.sc14-deleg-row:hover { background: var(--surface-2); }
.sc14-deleg-task  { font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc14-deleg-arrow { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc14-deleg-ziel  { font-size: var(--type-xs); color: var(--accent); font-weight: 600; flex-shrink: 0; }

/* ── Owner-Grid ──────────────────────────────────────────────────────────── */
.sc14-owner-grid  { display: flex; flex-direction: column; gap: 12px; }
.sc14-owner-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  transition: border-color 0.15s;
}
.sc14-owner-block:hover { border-color: var(--border-gold); }
.sc14-owner-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.sc14-owner-icon   { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc14-owner-ceo    { color: var(--accent); }
.sc14-owner-name   { font-size: var(--type-base); font-weight: 700; color: var(--text); font-family: var(--font-serif); }
.sc14-owner-h      { font-size: var(--type-xs); font-family: var(--font-mono); font-weight: 700; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: default; }
.sc14-owner-tasks  { font-size: var(--type-xs); color: var(--text-3); }
.sc14-owner-peak   { font-size: var(--type-xs); color: var(--text-3); margin-left: auto; }
.sc14-auslast-chip { font-size: var(--type-xs); font-weight: 700; border-radius: 4px; padding: 2px 8px; cursor: default; }
.sc14-auslast-ok   { background: rgba(110,207,131,0.1); color: #6ECF83; border: 1px solid rgba(110,207,131,0.2); }
.sc14-auslast-gelb { background: rgba(201,168,76,0.1); color: var(--accent); border: 1px solid var(--border-gold); }
.sc14-auslast-rot  { background: rgba(217,92,92,0.1); color: var(--red); border: 1px solid rgba(217,92,92,0.2); }
.sc14-no-tasks     { font-size: var(--type-sm); color: var(--text-3); padding: 10px 16px; font-style: italic; }

/* ── Task-Liste ──────────────────────────────────────────────────────────── */
.sc14-task-list { display: flex; flex-direction: column; }
.sc14-task-row  {
  border-bottom: 1px solid var(--border); padding: 8px 16px;
  display: flex; flex-direction: column; gap: 3px;
  transition: background 0.1s;
}
.sc14-task-row:last-child { border-bottom: none; }
.sc14-task-row:hover { background: var(--surface-2); }
.sc14-task-main   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc14-task-titel  { font-size: var(--type-base); font-weight: 600; color: var(--text); flex: 1; min-width: 120px; line-height: 1.35; }
.sc14-task-meta   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.sc14-task-ini    { font-size: var(--type-xs); color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; }
.sc14-task-dl     { display: inline-flex; align-items: center; gap: 3px; font-size: var(--type-xs); font-family: var(--font-mono); font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; cursor: default; }
.sc14-task-aufwand { font-size: var(--type-xs); font-family: var(--font-mono); color: var(--text-3); }
.sc14-task-dep    { display: inline-flex; align-items: center; color: var(--accent); cursor: default; }
.sc14-task-meta-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }

/* Task Detail Accordion */
.sc14-task-det      { padding: 0 0 4px; }
.sc14-task-det-sum  { display: flex; align-items: center; font-size: var(--type-xs); color: var(--text-3); cursor: pointer; list-style: none; padding: 3px 0; gap: 4px; }
.sc14-task-det-sum::-webkit-details-marker { display: none; }
.sc14-task-det-body { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; }
.sc14-det-row       { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: var(--type-sm); line-height: 1.55; }
.sc14-det-label     { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding-top: 1px; }
.sc14-det-risiko span:last-child { color: var(--red); }

/* ── Kapazitäts-Chip ─────────────────────────────────────────────────────── */
.sc14-kap-chip  { font-size: var(--type-xs); font-weight: 700; border-radius: 4px; padding: 2px 8px; cursor: default; }
.sc14-kap-ok    { background: rgba(110,207,131,0.1); color: #6ECF83; border: 1px solid rgba(110,207,131,0.2); }
.sc14-kap-warn  { background: rgba(201,168,76,0.1); color: var(--accent); border: 1px solid var(--border-gold); }
.sc14-kap-neutral { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }

/* ── Wochen-Block (Startplan) ────────────────────────────────────────────── */
.sc14-woche-block  { display: flex; flex-direction: column; gap: 0; margin-bottom: 10px; }
.sc14-woche-block:last-child { margin-bottom: 0; }
.sc14-woche-head   { display: flex; align-items: center; gap: 9px; padding: 8px 16px; background: var(--surface-2); border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; }
.sc14-woche-head + .sc14-task-list { border: 1px solid var(--border); border-radius: 0 0 8px 8px; }
.sc14-woche-nr     { font-size: var(--type-sm); font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.sc14-woche-h      { font-size: var(--type-xs); font-family: var(--font-mono); color: var(--text-3); }

/* ── Startplan Accordion ─────────────────────────────────────────────────── */
.sc14-startplan-acc  { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc14-startplan-sum  {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  cursor: pointer; list-style: none; font-size: var(--type-sm); font-weight: 700;
  color: var(--text); user-select: none; transition: background 0.12s;
}
.sc14-startplan-sum::-webkit-details-marker { display: none; }
.sc14-startplan-sum:hover { background: var(--surface-2); }
.sc14-startplan-acc[open] .sc14-startplan-sum { border-bottom: 1px solid var(--border-gold); }
.sc14-startplan-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--accent); }
.sc14-startplan-count { margin-left: auto; font-size: var(--type-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }
.sc14-startplan-body  { padding: 14px 0; }

/* ── Kritischer-Pfad Badge ───────────────────────────────────────────────── */
.sc14-krit-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); font-weight: 700; background: rgba(217,92,92,0.08); color: var(--red); border: 1px solid rgba(217,92,92,0.2); border-radius: 4px; padding: 2px 7px; cursor: default; }
.sc14-krit-icon  { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }

/* ── Initiativen-Zerlegung ───────────────────────────────────────────────── */
.sc14-zerlegung-acc { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sc14-zerlegung-sum {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  cursor: pointer; list-style: none; font-size: var(--type-sm); font-weight: 700;
  color: var(--text-2); user-select: none; transition: color 0.15s, background 0.15s;
}
.sc14-zerlegung-sum::-webkit-details-marker { display: none; }
.sc14-zerlegung-sum:hover { color: var(--text); background: var(--surface-2); }
.sc14-zerlegung-acc[open] .sc14-zerlegung-sum { color: var(--text); border-bottom: 1px solid var(--border-gold); }
.sc14-zerlegung-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc14-zerlegung-count { margin-left: auto; font-size: var(--type-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }
.sc14-zerlegung-body  { display: flex; flex-direction: column; gap: 4px; padding: 10px; }

.sc14-ini-acc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.sc14-ini-acc-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: var(--type-sm); color: var(--text-2); user-select: none;
  transition: background 0.12s, color 0.12s;
}
.sc14-ini-acc-head::-webkit-details-marker { display: none; }
.sc14-ini-acc-head:hover { background: var(--surface); color: var(--text); }
.sc14-ini-acc[open] .sc14-ini-acc-head { color: var(--text); border-bottom: 1px solid var(--border); }
.sc14-ini-acc-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc14-ini-acc-titel { font-weight: 700; flex: 1; min-width: 80px; }
.sc14-ini-acc-meta  { font-size: var(--type-xs); font-family: var(--font-mono); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; }
.sc14-ini-acc-body  { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.sc14-phasen-zeile  { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); color: var(--text-3); }
.sc14-phasen-icon   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; color: var(--icon-color); }
.sc14-milestones    { display: flex; flex-wrap: wrap; gap: 6px; }
.sc14-milestone     { display: inline-flex; align-items: center; gap: 4px; font-size: var(--type-xs); color: var(--accent); background: rgba(var(--accent-rgb), 0.07); border: 1px solid var(--border-gold); border-radius: 4px; padding: 2px 8px; }
.sc14-milestone-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc14-ini-acc-body .sc14-task-list { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sc14-warn-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sc14-chart  { height: 90px; }
  .sc14-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .sc14-det-row { grid-template-columns: 90px 1fr; }
  .sc14-owner-peak { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 15 — KPI-System & Frühwarnung
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.sc15-dashboard { display: flex; flex-direction: column; gap: 20px; }
.sc15-section   { display: flex; flex-direction: column; gap: 14px; }

/* ── Section Header ──────────────────────────────────────────────────────── */
.sc15-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-gold);
}
.sc15-section-head > span {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
}
.sc15-section-icon          { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc15-section-head-abbruch  { border-bottom-color: rgba(217,92,92,0.4); }
.sc15-section-icon-abbruch  { color: var(--red); }
.sc15-section-head-details  { cursor: pointer; list-style: none; }
.sc15-section-head-details::-webkit-details-marker { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sc15-hero {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sc15-hero-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.sc15-hero-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px 10px;
  text-align: center;
  transition: border-color 0.15s;
}
.sc15-hero-kpi:hover        { border-color: var(--border-gold); }
.sc15-hero-kpi-warn         { border-color: rgba(217,92,92,0.3); }
.sc15-hero-kpi-warn:hover   { border-color: var(--red); }
.sc15-hero-kpi-icon         { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc15-hero-kpi-warn .sc15-hero-kpi-icon { color: var(--red); }
.sc15-hero-kpi-val          { font-family: var(--font-mono); font-size: var(--type-base); font-weight: 700; color: var(--text); }
.sc15-hero-kpi-label        { font-size: var(--type-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }

/* ── Ampel-Streifen ──────────────────────────────────────────────────────── */
.sc15-ampel-strip { display: flex; flex-direction: column; gap: 5px; }
.sc15-ampel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--type-sm);
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: default;
}
.sc15-ampel-rot   { background: rgba(217,92,92,0.07);  border: 1px solid rgba(217,92,92,0.2); }
.sc15-ampel-gelb  { background: rgba(201,168,76,0.07); border: 1px solid rgba(201,168,76,0.2); }
.sc15-ampel-gruen { background: rgba(80,180,100,0.07); border: 1px solid rgba(80,180,100,0.2); }
.sc15-ampel-dot   { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; flex-shrink: 0; margin-top: 2px; }
.sc15-dot-rot     { color: #D95C5C; fill: #D95C5C; }
.sc15-dot-gelb    { color: var(--accent); fill: var(--accent); }
.sc15-dot-gruen   { color: #6ECF83; fill: #6ECF83; }
.sc15-ampel-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; min-width: 32px; flex-shrink: 0; margin-top: 1px; }
.sc15-ampel-rot   .sc15-ampel-label { color: #D95C5C; }
.sc15-ampel-gelb  .sc15-ampel-label { color: var(--accent); }
.sc15-ampel-gruen .sc15-ampel-label { color: #5C9E5C; }
.sc15-ampel-text  { color: var(--text-2); }

/* ── ECharts ─────────────────────────────────────────────────────────────── */
.sc15-chart {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 60px;
}

/* ── KPI-Karten ──────────────────────────────────────────────────────────── */
.sc15-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 12px; }
.sc15-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.sc15-kpi-card:hover { border-color: var(--accent); }
.sc15-kpi-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sc15-kpi-head-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.sc15-kpi-name {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
}
.sc15-kpi-info      { display: inline-flex; align-items: center; cursor: default; color: var(--text-3); flex-shrink: 0; margin-top: 3px; }
.sc15-kpi-info-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; }
.sc15-kpi-values {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc15-kpi-val-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sc15-kpi-num       { font-family: var(--font-mono); font-size: var(--type-base); font-weight: 700; color: var(--text); }
.sc15-kpi-num-ziel  { color: var(--accent); }
.sc15-kpi-val-label { font-size: var(--type-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.sc15-kpi-arrow     { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--icon-color); flex-shrink: 0; }
.sc15-kpi-logik     { font-size: var(--type-base); color: var(--text-2); line-height: 1.55; margin: 0; cursor: default; }
.sc15-kpi-owner     { display: flex; align-items: center; gap: 6px; font-size: var(--type-sm); color: var(--text-3); }
.sc15-kpi-owner-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc15-kpi-abbruch {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--type-base);
  color: var(--red);
  background: rgba(217,92,92,0.06);
  border: 1px solid rgba(217,92,92,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1.5;
}
.sc15-kpi-abbruch-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; margin-top: 1px; }

/* ── Frühwarnung ─────────────────────────────────────────────────────────── */
.sc15-warn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc15-warn-col   { display: flex; flex-direction: column; gap: 8px; }
.sc15-warn-col-head {
  font-size: var(--type-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-3); padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.sc15-warn-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sc15-warn-row-frueh { border-left-color: var(--border-gold); }
.sc15-warn-row-head  { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sc15-warn-icon      { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; }
.sc15-warn-icon-frueh { color: var(--icon-color); }
.sc15-warn-name      { font-size: var(--type-sm); font-weight: 600; color: var(--text); flex: 1; }
.sc15-warn-chip      { font-size: var(--type-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.sc15-warn-info      { display: inline-flex; align-items: center; cursor: default; color: var(--text-3); }
.sc15-warn-signal {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--type-base); color: var(--text-2); line-height: 1.5;
}
.sc15-warn-signal-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.sc15-warn-bezug { font-size: var(--type-xs); color: var(--text-3); padding-left: 20px; }

/* ── Abbruch-Schwellenwerte ──────────────────────────────────────────────── */
.sc15-section-abbruch { gap: 12px; }
.sc15-abbruch-list    { display: flex; flex-direction: column; gap: 10px; }
.sc15-abbruch-card {
  background: var(--surface);
  border: 1px solid rgba(217,92,92,0.3);
  border-left: 4px solid var(--red);
  border-radius: 9px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc15-abbruch-trigger {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.sc15-abbruch-icon    { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.5; color: var(--red); flex-shrink: 0; margin-top: 1px; }
.sc15-abbruch-trigger-text { font-size: var(--type-sm); color: var(--text-2); line-height: 1.5; }
.sc15-abbruch-kpi     { font-weight: 600; color: var(--text); }
.sc15-abbruch-pflicht {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  line-height: 1.45;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc15-abbruch-owner { display: flex; align-items: center; gap: 6px; font-size: var(--type-sm); color: var(--text-3); }
.sc15-abbruch-owner-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc15-abbruch-details { border-top: 1px solid var(--border); padding-top: 8px; }
.sc15-abbruch-details-sum {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--type-sm); font-weight: 600; color: var(--text-3);
  cursor: pointer; list-style: none;
}
.sc15-abbruch-details-sum::-webkit-details-marker { display: none; }
.sc15-abbruch-details-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc15-optionen-list { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.sc15-option { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.sc15-option-label { font-size: var(--type-base); font-weight: 600; color: var(--text); }
.sc15-option-kons  { font-size: var(--type-sm); color: var(--text-3); margin-top: 2px; line-height: 1.5; }

/* ── Meilensteine ────────────────────────────────────────────────────────── */
.sc15-meil-count   { margin-left: auto; font-family: var(--font-mono); font-size: var(--type-xs); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-3); }
.sc15-meil-details { background: var(--surface); border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; }
.sc15-meil-details > summary { padding: 13px 18px; }
.sc15-meil-list    { display: flex; flex-direction: column; padding: 4px 0 8px; }
.sc15-meil-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
}
.sc15-meil-row:first-child { border-top: none; }
.sc15-meil-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc15-meil-icon  { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; }
.sc15-meil-woche { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); white-space: nowrap; }
.sc15-meil-text  { font-size: var(--type-sm); font-weight: 500; color: var(--text); flex: 1; }
.sc15-meil-chip  { font-size: var(--type-xs); color: var(--accent); background: rgba(var(--accent-rgb),0.07); border: 1px solid var(--border-gold); border-radius: 4px; padding: 1px 7px; }
.sc15-meil-kons  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-left: 21px; }
.sc15-meil-ok, .sc15-meil-fail { display: flex; flex-direction: column; gap: 2px; font-size: var(--type-sm); border-radius: 5px; padding: 5px 8px; }
.sc15-meil-ok    { background: rgba(80,180,100,0.07); border: 1px solid rgba(80,180,100,0.2); color: var(--text-2); }
.sc15-meil-fail  { background: rgba(217,92,92,0.06);  border: 1px solid rgba(217,92,92,0.2);  color: var(--text-2); }
.sc15-meil-ok-label   { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #5C9E5C; }
.sc15-meil-fail-label { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #D95C5C; }

/* ── Wöchentlicher Check ─────────────────────────────────────────────────── */
.sc15-check-block {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
}
.sc15-check-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.07), transparent);
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
}
.sc15-check-icon { width: var(--icon-base); height: var(--icon-base); stroke-width: 2.25; color: var(--accent); flex-shrink: 0; }
.sc15-check-list { margin: 0; padding: 14px 18px 14px 38px; display: flex; flex-direction: column; gap: 6px; }
.sc15-check-list-ol { list-style: decimal; }
.sc15-check-list li { font-size: var(--type-sm); color: var(--text-2); line-height: 1.55; }
.sc15-check-puffer {
  border-top: 1px solid var(--border);
  margin: 0 18px 14px;
}
.sc15-check-puffer-sum {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 0 6px;
  font-size: var(--type-sm); font-weight: 600; color: var(--text-3);
  cursor: pointer; list-style: none;
}
.sc15-check-puffer-sum::-webkit-details-marker { display: none; }
.sc15-puffer-trigger { font-size: var(--type-sm); color: var(--text-2); line-height: 1.55; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sc15-kpi-grid   { grid-template-columns: 1fr; }
  .sc15-warn-split { grid-template-columns: 1fr; }
  .sc15-meil-kons  { grid-template-columns: 1fr; }
  .sc15-hero-kpis  { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Step 16 · Wöchentliche Steuerung Dashboard (sc16-)
   ═══════════════════════════════════════════════════════════════════════════ */

.sc16-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0 24px;
}

/* ── Header KPI Cards ─────────────────────────────────────────────────────── */
.sc16-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sc16-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.sc16-kpi-card-warn {
  border-top-color: #D95C5C;
}
.sc16-kpi-icon {
  width: var(--icon-lg); height: var(--icon-lg);
  stroke-width: 1.6;
  color: var(--accent);
  margin-bottom: 2px;
}
.sc16-kpi-card-warn .sc16-kpi-icon { color: #D95C5C; }
.sc16-kpi-val {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.sc16-kpi-label {
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.sc16-section {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
}
.sc16-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), transparent);
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
}
.sc16-section-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
}
.sc16-section-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sc16-section-body-nopad {
  padding: 0;
}

/* ── Collapsed Accordion (Notfall) ──────────────────────────────────────── */
.sc16-details {
  background: var(--surface);
  border: 1px solid rgba(217,92,92,0.35);
  border-top: 3px solid #D95C5C;
  border-radius: 10px;
  overflow: hidden;
}
.sc16-details-sum {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, rgba(217,92,92,0.07), transparent);
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  border-bottom: 1px solid rgba(217,92,92,0.2);
  user-select: none;
}
.sc16-details-sum::-webkit-details-marker { display: none; }
.sc16-details-sum .sc16-section-icon { color: #D95C5C; }
.sc16-details-chevron {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2;
  color: var(--text-3);
  margin-left: auto;
  transition: transform 0.2s;
}
.sc16-details[open] .sc16-details-chevron { transform: rotate(180deg); }
.sc16-details .sc16-section-body {
  border-top: 1px solid rgba(217,92,92,0.15);
}

/* ── Timeline ────────────────────────────────────────────────────────────── */
.sc16-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.sc16-timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.sc16-timeline-row:last-child { border-bottom: none; }
.sc16-timeline-row:nth-child(even) { background: rgba(var(--accent-rgb), 0.03); }
.sc16-timeline-num {
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid var(--border-gold);
  color: var(--accent);
  font-size: var(--type-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sc16-timeline-body { flex: 1; min-width: 0; }
.sc16-timeline-title {
  font-size: var(--type-base);
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}
.sc16-timeline-detail {
  font-size: var(--type-xs);
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Checklist ───────────────────────────────────────────────────────────── */
.sc16-checklist {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc16-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--type-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.sc16-check-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.sc16-checklist-proto .sc16-check-icon { color: var(--icon-color); }

/* ── Eskalationsmatrix ───────────────────────────────────────────────────── */
.sc16-eskal-group {
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
}
.sc16-eskal-group:last-child { border-bottom: none; }
.sc16-eskal-level-head {
  margin-bottom: 8px;
}
.sc16-eskal-badge {
  display: inline-block;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sc16-eskal-color, #888);
  background: color-mix(in srgb, var(--sc16-eskal-color, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc16-eskal-color, #888) 30%, transparent);
  border-radius: 4px;
  padding: 2px 8px;
}
.sc16-eskal-row {
  margin-left: 6px;
  padding: 8px 10px;
  border-left: 2px solid color-mix(in srgb, var(--sc16-eskal-color, #888) 40%, transparent);
  margin-bottom: 8px;
  background: rgba(var(--accent-rgb), 0.02);
  border-radius: 0 6px 6px 0;
}
.sc16-eskal-row:last-child { margin-bottom: 0; }
.sc16-eskal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  align-items: center;
}
.sc16-eskal-sigtyp {
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--sc16-eskal-color, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sc16-eskal-rz, .sc16-eskal-owner {
  font-size: var(--type-xs);
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: default;
}
.sc16-eskal-desc {
  font-size: var(--type-base);
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 4px;
}
.sc16-eskal-empf {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--type-base);
  color: var(--text-3);
  line-height: 1.45;
  margin-top: 4px;
}
.sc16-empf-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Nerv-Logik Warning ──────────────────────────────────────────────────── */
.sc16-nerv-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(201,168,76,0.07);
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: var(--type-base);
  color: var(--text-2);
  line-height: 1.55;
}
.sc16-nerv-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Sprint-Liste (Notfall) ──────────────────────────────────────────────── */
.sc16-sprint-list {
  list-style: decimal;
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc16-sprint-list li {
  font-size: var(--type-sm);
  color: var(--text-2);
  line-height: 1.55;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.sc16-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-sm);
}
.sc16-table thead th {
  text-align: left;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  padding: 5px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.sc16-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
  line-height: 1.45;
}
.sc16-table tbody tr:last-child td { border-bottom: none; }
.sc16-table tbody tr:nth-child(even) td { background: rgba(var(--accent-rgb), 0.025); }
.sc16-table-name {
  font-weight: 600;
  color: var(--text) !important;
  white-space: nowrap;
}

/* ── Agenda (Puffer) ─────────────────────────────────────────────────────── */
.sc16-agenda {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.sc16-agenda-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.sc16-agenda-row:last-child { border-bottom: none; }
.sc16-agenda-num {
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--border-gold);
  color: var(--accent);
  font-size: var(--type-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sc16-agenda-body { flex: 1; min-width: 0; }
.sc16-agenda-title {
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--text);
}
.sc16-agenda-min {
  font-size: var(--type-xs);
  font-weight: 400;
  color: var(--text-3);
}
.sc16-agenda-sub {
  font-size: var(--type-xs);
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Tag Row (Teilnehmer) ────────────────────────────────────────────────── */
.sc16-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sc16-tag {
  font-size: var(--type-xs);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 9px;
}

/* ── Meta Chips ──────────────────────────────────────────────────────────── */
.sc16-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sc16-meta-chip {
  font-size: var(--type-xs);
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid var(--border-gold);
  border-radius: 5px;
  padding: 2px 9px;
}

/* ── Ampel Grid (Kommunikation) ──────────────────────────────────────────── */
.sc16-ampel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sc16-ampel-col {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.sc16-ampel-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sc16-ampel-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.5;
}
.sc16-ampel-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc16-ampel-field-key {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 2px;
}
.sc16-ampel-field-val {
  font-size: var(--type-base);
  color: var(--text-2);
  line-height: 1.45;
}

.sc16-ampel-gruen { border-color: rgba(80,180,100,0.3); }
.sc16-ampel-gruen .sc16-ampel-head { background: rgba(80,180,100,0.1); color: #5C9E5C; }
.sc16-ampel-gruen .sc16-ampel-icon { color: #5C9E5C; }
.sc16-ampel-gelb  { border-color: rgba(201,168,76,0.35); }
.sc16-ampel-gelb  .sc16-ampel-head { background: rgba(201,168,76,0.1); color: var(--accent); }
.sc16-ampel-gelb  .sc16-ampel-icon { color: var(--accent); }
.sc16-ampel-rot   { border-color: rgba(217,92,92,0.3); }
.sc16-ampel-rot   .sc16-ampel-head { background: rgba(217,92,92,0.08); color: #D95C5C; }
.sc16-ampel-rot   .sc16-ampel-icon { color: #D95C5C; }

/* ── Sub-Sections ────────────────────────────────────────────────────────── */
.sc16-sub-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc16-sub-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.sc16-sub-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--accent);
}

/* ── Anti-Pattern Cards ──────────────────────────────────────────────────── */
.sc16-anti-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc16-anti-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(217,92,92,0.05);
  border: 1px solid rgba(217,92,92,0.2);
  border-left: 3px solid #D95C5C;
  border-radius: 6px;
  padding: 24px 20px;
  font-size: var(--type-base);
  color: var(--text-2);
  line-height: 1.5;
}
.sc16-anti-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.5;
  color: #D95C5C;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .sc16-header      { grid-template-columns: 1fr 1fr; }
  .sc16-ampel-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .sc16-header      { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Step 17 · Reaktionspläne / Notfall-Handbuch (sc17-)
   ═══════════════════════════════════════════════════════════════════════════ */

.sc17-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 0 28px;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.sc17-section {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
}
.sc17-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), transparent);
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
}
.sc17-section-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Hero: Schnelldiagnose ───────────────────────────────────────────────── */
.sc17-hero {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
}
.sc17-hero-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 32px 28px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.09), transparent);
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 700;
  font-style: italic;
  color: var(--text);
}
.sc17-hero-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Diagnose Flow ───────────────────────────────────────────────────────── */
.sc17-diag-flow {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sc17-diag-connector {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.sc17-connector-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.5;
  color: var(--icon-color);
}
.sc17-diag-step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.sc17-diag-step-last { }
.sc17-diag-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(var(--accent-rgb), 0.04);
  border-bottom: 1px solid var(--border);
}
.sc17-diag-step-num {
  width: var(--icon-lg); height: var(--icon-lg);
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  font-size: var(--type-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc17-diag-step-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--accent);
}
.sc17-diag-step-title {
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

/* ── Diagnose Optionen (Schritt 1) ───────────────────────────────────────── */
.sc17-diag-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.sc17-diag-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: default;
  transition: background 0.15s;
}
.sc17-diag-option:nth-child(even) { border-right: none; }
.sc17-diag-option:nth-last-child(-n+2) { border-bottom: none; }
.sc17-diag-option:hover { background: rgba(var(--accent-rgb), 0.04); }
.sc17-diag-opt-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.sc17-diag-opt-body { flex: 1; min-width: 0; }
.sc17-diag-opt-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 2px;
}
.sc17-diag-opt-text {
  font-size: var(--type-base);
  color: var(--text-3);
  line-height: 1.5;
}

/* ── Zeitstufen Eskalationstreppe (Schritt 2) ────────────────────────────── */
.sc17-zeit-treppe {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sc17-zeit-stufe {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
.sc17-zeit-stufe:last-child { border-bottom: none; }
.sc17-zeit-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 175px;
  flex-shrink: 0;
}
.sc17-zeit-text {
  font-size: var(--type-base);
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
}
.sc17-zeit-gruen { background: rgba(80,180,100,0.05); }
.sc17-zeit-gruen .sc17-zeit-label { color: #5C9E5C; }
.sc17-zeit-gelb  { background: rgba(201,168,76,0.05); }
.sc17-zeit-gelb  .sc17-zeit-label { color: var(--accent); }
.sc17-zeit-rot   { background: rgba(217,92,92,0.05); }
.sc17-zeit-rot   .sc17-zeit-label { color: #D95C5C; }

/* ── Entscheidungspfade (Schritt 3) ──────────────────────────────────────── */
.sc17-f3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.sc17-f3-pfad {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
}
.sc17-f3-pfad:last-child { border-right: none; }
.sc17-f3-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.sc17-f3-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.5;
}
.sc17-f3-label {
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sc17-f3-text {
  font-size: var(--type-base);
  color: var(--text-3);
  line-height: 1.55;
}
.sc17-f3-ja .sc17-f3-icon,
.sc17-f3-ja .sc17-f3-label  { color: #5C9E5C; }
.sc17-f3-ja                  { background: rgba(80,180,100,0.04); }
.sc17-f3-nein .sc17-f3-icon,
.sc17-f3-nein .sc17-f3-label { color: #D95C5C; }
.sc17-f3-nein                { background: rgba(217,92,92,0.04); }
.sc17-f3-unsicher .sc17-f3-icon,
.sc17-f3-unsicher .sc17-f3-label { color: var(--accent); }
.sc17-f3-unsicher            { background: rgba(201,168,76,0.04); }

/* ── Szenarien Liste ─────────────────────────────────────────────────────── */
.sc17-szenarien-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sc17-szenario-card {
  border-bottom: 1px solid var(--border);
  padding: 24px 22px;
}
.sc17-szenario-card:last-child { border-bottom: none; }
.sc17-sz-header {
  margin-bottom: 12px;
}
.sc17-sz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}
.sc17-sz-titel {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

/* ── Badges & Chips ──────────────────────────────────────────────────────── */
.sc17-badge {
  display: inline-block;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: default;
}
.sc17-badge-kritisch {
  color: #D95C5C;
  background: rgba(217,92,92,0.1);
  border: 1px solid rgba(217,92,92,0.3);
}
.sc17-badge-hoch {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--border-gold);
}
.sc17-badge-mittel {
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.sc17-chip {
  display: inline-block;
  font-size: var(--type-xs);
  font-weight: 500;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: default;
}
.sc17-chip-wahr {
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.sc17-chip-woche {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid var(--border-gold);
}

/* ── Frühwarnsignal ──────────────────────────────────────────────────────── */
.sc17-frueh {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.sc17-frueh-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.sc17-frueh-body { flex: 1; min-width: 0; }
.sc17-frueh-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  margin-bottom: 3px;
}
.sc17-frueh-text {
  font-size: var(--type-base);
  color: var(--text-2);
  line-height: 1.55;
}

/* ── Sofortmaßnahmen Tabelle ─────────────────────────────────────────────── */
.sc17-ma-block {
  margin-bottom: 12px;
}
.sc17-sub-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin-bottom: 7px;
}
.sc17-sub-icon {
  width: var(--icon-xs); height: var(--icon-xs);
  stroke-width: 2.25;
  color: var(--accent);
}
.sc17-ma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-sm);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.sc17-ma-table thead th {
  text-align: left;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 5px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.sc17-ma-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
  line-height: 1.45;
}
.sc17-ma-table tbody tr:last-child td { border-bottom: none; }
.sc17-ma-table tbody tr:nth-child(even) td { background: rgba(var(--accent-rgb), 0.025); }
.sc17-ma-nr {
  font-weight: 700;
  color: var(--accent) !important;
  width: 24px;
  text-align: center;
}
.sc17-ma-owner {
  font-weight: 600;
  color: var(--text) !important;
  white-space: nowrap;
  width: 130px;
}
.sc17-ma-dl {
  white-space: nowrap;
  width: 100px;
  color: var(--text-3) !important;
}

/* ── Eskalations-Footer ──────────────────────────────────────────────────── */
.sc17-esk-footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 14px;
}
.sc17-esk-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--type-sm);
}
.sc17-esk-key {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 120px;
}
.sc17-esk-icon {
  width: var(--icon-xs); height: var(--icon-xs);
  stroke-width: 2.5;
  color: #D95C5C;
}
.sc17-esk-val {
  color: var(--text-2);
  line-height: 1.45;
  flex: 1;
}
.sc17-esk-planb .sc17-esk-key { color: #D95C5C; }
.sc17-esk-planb .sc17-esk-val { color: var(--text-2); }

/* ── Kurskorrektur vs. Pivot Grid ────────────────────────────────────────── */
.sc17-kkpv-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: 0;
}
.sc17-kkpv-col {
  padding: 18px 22px 20px;
}
.sc17-kkpv-kk {
  border-right: none;
  border-top: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.03);
}
.sc17-kkpv-pv {
  border-top: 3px solid #D95C5C;
  background: rgba(217,92,92,0.025);
}
.sc17-kkpv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 700;
  color: var(--text);
}
.sc17-kkpv-kk .sc17-kkpv-head { color: var(--accent); }
.sc17-kkpv-pv .sc17-kkpv-head { color: #D95C5C; }
.sc17-kkpv-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.25;
  flex-shrink: 0;
}
.sc17-kkpv-kk .sc17-kkpv-icon { color: var(--accent); }
.sc17-kkpv-pv .sc17-kkpv-icon { color: #D95C5C; }
.sc17-kkpv-def {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-style: italic;
  color: var(--text-2);
  border-left: 2px solid var(--border-gold);
  margin: 0 0 12px 0;
  padding: 4px 10px;
  line-height: 1.55;
  cursor: default;
}
.sc17-kkpv-pv .sc17-kkpv-def { border-left-color: rgba(217,92,92,0.35); }
.sc17-kkpv-dl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.sc17-kkpv-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--type-sm);
}
.sc17-kkpv-row dt {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
  min-width: 90px;
  flex-shrink: 0;
}
.sc17-kkpv-row dd {
  color: var(--text-2);
  line-height: 1.45;
  flex: 1;
  margin: 0;
}
.sc17-kkpv-bsp-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 5px;
}
.sc17-kkpv-bsp ul {
  list-style: disc;
  margin: 0;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sc17-kkpv-bsp ul li {
  font-size: var(--type-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.sc17-kkpv-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
}
.sc17-kkpv-oder {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sc17-diag-options  { grid-template-columns: 1fr; }
  .sc17-diag-option   { border-right: none; }
  .sc17-diag-option:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .sc17-diag-option:last-child { border-bottom: none; }
  .sc17-f3-grid       { grid-template-columns: 1fr; }
  .sc17-f3-pfad       { border-right: none; border-bottom: 1px solid var(--border); }
  .sc17-f3-pfad:last-child { border-bottom: none; }
  .sc17-kkpv-grid     { grid-template-columns: 1fr; }
  .sc17-kkpv-divider  { width: auto; height: 36px; writing-mode: initial; border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .sc17-kkpv-oder     { writing-mode: initial; text-orientation: initial; }
  .sc17-zeit-label    { width: 140px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 18 — Plan B  (sc18-)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard wrapper ──────────────────────────────────────────────────── */
.sc18-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 0 32px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sc18-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px 24px;
}
.sc18-hero-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.sc18-hero-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
}
.sc18-hero-eyebrow {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-2);
}
.sc18-hero-ziel {
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-style: italic;
  color: var(--text);
  line-height: 1.45;
  margin: 0 0 18px;
}
.sc18-hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.sc18-val-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  font-size: var(--type-xs);
  font-weight: 500;
  border: 1px solid transparent;
}
.sc18-val-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; flex-shrink: 0; }
.sc18-val-ok   { background: rgba(72,199,142,0.12); border-color: rgba(72,199,142,0.3); color: #2ecc82; }
.sc18-val-fail { background: rgba(217,92,92,0.1);   border-color: rgba(217,92,92,0.25); color: #D95C5C; }
[data-theme="light"] .sc18-val-ok   { color: #1a9c5c; }
[data-theme="light"] .sc18-val-fail { color: #b53030; }
.sc18-hero-begr {
  font-size: var(--type-sm);
  color: var(--text-3);
  line-height: 1.55;
  margin: 0 0 16px;
  font-style: italic;
}
.sc18-reserve {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  font-size: var(--type-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.sc18-reserve-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 1.8; flex-shrink: 0; margin-top: 1px; }
.sc18-reserve-aktiv  .sc18-reserve-icon { color: var(--accent); }
.sc18-reserve-inaktiv .sc18-reserve-icon { color: var(--icon-color); }

/* ── Section container ───────────────────────────────────────────────────── */
.sc18-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.sc18-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.sc18-section-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
}
.sc18-section-title {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
/* Stopp section — rote Akzente */
.sc18-section-stopp { border-color: rgba(217,92,92,0.25); }
.sc18-section-head-stopp { border-bottom-color: rgba(217,92,92,0.2); }
.sc18-section-icon-stopp { color: #D95C5C; }
/* Aktivierung — rote obere Border */
.sc18-section-aktivierung { border-top: 3px solid #D95C5C; }
.sc18-section-head-aktivierung { border-bottom-color: rgba(217,92,92,0.2); }
.sc18-section-icon-aktivierung { color: #D95C5C; }

/* ── B) Kern-Initiativen ─────────────────────────────────────────────────── */
.sc18-kern-list {
  display: flex;
  flex-direction: column;
}
.sc18-kern-card {
  border-bottom: 1px solid var(--border-gold);
  border-left: 3px solid var(--accent);
}
.sc18-kern-card:last-child { border-bottom: none; }
.sc18-kern-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
}
.sc18-kern-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.25;
  color: var(--accent);
  flex-shrink: 0;
}
.sc18-kern-name {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.sc18-kern-fields {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.sc18-kern-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.sc18-kern-field:last-child { border-bottom: none; padding-bottom: 14px; }
.sc18-kern-field dt {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.sc18-kern-field dd {
  font-size: var(--type-sm);
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}
/* "Neues Ziel" Feld — accent-hervorgehoben */
.sc18-kern-field-ziel {
  border-left: 3px solid var(--accent);
  margin-left: -20px;
  padding-left: 17px;
  background: rgba(var(--accent-rgb), 0.04);
  border-radius: 0 4px 4px 0;
}
.sc18-kern-field-ziel dt { color: var(--accent); }
.sc18-kern-field-ziel dd { color: var(--text); font-weight: 500; }

/* ── C) Stopp-Initiativen ────────────────────────────────────────────────── */
.sc18-stopp-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sc18-stopp-card {
  border-bottom: 1px solid rgba(217,92,92,0.15);
  border-left: 3px solid #D95C5C;
}
.sc18-stopp-card:last-child { border-bottom: none; }
.sc18-stopp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(217,92,92,0.12);
}
.sc18-stopp-icon {
  width: var(--icon-base); height: var(--icon-base);
  stroke-width: 2.5;
  color: #D95C5C;
  flex-shrink: 0;
}
.sc18-stopp-name {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 600;
  color: var(--text);
}
.sc18-stopp-fields { padding: 0 20px; }
.sc18-stopp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.sc18-stopp-field dt {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.sc18-stopp-field dd {
  font-size: var(--type-sm);
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}
.sc18-stopp-frei {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 20px;
  font-size: var(--type-sm);
  color: #2ecc82;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
[data-theme="light"] .sc18-stopp-frei { color: #1a9c5c; }
.sc18-frei-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 1px;
}
.sc18-stopp-verloren {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 20px 14px;
  padding: 10px 14px;
  background: rgba(217,92,92,0.08);
  border: 1px solid rgba(217,92,92,0.25);
  border-left: 3px solid #D95C5C;
  border-radius: 4px;
  font-size: var(--type-sm);
  color: #D95C5C;
  line-height: 1.5;
  cursor: default;
}
[data-theme="light"] .sc18-stopp-verloren { color: #b53030; }
.sc18-verloren-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── D) Lern-Karten / Hypothesen ─────────────────────────────────────────── */
.sc18-lern-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sc18-lern-card {
  border-bottom: 1px solid var(--border);
  padding: 24px 20px;
}
.sc18-lern-card:last-child { border-bottom: none; }
.sc18-lern-quote {
  background: rgba(var(--accent-rgb), 0.05);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.sc18-lern-hypothese {
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-style: italic;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.sc18-lern-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
/* Ergebnis-Chips */
.sc18-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: default;
}
.sc18-chip-gelb  { background: rgba(255,180,50,0.15);  border: 1px solid rgba(255,180,50,0.35);  color: #e6a020; }
.sc18-chip-rot   { background: rgba(217,92,92,0.12);   border: 1px solid rgba(217,92,92,0.3);    color: #D95C5C; }
.sc18-chip-gruen { background: rgba(72,199,142,0.12);  border: 1px solid rgba(72,199,142,0.3);   color: #2ecc82; }
.sc18-chip-grau  { background: var(--surface-2);       border: 1px solid var(--border);          color: var(--text-3); }
[data-theme="light"] .sc18-chip-gelb  { color: #b07010; }
[data-theme="light"] .sc18-chip-rot   { color: #b53030; }
[data-theme="light"] .sc18-chip-gruen { color: #1a9c5c; }
.sc18-lern-ini-chip {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: var(--type-xs);
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.sc18-lern-kausal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.sc18-lern-kausal-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.sc18-lern-kausal-text {
  font-size: var(--type-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
.sc18-lern-konsequenz {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  background: rgba(var(--accent-rgb), 0.04);
  border-radius: 0 4px 4px 0;
}
.sc18-lern-kons-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}
.sc18-lern-kons-text {
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

/* ── D) Snapshot-Karten (Korrigierte Annahmen) ──────────────────────────── */
.sc18-snapshot-block {
  border-top: 1px solid var(--border);
}
.sc18-snapshot-block-head {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding: 12px 20px 10px;
}
.sc18-snapshot-list {
  display: flex;
  flex-direction: column;
}
.sc18-snapshot-card {
  border-bottom: 1px solid var(--border);
  padding: 24px 20px;
}
.sc18-snapshot-card:last-child { border-bottom: none; }
.sc18-snapshot-badge {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
  margin-bottom: 10px;
  cursor: default;
}
.sc18-snapshot-split {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  overflow: hidden;
}
.sc18-snapshot-before,
.sc18-snapshot-after {
  flex: 1;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.sc18-snapshot-before { background: var(--surface-2); border-right: 1px solid var(--border-gold); }
.sc18-snapshot-after  { background: var(--surface); }
.sc18-snapshot-side-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.sc18-snapshot-after .sc18-snapshot-side-label { color: var(--accent); }
.sc18-snapshot-side-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.5; flex-shrink: 0; }
.sc18-snapshot-after .sc18-snapshot-side-icon { color: var(--accent); }
.sc18-snapshot-side-text {
  font-size: var(--type-sm);
  color: var(--text-3);
  line-height: 1.5;
  font-style: italic;
}
.sc18-snapshot-after .sc18-snapshot-side-text {
  color: var(--text);
  font-weight: 500;
  font-style: normal;
}
.sc18-snapshot-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: var(--surface-2);
  border-right: 1px solid var(--border-gold);
  flex-shrink: 0;
}
.sc18-snapshot-arrow-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.5;
  color: var(--icon-color);
}

/* ── E) Ressourcen ───────────────────────────────────────────────────────── */
.sc18-ressourcen-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sc18-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(340px,1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.sc18-kv-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc18-kv-cell:nth-child(2n) { border-right: none; }
.sc18-kv-cell:nth-last-child(-n+2) { border-bottom: none; }
.sc18-kv-cell:last-child { border-right: none; border-bottom: none; }
.sc18-kv-cell dt {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.sc18-kv-cell dd {
  font-size: var(--type-sm);
  color: var(--text);
  font-weight: 500;
  margin: 0;
  line-height: 1.45;
}
.sc18-quickwin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  padding: 14px 16px;
}
.sc18-quickwin-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: var(--type-base);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-2);
}
.sc18-quickwin-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; color: var(--accent); flex-shrink: 0; }
.sc18-quickwin-text { font-size: var(--type-sm); color: var(--text); line-height: 1.55; margin: 0; font-weight: 500; }
.sc18-komm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sc18-komm-gesagt,
.sc18-komm-tabu {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc18-komm-tabu {
  border-color: rgba(217,92,92,0.3);
  background: rgba(217,92,92,0.05);
  border-left: 3px solid #D95C5C;
}
.sc18-komm-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.sc18-komm-label-tabu { color: #D95C5C; }
[data-theme="light"] .sc18-komm-label-tabu { color: #b53030; }
.sc18-komm-label-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.25; flex-shrink: 0; }
.sc18-komm-tabu .sc18-komm-label-icon { color: #D95C5C; }
.sc18-komm-text {
  font-size: var(--type-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

/* ── F) Aktivierung ──────────────────────────────────────────────────────── */
.sc18-ausloeser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.sc18-ausloeser {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc18-ausloeser-primaer {
  border-right: 1px solid var(--border);
}
.sc18-ausloeser-badge {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #D95C5C;
}
.sc18-ausloeser-sekundaer .sc18-ausloeser-badge {
  color: var(--text-3);
}
.sc18-ausloeser-konkret {
  font-family: var(--font-serif);
  font-size: var(--type-sm);
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.sc18-ausloeser-desc {
  font-size: var(--type-sm);
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
}
.sc18-aktivierung-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px 20px;
  align-items: center;
}
.sc18-deadline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-sm);
  color: var(--text-2);
  cursor: default;
}
.sc18-deadline-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: #D95C5C;
  flex-shrink: 0;
}
.sc18-deadline-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-right: 2px;
}
.sc18-deadline-val {
  color: #D95C5C;
  font-size: var(--type-sm);
}
[data-theme="light"] .sc18-deadline-val { color: #b53030; }
.sc18-owner {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-sm);
  color: var(--text-2);
}
.sc18-owner-icon {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke-width: 2.25;
  color: var(--icon-color);
  flex-shrink: 0;
}
.sc18-owner-label {
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-right: 2px;
}
.sc18-owner-val { color: var(--text); font-weight: 500; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sc18-hero              { padding: 32px 28px; }
  .sc18-komm-split        { grid-template-columns: 1fr; }
  .sc18-ausloeser-grid    { grid-template-columns: 1fr; }
  .sc18-ausloeser-primaer { border-right: none; border-bottom: 1px solid var(--border); }
  .sc18-snapshot-split    { flex-direction: column; }
  .sc18-snapshot-divider  { display: none; }
  .sc18-snapshot-before   { border-right: none; border-bottom: 1px solid var(--border-gold); }
  .sc18-kv-grid           { grid-template-columns: 1fr; }
  .sc18-kv-cell           { border-right: none; }
  .sc18-kv-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .sc18-kv-cell:last-child { border-bottom: none; }
  .sc18-ressourcen-body   { padding: 14px; }
}

/* ── SC Renderer Classes – Ersatz für JS Inline-Styles (steps.js) ─────────── */
.sc-field-label     { font-size: var(--type-base); font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.sc-field-value     { font-size: var(--type-base); color: var(--text); line-height: 1.6; }
.sc-field-titel     { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-gold); }
.sc-badge-label     { font-size: var(--type-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.sc-badge-value     { font-size: var(--type-sm); font-weight: 600; color: var(--accent); }
.sc-section-h3      { font-family: var(--font-serif); font-size: var(--type-lg); font-weight: 500; font-style: italic; color: var(--text); margin: 0; }
.sc-summary-box     { background: var(--surface-2); border: 1px solid var(--border-gold); border-radius: 8px; padding: 18px 22px; margin-bottom: 16px; }
.sc-summary-heading { font-family: var(--font-serif); font-size: var(--type-base); font-weight: 600; font-style: italic; color: var(--text); margin-bottom: 10px; }
.sc-summary-item    { font-size: var(--type-base); color: var(--text-2); padding: 2px 0; line-height: 1.6; }
.sc-grid-card       { background: var(--surface-2); border: 1px solid var(--border-gold); border-radius: 8px; padding: 24px 20px; }
.sc-inline-pair     { display: inline-flex; flex-direction: column; gap: 2px; }
.sc-raw-pre         { color: var(--text-2); font-size: var(--type-base); }
.sc-acc-intro       { font-size: var(--type-sm); color: var(--text-2); margin: 0 0 16px 0; line-height: 1.6; }
.sc-item-heading    { font-size: var(--type-base); font-weight: 600; color: var(--text-2); margin-bottom: 12px; }
.acc-chevron        { color: var(--accent); font-size: var(--type-base); transition: transform 0.2s; flex-shrink: 0; }

/* renderScValue-Klassen */
.sc-val-null  { color: var(--text-3); font-style: italic; }
.sc-val-bool  { color: var(--accent); font-weight: 700; }
.sc-val-num   { font-weight: 700; color: var(--text); }
.sc-val-str   { color: var(--text); line-height: 1.6; }
.sc-val-list  { margin: 0; padding-left: 20px; }
.sc-val-list li { color: var(--text); margin-bottom: 4px; }

/* ECharts Tooltip */
.sc-echarts-tip-title { font-weight: 600; max-width: 260px; margin-bottom: 3px; }

/* gates.js Labels */
.gate-label     { display: block; margin-bottom: 10px; font-weight: 600; font-size: var(--type-sm); }
.gate-label-sm  { display: block; margin-bottom: 8px; font-size: var(--type-sm); }
.gate-label-opt { color: var(--text-3); font-weight: 400; }

/* runs.js Summary-Navitem */
.nav-step-nr--summary     { color: var(--accent); }
.nav-step-dot--summary    { background: var(--accent); border-color: var(--accent); }
.nav-step-label--summary  { font-style: italic; color: var(--accent); }

/* ── Gate & Artifact Editor Classes – Ersatz für JS Inline-Styles (gates.js) ─ */
.chip-edited              { background: var(--yellow); color: var(--text); margin-left: 4px; }
.gate-edited-icon         { font-size: var(--type-sm); color: var(--accent); }
.gate-edited-notice       { font-size: var(--type-sm); font-weight: 500; color: var(--text); }
.gate-status-text         { font-size: var(--type-sm); color: var(--text); font-weight: 700; flex: 1; }
.artifact-editor-title    { font-size: var(--type-lg); font-weight: 900; }
.artifact-editor-hint     { font-size: var(--type-xs); color: var(--text-3); font-weight: 600; margin: 0; }
.artifact-editor-textarea { flex: 1; min-height: 400px; font-family: monospace; font-size: var(--type-sm); padding: 16px; border: var(--border-thick); background: var(--bg); resize: vertical; border-radius: var(--radius-soft); }
.artifact-editor-error    { color: #e53e3e; font-size: var(--type-sm); font-weight: 700; display: none; }

/* ── Run Classes – Ersatz für JS Inline-Styles (runs.js) ──────────────────── */
.run-empty-state  { padding: 20px 16px; color: var(--text-3); font-size: var(--type-sm); font-weight: 400; font-style: italic; }
.run-model-select { width: 100%; padding: 10px; border: var(--border-thick); background: var(--bg); font-family: 'Inter', sans-serif; font-size: var(--type-sm); font-weight: 600; }

/* ─── Schritt 5: Typ-Hierarchie Enforcement (Light Mode) ──────────────────── */

/* type-xs Labels: immer uppercase + letterspace + text-3 */
[class*="-label"][class*="sc"],
[class*="-badge-label"],
[class*="-meta"],
[class*="-caption"],
[class*="-section-label"],
[class*="-chip"] {
  letter-spacing: 0.06em;
}

/* Section-Labels (uppercase badge style) */
[class$="-label"] { font-weight: 600; }

/* Fließtext (type-base, 18px): color: var(--text) */
[class*="-desc"],
[class*="-body-text"],
[class*="-summary-text"] {
  font-size: var(--type-base);
  color: var(--text);
  line-height: 1.6;
}

/* type-sm Meta/Kontext: color: var(--text-2) */
[class*="-step-label"],
[class*="-sub"],
[class*="-hint"],
[class*="-note"] {
  color: var(--text-2);
}

/* Card-Hover Light Mode: leichte Elevation statt dunklem Schatten */
[class*="-card"]:hover:not([class*="-card-btn"]):not([class*="-chip"]) {
  border-color: var(--border-strong);
  transition: border-color var(--transition-fast);
}

/* Content-Cards: kein box-shadow im Light Mode */
[class*="-card"]:not([class*="-chip"]):not([class*=":hover"]) {
  box-shadow: none;
}

/* ─── Schritt 6: Spacing Enforcement ──────────────────────────────────────── */

/* Section-Abstand: 48px zwischen Dashb-Sections */
[class$="-section"] + [class$="-section"],
[class$="-block"] + [class$="-block"] {
  margin-top: var(--space-12);
}

/* Card-Gap in Grids: mindestens 16px */
[class*="-grid"],
[class*="-row"],
[class*="-list"] {
  gap: max(var(--space-4), 1em);
}

/* Line-Height für Fließtext global */
[class*="-text"],
[class*="-desc"],
[class*="-summary"] {
  line-height: 1.6;
}

/* Titel-Line-Height global */
[class*="-title"],
[class*="-name"],
[class*="-label"] {
  line-height: 1.4;
}

/* =============================================
   THEME: DARK NAVY
   Aktivieren: <html data-theme="dark">
   Stil: Dark Navy, Teal-Akzent
   ============================================= */

[data-theme="dark"] {

  /* === Oberflächen (Dark Navy) === */
  --bg-app:           #0B1220;
  --bg-surface:       #111B2E;
  --bg-surface-hover: #162240;
  --bg-elevated:      #1A2640;
  --bg-inset:         #0D1626;

  /* === Text === */
  --text:             #E8ECF2;
  --text-2:           #8DA2BE;
  --text-3:           #5A7194;
  --text-inverse:     #0F1A2E;

  /* === Borders === */
  --border:           #1E2D45;
  --border-subtle:    #172438;
  --border-strong:    #2A3D5A;

  /* === Teal-Akzent (heller im Dark) === */
  --accent:           #34D399;
  --accent-hover:     #6EE7B7;
  --accent-muted:     rgba(52, 211, 153, 0.08);
  --accent-text:      #34D399;
  --accent-rgb:       52, 211, 153;

  /* === Sekundär === */
  --accent-secondary: #6EE7B7;

  /* === KI-Highlight === */
  --ai-surface:       #0D1626;
  --ai-border:        #1E2D45;

  /* === Status === */
  --status-success:   #34D399;
  --status-warning:   #FBBF24;
  --status-danger:    #F87171;
  --status-info:      #60A5FA;

  --status-success-bg: rgba(52, 211, 153, 0.08);
  --status-warning-bg: rgba(251, 191, 36, 0.08);
  --status-danger-bg:  rgba(248, 113, 113, 0.08);
  --status-info-bg:    rgba(96, 165, 250, 0.08);

  /* === Sidebar (noch dunkler) === */
  --sidebar-bg:       #070D18;
  --sidebar-border:   #0B1220;
  --sidebar-text:     rgba(255, 255, 255, 0.7);
  --sidebar-text-active: #FFFFFF;
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-active: rgba(255, 255, 255, 0.1);

  /* === Schatten === */
  --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-dropdown:  0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border);
  --shadow-modal:     0 24px 64px rgba(0, 0, 0, 0.5);

  /* === Typografie === */
  --font-serif: 'Fraunces', Georgia, serif;

  /* === Compatibility Aliases === */
  --surface:     var(--bg-surface);
  --surface-2:   var(--bg-inset);
  --bg:          var(--bg-app);
  --bg-2:        var(--bg-inset);
  --border-gold: var(--border);
}

/* ── EDITORIAL: Dunkelgrüne Sidebar ──────────────────────────────────────── */

[data-theme="dark"] #sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
}

[data-theme="dark"] #sidebar .logo-text,
[data-theme="dark"] #sidebar .logo-wrap {
  color: #FFFFFF;
}

[data-theme="dark"] #sidebar .phase-label,
[data-theme="dark"] #sidebar .phase-number {
  color: var(--sidebar-text);
}

[data-theme="dark"] #sidebar .phase-progress {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] #sidebar .nav-step-label {
  color: var(--sidebar-text);
}

[data-theme="dark"] #sidebar .nav-step-item:hover {
  background: var(--sidebar-item-hover);
}
[data-theme="dark"] #sidebar .nav-step-item:hover .nav-step-label {
  color: #FFFFFF;
}

[data-theme="dark"] #sidebar .nav-step-item.active {
  background: var(--sidebar-item-active);
}
[data-theme="dark"] #sidebar .nav-step-item.active .nav-step-label {
  color: var(--sidebar-text-active);
  font-weight: 600;
}

[data-theme="dark"] #sidebar .nav-step-nr,
[data-theme="dark"] #sidebar .nav-step-opt,
[data-theme="dark"] #sidebar .phase-chevron {
  color: rgba(255, 255, 255, 0.40);
}

[data-theme="dark"] #sidebar .nav-step-dot {
  border-color: rgba(255, 255, 255, 0.30);
}
[data-theme="dark"] #sidebar .nav-step-item.active .nav-step-dot {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
[data-theme="dark"] #sidebar .nav-step-item.done .nav-step-dot {
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(255, 255, 255, 0.50);
}

[data-theme="dark"] #sidebar #new-run-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] #sidebar #new-run-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] #sidebar .sidebar-section-header {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] #sidebar .sidebar-section-header span {
  color: rgba(255, 255, 255, 0.40);
}

[data-theme="dark"] #sidebar ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] #sidebar .run-item {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] #sidebar .run-item.active {
  background: var(--sidebar-item-active);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] #sidebar .run-name {
  color: var(--sidebar-text);
}
[data-theme="dark"] #sidebar .run-item.active .run-name {
  color: #FFFFFF;
}
[data-theme="dark"] #sidebar .run-step {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] #sidebar .run-delete-btn,
[data-theme="dark"] #sidebar .run-rename-btn {
  color: rgba(255, 255, 255, 0.40);
}
[data-theme="dark"] #sidebar .run-delete-btn:hover,
[data-theme="dark"] #sidebar .run-rename-btn:hover {
  color: #FFFFFF;
}

/* Phase-Header auf dunkler Sidebar */
[data-theme="dark"] #sidebar .phase-header {
  color: var(--sidebar-text);
}
[data-theme="dark"] #sidebar .phase-header:hover {
  background: var(--sidebar-item-hover);
}
[data-theme="dark"] #sidebar .phase-header.active-phase {
  color: #FFFFFF;
}
[data-theme="dark"] #sidebar .phase-header.phase-done .phase-label {
  color: rgba(255, 255, 255, 0.60);
}

/* ── EDITORIAL: Content-Bereich ──────────────────────────────────────────── */

[data-theme="dark"] .card,
[data-theme="dark"] .bento-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

/* KI-generierte Inhalte sanft abgesetzt */
[data-theme="dark"] .sc-summary-box,
[data-theme="dark"] [class*="-hinweis"],
[data-theme="dark"] .step-intro-main {
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
}

/* Stat-Cards: Waldgrün-Zahlen */
[data-theme="dark"] [class*="-stat-val"],
[data-theme="dark"] [class*="-sig-val"],
[data-theme="dark"] [class*="-kpi-val"],
[data-theme="dark"] [class*="-hero-verdict"] {
  font-family: var(--font-serif);
  color: var(--accent-text);
}

/* Buttons: Waldgrün */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-approve,
[data-theme="dark"] .gate-approve-btn {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .gate-approve-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Sekundär-Buttons */
[data-theme="dark"] .btn-secondary {
  background: transparent;
  color: var(--accent-text);
  border: 1px solid var(--border);
}
[data-theme="dark"] .btn-secondary:hover {
  background: var(--accent-muted);
  border-color: var(--accent-secondary);
}

/* Fortschrittsbalken: Waldgrün */
[data-theme="dark"] #progress-bar-fill,
[data-theme="dark"] [class*="progress-fill"],
[data-theme="dark"] .step-bar-fill {
  background: var(--accent);
}

/* Inputs: Waldgrün Focus */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 3px rgba(19, 56, 38, 0.08);
  outline: none;
}

/* Badges: neutral */
[data-theme="dark"] [class*="-chip"],
[data-theme="dark"] .chip {
  border-color: var(--border);
}

/* Step-Frage: Serif */
[data-theme="dark"] .step-screen-question,
[data-theme="dark"] .gate-question {
  font-family: var(--font-serif);
  color: var(--text);
}

/* Page-Titles: Serif */
[data-theme="dark"] .card-title h2,
[data-theme="dark"] .ws-headline,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .confirm-title {
  font-family: var(--font-serif);
}

/* Strategie-Statements: Serif italic Waldgrün */
[data-theme="dark"] .sc4-hero-statement {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent-text);
}

/* Aktive Sidebar-Items: Waldgrün Linie */
[data-theme="dark"] .nav-step-item.active {
  border-left-color: #FFFFFF;
}

/* Section-Underline neutral */
[data-theme="dark"] .sc-field-titel {
  border-bottom-color: var(--border);
}

/* Approved-Badge: Waldgrün */
[data-theme="dark"] .chip-approved {
  background: var(--accent-muted);
  color: var(--accent-text);
  border-color: var(--accent-secondary);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(19, 56, 38, 0.15);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(19, 56, 38, 0.25);
}

/* Selections */
[data-theme="dark"] ::selection {
  background: rgba(19, 56, 38, 0.15);
  color: var(--text);
}

/* Gate-Box auf Editorial */
[data-theme="dark"] .gate-box {
  border-color: var(--border);
  background: var(--bg-surface);
}

/* Topbar auf Editorial */
[data-theme="dark"] #global-header {
  border-bottom-color: var(--border);
  background: var(--bg-surface);
}

/* Phase-done Indikator */
[data-theme="dark"] .phase-header.phase-done .phase-number {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.60);
}