/* Evidence Locker — Phase 2-Bxy Hotfix1 H1 (read-only Vollformat).
 *
 * Layout: Hero (Navy + Gold) + Stepper + 2-Spalten-Grid (Chain links 2/3,
 * Right-Rail rechts 1/3).
 * Foundation: tokens.css + fip-components.css.
 *
 * AP 11 (Tokens-only): keine Hex-Codes.
 * AP 9 (Position-Asserts): Stepper sichtbar, Chain stretchbar.
 *
 * Naming-Hygiene: keine Pilot-/ERP-Eigennamen.
 */

.evidence-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
}

.evidence-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--slate);
  font-family: var(--font-sans);
}

.evidence-breadcrumb a {
  color: var(--gold);
  text-decoration: none;
}

.evidence-breadcrumb a:hover { text-decoration: underline; }

.evidence-breadcrumb-sep { color: var(--light-slate); }

.evidence-breadcrumb-current {
  font-family: var(--font-mono);
  color: var(--ink);
}

/* ============================================================================
   Hero
   ============================================================================ */

.evidence-hero {
  background: var(--navy);
  color: var(--card);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.evidence-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 160px;
  background: linear-gradient(135deg, transparent 0%, rgba(184, 136, 74, 0.18) 100%);
  pointer-events: none;
}

.evidence-hero-id-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.evidence-hero-id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 600;
}

.evidence-hero-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.2;
  color: var(--card);
}

.evidence-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: 14px;
}

.evidence-hero-vendor {
  color: var(--card);
  font-weight: 500;
}

.evidence-hero-pill {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.evidence-hero-volume {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold);
  font-size: 18px;
}

/* ============================================================================
   Stepper
   ============================================================================ */

.evidence-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.evidence-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  min-width: 120px;
}

.evidence-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--border);
  color: var(--light-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.evidence-step--done .evidence-step-circle {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--card);
}

.evidence-step--current .evidence-step-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--card);
}

.evidence-step-label {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

.evidence-step--current .evidence-step-label {
  color: var(--ink);
}

.evidence-step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 24px;
  margin: 0 var(--space-1);
  margin-bottom: 18px; /* align with circle center */
}

.evidence-step-connector--done { background: var(--sage); }

/* ============================================================================
   2-Spalten-Grid
   ============================================================================ */

.evidence-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.evidence-chain {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.evidence-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-4);
}

/* ============================================================================
   Chain-Layers
   ============================================================================ */

.evidence-layer {
  padding: var(--space-4) var(--space-5);
}

.evidence-layer-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--paper-line);
}

.evidence-layer-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

.evidence-layer-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.evidence-layer-sub {
  font-size: 11px;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: auto;
}

/* === Schicht 1 ERP-Grid === */

.evidence-erp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.evidence-erp-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.evidence-erp-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.evidence-erp-value {
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0;
}

.evidence-erp-description {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--paper-line);
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.evidence-vertrag-quote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--gold);
  background: var(--off-white);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  font-size: 0.94rem;
}

.evidence-empty {
  font-size: 0.82rem;
  color: var(--light-slate);
  font-style: italic;
  margin: 0;
}

.evidence-upload-placeholder {
  padding: var(--space-4);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--off-white);
  text-align: center;
}

.evidence-decision-note {
  padding: var(--space-3) var(--space-4);
  background: var(--off-white);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--ink);
  white-space: pre-wrap;
}

.evidence-beleg-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.evidence-beleg-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--paper-line);
  font-size: 0.86rem;
}

.evidence-beleg-item:last-child { border-bottom: none; }

/* ============================================================================
   Right-Rail
   ============================================================================ */

.evidence-rail-card {
  padding: var(--space-4);
}

.evidence-rail-card--muted {
  opacity: 0.75;
}

.evidence-rail-grid {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.evidence-rail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 0.84rem;
}

.evidence-rail-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}

