/*
 * components.css — Evidence-First System
 * UI-Komponenten. Kein Layout, kein Runtime-Override.
 * Geladen nach layout.pwa.css.
 *
 * INHALTSVERZEICHNIS
 * ─────────────────────────────────────────────
 *   01  CORE UI
 *   02  FORMS & INPUTS
 *   03  NAVIGATION UI
 *   04  MODALS & OVERLAYS
 *   05  CONTENT BLOCKS
 *   06  TABLES & STRUCTURED DATA
 *   07  PAGE HEADERS & INTRO
 *   08  SUMMARY & PROGRESS
 *   09  FEATURE TOOLS
 *   10  PAGE / FEATURE COMPONENTS
 *   11  SYSTEM FEEDBACK & STATE UI
 *   12  RESERVED / LATER
 *
 * Mobile Scaling bleibt in layout.css — nicht hier.
 * Dashboard, AI, Coaching bleiben in layout.css — noch nicht migriert.
 */

/* =========================================================
   01 — CORE UI
   ========================================================= */

/* --- BUTTONS --- */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--btn-primary-height);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  padding: 0 var(--btn-primary-padding-x);
  font-size: var(--btn-primary-font-size);
  font-weight: var(--btn-primary-font-weight);
  border-radius: var(--btn-primary-radius);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 100ms ease, color 100ms ease, outline-color 100ms ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .btn-primary:hover:not(:disabled):not(.is-loading) { background: var(--btn-primary-hover-bg); }
}
.btn-primary:active:not(:disabled):not(.is-loading) { background: var(--btn-primary-pressed-bg); }
.btn-primary:focus-visible { outline: 2px solid var(--btn-primary-focus-ring); outline-offset: 3px; }
.btn-primary:disabled   { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: default; pointer-events: none; }
.btn-primary.is-loading { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: default; pointer-events: none; }

/* ── Step Forward Button ─────────────────────────────────────────────────── */
.step-forward-wrap {
  padding-top: 48px;
  padding-left: 20px;
  padding-right: 20px;
  transition: opacity 120ms ease;
}
.step-forward-wrap[data-cta="hidden"] {
  opacity: 0;
  pointer-events: none;
}
.step-forward-wrap[data-cta="visible"] {
  opacity: 1;
}

.btn-step-forward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--btn-primary-height);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: var(--btn-primary-font-size);
  font-weight: var(--btn-primary-font-weight);
  padding: 0 var(--btn-primary-padding-x);
  border-radius: var(--btn-primary-radius);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 100ms ease, color 100ms ease, outline-color 100ms ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .btn-step-forward:hover:not(:disabled) { background: var(--btn-primary-hover-bg); }
}
.btn-step-forward:active:not(:disabled) { background: var(--btn-primary-pressed-bg); }
.btn-step-forward:focus-visible { outline: 2px solid var(--btn-primary-focus-ring); outline-offset: 3px; }
.btn-step-forward:disabled      { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: default; pointer-events: none; }

/* ── Button Spinner ──────────────────────────────────────────────────────── */
.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  animation: btn-spin 0.65s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  border-radius: 0;
  font-family: inherit;
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); }

.btn-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  border-radius: 0;
  font-family: inherit;
}
.btn-nav:hover:not(:disabled) { border-color: var(--text-accent); color: var(--text-accent); }
.btn-nav:disabled { opacity: .25; cursor: not-allowed; }
.btn-nav.next {
  background: var(--surface-accent);
  border-color: var(--border-accent);
  color: var(--text-on-accent);
}
.btn-nav.next:hover:not(:disabled) { opacity: .88; }
.btn-nav svg { width: 12px; height: 12px; }

/* --- MESSAGES --- */
.msg-error {
  background: rgba(215, 58, 58, 0.07);
  border: 1px solid rgba(215, 58, 58, 0.22);
  color: var(--state-error);
  padding: 9px 13px;
  font-size: var(--fs-xs);
  margin-bottom: var(--space-3);
  display: none;
  line-height: var(--lh-normal);
}

.msg-success {
  background: var(--y-glow);
  border: 1px solid var(--border-accent);
  border-left: 3px solid var(--border-accent);
  color: var(--text-accent);
  padding: 9px 13px;
  font-size: var(--fs-xs);
  margin-bottom: var(--space-3);
  display: none;
  line-height: var(--lh-normal);
}

/* --- SECTION LABELS --- */
.section-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-7);
  margin-bottom: 0;
  padding-top: 10px;
}
/* Kein extra margin-top wenn section-label direkt nach einem anderen folgt */
.section-label + .section-label {
  margin-top: 0;
}

/* Label innerhalb einer Card */
.content-block-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* --- LOADING SCREEN --- */
#screen-loading {
  position: fixed;
  inset: 0;
  background: var(--surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.25s ease;
}
#screen-loading.fade-out {
  opacity: 0;
  pointer-events: none;
}
.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--y-glow);
  border-top-color: var(--text-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   02 — FORMS & INPUTS
   ========================================================= */

/* --- FORMS --- */
.form-group { margin-bottom: var(--space-3); }

.form-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 13px;
  outline: none;
  border-radius: var(--radius-sm);
  color: var(--t1);
  font-size: var(--fs-base);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input::placeholder { color: var(--t3); }
.form-input:focus {
  border-color: #FFC700;
  box-shadow: 0 0 0 1px rgba(255,199,0,0.3);
}

.form-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-3);
  resize: vertical;
  min-height: 96px;
  outline: none;
  border-radius: var(--radius-sm);
  color: var(--t1);
  font-size: var(--fs-base);
  font-family: inherit;
  line-height: var(--lh-relaxed);
  transition: border-color 0.15s, box-shadow 0.15s;
  caret-color: var(--text-accent);
}
.form-textarea::placeholder { color: var(--t3); }
.form-textarea:focus {
  border-color: #FFC700;
  box-shadow: 0 0 0 1px rgba(255,199,0,0.3);
}
.form-textarea:read-only { opacity: .7; cursor: default; }

/* Light mode: border needs darker value on light bg */
html:not([data-theme="dark"]) .form-input,
html:not([data-theme="dark"]) .form-textarea {
  border-color: rgba(0,0,0,0.15);
  color: var(--t1);
}
html:not([data-theme="dark"]) .form-input::placeholder,
html:not([data-theme="dark"]) .form-textarea::placeholder {
  color: var(--t3);
}
html:not([data-theme="dark"]) .form-input:focus,
html:not([data-theme="dark"]) .form-textarea:focus {
  border-color: #FFC700;
  box-shadow: 0 0 0 1px rgba(255,199,0,0.3);
}

/* Light mode: ghost contexts override — border bleibt transparent */
html:not([data-theme="dark"]) .ghost-ctx .form-input,
html:not([data-theme="dark"]) .ghost-ctx .form-textarea,
html:not([data-theme="dark"]) .ws-step .form-textarea,
html:not([data-theme="dark"]) .aus-flow .form-input,
html:not([data-theme="dark"]) .aus-flow .form-textarea {
  border-color: transparent;
}
html:not([data-theme="dark"]) .ghost-ctx .form-input:hover,
html:not([data-theme="dark"]) .ghost-ctx .form-textarea:hover,
html:not([data-theme="dark"]) .ws-step .form-textarea:hover,
html:not([data-theme="dark"]) .aus-flow .form-input:hover,
html:not([data-theme="dark"]) .aus-flow .form-textarea:hover {
  border-color: var(--ghost-border-hover);
}
html:not([data-theme="dark"]) .ghost-ctx .form-input:focus,
html:not([data-theme="dark"]) .ghost-ctx .form-textarea:focus,
html:not([data-theme="dark"]) .ws-step .form-textarea:focus,
html:not([data-theme="dark"]) .aus-flow .form-input:focus,
html:not([data-theme="dark"]) .aus-flow .form-textarea:focus {
  border-color: #FFC700;
  box-shadow: 0 0 0 1px rgba(255,199,0,0.3);
}

.form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Login-Autofill — Browser-Autofill-Styling neutralisieren */
html[data-page="login"] .form-input:-webkit-autofill,
html[data-page="login"] .form-input:-webkit-autofill:hover,
html[data-page="login"] .form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1C1C1C inset;
  -webkit-text-fill-color: #F0F0F0;
  caret-color: #F0F0F0;
}

/* ── GHOST INPUT SYSTEM ───────────────────────────────────────────────────
   Single source of truth for Ghost input behavior.
   Applied via .ghost-ctx on a parent wrapper, or via explicit page/section
   selectors listed below. Do NOT apply globally to bare input/textarea.

   Contexts:
     .ghost-ctx           — auth form, coaching form, any new screen
     .ws-step             — Tier 1 phase step page
     .aus-flow            — Ausgangslage 3-step flow
     phase_result scope   — result-textarea on result pages

   Exceptions (NOT Ghost — handled separately):
     .input-table td textarea   — yellow left-border pattern
     .share-input               — read-only URL display
     .t15-hex-text              — live color swatch compound control
     .ai-input                  — border-only variant (no bg change)
     .coaching-chat-textarea    — border-only variant (compound w/ send btn)
─────────────────────────────────────────────────────────────────────────── */

/* Base — raised surface (leicht getönte Fläche statt voll transparent).
   Dark Mode: 3% Weiß → leichter heller Schein
   Light Mode: 3% Schwarz → leichter dunkler Schein
   Beide Modes: Feld ist erkennbar, ohne dass eine Border dominiert.
   Hover und Focus ergänzen zusätzlich Border/Glow. */
.ghost-ctx .form-input,
.ghost-ctx .form-textarea,
.ws-step .form-textarea,
.aus-flow .form-input,
.aus-flow .form-textarea,
[data-page-type="phase_result"] .result-textarea {
  background:   color-mix(in srgb, var(--text-primary) 3%, transparent);
  border:       1px solid transparent;
  color:        var(--t1);
  transition:   background 0.18s, border-color 0.15s, box-shadow 0.15s;
}

/* Placeholder */
.ghost-ctx .form-input::placeholder,
.ghost-ctx .form-textarea::placeholder,
.ws-step .form-textarea::placeholder,
.aus-flow .form-input::placeholder,
.aus-flow .form-textarea::placeholder,
[data-page-type="phase_result"] .result-textarea::placeholder {
  color: var(--t4);
}

/* Hover — subtle border */
.ghost-ctx .form-input:hover,
.ghost-ctx .form-textarea:hover,
.ws-step .form-textarea:hover,
.aus-flow .form-input:hover,
.aus-flow .form-textarea:hover,
[data-page-type="phase_result"] .result-textarea:hover {
  border-color: var(--ghost-border-hover);
}

/* Focus — yellow border + solid bg */
.ghost-ctx .form-input:focus,
.ghost-ctx .form-textarea:focus,
.ws-step .form-textarea:focus,
.aus-flow .form-input:focus,
.aus-flow .form-textarea:focus,
[data-page-type="phase_result"] .result-textarea:focus {
  background:   var(--ghost-bg-focus);
  border-color: #FFC700;
  box-shadow:   0 0 0 1px var(--ghost-ring-focus);
}

.word-count { font-size: var(--fs-xs); color: var(--text-muted); margin-right: var(--space-2); }
.word-count.over { color: var(--state-error); }
.word-count.ok   { color: var(--text-muted); }

