.analysis-pane { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.pane-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-lg); }

.dropzone {
  display: grid; place-items: center; gap: 0.25rem; padding: var(--space-xl) var(--space-lg);
  border: 0.125rem dashed var(--line); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--text-muted); font-size: 0.75rem; cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--surface-soft); }
.dropzone strong { color: var(--text-strong); font-size: 0.8125rem; font-weight: 720; }

.control-block { padding: var(--space-lg); border-bottom: 0.0625rem solid var(--line-soft); }
.control-block h3 { margin: 0 0 var(--space-md); color: var(--text-strong); font-size: 0.8125rem; }
.control-block .compact-select + .compact-select { margin-top: var(--space-md); }
.form-error { margin: var(--space-md) 0 0; color: var(--danger); font-size: 0.75rem; }
.form-notice { margin: var(--space-md) 0 0; color: var(--text-muted); font-size: 0.75rem; }
.hint-note { margin: var(--space-sm) 0 0; color: var(--text-muted); font-size: 0.6875rem; line-height: 1.5; }

.history { display: grid; gap: 0.25rem; }
.history-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-sm);
  padding: 0.5rem 0.625rem; border: 0.0625rem solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text); font-size: 0.75rem; text-align: left; cursor: pointer;
}
.history-item:hover { border-color: var(--action-strong); }
.history-item[aria-current="true"] { border-color: var(--action-strong); background: var(--surface-soft); }
.history-item b { display: block; color: var(--text-strong); font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item span { color: var(--text-muted); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.history-item .drop { border: 0; background: transparent; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0 0.25rem; cursor: pointer; }
.history-item .drop:hover { color: var(--danger); }

.pattern { display: grid; gap: 0.125rem; }
.bar-row { display: grid; grid-template-columns: minmax(9rem, 22%) 1fr 4.5rem 5.5rem; gap: var(--space-md); align-items: center; min-height: 2rem; }
.bar-label { color: var(--text-strong); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 0.875rem; border-radius: 0.125rem; background: var(--surface-soft); }
.bar-fill { display: block; height: 100%; border-radius: 0.125rem; background: var(--action-strong); }
.bar-row.is-top .bar-fill { background: var(--brand); }
.bar-count { color: var(--text-strong); font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: right; }
.bar-auto { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; color: var(--text-muted); font-size: 0.6875rem; }
.bar-auto input {
  width: 3.25rem; min-height: 2rem; padding: 0.25rem 0.375rem; text-align: right;
  border: 0.0625rem solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text-strong); font-variant-numeric: tabular-nums; font-size: 0.75rem;
}

.pattern-legend { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 0.0625rem solid var(--line-soft); color: var(--text-muted); font-size: 0.6875rem; }

.demo-flag { padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--surface-soft); color: var(--cs-orange-darker, #a63f08); font-size: 0.6875rem; font-weight: 760; }

@media (max-width: 64rem) {
  .analysis-pane.is-mobile-active { display: grid; }
  .bar-row { grid-template-columns: minmax(7rem, 34%) 1fr 3.5rem 4.5rem; }
}

/* Import-Vorschau: zeigt, was tatsaechlich gelesen wurde, damit eine falsche
   Spaltenzuordnung auffaellt, bevor sie in die Auswertung durchschlaegt. */
.import-preview { margin-top: var(--space-lg); }
.import-preview h4 { margin: 0 0 var(--space-sm); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.import-preview h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.import-preview__scroll { overflow-x: auto; border: 1px solid var(--line-soft, #d6e2e4); border-radius: 0.35rem; }
.import-preview__table { width: 100%; border-collapse: collapse; font-size: 0.6875rem; }
.import-preview__table th,
.import-preview__table td { padding: 0.35rem 0.5rem; text-align: left; white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line-soft, #d6e2e4); }
.import-preview__table th { font-weight: 700; background: var(--surface-soft, #f3f8f8); }
.import-preview__table tr:last-child td { border-bottom: 0; }
.import-preview__table .is-mapped { background: color-mix(in srgb, var(--accent, #086f78) 12%, transparent); }
.import-preview__table th.is-mapped { background: color-mix(in srgb, var(--accent, #086f78) 20%, transparent); }
.import-preview__role { display: block; font-weight: 400; font-size: 0.625rem; color: var(--accent, #086f78); }

/* Executive Summary, Roadmap und Drill-down auf anonymisierte Beispiele. */
.exec-summary { margin: 0 0 var(--space-lg); font-size: 0.875rem; line-height: 1.6; }
.exec-summary strong { font-weight: 700; }
.exec-summary:empty { display: none; }

/* Norm-Klassifikation: Codes der MILTON Ticket-Taxonomie. */
.norm { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line-soft, #d6e2e4); }
.norm-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.norm-head h3 { margin: 0 0 var(--space-xs); font-size: 0.875rem; }
.norm-head a { font-size: 0.75rem; font-weight: 600; color: var(--action-strong); }
.norm-domains { display: grid; gap: 0.125rem; margin-top: var(--space-md); }
.norm-row { display: grid; grid-template-columns: 2.25rem minmax(9rem, 30%) 1fr 3.5rem 3.75rem; gap: var(--space-md); align-items: center; min-height: 1.75rem; font-size: 0.8125rem; }
.norm-row.is-unassigned { color: var(--text-muted); }
.norm-row.is-unassigned .bar-fill { background: var(--line-soft, #d6e2e4); }
.norm-code { font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 700; color: var(--action-strong); text-decoration: none; white-space: nowrap; }
a.norm-code:hover, a.norm-code:focus-visible { text-decoration: underline; }
.norm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.norm-count, .norm-share { text-align: right; font-variant-numeric: tabular-nums; }
.norm-share { color: var(--text-muted); }
.norm-subhead { margin: var(--space-lg) 0 var(--space-xs); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.norm-areas { margin: 0; padding: 0; list-style: none; }
.norm-areas li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--space-md); align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft, #eef3f4); font-size: 0.8125rem; }
.norm-areas li:last-child { border-bottom: 0; }
.norm-area { display: grid; min-width: 0; }
.norm-area span { color: var(--text-muted); font-size: 0.6875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40rem) {
  .norm-row { grid-template-columns: 2rem minmax(6rem, 40%) 1fr 3rem; }
  .norm-share { display: none; }
  .norm-label, .norm-area span { white-space: normal; overflow-wrap: anywhere; }
  .norm-areas li { grid-template-columns: 3rem 1fr auto; }
}

.roadmap { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line-soft, #d6e2e4); }
.roadmap h3 { margin: 0 0 var(--space-xs); font-size: 0.875rem; }
.roadmap-phase { margin-top: var(--space-lg); }
.roadmap-phase__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.roadmap-phase__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.roadmap-phase__sum { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.roadmap-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: 0.3rem 0; border-bottom: 1px solid var(--line-soft, #eef3f4); font-size: 0.8125rem; }
.roadmap-item:last-child { border-bottom: 0; }
.roadmap-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roadmap-item__value { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.bar-label[data-drillable] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 0.2em; }
.bar-samples { grid-column: 1 / -1; margin: 0.25rem 0 0.5rem; padding: 0.5rem 0.75rem; border-left: 2px solid var(--accent, #086f78); background: var(--surface-soft, #f3f8f8); }
.bar-samples ul { margin: 0; padding-left: 1rem; }
.bar-samples li { font-size: 0.6875rem; line-height: 1.6; }
.bar-samples p { margin: 0.35rem 0 0; font-size: 0.625rem; color: var(--text-muted); }

/* Druckbild. Die Seite ist am Bildschirm ein Dreispalter mit eigenen
   Scrollbereichen; auf Papier muss sie fortlaufend sein, sonst druckt der
   Browser nur den sichtbaren Ausschnitt jeder Spalte. */
@media print {
  @page { size: A4 portrait; margin: 14mm; }

  .app-header,
  .workspace-nav,
  .header-actions,
  .dropzone,
  #file-input,
  .review-actions,
  .import-preview,
  .bar-auto,
  .fzul-access-dialog,
  [data-tool-switcher] { display: none !important; }

  html, body { background: #fff !important; }

  .app-shell {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .pane {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 0 8mm !important;
    break-inside: auto;
  }
  .pane-header { border-bottom: 1px solid #999; margin-bottom: 4mm; }

  .exec-summary { font-size: 11pt; line-height: 1.5; }
  .bar-row, .roadmap-item, .result-row, .result-total { break-inside: avoid; }
  .roadmap, .allowance-section, .result-section { break-inside: avoid; }
  .bar-samples { break-inside: avoid; background: transparent !important; }

  /* Reglerwerte als Text, damit die Annahmen auf dem Papier stehen. */
  .range-field input[type="range"] { display: none !important; }
  .range-scale { display: none !important; }
  .range-field__label { font-size: 10pt; }

  a[href]::after { content: ""; }
}

/* Sichtbare Vorschau dessen, was den Browser verlaesst. */
.transmission { margin-top: var(--space-md); font-size: 0.75rem; }
.transmission[hidden] { display: none; }
.transmission > summary { cursor: pointer; font-weight: 700; color: var(--accent, #086f78); }
.transmission__note { margin: var(--space-sm) 0; color: var(--text-muted); line-height: 1.6; }
.transmission__fields { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem var(--space-md); margin: 0; }
.transmission__fields dt { font-weight: 700; white-space: nowrap; }
.transmission__fields dd { margin: 0; color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.transmission__warning { margin: var(--space-md) 0 0; padding: 0.5rem 0.65rem; border-left: 0.1875rem solid var(--danger, #a8322b); background: color-mix(in srgb, var(--danger, #a8322b) 7%, transparent); line-height: 1.6; }
.transmission__warning[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Demo-Zustand. Die Seite startet mit einem Beispielbestand, damit sofort
   sichtbar ist, was die App liefert. Bisher sah der aus wie echte Daten und
   wurde nur durch zwei kleine Badges als Beispiel ausgewiesen — zwei Wörter
   in zwei Farben in zwei Spalten, die niemand liest. Jetzt trägt die Ansicht
   den Zustand selbst: gedämpft, solange es Beispieldaten sind, und in voller
   Farbe, sobald eine eigene Datei geladen ist. Das Aufheben der Dämpfung ist
   der Moment, um den es in dieser App geht.
   -------------------------------------------------------------------------- */
body.is-demo .analysis-pane,
body.is-demo .results-pane {
  /* Korrektur: 0.45 Deckkraft plus Entsättigung las sich wie "abgeschaltet",
     nicht wie "Beispiel" — ein adversariales Review nannte das als Grund,
     die Seite sofort zu verlassen ("entweder kaputt, oder Attrappen").
     Der Zustand muss lesbar bleiben und trotzdem erkennbar vorläufig sein:
     leicht zurückgenommen, nicht entfärbt, mit einer Beschriftung, die es
     ausspricht. Die volle Farbe beim eigenen Upload bleibt der Kernmoment. */
  opacity: 0.82;
  transition: opacity 0.35s ease;
}
body.is-demo .analysis-pane:hover,
body.is-demo .results-pane:hover { opacity: 1; }
.analysis-pane, .results-pane { transition: opacity 0.35s ease, filter 0.35s ease; }

/* Der Upload ist die Handlung, um die es geht — er war ein gestrichelter
   Kasten in der Ecke und damit das visuell schwächste Element der Seite. */
.dropzone {
  border: 0.125rem dashed var(--brand);
  background: var(--surface-soft);
  padding: var(--space-lg) var(--space-md);
}
body.is-demo .dropzone {
  border-color: var(--cs-orange, #ed661a);
  background: color-mix(in srgb, var(--cs-orange, #ed661a) 8%, transparent);
}
.dropzone strong { font-size: 1rem; }
body.is-demo .dropzone::after {
  content: 'Solange hier nichts liegt, sehen Sie Beispieldaten.';
  display: block;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cs-orange-darker, #a63f08);
}

/* Kategorienamen sind die wichtigste Information der Tabelle und wurden bei
   34 % Spaltenbreite abgeschnitten, obwohl rechts Platz war. */
.bar-row { grid-template-columns: minmax(11rem, 30%) 1fr 3.5rem 4.5rem; }
.bar-label { overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }

@media (max-width: 64rem) {
  .bar-row { grid-template-columns: minmax(8rem, 38%) 1fr 3rem 4rem; }
}

/* Der Zustandsstempel rechts oben. "Beispielbestand" ist zurueckhaltend,
   "Ihre Daten" ist der Erfolgsmoment und darf ihn zeigen. */
.calculation-state.is-own {
  background: var(--brand, #086f78);
  color: #fff;
  font-weight: 700;
}

/* Solange Beispieldaten rechnen, sind Export und Pruefanfrage gedaempft --
   sie waren aber weiterhin klickbar und haetten Demozahlen an das CRM
   geschickt. Optik und Wirkung gehoeren zusammen. */
body.is-demo #export-button,
body.is-demo #export-xlsx-button,
body.is-demo #contact-button { opacity: .55; }