.evidence-rail-value {
  color: var(--ink);
  font-weight: 500;
  margin: 0;
  text-align: right;
}

.evidence-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
}

.evidence-history-item {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  align-items: baseline;
}

.evidence-history-when {
  font-family: var(--font-mono);
  color: var(--slate);
  width: 70px;
  flex-shrink: 0;
}

.evidence-history-who {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  width: 32px;
  flex-shrink: 0;
}

.evidence-history-action {
  color: var(--ink);
  flex: 1;
}

/* ============================================================================
   Footer
   ============================================================================ */

.evidence-foot {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--space-3);
}

/* === Responsive === */

@media (max-width: 1100px) {
  .evidence-grid {
    grid-template-columns: 1fr;
  }
  .evidence-rail {
    position: static;
  }
  .evidence-erp-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   2-Bxy Hotfix2 H6: AI-Layer 1+2+3 Styles
   ============================================================================ */

/* Layer-Container variations (L1 explain, L2 recommend) */
.fip-ai-layer {
  border-left: 3px solid var(--gold);
}

.fip-ai-layer--explain {
  background: linear-gradient(180deg, var(--card) 0%, var(--off-white) 100%);
}

.fip-ai-layer--recommend {
  background: linear-gradient(180deg, var(--card) 0%, rgba(184, 136, 74, 0.04) 100%);
}

/* Disclaimer-Badge */
.fip-ai-disclaimer {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--gold);
  color: var(--card);
  text-transform: uppercase;
  cursor: help;
}

/* Phase 2-D Block F: Reviewer-Pending-Variant fuer L4 Confidence-Breakdown.
   Deterministische Werte (Engine-Wahrheit) sollten optisch DIFFERENZIERT
   von LLM-Suggestions sein — Customer sieht sofort: "Engine + LLM jetzt,
   Reviewer kommt spaeter". */
.fip-ai-disclaimer--pending {
  background: var(--off-white);
  color: var(--slate);
  border: 1px solid var(--border);
}

.fip-ai-fallback-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  background: var(--off-white);
  color: var(--slate);
  border: 1px solid var(--border);
  margin-left: var(--space-1);
}

/* L1 Narrative */
.fip-ai-narrative {
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.5;
  margin: var(--space-2) 0 var(--space-3) 0;
}

.fip-ai-engine-details {
  margin-top: var(--space-3);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.fip-ai-engine-details summary {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: var(--gold);
}

.fip-ai-engine-data {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--off-white);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 280px;
  overflow-y: auto;
}

/* L2 Recommendation */
.fip-ai-primary-action {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: 1.0rem;
  margin-bottom: var(--space-2);
}

.fip-ai-action-label {
  color: var(--gold);
  flex-shrink: 0;
}

.fip-ai-action-text {
  color: var(--ink);
  font-weight: 500;
}

.fip-ai-reasoning {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--paper-line);
}

.fip-ai-alternatives-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--space-1);
}

.fip-ai-alternatives-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.84rem;
}

.fip-ai-alternatives-list li {
  padding: var(--space-1) 0;
  color: var(--ink);
  line-height: 1.4;
}

.fip-ai-alt-action {
  font-weight: 600;
  color: var(--ink);
}

.fip-ai-alt-reason {
  color: var(--ink-soft);
}

.fip-ai-action-hint {
  margin-top: var(--space-3);
  font-size: 0.74rem;
  color: var(--slate);
  font-style: italic;
}

/* L3 Annotation per Schicht (innerhalb evidence-layer) */
.fip-ai-annotation {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--off-white);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  color: var(--ink);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.fip-ai-annotation .fip-ai-disclaimer {
  flex-shrink: 0;
  font-size: 0.58rem;
}

/* ============================================================================
   Phase 2-D Block A: L4 Confidence-Breakdown
   ============================================================================ */
.fip-confidence-breakdown {
  border-top: 3px solid var(--gold);
}