/* --- RADIO OPTIONS --- */
.radio-options { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  background: var(--surface-page);
}
.radio-option:has(input:checked) {
  border-color: var(--border-accent);
  background: var(--y-glow);
}
.radio-option input {
  margin-top: var(--space-1);
  accent-color: var(--text-accent);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.radio-option-label { font-size: var(--fs-base); color: var(--text-primary); line-height: var(--lh-normal); }

/* --- INPUT TABLE --- */
.input-table-wrap { overflow-x: auto; margin-top: var(--space-2); }


.input-table {
  width: 100%;
  border-collapse: collapse;
}
.input-table th {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  padding: 7px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.input-table td {
  border: 1px solid var(--border-subtle);
  padding: 0;
}
.input-table td textarea {
  width: 100%;
  background: var(--surface-page);
  border: none;
  border-left: 1px solid var(--border-accent);
  padding: var(--space-2) 10px;
  outline: none;
  resize: none;
  min-height: 54px;
  border-radius: var(--radius-sm);
}
.input-table td textarea:focus { background: var(--y-glow); }
.input-table td textarea:read-only { color: var(--text-muted); }

.display-table { overflow-x: auto; margin: var(--space-2) 0; }
.display-table table { width: 100%; border-collapse: collapse; }
.display-table th {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  padding: 7px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.display-table td {
  border: 1px solid var(--border-subtle);
  padding: var(--space-2) 10px;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/* --- PHASE 05 WHEEL --- */


/* --- TEXTAREA POPUP MODAL --- */

/* ── Desktop typography overrides — mobile-first architecture ── */
@media (min-width: 601px) {
  .brand-name { font-size: var(--fs-xs); }
  .auth-sub { font-size: var(--fs-xs); }
  .auth-switch { font-size: var(--fs-xs); }
  .display-table td { font-size: var(--fs-xs); }
  .callout-text { font-size: var(--fs-xs); }
  .callout-note { font-size: var(--fs-xs); }
  .callout-info p { font-size: var(--fs-xs); }
  .callout-warn p { font-size: var(--fs-xs); }
  .block-title { font-size: var(--fs-xs); }
  .item-heading { font-size: var(--fs-xs); }
  .item-body { font-size: var(--fs-xs); }
  .item-list li { font-size: var(--fs-xs); }
  .examples-list span { font-size: var(--fs-xs); }
  .concept-def { font-size: var(--fs-xs); }
  .formula-block { font-size: var(--fs-xs); }
  .radio-option-label { font-size: var(--fs-xs); }
  .step-title { font-size: var(--fs-xs); }
  .step-num { font-size: var(--fs-xs); }
  .section-steps-intro { font-size: var(--fs-xs); }
  .step-bullet-list li { font-size: var(--fs-xs); }
  .steps-rule-aside-text { font-size: var(--fs-xs); }
  .dtree-question { font-size: var(--fs-xs); }
  .settings-section-header { font-size: var(--fs-xs); }
  .settings-row-label { font-size: var(--fs-xs); }
  .settings-back-btn { font-size: var(--fs-xs); }
  .modal-title { font-size: var(--fs-sm); }
  .modal-close { font-size: var(--fs-lg); }
  .modal-body p { font-size: var(--fs-xs); }
  .export-title { font-size: var(--fs-sm); }
  .summary-card-title { font-size: var(--fs-xs); }
  .summary-field-value { font-size: var(--fs-xs); }
  .sum-progress-text strong { font-size: var(--fs-lg); }
  .sum-phase-title { font-size: var(--fs-xs); }
  .sum-next-text { font-size: var(--fs-xs); }
  .next-step-title { font-size: var(--fs-base); }
  .next-step-desc { font-size: var(--fs-xs); }
  .price-orig { font-size: var(--fs-xs); }
  .price-new { font-size: var(--fs-xl); }
  .price-locked { font-size: var(--fs-xl); }
  .phase-card-title { font-size: var(--fs-xs); }
  #toast { font-size: var(--fs-xs); }
  .nav-context-back { font-size: var(--fs-xs); }
  body { font-size: var(--fs-sm); }
  .examples-details .examples-list span { font-size: var(--fs-xs); }
  .tier-card-desc { font-size: var(--fs-xs); }
  .tier-tooltip-label { font-size: var(--fs-xs); }
  .ai-msg { font-size: var(--fs-xs); }
  .coaching-bubble { font-size: var(--fs-sm); }
}

/* =========================================================
   03 — NAVIGATION UI
   ========================================================= */

/* --- NAV CONTROLS --- */

.nav-ctrl-spacer {
  width: 136px;
  flex-shrink: 0;
}

.nav-ctrl-label {
  flex: 1;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Step Navigation — deaktiviert ──────────────────────────────────────── */
.step-nav {
  display: none;
}

/* --- AMBIENT GLOW (Accent-Schimmer oben, Dark-Mode-Signatur) --- */
.ambient-glow {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) - 80px);
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--y) calc(var(--ambient-opacity) * 100%), transparent) 0%,
    transparent 65%
  );
  filter: blur(var(--ambient-blur));
  pointer-events: none;
  z-index: 0;
}

/* --- PHASE NAV INLINE --- */
.phase-nav-inline {
  display: none;
}
@media (max-width: 600px) {
  .phase-nav-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-1) 0 2px;
    margin-top: var(--space-1);
  }
  .phase-nav-inline-count {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    color: var(--text-muted);
    min-width: 70px;
    text-align: center;
  }
  .phase-nav-arrow {
    background: none;
    border: none;
    font-size: var(--fs-lg);
    font-weight: 300;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    line-height: 1;
    font-family: inherit;
  }
  .phase-nav-arrow--hidden {
    visibility: hidden;
    pointer-events: none;
  }
}

/* --- SETTINGS NAVIGATION --- */
.settings-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-5);
  font-family: inherit;
  transition: color 0.15s;
}
.settings-back-btn:hover { color: var(--text-primary); }

.nav-context-back {
  margin: var(--space-2) 0 var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
  cursor: pointer;
  border-left: 2px solid var(--border-accent);
  background: #FFC70010;
  line-height: var(--lh-normal);
}
.nav-context-back:hover { background: #FFC70020; }

.settings-back-bottom {
  margin-top: var(--space-6);
  width: 100%;
}

/* Sidebar-Produktname (Tier 2: BUILD, Tier 1.5: VISUALIZER) */
.nav-product-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  padding: var(--space-4) var(--space-4) var(--space-1);
}

/* Sidebar-Unterbereich-Label (ÜBERSICHT, DAILY BUILD etc.) */
.nav-sub-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4) var(--space-1);
}

/* =========================================================
   04 — MODALS & OVERLAYS
   ========================================================= */

/* --- MODALS --- */
.modal-bg {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-5);
}
.modal-bg.open { display: flex; }

.modal {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-overlay);
  border-radius: var(--radius-md);
}

.modal--wide {
  max-width: 640px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.modal-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--text-primary); }
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-2xl);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
  font-family: inherit;
}
.modal-close:hover { color: var(--text-primary); }

.modal-body {
  padding: var(--space-5);
}
.modal-body p {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}
.modal-body p:last-child { margin-bottom: 0; }
.modal-body strong { color: var(--text-primary); font-weight: var(--fw-bold); }

.modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Share Input */
.share-row { display: flex; margin-top: var(--space-3); }
.share-input {
  flex: 1;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-right: none;
  color: var(--text-muted);
  padding: var(--space-2) 11px;
  font-size: var(--fs-xs);
  outline: none;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.btn-copy {
  background: var(--surface-accent);
  border: none;
  color: var(--text-on-accent);
  padding: var(--space-2) 13px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.btn-copy:hover { opacity: .88; }

/* --- LANDSCAPE BLOCK --- */
.landscape-block {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--surface-page);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
  padding: 40px var(--space-8);
}

.landscape-block-mark {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  color: var(--text-accent);
}

.landscape-block-icon {
  width: 44px;
  height: 44px;
  color: var(--text-muted);
}

.landscape-block-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #F5F5F5;
  letter-spacing: var(--ls-tight);
}

.landscape-block-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  max-width: 260px;
}

@media (max-width: 600px) and (orientation: landscape),
       (max-width: 932px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .landscape-block {
    display: flex;
  }
}

/* =========================================================
   05 — CONTENT BLOCKS
   ========================================================= */

/* --- CONTENT BLOCKS --- */
.content-block {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5) 18px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
}


.block-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}


.item-heading {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
}

.item-body {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-2);
}
.item-body p + p { margin-top: var(--space-2); }
.item-body strong { color: var(--text-primary); font-weight: var(--fw-bold); }

.item-list {
  margin: var(--space-2) 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.item-list li {
  font-size: var(--fs-base);
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
  line-height: var(--lh-relaxed);
}
.item-list li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--text-accent);
  font-size: var(--fs-xs);
  top: 2px;
}
.item-list li strong { color: var(--text-primary); }

/* Examples Block */
.examples-block {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) 14px;
  margin-bottom: var(--space-3);
}
.examples-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.examples-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.examples-list span {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  padding-left: var(--space-3);
  position: relative;
}
.examples-list span::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--text-accent);
}

/* Concept Card */
.concept-card {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: 14px var(--space-4);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
}
.concept-term {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-1);
}
.concept-def {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* Formula Block */
.formula-block {
  margin: var(--space-5) 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-accent);
}
.formula-block em {
  color: var(--text-on-accent);
  opacity: 0.75;
  font-style: normal;
  font-weight: var(--fw-regular);
}

.concept-card .formula-block {
  margin: var(--space-2) 0 var(--space-1);
}

/* --- CALLOUTS --- */
.callout {
  background: var(--y-glow);
  border: 1px solid var(--border-accent);
  border-left: 4px solid var(--border-accent);
  padding: 18px var(--space-5);
  margin: var(--space-5) 0;
  border-radius: var(--radius-md);
}
.callout-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-1);
}
.callout-text {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-relaxed);
}
.callout-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
  line-height: var(--lh-relaxed);
}

.callout-info {
  background: var(--surface-soft);
  border: 1px solid var(--border-accent);
  border-left: 4px solid var(--border-strong);
  padding: var(--space-4) 18px;
  margin: var(--space-5) 0;
  border-radius: var(--radius-md);
}
.callout-info p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.callout-warn {
  background: transparent;
  border: none;
  border-left: 2px solid var(--y);
  padding: 0 var(--space-4);
  margin: 0;
  border-radius: 0;
}
.callout-warn p {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: var(--lh-relaxed);
}

/* =========================================================
   06 — TABLES & STRUCTURED DATA
   ========================================================= */

/* --- INFO TABLE --- */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.info-table th {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: none;
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  text-align: left;
}
.info-table td {
  font-size: var(--fs-base);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px var(--space-2);
  color: var(--text-muted);
  vertical-align: top;
}
.info-table tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   07 — PAGE HEADERS & INTRO
   ========================================================= */

/* --- HERO BLOCK --- */
.hero-block {
  position: relative;
  overflow: visible;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: transparent;
  padding-top: calc(var(--safe-inset-top) + 56px + 44px);
  padding-right: 20px;
  padding-bottom: 0;
  padding-left: 20px;
  margin-left: 0;
  margin-bottom: 0;
}

[data-page-type="dashboard"] .hero-block {
  padding-top: calc(var(--safe-inset-top) + 80px);
  padding-bottom: 0;
}
.hero-block-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.hero-block-h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-hero);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  white-space: normal;
}

.hero-block-icon {
  font-size: var(--fs-xl);
  line-height: 1;
  margin-right: var(--space-2);
  vertical-align: middle;
  color: var(--text-muted);
  opacity: 0.7;
  flex-shrink: 0;
}
.hero-block-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  border: none;
  padding: 0;
  margin-left: 0;
  margin-bottom: var(--space-2);
  vertical-align: middle;
  white-space: nowrap;
  line-height: var(--lh-tight);
}
.hero-block-sub {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  margin: 0;
}

.dash-greeting {
  padding: 100px 20px 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-hero-greeting {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-accent);
}
.dash-hero-tagline {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}
.hero-block-tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.hero-block-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--surface-accent);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .hero-block-badge {
    font-size: var(--fs-2xs);
  }
}

/* --- SECTION NAV COMPLETION DOTS --- */
.sec-nav-dots .sec-nav-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}
.sec-nav-dots .sec-nav-dot--done {
  background: var(--surface-accent);
}

/* --- PHASE HEADER META-LABEL --- */
.phase-sticky-meta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-right: var(--space-2);
}

/* --- HEADER COMPONENTS --- */
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}

.brand-mark {
  background: var(--surface-accent);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  padding: var(--space-1) 7px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.brand-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.header-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.progress-track {
  width: 88px;
  height: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--surface-accent);
  transition: width 0.4s ease;
}

.progress-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 42px;
}

.header-save {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.save-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.2s;
}
.save-dot.saving  { background: var(--surface-accent); animation: pulse 0.8s infinite; }
.save-dot.saved   { background: var(--state-success); }
.save-dot.error   { background: var(--state-error); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.btn-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 5px 11px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-header svg { width: 11px; height: 11px; flex-shrink: 0; }
.btn-header:hover { border-color: var(--text-accent); color: var(--text-accent); }
.btn-header.active { border-color: var(--text-accent); color: var(--text-accent); }

.lang-toggle {
  display: flex;
  border: 1px solid var(--border-subtle);
}
.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: var(--space-1) 9px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.lang-btn.active { background: var(--surface-accent); color: var(--text-on-accent); }
.lang-btn:not(.active):hover { color: var(--text-primary); }

.btn-user {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 5px 11px;
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  max-width: 160px;
}
.btn-user svg { width: 11px; height: 11px; flex-shrink: 0; }
.btn-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-user:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* --- INTRO COMPONENTS --- */

.section-steps {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  padding: 18px var(--space-5);
  border-radius: var(--radius-md);
  margin: var(--space-5) 0;
}
.section-steps-intro {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}
.step-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-1) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.step-bullet-list li {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  padding-left: 14px;
  position: relative;
}
.step-bullet-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}
.step-bullet-list li strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.step-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.step-num {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.step-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.step-time {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.steps-rule-aside {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: 14px var(--space-4);
  margin-top: var(--space-4);
}
.steps-rule-aside-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.steps-rule-aside-text {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}

/* --- DURATION CHIPS --- */
.duration-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}
.duration-chip {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* --- GOAL CARD --- */
.goal-card {
  border-radius: var(--radius-md);
  padding: 0 var(--space-5);
  margin-bottom: 32px;
}

.goal-card-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}

.goal-card-headline {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--lh-snug);
}

.goal-card-body {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}

.goal-card-principle {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
  letter-spacing: var(--ls-wide);
  padding-top: 10px;
}

/* ── Denkmodell Card ─────────────────────────────────────────
   Rendered in context-Section intro blocks via ctx-denkmodell.
───────────────────────────────────────────────────────────── */
.ctx-denkmodell {
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-5) 20px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.ctx-denkmodell-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}

.ctx-denkmodell-formula {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.ctx-denkmodell-body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ── Context Intro (Einordnung) ──────────────────────────────
   Fließtext-Block nach Denkmodell in der context-Section.
───────────────────────────────────────────────────────────── */
.ctx-intro {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  padding: 0 var(--space-5);
  margin-bottom: 32px;
}

.ctx-intro p {
  margin-bottom: var(--space-3);
}

.ctx-intro p + p {
  margin-top: 0;
}

/* ── Phase-Intro Starke Aussage — dezenter Haltungssatz ───────────────
   Wird gerendert wenn content.starke_aussage im Intro-Block gesetzt ist.
   Satoshi Italic, gebrochener Weight, Secondary-Farbe.
──────────────────────────────────────────────────────────────────────── */
.ctx-starke-aussage {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--text-secondary);
  padding: 0 var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
}