.fip-confidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.fip-confidence-cell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.fip-confidence-cell--composite {
  background: linear-gradient(180deg, var(--card) 0%, rgba(184, 136, 74, 0.08) 100%);
  border-color: var(--gold);
}

.fip-confidence-cell--pending {
  background: var(--off-white);
  opacity: 0.7;
}

.fip-confidence-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-bottom: var(--space-2);
}

.fip-confidence-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.fip-confidence-level {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.fip-confidence-level--high   { color: var(--sage); }
.fip-confidence-level--medium { color: var(--gold); }
.fip-confidence-level--low    { color: var(--slate); }

.fip-confidence-explanation {
  font-size: 0.85rem;
  color: var(--slate);
  font-style: italic;
  margin-top: var(--space-3);
}

/* ============================================================================
   Phase 2-D Block B: L5 Decision-Note-Expander
   ============================================================================ */
.fip-decision-note-saved {
  padding: var(--space-3);
  background: var(--off-white);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--sage);
}

.fip-decision-note-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-3) 0;
  white-space: pre-wrap;
}

.fip-decision-note-meta {
  font-size: 0.72rem;
  color: var(--slate);
  margin: 0;
}

.fip-decision-note-pending {
  color: var(--gold);
  font-weight: 600;
}

.fip-decision-note-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fip-decision-note-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  resize: vertical;
}

.fip-decision-note-textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.fip-decision-note-expanded {
  padding: var(--space-3);
  background: linear-gradient(180deg, var(--card) 0%, rgba(184, 136, 74, 0.04) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fip-decision-note-expanded[hidden] {
  display: none;
}

.fip-decision-note-expanded-text {
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
}

.fip-decision-note-approve {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

/* ============================================================================
   Phase 2-D Block C: Beleg-Upload pro Finding
   ============================================================================ */
.fip-attachments-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fip-attachments-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--off-white);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.fip-attachments-empty {
  font-style: italic;
  color: var(--slate);
}

.fip-attachments-filename {
  flex: 1;
  font-weight: 500;
  color: var(--ink);
}

.fip-attachments-meta {
  font-size: 0.72rem;
  color: var(--slate);
}

.fip-attachments-label-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--card);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fip-attachments-uploader {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
  background: var(--off-white);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
}

.fip-attachments-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
}

.fip-attachments-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--card);
}

.fip-attachments-input {
  font-size: 0.85rem;
  flex: 1;
  min-width: 200px;
}

/* ============================================================================
   Followup Block X.1: Decision-Note Customer-Framing + editierbarer Vorschlag
   ============================================================================ */
.fip-decision-note-framing {
  font-size: 0.85rem;
  color: var(--slate);
  font-style: italic;
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--off-white);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.fip-decision-note-textarea--expanded {
  min-height: 140px;
  background: var(--card);
}

/* ============================================================================
   Followup Block X.2: Toast-Notification
   ============================================================================ */
.fip-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--card);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
  max-width: 360px;
}

.fip-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.fip-toast--success { background: var(--sage); }
.fip-toast--error   { background: var(--stamp-red); }
.fip-toast--info    { background: var(--ink); }

/* ============================================================================
   Followup Block X.3: Status-Auto-Transition-Bubble
   ============================================================================ */
.fip-status-bubble {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--card) 0%, rgba(184, 136, 74, 0.06) 100%);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.fip-status-bubble-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.fip-status-bubble-msg {
  flex: 1;
  font-size: 0.9rem;
  color: var(--ink);
}

/* ============================================================================
   Followup Block X.4: Status-Wechsel-Aktions-Box
   ============================================================================ */
.fip-status-actions {
  border-top: 3px solid var(--navy);
}

.fip-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.fip-status-btn {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fip-status-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
}

.fip-status-btn.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--card);
  font-weight: 600;
  cursor: default;
}

.fip-status-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.fip-status-hint {
  font-size: 0.75rem;
  color: var(--slate);
  font-style: italic;
}