/* ─── Page Content Wrapper ───────────────────────────────────
   Einzige Spacing-Quelle zwischen Hero und erstem Content-Element.
   Alle ersten Kind-Elemente haben margin-top: 0 / padding-top: 0.
────────────────────────────────────────────────────────────── */
.page-content-wrap {
  padding-top: 48px;
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

[data-page-type="phase_step"] .page-content-wrap,
[data-page-type="phase_result"] .page-content-wrap,
[data-page-type="phase_handout"] .page-content-wrap {
  padding-top: calc(var(--safe-inset-top) + 82px);
}

/* =========================================================
   08 — SUMMARY & PROGRESS
   ========================================================= */

/* --- SUMMARY --- */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}
@media (max-width: 700px) { .summary-grid { grid-template-columns: 1fr; } }

.summary-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  padding: 14px var(--space-4);
  border-radius: var(--radius-md);
}
.summary-card-phase {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-1);
}
.summary-card-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.summary-field { margin-bottom: var(--space-2); }
.summary-field-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.summary-field-value {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
}
.summary-field-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}

.sum-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: 0 var(--space-5);
  margin-bottom: 0;
  border-radius: var(--radius-md);
}
.sum-progress-blocks {
  display: flex;
  gap: var(--space-1);
}
.sum-prog-block {
  width: 32px;
  height: 6px;
  background: var(--border-strong);
  transition: background 0.2s;
}
.sum-prog-block.done { background: var(--surface-accent); }
.sum-progress-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.sum-progress-text strong {
  color: var(--text-primary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  margin-right: var(--space-1);
}

.sum-phase-block {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  margin-top: 32px;
  margin-bottom: 0;
  border-radius: var(--radius-md);
}
.sum-phase-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.sum-phase-num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  color: var(--text-accent);
  background: rgba(255,199,0,.08);
  border: 1px solid rgba(255,199,0,.18);
  padding: 3px var(--space-2);
  letter-spacing: var(--ls-wider);
}
.sum-phase-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  flex: 1;
}
.sum-phase-badge {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 3px var(--space-2);
}
.sum-phase-badge.done {
  background: rgba(255,199,0,.08);
  color: var(--text-accent);
  border: 1px solid rgba(255,199,0,.2);
}
.sum-phase-badge.open {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.sum-phase-body {
  padding: 14px 18px;
}
.sum-answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
}
@media (max-width: 640px) { .sum-answers-grid { grid-template-columns: 1fr; } }

.sum-next-step {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-accent);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
}
.sum-next-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-1);
}
.sum-next-text {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-relaxed);
}
.sum-prompt-block {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.sum-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.sum-prompt-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sum-prompt-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
}
.sum-prompt-text.expanded { max-height: 600px; }
.btn-copy-prompt {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: var(--space-1) 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.btn-copy-prompt:hover { border-color: var(--text-accent); color: var(--text-accent); }
.btn-copy-prompt.copied { border-color: var(--text-accent); color: var(--text-accent); }

/* --- PHASE OVERVIEW GRID --- */
.phase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: var(--space-5) 0;
}
@media (max-width: 640px) { .phase-grid { grid-template-columns: 1fr; } }

.phase-card {
  background: var(--surface-card);
  border: var(--surface-outline);
  box-shadow: var(--shadow-outline);
  padding: 20px var(--space-5);
  border-radius: var(--radius-md);
}

.phase-card-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-1);
}
.phase-card-num::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFC700;
  flex-shrink: 0;
}
.phase-card-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: 3px;
}
.phase-card-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-normal); }

/* --- READONLY BANNER --- */
#readonly-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--surface-accent);
  color: var(--text-on-accent);
  text-align: center;
  padding: 6px var(--space-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  z-index: 9999;
  display: none;
}
#readonly-banner.show { display: block; }

/* =========================================================
   09 — FEATURE TOOLS
   ========================================================= */

/* --- DECISION TREE --- */
.dtree { max-width: 580px; }
.dtree-node { display: flex; align-items: stretch; margin-bottom: var(--space-1); }
.dtree-num {
  background: var(--surface-accent);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  padding: var(--space-3) 14px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 42px;
  justify-content: center;
}
.dtree-body {
  flex: 1;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dtree-question {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  flex: 1;
  min-width: 160px;
}
.dtree-fix { white-space: nowrap; }
.dtree-fix-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-1);
}
.dtree-fix-val { font-size: var(--fs-sm); color: var(--text-primary); font-weight: var(--fw-semibold); }
.dtree-connector {
  display: flex;
  justify-content: flex-start;
  padding-left: var(--space-5);
  margin-bottom: var(--space-1);
}
.dtree-connector-line { width: 2px; height: 10px; background: var(--surface-accent); }


/* =========================================================
   10 — PAGE / FEATURE COMPONENTS
   ========================================================= */

/* --- AUTH SCREEN --- */
#screen-auth {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  background: var(--surface-page);
}

.auth-wrap { width: 100%; max-width: 360px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 36px;
}

.auth-heading {
  font-size: 26px;
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.auth-sub {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-bottom: var(--space-7);
}

.auth-lang-toggle {
  margin-left: auto;
}

.auth-rule {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-5) 0;
}

.auth-privacy {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}
.auth-privacy a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-switch {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.auth-switch a {
  color: var(--text-accent);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

/* --- PERSONA PAGE --- */
.persona-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-2) 0 var(--space-3);
}

.persona-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  box-shadow: none;
  transition: none;
  position: relative;
}
.persona-card:last-child {
  border-bottom: none;
}

.persona-card.active {
  border-bottom-color: var(--border-subtle);
  background: transparent;
}
.persona-card:last-child.active {
  border-bottom: none;
}

.persona-card-indicator {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.persona-card-content {
  flex: 1;
}

.persona-card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--ls-tight);
  margin-bottom: 4px;
  transition: color 0.15s;
}
.persona-card.active .persona-card-title {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.persona-card-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  flex: 1;
  transition: color 0.15s;
}
.persona-card.active .persona-card-body {
  color: var(--text-secondary);
}

.persona-card-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  -webkit-tap-highlight-color: transparent;
}

.persona-hint {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin: var(--space-4) 0 0;
}

.persona-step1-error {
  font-size: var(--fs-xs);
  color: var(--state-error);
  margin: var(--space-3) 20px 0;
  display: none;
}

@media (max-width: 600px) {
  .persona-cards {
    grid-template-columns: 1fr;
  }
}

/* --- MODE CARDS → ROWS --- */
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-2) 0;
}

.mode-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 20px;
  min-height: unset;
  cursor: pointer;
  box-shadow: none;
  transition: none;
}

.mode-card.active {
  background: transparent;
  border: none;
}

.mode-ctx-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  white-space: nowrap;
}
.mode-ctx-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.mode-ctx-link[data-locked="true"] { opacity: 0.35; cursor: default; }

.mode-card-indicator {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.mode-card-content {
  flex: 1;
}

.mode-card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-1);
  transition: color 0.15s;
}
.mode-card.active .mode-card-title {
  color: var(--text-primary);
}

.mode-card-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  transition: color 0.15s;
}
.mode-card.active .mode-card-body {
  color: var(--text-secondary);
}

/* --- PERSONA NAV / AUSGANGSLAGE NAV --- */
.persona-nav,
.ausgangslage-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0 var(--space-6);
  gap: var(--space-3);
}

.btn-ctx-continue,
.btn-ausgangslage-continue {
  background: var(--surface-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: 12px var(--space-5);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.btn-ctx-continue[data-locked="true"],
.btn-ausgangslage-continue[data-locked="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.ctx-cta-pair {
  display: flex;
  gap: 10px;
  margin-top: var(--space-3);
}

.ctx-cta-pair .btn-ausgangslage-continue {
  flex: 1;
}

.ctx-regen-limit {
  margin-top: var(--space-3);
}

.ctx-regen-limit p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.ctx-regen-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.btn-ausgangslage-back {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

@media (hover: hover) {
  .btn-ausgangslage-back:hover { color: var(--text-primary); }
}

/* --- AUSGANGSLAGE FORM --- */
.ausgangslage-form {
  padding-top: var(--space-4);
}

/* ── AUSGANGSLAGE CARDS ── */
.ctx-card {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: 0;
}

/* Inputs inside card: borderless by default, yellow on focus */
/* ctx-card inputs inherit base transparent style — no override needed */

/* Labels inside card */
.ctx-card .form-label {
  color: var(--text-secondary);
}

/* ── TOGGLE ── */
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.toggle-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* ── LAUNCH STATUS ── */
.ctx-launch-options {
  display: flex;
  gap: 0;
  margin-top: var(--space-1);
}

.ctx-launch-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--space-2);
  background: var(--surface-soft);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.12s;
  user-select: none;
}

.ctx-launch-option input[type="radio"] {
  display: none;
}

.ctx-launch-option.active {
  color: #FFC700;
  font-weight: var(--fw-bold);
  background: var(--surface-soft);
}

/* --- AUSGANGSLAGE CHECK CARD --- */
.ctx-check-intro {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4);
}
.ctx-ai-reason {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-3);
}
.ctx-ai-suggestions {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-3);
}
.ctx-ai-suggestions li { margin-bottom: var(--space-1); }
.ctx-confirm-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.ctx-summary-block { margin: var(--space-3) 0; }
.ctx-summary-row {
  display: flex;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.ctx-summary-row:last-child { border-bottom: none; }
.ctx-summary-label { color: var(--text-muted); flex-shrink: 0; width: 90px; }
.ctx-summary-value { color: var(--text-primary); flex: 1; }

/* --- AUSGANGSLAGE AI RESULT --- */
.form-error {
  font-size: var(--fs-xs);
  color: var(--color-error, #c0392b);
  margin-top: var(--space-1);
  min-height: 1em;
}

.ctx-ai-revision,
.ctx-ai-go {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.ctx-ai-revision {
  border-left: 3px solid var(--border-strong);
}

.ctx-ai-go {
  border-left: 3px solid var(--border-accent);
}

.ctx-ai-reason {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-3);
}

.ctx-ai-suggestions {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-4);
}

.ctx-ai-suggestions li + li {
  margin-top: var(--space-1);
}

.ctx-ai-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.ctx-ai-error {
  font-size: var(--fs-sm);
  color: var(--color-error, #c0392b);
  padding: var(--space-3) 0;
}

.ctx-summary-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.ctx-summary-row {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.ctx-summary-label {
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.ctx-summary-value {
  color: var(--text-primary);
}

.ctx-confirm-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

/* --- NEXT STEPS --- */
.next-steps-wrap {
  margin-top: 48px;
  padding-top: 0;
}
.next-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
@media (max-width: 860px) {
  .next-steps-grid {
    grid-template-columns: 1fr;
  }
}
.next-step-card {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-card);
  transition: border-color 0.15s;
  border-radius: var(--radius-md);
}
.next-step-card:hover {
  border-color: var(--border-accent);
}
.next-step-card--featured {
  border-color: var(--border-accent);
  background: var(--y-glow);
}
.next-step-card--light {
  border-color: var(--border-subtle);
  background: var(--surface-soft);
}
.next-step-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.next-step-card--featured .next-step-tag {
  color: var(--text-accent);
}
.next-step-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--lh-tight);
}
.next-step-desc {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  flex: 1;
  margin-bottom: var(--space-5);
}
.next-step-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  min-height: 28px;
}
.price-orig {
  font-size: var(--fs-base);
  color: var(--text-muted);
  text-decoration: line-through;
}
.price-new {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}
.price-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--surface-accent);
  padding: 2px 7px;
  align-self: center;
}
.next-step-btn {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 13px var(--space-5);
  background: var(--surface-accent);
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-on-accent);
  text-align: center;
  transition: opacity 0.15s;
  margin-bottom: var(--space-2);
}
.next-step-btn:hover { opacity: .85; }
.next-step-btn--ghost {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.next-step-btn--ghost:hover {
  border-color: var(--text-primary);
  opacity: 1;
}
.next-step-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.next-step-card--locked {
  border-color: var(--border-subtle);
  background: var(--surface-soft);
  opacity: 0.65;
  pointer-events: none;
  position: relative;
}
.next-step-card--locked::after {
  content: '🔒';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: var(--fs-xs);
  opacity: 0.5;
}
.next-step-tag--locked {
  color: var(--text-muted);
}
.price-locked {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--surface-page);
  text-shadow: 0 0 0 var(--text-primary);
  color: var(--text-primary);
}

.export-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 540px;
  border: 1px solid var(--border-subtle);
}
.export-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s;
}
.export-row:last-child { border-bottom: none; }
.export-row:hover { background: var(--surface-soft); }
.export-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--text-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-icon svg { width: 20px; height: 20px; }
.export-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.export-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --- SETTINGS PAGE --- */
.settings-section {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
}
.settings-section + .settings-section {
  margin-top: 12px;
}
.settings-section--logout {
  margin-top: 32px;
}
.settings-action-card + .settings-action-card {
  margin-top: 12px;
}
.settings-section-header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: var(--fs-base); color: var(--text-primary); font-weight: var(--fw-medium); }
.settings-row-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-1); }

.settings-action-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color 0.15s;
  border-radius: var(--radius-md);
}
.settings-action-card:hover { border-color: var(--border-accent); }
.settings-action-card--danger { border-color: var(--border-subtle); }
.settings-action-card--danger:hover { border-color: var(--state-error); }
.settings-action-card--danger .settings-action-label { color: var(--state-error); }
.settings-action-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.settings-action-icon svg { width: 18px; height: 18px; }
.settings-action-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); }
.settings-action-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
.settings-action-arrow { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); flex-shrink: 0; }

.toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 11px;
}
.toggle-track::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--surface-page);
  transition: transform 0.2s;
  border-radius: 50%;
}
.toggle-switch input:checked + .toggle-track { background: var(--surface-accent); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); }

/* =========================================================
   11 — SYSTEM FEEDBACK & STATE UI
   ========================================================= */

/* --- FEEDBACK / BANNERS --- */
#toast {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-accent);
  padding: 10px var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  z-index: 9999;
  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  max-width: 280px;
  border-radius: var(--radius-md);
}
#toast::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  pointer-events: none;
  z-index: -1;
}
#toast.show { transform: translateY(0); opacity: 1; }

#phase-complete-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--surface-accent);
  color: var(--text-on-accent);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px var(--space-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  z-index: 200;
  pointer-events: none;
}
#phase-complete-banner.show {
  display: flex;
}
#phase-complete-banner .pcb-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
#phase-complete-banner .pcb-sub {
  font-weight: var(--fw-medium);
  opacity: .75;
  letter-spacing: var(--ls-normal);
  text-transform: none;
  font-size: var(--fs-2xs);
  margin-left: var(--space-1);
}

#setup-banner {
  background: var(--y-glow);
  border-bottom: 1px solid var(--border-accent);
  padding: 9px 18px;
  font-size: var(--fs-sm);
  color: var(--text-accent);
  font-weight: var(--fw-medium);
  display: none;
  flex-shrink: 0;
}
#setup-banner code {
  background: var(--y-glow);
  padding: 1px 5px;
  font-family: monospace;
  font-size: var(--fs-xs);
  border: 1px solid var(--border-accent);
}

/* --- UPDATE BANNER --- */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--surface-accent);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  padding-top: calc(var(--safe-inset-top) + 10px);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  animation: update-banner-in 0.22s ease;
}

@keyframes update-banner-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.update-banner-text {
  flex: 1;
  min-width: 0;
}

.update-banner-btn {
  flex-shrink: 0;
  background: var(--text-on-accent);
  color: var(--text-accent);
  border: none;
  border-radius: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: 6px var(--space-3);
  cursor: pointer;
  white-space: nowrap;
}

.update-banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: currentColor;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0 0 0 var(--space-2);
  cursor: pointer;
  opacity: 0.7;
}

.update-banner-close:hover {
  opacity: 1;
}

/* --- ERROR FALLBACK --- */
.error-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px var(--space-6);
}

.error-fallback-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  max-width: 300px;
}

.error-fallback-mark {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  color: var(--text-accent);
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px var(--space-3);
}

.error-fallback-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}

.error-fallback-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.error-fallback-btn {
  background: var(--surface-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  margin-top: var(--space-1);
}

/* =========================================================
   12 — RESERVED / LATER
   ========================================================= */

/* --- MICRO BUTTONS (Tier 1 Workspace) --- */

.micro-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-top: 10px;
  padding-left: var(--ws-icons-padding-x);
}

.micro-row-spacer {
  flex: 1;
}

.micro-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s;
}

@media (hover: hover) {
  .micro-btn:hover {
    color: var(--text-accent);
  }
}

.micro-btn.is-saved {
  color: var(--text-accent);
}

.micro-btn-done {
  color: var(--text-faint);
  flex-shrink: 0;
}

/* --- EXAMPLE MODAL --- */

.example-modal { display: none; } /* deaktiviert — durch inline card ersetzt */

/* ── EXAMPLE INLINE CARD ─────────────────────────────────────────
   Erscheint direkt unter dem Eingabefeld — Toggle via Beispiel-Icon.
─────────────────────────────────────────────────────────────── */
.example-inline-card {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px var(--space-5);
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.example-inline-card--generating {
  border-color: var(--border-accent);
}
.example-inline-hint {
  color: var(--text-muted);
  font-style: normal;
}
.example-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.example-regen-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-0);
  transition: color 0.15s;
  font-family: inherit;
  display: inline-block;
}

.example-regen-btn:hover { color: var(--text-primary); }
.example-regen-btn:disabled { opacity: 0.4; cursor: default; }
.example-regen-btn.spinning { animation: spin 0.8s linear infinite; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.example-inline-text {
  font-size: var(--ws-example-size);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin: 0;
}

.example-block-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-1);
}



/* =========================================================
   13 — INTRO PAGE
   ========================================================= */

/* ── Layout: Flex column, Hero+Scope vertikal zentriert, Hint unten ── */
.intro-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.intro-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Hero H1 — soft line (2. Zeile in H1, grau) ── */
.hero-block-h1 .soft {
  display: block;
  color: var(--text-muted);
}

/* ── Scope row (3 Items mit Trennern) ── */
.intro-scope {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 38px;
  padding: 22px 20px 0;
  border-top: 1px solid #1C1C1C;
}
.intro-scope-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intro-scope-value {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.intro-scope-label {
  color: #6B6B6B;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.intro-scope-sep {
  width: 1px;
  height: 24px;
  background: #1C1C1C;
}

/* ── Transition hint (gelber Pfeil + grauer Text, sitzt direkt über dem CTA-Button) ── */
.intro-hint {
  padding: 0 20px;
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px);
  color: #6B6B6B;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.intro-hint-arrow {
  color: var(--text-accent);
  margin-right: 6px;
  font-weight: 900;
}


/* ── Handout Section ── */
.phase-section--handout .callout-info {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Trust Page Spacing ── */
.trust-flow    { margin-top: 32px; }
.trust-compare { margin-top: 32px; }

.trust-flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: 16px;
  margin-bottom: 24px;
  padding-left: 20px;
}

.trust-flow-node {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
}

.trust-flow-node--optional {
  opacity: 0.75;
}

.trust-flow-node-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 4px;
}

.trust-flow-node-sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.trust-flow-node-sub strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

.trust-flow-arrow {
  font-size: 18px;
  color: var(--text-faint);
  padding: 4px 0 4px 16px;
  line-height: 1;
}

.trust-flow-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 20px;
}

.trust-flow-step {
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
}

.trust-flow-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.trust-flow-text strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

@media (max-width: 600px) {
  .ctx-sec-div {
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* =========================================================
   MOBILE SCALING — Universelles ×1.3 (13px → 17px Basis)
   WICHTIG: Muss am Ende von components.css stehen —
   überschreibt Base-Font-Sizes aller Komponenten-Klassen.
   ========================================================= */

@media (max-width: 600px) {

  /* Header / Brand */

  /* Sidebar */
  .sidebar-top-label { font-size: var(--fs-2xs); }
  .nav-section-label { font-size: var(--fs-2xs); }

  /* Auth */
  .auth-heading { font-size: 34px; }

  /* Formulare — iOS-Zoom-Fix: min. 16px */

  /* Buttons */

  /* Seite */
  .section-label { font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); }
  .content-block-label { font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); }

  /* Callouts */
  .callout-label { font-size: var(--fs-2xs); }

  /* Content Blöcke */
  .examples-label { font-size: var(--fs-2xs); }

  /* Intro Komponenten */

  /* Entscheidungsbaum */
  .dtree-fix-label { font-size: var(--fs-2xs); }

  /* Dashboard / Tier Cards */
  .tier-card-badge { font-size: var(--fs-2xs); }
  .tier-card-title { font-size: 23px; }
  .tier-card-price { font-size: 23px; }

  /* Settings */

  /* Modals */

  /* Summary */
  .summary-card-phase { font-size: var(--fs-2xs); }
  .summary-field-label { font-size: var(--fs-2xs); }
  .sum-phase-badge { font-size: var(--fs-2xs); }
  .sum-next-label { font-size: var(--fs-2xs); }
  .sum-prompt-label { font-size: var(--fs-2xs); }

  /* Nächste Schritte */

  .phase-card-num { font-size: var(--fs-2xs); }

  /* Banners / Toast */

  /* AI Chat */

  /* Coaching */

  /* Readonly / Misc */
}

/* Mobile Korrekturen nach visuellem Review */

/* ── Mobile-first base rules (previously mobile-only) ── */
.card-goal-text { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin-bottom: var(--space-3); }
.card-goal-note { font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.tip-text       { font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.ai-panel-title { font-size: var(--fs-sm); }
.ai-panel-close { font-size: var(--fs-xl); }
.ai-context-bar { font-size: var(--fs-xs); }
.item-body p    { font-size: var(--fs-base); }
.info-table td  { font-size: var(--fs-base); }

@media (max-width: 600px) {
  /* Sidebar kompakter — war 14px/12px, zu groß */
  .nav-item-title { font-size: var(--fs-sm); }
  .nav-item-meta  { font-size: var(--fs-xs); }
}


.ctx-bf {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ctx-bf:last-child { border-bottom: none; padding-bottom: 0; }
.ctx-bf-term { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: 3px; }
.ctx-bf-def { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-muted); }
.ctx-bf-formula {
  margin-top: var(--space-2);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 2px solid var(--border-accent);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--text-primary); letter-spacing: var(--ls-tight);
}
.ctx-bf-formula-note {
  font-size: var(--fs-xs); font-weight: var(--fw-regular);
  color: var(--text-muted); margin-top: 3px; letter-spacing: var(--ls-normal);
}


/* ctx-mantra — entfernt, ersetzt durch Denkmodell
.ctx-mantra { … }
.ctx-mantra-inner { … }
.ctx-mantra-bar { … }
*/



/* ── CONTEXT ERRORS — Accordion ─────────────────────────────────
   Kein Card-Wrapper. Padding 20px links/rechts = Goal-Card-Linie.
   app-main gibt 16px äußeren Rand.
─────────────────────────────────────────────────────────────── */
.ctx-errors {
  background:    var(--surface-page);
  border:        var(--surface-outline);
  box-shadow:    var(--shadow-outline);
  border-radius: var(--radius-md);
  padding:       20px;
  margin:        0;
}

.ctx-error-item {
}
.ctx-error-item:last-child {
}

.ctx-error-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  cursor: pointer;
  list-style: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ctx-error-summary::-webkit-details-marker { display: none; }

.ctx-error-title {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
  flex: 1;
  padding-right: var(--space-3);
}

.ctx-error-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  transition: transform 0.2s;
}

.ctx-error-item[open] .ctx-error-chev {
  transform: rotate(90deg);
}
.ctx-error-item[open] .ctx-error-title {
  color: var(--text-primary);
}

.ctx-error-body {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  padding: 0 0 var(--space-3);
}

/* ── CONTEXT SECTION DIVIDER ────────────────────────────────────
   Linie — Label — Linie. Kein side-padding — app-main gibt 16px.
─────────────────────────────────────────────────────────────── */
.ctx-sec-div {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 32px 0;
  padding: 0;
}
.page-content-wrap > .ctx-sec-div:first-child {
  margin-top: 0;
}
.ctx-sec-div-line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.ctx-sec-div-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.65;
  white-space: nowrap;
}

/* ── WORK STEP SLOTS ──────────────────────────────────────────────── */

.ws-title {
  font-size: var(--ws-h1-size);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  padding: 0 var(--ws-h1-padding-x);
  margin-bottom: var(--space-2);
}
.ws-sub {
  font-size: var(--ws-sub-size);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  padding: 0 var(--ws-sub-padding-x);
  margin-bottom: var(--space-3);
}

/* ── Accordion Trigger (Variante A — Text-Link) ── */
.ws-accordion-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  padding-left: var(--ws-body-padding-left);
  font-family: inherit;
  cursor: pointer;
  margin-top: 24px;
  margin-bottom: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.ws-accordion-trigger svg { transition: transform 0.2s; flex-shrink: 0; }
.ws-accordion-trigger:hover { color: var(--text-primary); }
.ws-accordion-trigger.is-open { color: var(--text-primary); }
.ws-accordion-trigger:not(.is-open) { color: var(--text-muted); }
.ws-accordion-trigger.is-open svg { transform: rotate(180deg); }

.ws-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding: 0 var(--ws-body-padding-right) 0 var(--ws-body-padding-left);
  font-size: var(--ws-body-size);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  transition: max-height 0.28s ease, opacity 0.2s, margin-top 0.2s;
}
.ws-body.is-open {
  max-height: 600px;
  opacity: 1;
  color: var(--text-primary);
  margin-top: 16px;
}
.ws-body ul {
  margin-left: var(--space-5);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}
.ws-body ul li {
  padding-left: var(--space-2);
  margin-bottom: var(--space-1);
}
.ws-body p { margin-bottom: var(--space-3); }
.ws-body .ws-denkansatz { padding-left: 0; padding-right: 0; }
.ws-body .ws-hint       { padding-left: 0; padding-right: 0; }

/* ── Hint ── */
.ws-hint {
  font-size: var(--ws-hint-size);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  padding: 0 var(--ws-content-padding-x);
  margin-bottom: var(--space-3);
}

/* ── Denkansatz ── */
.ws-denkansatz {
  padding: 0 var(--ws-denkansatz-padding-x);
  margin-bottom: var(--space-3);
  font-size: var(--ws-denkansatz-size);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}

/* ── Question ── */
.ws-question {
  padding: 0 var(--ws-question-padding-x);
  margin-top: 32px;
  margin-bottom: var(--space-4);
  font-size: var(--ws-question-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

/* ── Content wrapper ── */
.ws-content { padding: 0 var(--ws-content-padding-x); }
.ws-content .item-list  { margin-bottom: var(--space-4); }
.ws-content .callout-warn { margin-bottom: var(--space-4); }

/* ── RESULT SECTION ─────────────────────────────────────────────────
   Eigenständiger Abschnitt nach dem Arbeitsbereich.
   Kein ctx-work-item Wrapper — eigene visuelle Sprache.
─────────────────────────────────────────────────────────────────── */
.phase-section--result {
}
.result-block {
  padding: 0;
}

/* Result Card — vollständige Einheit */
.result-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin: 32px 0 0;
  padding: var(--space-5);
  box-shadow: var(--shadow-result);
}

/* Reflexion — Intro innerhalb der Card */
.result-card-intro {
  margin-bottom: var(--space-5);
}
.result-card-intro p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.result-card-intro p + p {
  margin-top: 14px;
}

/* Label */
.result-card-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* KI-Boost Section — Separator + Abstand */
.ki-boost-section {
  margin-top: 32px;
  padding-top: 0;
  border-top: 1px solid var(--border-subtle);
}

/* KI Boost Zone */
.ki-boost-zone {
  min-height: 0;
}
.ki-boost-hint {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  padding: var(--space-3) 0;
}

/* KI-Boost Locked State — single block, no expand */
.ki-boost-locked {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.ki-boost-locked-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.ki-boost-locked-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
.ki-boost-missing {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* KI-Boost Active State — full width panel */
.ki-boost-active {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: block;
  width: 100%;
  box-shadow: 0 0 0 3px var(--y-glow);
}
.ki-boost-active-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.ki-boost-active-title svg {
  color: var(--text-accent);
  flex-shrink: 0;
}
.ki-boost-active-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.ki-boost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ki-boost-btn:hover { border-color: var(--border-strong); background: var(--surface-strong); }
.ki-boost-btn:disabled { opacity: 0.45; cursor: default; }
.ki-boost-output {
  margin-top: var(--space-3);
}
.ki-boost-loading {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--space-2) 0;
}
.ki-boost-result {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.ki-boost-result-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  white-space: pre-line;
}
.ki-boost-adopt {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ki-boost-adopt:hover {
  border-color: var(--text-accent);
  color: var(--text-accent);
}
.ki-boost-error {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--space-2) 0;
}

/* ── BLUEPRINT-FORTSCHRITT ───────────────────────────────────────────────────
   Erscheint nach dem Checkpoint. Zeigt Füllstand der 6 Output-Keys.
─────────────────────────────────────────────────────────────────────────── */
.bp-progress {
  margin-top: 32px;
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.bp-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border-default);
}
.bp-progress-row.bp-status--done .bp-status-dot {
  background: var(--surface-accent);
}
.bp-status-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  line-height: var(--lh-tight);
}
.bp-progress-row.bp-status--done .bp-status-label {
  color: var(--text-primary);
}

/* =========================================================
   14. TIER 1.5 — FUNNEL VISUALIZER  (.t15-*)
   Namespace: .t15-* — keine Überschneidung mit .t2-* oder anderen
========================================================= */

/* ── DASHBOARD CARD ──────────────────────────────────────── */

.t15-dashboard-card-wrap {
  margin-top: var(--space-3);
}

/* Kompaktere Add-on Karte — horizontal auf Desktop */
.t15-dashboard-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: default;
}

.t15-dashboard-card:not(.locked):hover {
  border-color: var(--border-accent);
  cursor: pointer;
}

.t15-dashboard-card.locked {
  opacity: .7;
}

.t15-dashboard-card-meta {
  flex: 1;
  min-width: 0;
}

.t15-dashboard-card-badge {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-1);
}

.t15-dashboard-card-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.t15-dashboard-card-desc {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t15-dashboard-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── AMPEL ───────────────────────────────────────────────── */

.t15-ampel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.t15-ampel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.t15-ampel--red  .t15-ampel-dot { background: #E05252; }
.t15-ampel--green .t15-ampel-dot { background: #52A052; }

/* ── NEXTSTEPS PREVIEW CARD ──────────────────────────────── */

.t15-nextsteps-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow: hidden;
}

.t15-nextsteps-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-4);
}

.t15-preview-section {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.t15-section-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.t15-headline {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
  line-height: var(--lh-tight);
}

.t15-excerpt {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

/* Blur-Stufen */
.t15-blur-soft {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
}

.t15-blur-hard {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  min-height: 48px;
}

.t15-visible {
  filter: none;
}

/* CTA-Bereich in der Preview-Card */
.t15-nextsteps-cta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.t15-nextsteps-cta p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ── BLUEPRINT SECTION CARDS (Phase 3 — Stubs) ───────────── */

.t15-section-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.t15-confidence-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  display: inline-block;
  flex-shrink: 0;
}

.t15-confidence-dot--green  { background: #52A052; }
.t15-confidence-dot--yellow { background: #E0A052; }
.t15-confidence-dot--red    { background: #E05252; }

.t15-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ── PREVIEW FRAME (Phase 4 — Stubs) ─────────────────────── */

.t15-preview-frame {
  width: 100%;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.t15-preview-frame--mobile {
  max-width: 390px;
  margin: 0 auto;
}

/* ── FUNNEL FLOW DIAGRAM (Phase 4 — Stubs) ───────────────── */

.t15-funnel-flow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  overflow-x: auto;
}

.t15-flow-step {
  flex-shrink: 0;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  text-align: center;
}

.t15-flow-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

/* ── EXPORT CARDS (Phase 5 — Stubs) ──────────────────────── */

.t15-export-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

/* ── COLOR PICKER (Phase 4 — Stubs) ──────────────────────── */

.t15-color-picker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.t15-palette-option {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
}

.t15-palette-option.active {
  border-color: var(--border-default);
}

/* ── MOBILE ───────────────────────────────────────────────── */

@media (max-width: 600px) {
  .t15-dashboard-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .t15-dashboard-card-desc {
    white-space: normal;
  }

  .t15-dashboard-card-actions {
    width: 100%;
    justify-content: space-between;
  }

  .t15-nextsteps-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── CONFIRM SCREEN ──────────────────────────────────────── */

.t15-confirm-section {
  margin-bottom: var(--space-6);
}

.t15-confirm-section-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  margin-left: 20px;
}

/* Daten-Review Zeilen */
.t15-review-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.t15-review-row:last-child {
  border-bottom: none;
}

.t15-review-key {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  min-width: 100px;
  padding-top: 10px;
  flex-shrink: 0;
}

.t15-review-input {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  min-height: 40px;
  transition: background 0.18s, border-color 0.15s, box-shadow 0.15s;
}
.t15-review-input:hover {
  border-color: var(--ghost-border-hover);
}
.t15-review-input:focus {
  outline: none;
  background:   var(--ghost-bg-focus);
  border-color: #FFC700;
  box-shadow:   0 0 0 1px var(--ghost-ring-focus);
}

/* Validation error — always wins regardless of focus state */
.t15-review-input.empty,
.t15-review-input.empty:focus {
  border-color: #E05252 !important;
  box-shadow: none !important;
  background: transparent;
}

/* Legacy-Klassen für Theme-Selektor (Phase 5 / Design).
   Werden NICHT mehr von der Funnel-Wahl-Seite verwendet — diese nutzt
   jetzt das .t15-choice-card Pattern weiter unten. Theme-Karten in Phase 5
   recyceln diese Klassen weiterhin (siehe renderDesignPage). */
.t15-funnel-selector {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.t15-funnel-btn {
  flex: 1;
  min-width: 120px;
  padding: var(--space-3) 20px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

.t15-funnel-btn:hover {
  border-color: var(--border-default);
}

.t15-funnel-btn.active {
  border-color: var(--border-accent);
  background: var(--surface-card);
}

.t15-funnel-btn-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.t15-funnel-btn-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.t15-funnel-auto-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}

@media (max-width: 600px) {
  .t15-funnel-selector {
    flex-direction: column;
  }

  .t15-funnel-btn {
    min-width: unset;
  }
}

/* ─────────────────────────────────────────────────────────────
   Funnel-Wahl + CTA-Wahl: gemeinsames Choice-Card-Pattern.
   1:1 von .persona-card (Tier 1, Persona-Pick) übernommen —
   transparente vertikale Liste, border-bottom als Trenner,
   Aktiv-State über Indicator-SVG + Title fw-bold + Body heller.
   ───────────────────────────────────────────────────────────── */
.t15-choice-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-2) 0 var(--space-3);
}

.t15-choice-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  box-shadow: none;
  transition: none;
  position: relative;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.t15-choice-card:last-child {
  border-bottom: none;
}

.t15-choice-card.active {
  border-bottom-color: var(--border-subtle);
  background: transparent;
}
.t15-choice-card:last-child.active {
  border-bottom: none;
}

.t15-choice-card-indicator {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.t15-choice-card-content {
  flex: 1;
  min-width: 0;
}

/* Optionaler Eyebrow über Title — z. B. „Vorschlag" Badge bei Suggested. */
.t15-choice-card-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 4px;
}

.t15-choice-card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--ls-tight);
  margin-bottom: 4px;
  transition: color 0.15s;
}
.t15-choice-card.active .t15-choice-card-title {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.t15-choice-card-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  flex: 1;
  transition: color 0.15s;
}
.t15-choice-card.active .t15-choice-card-body {
  color: var(--text-secondary);
}

.t15-choice-card-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  -webkit-tap-highlight-color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Section-Editor (Phase 5b) — flaches Field-Layout.
   Container hat 20px li/re Padding, sodass die Feldkante bündig
   mit der Sub-Position vom Hero-Block-Pattern liegt.
   Felder nutzen das Ghost-Input-System (über .ghost-ctx Wrapper).
   ───────────────────────────────────────────────────────────── */
.t15-section-fields {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.t15-section-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.t15-section-field-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

/* Zusatzfragen */
.t15-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: 0 20px;
}

@media (max-width: 600px) {
  .t15-extra-grid {
    grid-template-columns: 1fr;
  }
}

.t15-extra-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.t15-extra-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-secondary);
}

.t15-option-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 20px;
}

.t15-option-btn {
  padding: var(--space-1) var(--space-3);
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.t15-option-btn:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.t15-option-btn.active {
  border-color: var(--border-accent);
  color: var(--text-primary);
  background: var(--surface-card);
}

.t15-hex-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.t15-hex-preview {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--surface-soft);
}

.t15-hex-text {
  flex: 1;
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.t15-hex-text:focus {
  outline: none;
  border-color: #FFC700;
  box-shadow: 0 0 0 1px var(--ghost-ring-focus);
}

/* Generieren-Button Bereich */
.t15-confirm-footer {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.t15-confirm-footer-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.t15-confirm-footer-note.has-errors {
  color: #E05252;
}

/* ── BLUEPRINT SECTION CARDS (Phase 3 — vollständig) ─────── */

.t15-section-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.t15-section-card--loading {
  opacity: .6;
}

.t15-section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-soft);
}

.t15-section-card-label-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.t15-section-card-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Info-Button neben Section-Label auf Blueprint-Cards.
   Pattern wie .persona-card-info-btn / .t15-choice-card-info-btn —
   transparent, dezent, öffnet Modal mit Beschreibung/Zweck/Conversion-Rolle. */
.t15-section-card-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.t15-section-card-body {
  padding: var(--space-4) 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────
   Blueprint-Card (.t15-bp-card) — neues Layout im Persona-Snap-Pattern.
   Inactive: transparent, Trenner via border-bottom.
   Active:   gelber Glow + Border + Border-Radius.
   Status-Punkt grün/gelb/rot links, Toggle-Switch oder „Erforderlich"
   oben rechts, Beschreibung als Sub, „Sektion bearbeiten"-Button unten.
   ───────────────────────────────────────────────────────────── */
.t15-bp-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-3);
}

.t15-bp-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.t15-bp-card:last-child { border-bottom: none; }

.t15-bp-card.is-active {
  background: transparent;
  border: 1px solid rgba(255,199,0,0.28);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 20px;
  margin-bottom: var(--space-4);
  box-shadow:
    0 0 0 3px rgba(255,199,0,0.05),
    0 0 16px rgba(255,199,0,0.08);
}
html:not([data-theme="dark"]) .t15-bp-card.is-active {
  border-color: rgba(180,140,0,0.30);
  box-shadow:
    0 0 0 3px rgba(180,140,0,0.06),
    0 0 16px rgba(180,140,0,0.10);
}
.t15-bp-card.is-active + .t15-bp-card { border-top: none; }

.t15-bp-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Status-Punkt — Form analog Persona-Indicator (10px Kreis), Farbe via Modifier */
.t15-bp-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: opacity 0.15s;
  cursor: help;
}
.t15-bp-status--green  { background: #4ADE80; }
.t15-bp-status--yellow { background: #FFC700; }
.t15-bp-status--red    { background: #F87171; }
.t15-bp-card:not(.is-active) .t15-bp-status { opacity: 0.4; }

.t15-bp-card-title {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  transition: color 0.15s, font-size 0.15s;
}
.t15-bp-card.is-active .t15-bp-card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.t15-bp-card-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.t15-bp-card-required {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* iOS-Style Toggle-Switch.
   Aus: graue Pille mit Knubbel links.
   An:  gelbe Pille mit Knubbel rechts. */
.t15-bp-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.t15-bp-toggle::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.t15-bp-toggle.is-on {
  background: #FFC700;
  border-color: rgba(255,199,0,0.6);
}
.t15-bp-toggle.is-on::before {
  transform: translateX(16px);
  background: #111;
}

.t15-bp-card-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-2) 0 0;
  padding-left: 22px;
  transition: color 0.15s;
}
.t15-bp-card.is-active .t15-bp-card-sub {
  color: var(--text-secondary);
}

.t15-bp-card-edit-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin: var(--space-3) 0 0 22px;
  -webkit-tap-highlight-color: transparent;
}
.t15-bp-card-edit-btn:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.t15-section-card-error {
  font-size: var(--fs-sm);
  color: #E05252;
}

/* Content Rows */
.t15-content-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-3);
  align-items: baseline;
}