/* ============================================================================
   Phase 2-D Restrukturierung — Akten-Layout
   Mockup: Venture/3_UX Brand/Beweis-Akte-Restrukturierung-Mockup-2026-05-09.html
   Sven-Decision: action-orientiert, 7 Sections, Highlight via JS-Toggle.
   ============================================================================ */

.evidence-body--restruktur .evidence-page {
  padding: var(--space-4) var(--space-5);
}

.akte {
  max-width: 980px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px var(--paper-shadow), 0 4px 12px var(--paper-shadow);
  overflow: hidden;
}

/* === Akten-Header === */
.akte-header {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 2px solid var(--gold);
  background: var(--paper);
}

/* === Akten-Header Top (Title + Search-Field) === */
.akte-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.akte-header-left {
  flex: 1;
  min-width: 0;
}

/* === Block C.5: Findings-Suchfeld === */
.akte-header-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.akte-search-label {
  font-size: 0.75rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.akte-search-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  background: var(--card);
  color: var(--ink);
  width: 280px;
  max-width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.akte-search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-faint);
}
.akte-finding-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.akte-titel {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.akte-meta-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}
.akte-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--slate);
}
.akte-meta-item strong {
  color: var(--ink);
  font-weight: 500;
}
.akte-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  background: var(--gold-faint);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--gold-border);
}
.akte-status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

/* === Section-Container === */
.akte-body {
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.akte-body .section {
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}
.akte-body .section--highlight {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-faint);
  position: relative;
  overflow: visible;
}
.akte-body .section--highlight::before {
  content: '★ Empfohlene Aktion';
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--gold);
  color: var(--card);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  z-index: 2;
}
.akte-body .section-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--paper-edge);
  background: linear-gradient(to right, var(--off-white) 0%, var(--paper) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.akte-body .section-title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.akte-body .section-body {
  padding: var(--space-4) var(--space-4);
}

/* === Empfohlenes Vorgehen === */
.empfehlung-text {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
  min-height: 1.5em;
}
.empfehlung-nudge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 500;
}
.empfehlung-nudge[hidden] { display: none; }
.empfehlung-nudge .nudge-icon {
  color: var(--gold);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.empfehlung-nudge {
  align-items: flex-start;
}
.nudge-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.nudge-action {
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 500;
}
.nudge-reason {
  font-size: 0.78rem;
  color: var(--slate);
  line-height: 1.5;
  font-style: italic;
}
.nudge-reason[hidden] { display: none; }

/* === Auf einen Blick — Stats + Top-Lieferanten === */
.blick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--off-white);
}
.blick-stat {
  background: var(--paper);
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--paper-edge);
}
.blick-stat:last-child { border-right: none; }
.blick-stat-label {
  font-size: 0.7rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
  font-weight: 500;
}
.blick-stat-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.blick-stat-detail {
  font-size: 0.75rem;
  color: var(--slate);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.blick-text {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.65;
  margin: 0;
}
.blick-supplier-list {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--off-white);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--slate);
  line-height: 1.6;
}
.blick-supplier-list strong {
  color: var(--ink);
  font-weight: 500;
}