.t15-content-key {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  flex-shrink: 0;
}

.t15-content-val {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}

.t15-content-raw {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Regenerierung */
.t15-regen-btn {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.t15-regen-btn:hover:not(:disabled) {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.t15-regen-btn:disabled {
  opacity: .5;
  cursor: default;
}

.t15-regen-used {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* Loading Dot */
.t15-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  animation: t15-pulse 1s infinite;
}

@keyframes t15-pulse {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1; }
}

/* ─────────────────────────────────────────────
   PRE-GENERATE GUARD (Phase 7+)
   Animierte Phase-Checks vor Funnel-Generation.
   Sequentielles Erscheinen via opacity transition.
───────────────────────────────────────────── */

.t15-guard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) 0;
}

.t15-guard-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  font-size: 14px;
  line-height: 1.4;
  transition: all 300ms ease;
  opacity: 1;
}

.t15-guard-row.is-pending {
  opacity: 0.45;
}

.t15-guard-row.is-ok {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.06);
}

.t15-guard-row.is-warning {
  border-color: rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.06);
}

.t15-guard-row.is-blocked {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.06);
}

.t15-guard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
}

.t15-guard-row.is-ok .t15-guard-icon {
  color: rgb(34, 197, 94);
  border-color: rgba(34, 197, 94, 0.4);
}

.t15-guard-row.is-warning .t15-guard-icon {
  color: rgb(234, 179, 8);
  border-color: rgba(234, 179, 8, 0.4);
}

.t15-guard-row.is-blocked .t15-guard-icon {
  color: rgb(239, 68, 68);
  border-color: rgba(239, 68, 68, 0.4);
}

.t15-guard-label {
  font-weight: 500;
  color: var(--text);
}

.t15-guard-detail {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.t15-guard-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 600px) {
  .t15-guard-actions {
    flex-direction: column;
  }
  .t15-guard-actions > * {
    width: 100%;
  }
}

/* Blueprint Footer */
.t15-blueprint-footer {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-4);
}

@media (max-width: 600px) {
  .t15-content-row {
    grid-template-columns: 80px 1fr;
  }
}

/* ── PHASE 4: VIEW TOGGLE + CUSTOMIZATION + PREVIEW ─────── */

/* View Toggle (Blueprint / Vorschau) */
.t15-view-toggle {
  display: flex;
  gap: var(--space-1);
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px;
  width: fit-content;
  margin-bottom: var(--space-5);
}

.t15-view-btn {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.t15-view-btn.active {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Customization Panel */
.t15-custom-panel {
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

.t15-custom-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 140px;
}

.t15-custom-group-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Section Toggles */
.t15-section-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.t15-section-toggle-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}

.t15-section-toggle-btn.active {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.t15-section-toggle-btn.required {
  cursor: default;
  opacity: .6;
}

/* Spacing Buttons */
.t15-spacing-btns {
  display: flex;
  gap: var(--space-2);
}

.t15-spacing-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
}

.t15-spacing-btn.active {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

/* Mobile Preview Toggle */
.t15-mobile-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.t15-mobile-toggle input[type="checkbox"] {
  accent-color: var(--surface-accent);
}

/* Preview Frame */
.t15-preview-frame {
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #ffffff;
  transition: max-width 0.2s;
}

.t15-preview-frame--mobile {
  max-width: 390px;
  margin: 0 auto;
}

/* Preview LP Sections — leben im Frame, eigene Tokens */
/* Funnel Flow Diagram */
.t15-funnel-flow-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  overflow-x: auto;
}

.t15-flow-box {
  flex-shrink: 0;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  text-align: center;
  min-width: 100px;
}

.t15-flow-box-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.t15-flow-box-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}

.t15-flow-box-kpi {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.t15-flow-box--active {
  border-color: var(--border-accent);
}

.t15-flow-arrow {
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

/* ── PREVIEW LAYOUT ──────────────────────────────────────── */

.t15-preview-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: 0 var(--space-4) var(--space-6);
}

.t15-preview-controls {
  position: sticky;
  top: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.t15-preview-frame-wrap {
  min-height: 600px;
}

.t15-preview-frame {
  width: 100%;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

.t15-preview-frame--mobile {
  max-width: 390px;
  margin: 0 auto;
}

.t15-toggle-locked {
  opacity: .4;
  cursor: default;
}

/* Flow Diagram — vollständig */
.t15-funnel-flow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
  overflow-x: auto;
}

.t15-flow-step {
  flex: 1;
  min-width: 100px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  text-align: center;
}

.t15-flow-step-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.t15-flow-step-cta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}

.t15-flow-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
}


/* ── DESIGN COCKPIT TOOLBAR (.t15-design-*) ──────────────── */

.t15-design-cockpit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  align-items: flex-start;
}

.t15-design-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.t15-design-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t15-design-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.t15-design-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
  white-space: nowrap;
}

.t15-design-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.t15-design-btn.active {
  background: var(--surface-accent);
  border-color: var(--border-accent);
  color: var(--text-on-accent);
}

.t15-design-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: var(--space-2);
}

.t15-design-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}

.t15-design-swatch:hover {
  transform: scale(1.15);
}

.t15-design-swatch.active {
  border-color: var(--text-primary);
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--text-primary);
}

.t15-design-custom-color {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}



/* ── PHASE DONE BLOCK ── */
.phase-done-block {
  margin-top: var(--space-5);
}

.btn-phase-done {
  display: block;
  width: 100%;
  height: var(--btn-primary-height);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--btn-primary-font-size);
  font-weight: var(--btn-primary-font-weight);
  padding: 0 var(--btn-primary-padding-x);
  border-radius: var(--btn-primary-radius);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn-phase-done:hover  { border-color: var(--surface-accent); color: var(--text-primary); }
.btn-phase-done:active { transform: scale(0.97); }

.phase-done-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.phase-done-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Kombinierte Card: Phase-abgeschlossen + Beispiele-Vorbereitung */
.phase-done-card {
  padding: 14px 18px;
  background: transparent;
  border: 1px solid rgba(255,199,0,0.28);
  border-radius: var(--radius-lg, 12px);
  box-shadow:
    0 0 0 3px rgba(255,199,0,0.05),
    0 0 16px rgba(255,199,0,0.08);
}
html:not([data-theme="dark"]) .phase-done-card {
  border-color: rgba(180,140,0,0.30);
  box-shadow:
    0 0 0 3px rgba(180,140,0,0.06),
    0 0 16px rgba(180,140,0,0.10);
}
.phase-done-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.phase-done-prep {
  margin: 8px 0 0 30px;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* ── SNAP CARDS ── */
.snap-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-3);
}

/* ── INACTIVE SNAP — compact row ── */
.snap-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.snap-card:last-child { border-bottom: none; }

/* ── ACTIVE SNAP — elevated identity ── */
.snap-card.active {
  background: transparent;
  border: 1px solid rgba(255,199,0,0.28);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 20px;
  margin-bottom: var(--space-4);
  box-shadow:
    0 0 0 3px rgba(255,199,0,0.05),
    0 0 16px rgba(255,199,0,0.08);
}

html:not([data-theme="dark"]) .snap-card.active {
  border-color: rgba(180,140,0,0.30);
  box-shadow:
    0 0 0 3px rgba(180,140,0,0.06),
    0 0 16px rgba(180,140,0,0.10);
}

.snap-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.snap-card-indicator {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.snap-card-title {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  transition: color 0.15s;
}
.snap-card.active .snap-card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.snap-card-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.snap-card-body {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-2);
  padding-left: 28px;
  transition: color 0.15s;
}
.snap-card.active .snap-card-body {
  color: var(--text-secondary);
}

.snap-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: 28px;
}

.snap-card-version {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
}
.snap-card.active .snap-card-version {
  color: var(--text-accent);
  border-color: var(--border-accent);
}

.snap-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex: 1;
}

.snap-card-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  letter-spacing: 2px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.snap-card-menu-btn:hover { color: var(--text-primary); }

/* ── SNAP OVERFLOW MENU ── */
.snap-card-menu {
  display: none;
  flex-direction: row;
  gap: var(--space-4);
  padding: var(--space-2) 28px 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}
.snap-card-menu button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 0;
  transition: color 0.15s;
}
.snap-card-menu button:hover { color: var(--text-primary); }
.snap-card-menu button:last-child { color: var(--state-error); }
.snap-card-menu button:last-child:hover { color: var(--state-error); opacity: 0.8; }

/* Legacy — keep for any remaining references */
.snap-card-edit,
.snap-card-delete {
  display: none;
}
.snap-card-actions { display: none; }

/* ── NEW SNAP — secondary action block ── */
.btn-snap-new {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: opacity 0.15s;
  margin-top: var(--space-2);
}
.btn-snap-new:hover { opacity: 0.7; }

.btn-snap-new-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-faint);
  flex-shrink: 0;
  line-height: 1;
}

.btn-snap-new-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-snap-new-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  line-height: 1.2;
}

.btn-snap-new-sub {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.3;
}

.snap-cards-loading {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--space-2) 20px;
}

/* ── SNAP INFO MODAL ── */
.snap-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* Scrim 1:1 identisch zu browser-menu-open .app-main::after */
body.snap-info-open .app-main::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--surface-page);
  opacity: 0.8;
  z-index: 35;
  pointer-events: auto;
}

.snap-info-modal {
  background: var(--glass-bg-fallback);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

@supports (backdrop-filter: blur(1px)) {
  .snap-info-modal {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

.snap-info-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: 0;
}

/* =========================================================
   PHASE-INTRO — Sprint 1.2 Redesign
   Single-Screen: Title (via .hero-block), Chip, Scope, Output, CTA
   100% token-basiert.
   ========================================================= */
.phase-intro-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.phase-intro-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 100px;
}
.phase-intro-chip {
  /* Fixed direkt unter TopBar — 1px Abstand wegen Effekten */
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px + 48px + 1px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 29;
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  padding: var(--chip-py) var(--space-3);
  background: var(--topbar-bg);
  border: 1px solid var(--topbar-border);
  backdrop-filter: var(--topbar-blur);
  -webkit-backdrop-filter: var(--topbar-blur);
  box-shadow:
    0 8px 24px var(--topbar-shadow-outer),
    inset 0 1px 0 var(--topbar-shadow-inset-top),
    inset 0 0 0 1px var(--topbar-shadow-inset-ring);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-subtle);
  white-space: nowrap;
}
/* Dark-Mode via --topbar-* Tokens abgedeckt — kein Override nötig */

/* Chip ausblenden wenn Eingabefeld aktiv */
body:has(input:focus) .phase-intro-chip,
body:has(textarea:focus) .phase-intro-chip {
  display: none;
}
.phase-intro-chip-dot {
  width: var(--chip-dot-size);
  height: var(--chip-dot-size);
  border-radius: 50%;
  background: #FFC700;
  box-shadow: 0 0 6px rgba(255,199,0,0.25);
  flex-shrink: 0;
}
.phase-intro-meta {
  margin: var(--space-4) var(--space-5) 0;
  padding-top: 0;
  border-top: none;
}
.phase-intro-scope {
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  margin-bottom: var(--space-3);
}
.phase-intro-scope .hl {
  color: var(--text-primary);
}
.phase-intro-output {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-subtle);
  margin: 0;
  padding: 0 20px;
}
.phase-intro-output-arrow {
  color: var(--text-accent);
  font-weight: var(--fw-heavy);
  margin-right: var(--space-1);
}
.phase-intro-output .key {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

/* ════════════════════════════════════════════════════════════════════════════
   SPRINT 3 · STEP PAGE — NEW 5-TOOL PATTERN
   ─────────────────────────────────────────────────────────────────────────
   Applies to tier1_phase_step only (Q1–Q8 of each phase).
   Intro / Result / Handout pages unchanged — keep .ws-title / .ws-sub / .ws-body.

   Classes are new (.ws-q / .ws-tools / .ws-tool / .ws-layer) to avoid
   collision with old .ws-question / .micro-row / .micro-btn — those remain
   as safety net until Sprint 7 cleanup.

   All colors, spacing, radii via tokens from theme.css.
════════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────────────────
   Normal top-down flow. No vertical centering — layers expand dynamically,
   centered layout would shift the question on every layer open.

   Top clearance: delegated to .page-content-wrap override below
   (parent already provides safe-area + UCB pill offset — we override with
   the Sprint-3 step-page target of safe-area + 56 (UCB) + 80 (breathing)).
   Keeping top padding here at 0 avoids stacking with the parent.
──────────────────────────────────────────────────────────────────────────── */
.ws-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding:
    0
    0
    calc(var(--cta-clearance, 80px) + env(safe-area-inset-bottom, 0px))
    0;
}

/* Direkte Kinder bekommen 20px L/R - ausser .ws-textarea-slot
   (Insert-Card laeuft full-bleed bis app-main-Rand, 20px innen). */