/* === Vertrag/Beleg-Block mit Upload-Inline === */
.akte-body .doc-block {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
}
.akte-body .doc-content {
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--paper-edge);
}
.doc-empty {
  color: var(--slate);
  font-style: italic;
  font-size: 0.85rem;
  margin: 0;
}
.akte-body .doc-uploader {
  padding: var(--space-3);
  background: var(--off-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-2);
}
.akte-body .doc-uploader--highlight {
  background: var(--gold-bg);
}
.doc-upload-btn {
  background: var(--paper);
  border: 1px dashed var(--gold);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.doc-upload-btn:hover {
  background: var(--gold-faint);
}
.doc-upload-btn--primary {
  background: var(--gold);
  color: var(--card);
  border-style: solid;
}
.doc-upload-btn--primary:hover {
  background: var(--gold-bright);
  color: var(--card);
}
.doc-upload-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.doc-upload-hint {
  font-size: 0.7rem;
  color: var(--slate);
  text-align: center;
}

/* === Begründung-Editor (Mockup-Pattern) === */
.beg-hint {
  font-size: 0.85rem;
  color: var(--slate);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}
.beg-hint strong { color: var(--ink); }
.beg-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  resize: vertical;
}
.beg-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-faint);
}
.beg-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.beg-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--paper-edge);
  background: var(--paper);
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.beg-btn--primary {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
}
.beg-btn--primary:hover { background: var(--navy); }
.beg-btn:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
}
.beg-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* === Status-Aktions-Box (5 Buttons) — Akten-Variante === */
.akte-body .status-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.akte-body .status-btn {
  flex: 1;
  min-width: 100px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
}
.akte-body .status-btn:hover {
  background: var(--gold-faint);
  border-color: var(--gold-border);
  color: var(--ink);
}
.akte-body .status-btn--active,
.akte-body .status-btn.is-active {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
  cursor: default;
}

/* === Verlauf · Konfidenz · Audit-Trail === */
.audit-summary {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--paper-edge);
  flex-wrap: wrap;
}
.audit-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audit-summary-label {
  font-size: 0.7rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.audit-summary-value {
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 600;
}
.audit-summary-value[title] {
  cursor: help;
  border-bottom: 1px dotted var(--gold);
  display: inline-block;
}
.audit-summary-value[title]:hover { color: var(--gold); }
.audit-trail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--slate);
}
.audit-trail-list li {
  padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--paper-edge);
  display: flex;
  gap: var(--space-3);
}
.audit-trail-list li:last-child { border-bottom: none; }
.audit-trail-list .audit-time {
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}

/* === Mobile Stacking === */
@media (max-width: 760px) {
  .akte-body .doc-block { grid-template-columns: 1fr; }
  .akte-body .doc-content { border-right: none; border-bottom: 1px solid var(--paper-edge); }
  .blick-stats { grid-template-columns: 1fr; }
  .blick-stat { border-right: none; border-bottom: 1px solid var(--paper-edge); }
  .blick-stat:last-child { border-bottom: none; }
}

/* === Phase 2-F-Polish-Followup Block D (Sven-Strategy-Pivot 15.05.) ====
 * Workflow-Hub Email-Primary: Customer kopiert Betreff + Nachricht direkt
 * in seinen Email-Client. PDF wird Secondary. Memory:
 * project_letter_output_strategy.md
 *
 * AP 11 (Tokens-only): keine Hex-Codes — nur var(--token), kein Hex-
 * Fallback (Smoke 150 Hex-Audit-FAIL-mode fuer Component-CSS). Spacing-
 * Fallbacks bleiben (number-Werte, kein Hex).
 */