.ws-step > *:not(.ws-textarea-slot) {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* Override: phase_step page wants more breathing room above the question
   than the shared phase_step/result/handout default (env + 82px).
   Targets body attribute set by applyShell() in ui.js. */
[data-page-type="phase_step"] .page-content-wrap {
  padding-top: calc(var(--safe-inset-top) + 56px + 80px);
}

/* ── Persona chip ──────────────────────────────────────────────────────────
   Visual DNA from .phase-intro-chip — same pill, smaller margins.
──────────────────────────────────────────────────────────────────────────── */
.ws-persona-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  padding: var(--chip-py) var(--space-3);
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  color: #111111;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-subtle);
  width: fit-content;
  margin: 0;
}
html[data-theme="dark"] .ws-persona-chip {
  background: #1C1C1C;
  border-color: rgba(255,255,255,0.06);
  color: #EFEFED;
}
.ws-persona-chip-dot {
  width: var(--chip-dot-size);
  height: var(--chip-dot-size);
  border-radius: 50%;
  background: #FFC700;
  box-shadow: 0 0 6px rgba(255,199,0,0.25);
  flex-shrink: 0;
}

/* ── Question (h1) — 21px / 900, with selective yellow highlights ─────────
   Markup pattern: question string may contain <span class="q-em">word</span>
   inserted by content editor. Renderer passes raw HTML without escaping.
──────────────────────────────────────────────────────────────────────────── */
.ws-q {
  margin: var(--space-2) 0 0;
  padding: 0;
  font-family: inherit;
  font-size: 21px;
  font-weight: var(--fw-heavy);        /* 900 */
  line-height: var(--lh-snug);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}
.ws-q .q-em {
  color: var(--y);
  font-weight: inherit;                 /* inherits 900 — contrast via color only */
}

/* ── Question Sub (guidance line under the question) ──────────────────────
   Pattern: "Frage sagt was, Sub sagt wie denken."
   Compact variant — NOT the shared .ws-sub from Intro/Result/Handout.
   Tokenized, tight-spaced, muted color.
──────────────────────────────────────────────────────────────────────────── */
.ws-q-sub {
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--fs-sm);             /* 14px */
  font-weight: var(--fw-regular);      /* 400 */
  line-height: var(--lh-snug);         /* 1.35 */
  letter-spacing: var(--ls-subtle);    /* -0.01em */
  color: var(--text-muted);
}

/* ── Step Eyebrow — Kategorie-Label + Step-Position ──────────────────
   Rendert wenn bl.heading gesetzt ist. Step-Nummer wird vom Renderer
   aus Block-Position in der Work-Section ermittelt.
──────────────────────────────────────────────────────────────────────── */
.ws-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: var(--space-1);
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--fw-bold);         /* 700 */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--y);
}
.ws-eyebrow-label {
  flex: 0 0 auto;
}
.ws-eyebrow-line {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--y) 25%, transparent);
}
.ws-eyebrow-num {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: var(--fw-medium);       /* 500 */
  letter-spacing: 0.12em;
}

/* ── Step Starke Aussage — dezenter Haltungssatz ──────────────────────
   Rendert wenn bl.starke_aussage gesetzt ist. Satoshi Italic,
   gebrochener Weight, Secondary-Farbe, kein Border.
──────────────────────────────────────────────────────────────────────── */
.ws-starke-aussage {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* ── Step Kontext — Hilfstext unter der Frage ────────────────────────
   Ersetzt/ergänzt ws-q-sub im neuen Schema.
   Rendert wenn bl.kontext gesetzt ist (sub bleibt als Fallback).
──────────────────────────────────────────────────────────────────────── */
.ws-kontext {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);             /* 14px */
  font-weight: var(--fw-regular);      /* 400 */
  line-height: 1.55;
  letter-spacing: var(--ls-subtle);
  color: var(--text-muted);
}

/* ── Textarea slot ────────────────────────────────────────────────────────
   .form-textarea is the existing shared textarea style — unchanged.
   Wrapper here provides predictable spacing relative to tool row below.
   Ghost behavior applied via unified .ghost-ctx rule in components.css § 02.
──────────────────────────────────────────────────────────────────────────── */

.ws-textarea-slot {
  position: relative;
}

/* Insert-Feld auf der Step-Page: full-bleed bis zum app-main-Rand,
   innen 20px L/R Padding (Text buendig mit .ws-q etc.),
   Hoehe +1 Zeile. */
.ws-textarea-slot .form-textarea {
  min-height: 120px;
  padding: var(--space-3) 20px;
}

/* Layer- und Feedback-Slots auf Content-Breite (20px L/R), nicht full-bleed.
   Erfasst .ws-layer (Beispiel/Fehler/Sanduhr) und .ws-feedback-block (AI-Feedback). */
.ws-textarea-slot .ws-layer-slot,
.ws-textarea-slot .ws-feedback-slot {
  padding-left:  var(--space-5);
  padding-right: var(--space-5);
}

/* ── Lock-State nach Strong-Bewertung (Konzept beta: gruener Tint) ──
   Erfolgs-Moment: subtiler gruener Hintergrund + Border-Tint.
   Klassen werden via JS gesetzt:
     .form-textarea.is-locked-success
   Bei Focus / Inhaltsaenderung loest sich die Klasse wieder auf. */
.ws-textarea-slot .form-textarea.is-locked-success {
  background: rgba(76, 175, 130, 0.06);
  border-color: rgba(76, 175, 130, 0.35);
  transition: background 400ms ease, border-color 400ms ease;
}
html:not([data-theme="dark"]) .ws-textarea-slot .form-textarea.is-locked-success {
  background: rgba(76, 175, 130, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .ws-textarea-slot .form-textarea.is-locked-success {
    transition: none;
  }
}

/* ── Tool row — 5 icons in two groups ─────────────────────────────────────
   Left group (status): Done · Später
   Right group (content): Beispiel · Fehler · KI
   Spacer between groups.
──────────────────────────────────────────────────────────────────────────── */
.ws-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  margin-top: var(--space-2);
}
.ws-tools-spacer {
  flex: 1;
}

/* Tool-Row im Textarea-Slot: 20px L/R Padding (Icons buendig mit
   ws-q / ws-kontext und Text-Inhalt im Insert-Feld). */
.ws-textarea-slot .ws-tools {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.ws-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  font-family: inherit;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.ws-tool svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (hover: hover) {
  .ws-tool:hover {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
}
.ws-tool:focus-visible {
  box-shadow: 0 0 0 2px var(--y-border);
}
.ws-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Done (filled, active) — yellow icon, no size change, no circle */
.ws-tool--done.is-active {
  color: var(--y);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (hover: hover) {
  .ws-tool--done.is-active:hover {
    color: var(--y);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
}

/* Später (outline, active) — yellow color only, no circle/bg */
.ws-tool--later.is-active {
  color: var(--y);
  background: transparent;
  border-color: transparent;
}
@media (hover: hover) {
  .ws-tool--later.is-active:hover {
    color: var(--y);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
}

/* Layer-opening buttons (Beispiel / Fehler) when their layer is open */
.ws-tool--layer.is-open {
  color: var(--y);
  background: transparent;
  border-color: transparent;
}
@media (hover: hover) {
  .ws-tool--layer.is-open:hover {
    color: var(--y);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
}

/* ── Layer slot & inline layer card ───────────────────────────────────────
   Inline under textarea+tool-row. Expands in place, pushes forward-CTA area
   down via scroll. Only one layer open at a time (enforced in JS).
──────────────────────────────────────────────────────────────────────────── */
.ws-layer-slot {
  margin: 0;
}
.ws-layer-slot:empty {
  display: none;
}
.ws-layer-slot:not(:empty) {
  margin-top: 12px;
}

/* ── WS LAYER — Neutral card, token-only values ────────────────────────
   Used for Beispiel and Typische Fehler layers below the textarea.
   All visual values via --layer-* tokens from theme.css.
   Animation: opacity + translateY (no slide, no scale).
──────────────────────────────────────────────────────────────────────── */
.ws-layer {
  position: relative;
  background: var(--layer-bg);
  border: 1px solid var(--layer-border);
  border-radius: var(--radius-md);
  box-shadow: var(--layer-shadow);
  padding: 14px 40px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Entry animation */
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ws-layer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sub-section inside a layer — label + text */
.ws-layer-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-layer-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.18em;
  color: var(--layer-eyebrow);
  text-transform: uppercase;
  margin: 0;
}
.ws-layer-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--layer-text-primary);
  margin: 0;
  white-space: pre-wrap;
}

/* Close button (top-right, 10x10 icon) */
.ws-layer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: color 0.15s;
}
.ws-layer-close svg {
  width: 10px;
  height: 10px;
  display: block;
}
@media (hover: hover) {
  .ws-layer-close:hover {
    color: var(--text-muted);
  }
}
.ws-layer-close:focus-visible {
  box-shadow: 0 0 0 2px var(--layer-border);
  border-radius: 4px;
}

/* Placeholder states */
.ws-layer--generating .ws-layer-text,
.ws-layer--empty .ws-layer-text {
  color: var(--layer-text-secondary);
  font-style: normal;
}

/* Regen button inside Beispiel layer sub-section (if used later) */
.ws-layer-regen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 6px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.15s, transform 0.4s;
}
.ws-layer-regen:hover { color: var(--text-muted); }
.ws-layer-regen.is-spinning {
  animation: ws-layer-regen-spin 0.8s linear infinite;
}
@keyframes ws-layer-regen-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Row wrapper when label + regen button are on the same line */
.ws-layer-section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

/* ─────────────────────────────────────────────
   Phase D.6 — ws-layer State-Styling
   Additiv zu den vorhandenen --generating / --empty Regeln.
   Keine Override der Ready-State-Darstellung.
───────────────────────────────────────────── */

/* Sanduhr-Indikator für generating-State */
.ws-layer--generating .ws-layer-text::before {
  content: "⏳";
  display: inline-block;
  margin-right: 8px;
  animation: ws-layer-hourglass 1.6s ease-in-out infinite;
  transform-origin: center;
  vertical-align: -1px;
}
@keyframes ws-layer-hourglass {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(0deg); }
  55%  { transform: rotate(180deg); }
  100% { transform: rotate(180deg); }
}

/* out-of-scope: gedämpft, nicht-fehlgeschlagen-Optik */
.ws-layer--out-of-scope .ws-layer-text {
  color: var(--layer-text-secondary);
  opacity: 0.75;
  font-style: normal;
}
.ws-layer--out-of-scope .ws-layer-text::before {
  content: "🔒";
  display: inline-block;
  margin-right: 8px;
  opacity: 0.7;
  vertical-align: -1px;
}

/* failed: subtiler Akzent, Retry-Button sichtbar */
.ws-layer--failed .ws-layer-text {
  color: var(--layer-text-primary);
  font-style: normal;
}
.ws-layer--failed .ws-layer-text::before {
  content: "⚠";
  display: inline-block;
  margin-right: 8px;
  color: var(--layer-eyebrow);
  vertical-align: -1px;
}

/* Retry-Button innerhalb des failed-Layers */
.ws-layer-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--text-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.15s, transform 0.1s;
}
.ws-layer-retry:hover  { opacity: 0.9; }
.ws-layer-retry:active { transform: translateY(1px); }
.ws-layer-retry:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════
   AUSGANGSLAGE 3-STEP FLOW
   ═══════════════════════════════════════════════════ */

/* Linear field flow — no card wrapper */
.aus-flow .aus-field-group {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 0 20px;
}

.aus-flow .aus-field-group + .aus-field-group {
  margin-top: 72px;
}

/* ── Override default form-group margin inside aus-flow */
.aus-flow .form-group {
  margin-bottom: 0;
}

/* Ghost behavior for aus-flow inputs applied via unified rule in § 02 */

/* Optional group — muted label */
.aus-field-group--optional .form-label,
.aus-field-group--optional .form-group > div.form-label {
  opacity: 0.55;
}

/* Check / loading screen */
.aus-check-state {
  padding: 48px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.aus-check-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-default);
  border-top-color: var(--text-accent);
  border-radius: 50%;
  animation: aus-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes aus-spin {
  to { transform: rotate(360deg); }
}

.aus-check-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.aus-check-revision {
  text-align: left;
  margin-top: var(--space-4);
}

/* Summary block in aus-flow */
.aus-summary-block {
  padding: 0 20px;
}

/* Secondary action (edit link) below summary */
.aus-secondary-action {
  display: block;
  margin: 24px 20px 0;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aus-secondary-action:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   WS FEEDBACK SLOT + BLOCK
   AI Feedback Loop — Tier-1 Worksteps
   Separates Feature. Kein Eingriff in ws-layer-slot.
   ═══════════════════════════════════════════════════════════════ */

/* Slot — container, wie ws-layer-slot */
.ws-feedback-slot {
  margin: 0;
}
.ws-feedback-slot:empty {
  display: none;
}
.ws-feedback-slot:not(:empty) {
  margin-top: 10px;
}

/* Block — Card, gleiche Token wie ws-layer */
.ws-feedback-block {
  position: relative;
  background: var(--layer-bg);
  border: 1px solid var(--layer-border);
  border-radius: var(--radius-md);
  box-shadow: var(--layer-shadow);
  padding: 14px 40px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Status-Streifen links */
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--border-subtle);
  /* Entry animation */
  opacity: 0;
  transform: translateY(-4px);
  animation: ws-feedback-in 0.18s ease forwards;
}

@keyframes ws-feedback-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-feedback-block { animation: none; opacity: 1; transform: none; }
}