.workflow-action--email-primary {
  margin-top: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.workflow-action-heading {
  margin: 0 0 var(--space-2, 8px) 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}
.workflow-action-hint {
  margin: 0 0 var(--space-3, 12px) 0;
  font-size: 0.85rem;
  color: var(--slate);
  line-height: 1.5;
}
.workflow-email-field {
  margin-bottom: var(--space-3, 12px);
}
.workflow-email-field label {
  display: block;
  margin-bottom: var(--space-1, 4px);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workflow-email-field-row {
  display: flex;
  gap: var(--space-2, 8px);
  align-items: stretch;
  flex-wrap: wrap;         /* Pass-3 Bug 2+3 Fix (Sven-Inkognito 15.05.): bei
                              schmalen Viewports umbrechen statt Input auf 0
                              schrumpfen. */
}
.workflow-email-field-row > .workflow-email-input {
  /* Input bekommt prioritaer den verfuegbaren Platz, kann aber unter eine
     lesbare Mindestbreite NICHT schrumpfen. */
  flex: 1 1 240px;         /* grow:1 shrink:1 basis:240px */
  min-width: 240px;        /* Pass-3 Bug 2+3 Fix: Block H.1 hatte min-width:0
                              → Subject-Input kollabiert hinter Copy-Button,
                              wirkt leer + nicht klickbar. Min-Width 240px
                              haelt Input immer interaktiv. */
}
.workflow-email-field-row > .fip-action-btn {
  /* Copy-Button schrumpft NICHT (sonst gleicher Bug umgekehrt). */
  flex: 0 0 auto;
}
.workflow-email-input,
.workflow-email-textarea {
  box-sizing: border-box;  /* Padding/Border in Width inkludiert */
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  background: var(--paper-bright, white);
  color: var(--navy);
  line-height: 1.5;
}
.workflow-email-textarea {
  /* Textarea ist Block-Level (NICHT in flex-row), nimmt eigene 100% Width.
     Body-Field hat keinen Copy-Button daneben → kein flex-shrink-Issue (Bug 3
     betrifft nur Subject-Input). */
  width: 100%;
  display: block;
  resize: vertical;
  min-height: 160px;
  margin-bottom: var(--space-2, 8px);
}
.workflow-hub-actions--secondary {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--paper-edge);
}

/* === Round-8 Block A4 Empty-Edit-UX (Sven-Decision 16.05. Option c) ====
 * "Zurueck zum Original-Vorschlag"-Button neben Field-Label. Nur sichtbar
 * wenn customer_edited_X gesetzt + abweicht. AP 11: Tokens-only.
 */
.workflow-email-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1, 4px);
  gap: var(--space-2, 8px);
}
.workflow-email-field-label-row label {
  margin-bottom: 0;
}
.fip-action-btn--small {
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* === Sub-Inbox Round-8-Followup Block A: Email-Body-Drift-Banner ====
 * Sven-Decision 16.05. abends (Option b Explizit-Warn): Banner zeigt
 * Drift zwischen Langform und Email-Body. Sync-Button triggert Re-Derive.
 * AP 11: Tokens-only.
 */
.workflow-email-drift-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin-bottom: var(--space-3, 12px);
  background: var(--gold-faint);
  border: 1px solid var(--gold);
  border-radius: 4px;
  flex-wrap: wrap;
}
.workflow-email-drift-icon {
  font-size: 1.2rem;
  color: var(--gold);
  flex-shrink: 0;
}
.workflow-email-drift-text {
  flex: 1 1 240px;
  font-size: 0.88rem;
  color: var(--navy);
  line-height: 1.5;
}
.workflow-email-drift-text strong {
  display: block;
  margin-bottom: 2px;
}
.workflow-email-drift-banner > .fip-action-btn {
  flex: 0 0 auto;
}

/* === Hotfix 17.05. Nachmittag Block A: Loesch-Button fuer Attachments ====== */
.fip-attachments-item {
  display: flex; align-items: center; gap: var(--space-2);
}
.fip-attachments-delete {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--paper-edge);
  color: var(--slate-light);
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast);
  flex-shrink: 0;
}
.fip-attachments-delete:hover {
  color: var(--rust);
  border-color: var(--rust);
  background: rgba(176, 104, 66, 0.08);
}
.fip-attachments-delete:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.fip-attachments-delete:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* === Hotfix 17.05. Nachmittag Block B: Reviewer-Hinweis-Banner ============= */
.fip-reviewer-hinweis {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--steel-light, rgba(69, 107, 150, 0.10));
  border-left: 3px solid var(--steel);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: 13px; line-height: 1.5;
  color: var(--navy);
}
.fip-reviewer-hinweis-icon {
  flex-shrink: 0; color: var(--steel);
  font-size: 16px; font-weight: 700;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fip-reviewer-hinweis-body { flex: 1; }
.fip-reviewer-hinweis-body strong { color: var(--navy); font-weight: 600; }