/* Status-Varianten — linker Streifen */
.ws-feedback-block--weak      { border-left-color: #E05252; }
.ws-feedback-block--workable  { border-left-color: var(--y, #FFC700); }
.ws-feedback-block--strong    { border-left-color: #4CAF82; }

/* Status-Badge oben im Block */
.ws-feedback-status {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid currentColor;
  width: fit-content;
}
.ws-feedback-status--weak     { color: #E05252; }
.ws-feedback-status--workable { color: var(--y, #FFC700); }
.ws-feedback-status--strong   { color: #4CAF82; }

/* Schließen-Button */
.ws-feedback-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity 0.15s;
  font-family: inherit;
}
.ws-feedback-close:hover { opacity: 1; }
.ws-feedback-close svg   { width: 14px; height: 14px; display: block; }

/* Sections */
.ws-feedback-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Label */
.ws-feedback-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Text */
.ws-feedback-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  margin: 0;
}

/* Loading state */
.ws-feedback-loading {
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--layer-bg);
  border: 1px solid var(--layer-border);
  border-radius: var(--radius-md);
  animation: ws-feedback-in 0.18s ease forwards;
  opacity: 0;
}

/* Error state */
.ws-feedback-error {
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: #E05252;
  background: var(--layer-bg);
  border: 1px solid var(--layer-border);
  border-radius: var(--radius-md);
  animation: ws-feedback-in 0.18s ease forwards;
  opacity: 0;
}

/* AI Button — disabled state */
.ws-tool--ai:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Gate-Flow — AI-Icon (Farbe + Radar-Puls)

   Das ✨-Icon ist der Gate-Trigger. Visuell NICHT als Ring oder Button
   markiert — nur leicht gelb getönt (gegenüber den grauen Info-Icons).

   Zwei Zustände signalisieren Aktivität über einen subtilen Radar-Ping:
   das Icon selbst bleibt stabil sichtbar, aus dem Rand expandiert ein
   gelber Ring nach außen und verblasst. Langsam (2s), dezent.

     .is-pending  → Antwort steht, Textarea nicht fokussiert, nicht geprüft
                    (ruhiger Nudge "ich bin bereit, klick mich")
     .is-checking → API-Call läuft
                    (gleicher Radar — identisches Gefühl "aktiv")

   Beim Fokus auf Textarea wird .is-pending entfernt (kein Blinken während
   Tippen). Nach erfolgreicher Bewertung übernimmt der Badge die Signal-Rolle.
───────────────────────────────────────────── */
.ws-tool--ai:not(:disabled) {
  color: var(--y, #FFC700);
}
@media (hover: hover) {
  .ws-tool--ai:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
}

/* Radar-Ring — startet als Punkt in der Icon-Mitte,
   wächst bis zur Button-Größe, verblasst dabei.
   Die 70%-zu-100%-Ruhepause gibt Atempause zwischen den Pings. */
.ws-tool--ai.is-pending::before,
.ws-tool--ai.is-checking::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-left: -18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 199, 0, 0.75);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  animation: ws-ai-radar 2s ease-out infinite;
}
@keyframes ws-ai-radar {
  0%   { transform: scale(0);   opacity: 0.75; }
  70%  { transform: scale(1);   opacity: 0;    }
  100% { transform: scale(1);   opacity: 0;    }
}

.ws-tool--ai.is-checking {
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Gate-Flow — AI-Icon-Badge (Status nach letztem Check)

   Kleiner farbiger Punkt am AI-Button (unten rechts).
   Zeigt den letzten Bewertungsstatus, verschwindet bei
   Fingerprint-Mismatch (Antwort wurde geändert).
───────────────────────────────────────────── */
.ws-tool--ai {
  position: relative;
}
.ws-tool--ai.has-feedback-strong::after,
.ws-tool--ai.has-feedback-workable::after,
.ws-tool--ai.has-feedback-weak::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--layer-bg, #FFFFFF);
  pointer-events: none;
}
.ws-tool--ai.has-feedback-strong::after   { background: #4CAF82; }
.ws-tool--ai.has-feedback-workable::after { background: var(--y, #FFC700); }
.ws-tool--ai.has-feedback-weak::after     { background: #E05252; }

/* ─────────────────────────────────────────────
   Gate-Flow — Action-Button "Weiter"

   Der Forward-Button ist im Work-Step initial hidden.
   Er erscheint erst wenn strong/workable geprüft wurde,
   mit sanftem Fade-In damit es nicht abrupt wirkt.
───────────────────────────────────────────── */
#btn-step-forward-fixed.is-hidden {
  display: none !important;
}

/* Einblendung beim Erscheinen (wenn die is-hidden-Klasse entfernt wird) */
#btn-step-forward-fixed:not(.is-hidden) {
  animation: forward-btn-fade-in 0.25s ease-out;
}
@keyframes forward-btn-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   Slide-Navigation zwischen Work-Steps (Batch 3)

   Der User klickt "Weiter" → Layer faden aus → Content slidet nach
   links raus → navigate() ersetzt den Content → neuer Content slidet
   von rechts rein. TopBar und Action-Button bleiben verankert
   (position: fixed, unabhängig vom #phase-content-Transform).

   iOS-Workaround: translateZ(0) erzwingt GPU-Layer und stabilisiert
   fixed elements gegen Flicker während des Slide.
───────────────────────────────────────────── */
#phase-content.phase-sliding-out {
  transform: translateX(-100%) translateZ(0);
  transition: transform 0.4s ease-out;
  will-change: transform;
}

#phase-content.phase-sliding-in {
  transform: translateX(100%) translateZ(0);
  transition: none;
  will-change: transform;
}

#phase-content.phase-sliding-in.phase-slide-active {
  transform: translateX(0) translateZ(0);
  transition: transform 0.4s ease-out;
}

/* Overflow-Schutz gegen horizontalen Scroll während des Slides.
   Das #phase-content kann sonst kurzzeitig den Layout breiter machen. */
body {
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────
   Daumen-Bestätigung (Batch: Daumen-only)

   Zentral fixiertes Element, zwischen Slide-Out und Navigate eingeblendet.
   Farbe über Status-Klasse: grün bei strong, gelb bei workable.
   Leichter cubic-bezier-Overshoot gibt einen dezenten "Pop" beim Erscheinen.
───────────────────────────────────────────── */
.slide-confirmation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 200;
  pointer-events: none;
  color: var(--y);
  transition:
    opacity 0.2s ease-out,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-confirmation svg {
  width: 96px;
  height: 96px;
  display: block;
  filter: drop-shadow(0 6px 20px color-mix(in srgb, currentColor 60%, transparent))
          drop-shadow(0 0 6px color-mix(in srgb, currentColor 40%, transparent));
}

.slide-confirmation.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.slide-confirmation--strong   { color: #22C55E; }
.slide-confirmation--workable { color: var(--y); }

.slide-confirmation.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.slide-confirmation--strong   { color: #22C55E; }
.slide-confirmation--workable { color: var(--y); }

/* ─────────────────────────────────────────────
   PHASE SYNTHESIS — Test-Output auf Handout-Page
   2-3 Saetze KI-generiert aus Snap + Phase-Outcomes
───────────────────────────────────────────── */
.phase-synthesis {
  margin: 24px 0;
  padding: 18px 20px;
  background: transparent;
  border: 1px solid rgba(255,199,0,0.28);
  border-radius: var(--radius-lg, 12px);
  box-shadow:
    0 0 0 3px rgba(255,199,0,0.05),
    0 0 16px rgba(255,199,0,0.08);
}
html:not([data-theme="dark"]) .phase-synthesis {
  border-color: rgba(180,140,0,0.30);
  box-shadow:
    0 0 0 3px rgba(180,140,0,0.06),
    0 0 16px rgba(180,140,0,0.10);
}

.phase-synthesis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.phase-synthesis-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.18em;
  color: var(--text-accent);
  text-transform: uppercase;
}
.phase-synthesis-regen {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.phase-synthesis-regen:hover {
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
}
html:not([data-theme="dark"]) .phase-synthesis-regen:hover {
  background: rgba(0,0,0,0.04);
}

.phase-synthesis-body {
  min-height: 24px;
}
.phase-synthesis-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  margin: 0;
  white-space: pre-wrap;
}
.phase-synthesis-loading {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}
.phase-synthesis-error {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ─────────────────────────────────────────────
   PHASE 02 SYNTHESIS — Offer + Match Blocks
   Erweiterung der phase-synthesis Card fuer P02:
   Synthesis bleibt oben, dann Offer-Block (mit Copy),
   dann Match-Block mit Score-Badge + Bullets.
───────────────────────────────────────────── */

/* Offer-Block */
.phase-offer-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,199,0,0.20);
}
html:not([data-theme="dark"]) .phase-offer-block {
  border-top-color: rgba(180,140,0,0.22);
}

.phase-offer-text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  margin: 8px 0 0 0;
}

.phase-offer-copy {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.phase-offer-copy:hover {
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
}
html:not([data-theme="dark"]) .phase-offer-copy:hover {
  background: rgba(0,0,0,0.04);
}
.phase-offer-copy.is-copied {
  color: #4CAF82;
}

/* Match-Block */
.phase-match-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,199,0,0.20);
}
html:not([data-theme="dark"]) .phase-match-block {
  border-top-color: rgba(180,140,0,0.22);
}

.phase-match-score {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.phase-match-score.score-stark {
  color: #4CAF82;
  border-color: rgba(76,175,130,0.40);
  background: rgba(76,175,130,0.08);
}
.phase-match-score.score-passt {
  color: var(--text-accent);
  border-color: rgba(255,199,0,0.40);
  background: rgba(255,199,0,0.08);
}
.phase-match-score.score-luecke {
  color: #E8A33B;
  border-color: rgba(232,163,59,0.40);
  background: rgba(232,163,59,0.10);
}
.phase-match-score.score-bruch {
  color: #E5615A;
  border-color: rgba(229,97,90,0.40);
  background: rgba(229,97,90,0.10);
}

.phase-match-reason {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin: 8px 0 14px 0;
}

.phase-match-section {
  margin-top: 10px;
}
.phase-match-section-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.phase-match-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.phase-match-list li {
  position: relative;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  padding: 3px 0 3px 16px;
}
.phase-match-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}
.phase-match-list--passt li::before {
  background: #4CAF82;
}
.phase-match-list--luecke li::before {
  background: #E8A33B;
}

/* ─────────────────────────────────────────────
   PHASE 03 SYNTHESIS — Format-Bloecke
   Drei Format-Cards (Reel | Carousel | Static),
   jede mit Hook-Type-Badge + Copy + Channel-Meta.
   Visuell unterschiedlich durch Inhalt-Layout.
───────────────────────────────────────────── */

/* Generische Format-Block-Hülle (analog phase-offer-block) */
.phase-format-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,199,0,0.20);
}
html:not([data-theme="dark"]) .phase-format-block {
  border-top-color: rgba(180,140,0,0.22);
}

/* Hook-Type-Badge */
.phase-format-hook-badge {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  margin-left: 8px;
}
.phase-format-hook-badge.hook-widerspruch {
  color: #E5615A;
  border-color: rgba(229,97,90,0.40);
  background: rgba(229,97,90,0.08);
}
.phase-format-hook-badge.hook-fehler {
  color: #E8A33B;
  border-color: rgba(232,163,59,0.40);
  background: rgba(232,163,59,0.08);
}
.phase-format-hook-badge.hook-proof {
  color: #4CAF82;
  border-color: rgba(76,175,130,0.40);
  background: rgba(76,175,130,0.08);
}

/* Reel: Skript als 3-Moment-Liste */
.phase-format-script {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase-format-script-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,199,0,0.30);
  border-radius: 0 6px 6px 0;
}
html:not([data-theme="dark"]) .phase-format-script-row {
  background: rgba(0,0,0,0.025);
  border-left-color: rgba(180,140,0,0.30);
}
.phase-format-script-moment {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.phase-format-script-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

/* Carousel: nummerierte Slide-Liste */
.phase-format-slides {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phase-format-slide-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
html:not([data-theme="dark"]) .phase-format-slide-row {
  border-bottom-color: rgba(0,0,0,0.05);
}
.phase-format-slide-row:last-child {
  border-bottom: none;
}
.phase-format-slide-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  color: var(--text-accent);
  border: 1px solid rgba(255,199,0,0.30);
  border-radius: 50%;
}
html:not([data-theme="dark"]) .phase-format-slide-num {
  border-color: rgba(180,140,0,0.30);
}
.phase-format-slide-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  padding-top: 2px;
}

/* Static: Caption-Box */
.phase-format-caption {
  margin: 10px 0 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  white-space: pre-line;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,199,0,0.30);
  border-radius: 0 6px 6px 0;
}
html:not([data-theme="dark"]) .phase-format-caption {
  background: rgba(0,0,0,0.025);
  border-left-color: rgba(180,140,0,0.30);
}

/* Meta-Zeilen (Channel, Image-Hint) */
.phase-format-meta {
  margin-top: 8px;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
.phase-format-meta-label {
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  margin-right: 4px;
}

/* Konsistenz-Score-Farben (analog match-score, eigene Klassen) */
.phase-match-score.cscore-konsistent {
  color: #4CAF82;
  border-color: rgba(76,175,130,0.40);
  background: rgba(76,175,130,0.08);
}
.phase-match-score.cscore-verschoben {
  color: #E8A33B;
  border-color: rgba(232,163,59,0.40);
  background: rgba(232,163,59,0.10);
}
.phase-match-score.cscore-bruch {
  color: #E5615A;
  border-color: rgba(229,97,90,0.40);
  background: rgba(229,97,90,0.10);
}