/* demo.css — Bausteine der interaktiven Vorführungen und der
   Oberflächen-Nachbildungen. Nutzt ausschließlich Tokens aus cc-tokens.css. */

/* ══ Terminlotse ════════════════════════════════════════════════════════════ */
.sms-buehne{display:grid; grid-template-columns:1fr 310px; gap:var(--space-10); align-items:start}

.handy{
  width:310px; margin:0 auto; background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-xl);
  padding:12px; box-shadow:var(--shadow-md);
}
.handy-kopf{
  display:flex; align-items:center; gap:10px; padding:6px 8px 12px;
  border-bottom:1px solid var(--border-subtle); margin-bottom:12px;
}
.handy-kopf .av{
  width:30px; height:30px; border-radius:var(--radius-pill); flex:none;
  background:var(--cc-blue-50); color:var(--cc-blue-700);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:12px;
}
.handy-kopf .wer{font-size:var(--text-body-s); font-weight:var(--weight-semibold); color:var(--text-strong); line-height:1.2}
.handy-kopf .num{font-family:var(--font-mono); font-size:var(--text-data-s); color:var(--text-muted)}
.handy-verlauf{
  min-height:340px; max-height:440px; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px; padding:2px;
}
.blase{
  max-width:88%; padding:10px 13px; font-size:var(--text-body-s); line-height:1.5;
  white-space:pre-wrap; word-break:break-word; border-radius:var(--radius-lg);
  animation:blase-auf var(--dur-base) var(--ease-entrance);
}
@keyframes blase-auf{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.blase.raus{align-self:flex-start; background:var(--surface-sunken); border:1px solid var(--border-subtle); color:var(--text-body-color); border-bottom-left-radius:var(--radius-xs)}
.blase.rein{align-self:flex-end; background:var(--cc-blue-900); color:var(--text-inverse); border-bottom-right-radius:var(--radius-xs)}
.blase .zeit{display:block; margin-top:6px; font-family:var(--font-mono); font-size:11px; opacity:.6}
.tippt{
  align-self:flex-end; display:flex; gap:4px; padding:11px 14px;
  background:var(--cc-blue-900); border-radius:var(--radius-lg);
}
.tippt i{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.7); animation:tipp 1.4s var(--ease-in-out) infinite}
.tippt i:nth-child(2){animation-delay:.18s}
.tippt i:nth-child(3){animation-delay:.36s}
@keyframes tipp{0%,60%,100%{opacity:.3} 30%{opacity:1}}

/* Parser */
.parser{border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-card)}
.parser-kopf{
  padding:11px 16px; border-bottom:1px solid var(--border-subtle); background:var(--surface-sunken);
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted);
}
.parser-zeile{
  display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-body-s); opacity:.4; transition:opacity var(--dur-base) var(--ease-out);
}
.parser-zeile:last-child{border-bottom:0}
.parser-zeile.an{opacity:1}
.parser-zeile .haken{
  width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-default); border-radius:var(--radius-xs); color:var(--status-done-fg);
}
.parser-zeile.an .haken{background:var(--status-done-bg); border-color:var(--status-done-dot)}
.parser-zeile .feld{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted); width:76px; flex:none;
}
.parser-zeile .wert{font-family:var(--font-mono); font-size:var(--text-data); color:var(--text-strong)}

/* Vorgangsliste */
.vorgaenge{border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-card)}
.vorgang{
  display:grid; grid-template-columns:1fr auto; gap:var(--space-4);
  align-items:center; padding:14px 18px; border-bottom:1px solid var(--border-subtle);
}
.vorgang:last-child{border-bottom:0}
.vorgang:hover{background:var(--cc-blue-50)}
.vorgang.hebt{background:var(--cc-blue-50)}
.vorgang .vname{font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-h4); color:var(--text-strong)}
.vorgang .vmeta{font-family:var(--font-mono); font-size:var(--text-data-s); color:var(--text-muted); margin-top:3px}
.vorgang .vwunsch{
  font-size:var(--text-body-s); margin-top:8px; padding:8px 12px; border-radius:var(--radius-sm);
  background:var(--status-warn-bg); color:var(--status-warn-fg);
}

/* GSM-7 */
.gsm-vergleich{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter)}
.gsm-vergleich > div{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:18px 20px;
}
.gsm-vergleich h4{font-size:var(--text-h4); margin-bottom:var(--space-3)}
.gsm-zeichen{font-family:var(--font-mono); font-size:var(--text-data); line-height:1.9}
.gsm-zeichen mark{background:var(--status-alert-bg); color:var(--status-alert-fg); padding:2px 5px; border-radius:var(--radius-xs)}
.gsm-zeichen ins{background:var(--status-done-bg); color:var(--status-done-fg); padding:2px 5px; border-radius:var(--radius-xs); text-decoration:none}
.gsm-fakt{font-size:var(--text-body-s); margin-top:var(--space-4); color:var(--text-muted)}
.gsm-fakt b{font-family:var(--font-display); font-size:var(--text-h3); color:var(--text-strong); display:block; margin-bottom:2px}

/* ══ Marktradar ═════════════════════════════════════════════════════════ */
.erk-buehne{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:start}
.quelltext{
  font-family:var(--font-mono); font-size:var(--text-data); line-height:1.9;
  white-space:pre-wrap; word-break:break-word; color:var(--text-body-color);
  background:var(--surface-sunken); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:18px; min-height:160px;
}
.quelltext .treffer{
  background:var(--cc-blue-100); border-radius:var(--radius-xs); padding:1px 2px;
  transition:background var(--dur-base) var(--ease-out);
}
.quelltext .treffer.aktiv{background:var(--accent); color:var(--on-accent)}

.felder{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:var(--space-3)}
.feld{
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:10px 13px; background:var(--surface-card); box-shadow:var(--shadow-xs);
}
.feld .fk{
  font-size:var(--text-micro); letter-spacing:var(--ls-micro); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted);
}
.feld .fv{
  font-family:var(--font-mono); font-weight:500; font-size:var(--text-data);
  color:var(--text-strong); min-height:20px; margin-top:3px;
}
.feld .fq{font-size:var(--text-micro); color:var(--status-done-fg); min-height:14px; margin-top:3px}
.feld.neu{animation:feld-auf var(--dur-slow) var(--ease-entrance)}
@keyframes feld-auf{from{background:var(--cc-blue-100)} to{background:var(--surface-card)}}

.markt-kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-3); margin-bottom:var(--space-5)}
.markt-kpi .k{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-xs);
}
.markt-kpi .kk{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted);
}
.markt-kpi .kv{
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:28px;
  letter-spacing:var(--ls-metric); font-variant-numeric:tabular-nums;
  color:var(--text-strong); margin-top:4px; line-height:1.1;
}
.markt-kpi .kn{font-size:var(--text-caption); color:var(--text-muted); margin-top:2px}

.markt-tab{width:100%; border-collapse:collapse; font-size:var(--text-body-s)}
.markt-tab thead th{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted);
  text-align:right; padding:12px 14px; border-bottom:1px solid var(--border-default); white-space:nowrap;
}
.markt-tab thead th:first-child{text-align:left}
.markt-tab tbody td{
  padding:13px 14px; text-align:right; border-bottom:1px solid var(--border-subtle);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-body-color);
}
.markt-tab tbody td:first-child{
  text-align:left; font-family:var(--font-sans); font-weight:var(--weight-semibold); color:var(--text-strong);
}
.markt-tab tbody tr:hover{background:var(--cc-blue-50)}
.markt-tab .spanne{color:var(--text-muted); font-size:var(--text-data-s); white-space:nowrap}
.stz{
  display:inline-flex; align-items:center; padding:3px 11px; border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:var(--text-data-s);
}
.stz.kurz{background:var(--status-done-bg); color:var(--status-done-fg)}
.stz.mittel{background:var(--status-warn-bg); color:var(--status-warn-fg)}
.stz.lang{background:var(--status-alert-bg); color:var(--status-alert-fg)}
.stz.unsicher::after{content:" ?"; opacity:.6}

/* ══ Klartext ═════════════════════════════════════════════════════════════ */
.speak-buehne{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter)}
.speak-seite{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:20px; min-height:200px;
}
.speak-seite h4{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted); margin-bottom:var(--space-4);
  font-family:var(--font-sans);
}
.speak-roh{font-family:var(--font-mono); font-size:var(--text-data); line-height:1.9; color:var(--text-muted); white-space:pre-wrap}
.speak-roh .zeiger{display:inline-block; width:8px; height:16px; background:var(--accent); vertical-align:-2px; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.speak-fertig{font-size:var(--text-body); line-height:1.65; white-space:pre-wrap; color:var(--text-strong)}
.speak-fertig:empty::after{content:"wartet …"; color:var(--text-faint); font-size:var(--text-body-s)}
.speak-urteil{
  display:flex; align-items:flex-start; gap:12px; padding:14px 18px; margin-top:var(--space-5);
  font-size:var(--text-body-s); line-height:1.6; border-radius:var(--radius-md);
}
.speak-urteil.ok{background:var(--status-done-bg); color:var(--status-done-fg)}
.speak-urteil.weg{background:var(--status-alert-bg); color:var(--status-alert-fg)}
.speak-urteil svg{flex:none; margin-top:2px}
.speak-urteil b{display:block; margin-bottom:3px; font-weight:var(--weight-semibold)}

/* ══ Bildstudio ═════════════════════════════════════════════════════════ */
.kcc-buehne{display:grid; grid-template-columns:1fr 280px; gap:var(--space-8); align-items:start}
.kcc-bild{
  border:1px solid var(--border-subtle); border-radius:var(--radius-xl); overflow:hidden;
  background:var(--surface-sunken); box-shadow:var(--shadow-sm);
}
.kcc-bild img{width:100%; height:auto}
.kcc-optionen h4{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted);
  margin:var(--space-5) 0 var(--space-3); font-family:var(--font-sans);
}
.kcc-optionen h4:first-child{margin-top:0}
.hg-liste{display:flex; flex-direction:column; gap:8px}
.hg{
  display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-card); text-align:left; font-family:inherit;
  font-size:var(--text-body-s); color:var(--text-body-color); width:100%;
  transition:var(--transition-control);
}
.hg:hover{background:var(--cc-blue-50); border-color:var(--cc-blue-300)}
.hg[aria-pressed="true"]{border-color:var(--accent); background:var(--surface-accent-tint)}
.hg .swatch{width:28px; height:28px; flex:none; border:1px solid var(--border-subtle); border-radius:var(--radius-sm)}
.hg .hgn{font-weight:var(--weight-semibold); color:var(--text-strong); line-height:1.2; display:block}
.hg .hgb{font-size:var(--text-caption); color:var(--text-muted)}
.kcc-prompt{
  font-family:var(--font-mono); font-size:var(--text-data-s); line-height:1.7;
  background:var(--surface-sunken); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:13px; margin-top:var(--space-3); color:var(--text-muted);
}

/* ══ Oberflächen-Nachbildungen ════════════════════════════════════════════
   Aufbau 1:1 nach der laufenden Anwendung, Inhalte anonymisiert:
   keine echten Kunden-, Fahrer- oder Fahrzeugdaten. */
.ui{
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  background:var(--surface-card); overflow:hidden; font-size:var(--text-body-s);
  box-shadow:var(--shadow-sm);
}
.ui-leiste{
  display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border-subtle); background:var(--surface-sunken);
}
.ui-titel{font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-h4); color:var(--text-strong); margin-right:auto}
.ui-tab{
  padding:6px 13px; font-size:var(--text-caption); border-radius:var(--radius-pill);
  color:var(--text-muted); border:1px solid transparent;
}
.ui-tab.an{background:var(--action-navy); color:var(--text-inverse); font-weight:var(--weight-semibold)}
.ui-knopf{
  padding:6px 13px; font-size:var(--text-caption); font-weight:var(--weight-semibold);
  background:var(--accent); color:var(--on-accent); border-radius:var(--radius-md);
}
.ui-knopf.stumm{background:var(--surface-card); color:var(--text-strong); border:1px solid var(--border-default)}
.ui-zaehler{font-family:var(--font-mono); font-size:11px; padding:1px 7px; border-radius:var(--radius-pill); background:var(--cc-steel-150); margin-left:6px}

/* Plantafel */
.plan{display:grid; grid-template-columns:200px repeat(4,1fr); min-width:800px}
.plan-kopf{
  padding:10px 12px; font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; font-weight:var(--weight-semibold); color:var(--text-muted);
  border-bottom:1px solid var(--border-subtle); border-right:1px solid var(--border-subtle);
}
.plan-lkw{padding:12px; border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle)}
.plan-lkw b{font-family:var(--font-display); font-size:var(--text-h4); color:var(--text-strong); display:block}
.plan-lkw .typ{font-size:var(--text-caption); color:var(--text-muted)}
.plan-lkw .zahlen{font-family:var(--font-mono); font-size:var(--text-data-s); line-height:1.9; margin-top:10px; color:var(--text-muted)}
.plan-lkw .leer{color:var(--status-warn-fg); font-weight:500}
.plan-lkw .erg{font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-h4)}
.plan-lkw .erg.plus{color:var(--status-done-fg)}
.plan-lkw .erg.minus{color:var(--status-alert-fg)}
.plan-zelle{padding:8px; border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle)}
.plan-zeit{font-family:var(--font-mono); font-size:11px; padding:4px 8px; margin-bottom:7px; border-radius:var(--radius-pill); display:inline-block}
.plan-zeit.gut{background:var(--status-done-bg); color:var(--status-done-fg)}
.plan-zeit.eng{background:var(--status-warn-bg); color:var(--status-warn-fg)}
.plan-tour{
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  padding:8px 10px; margin-bottom:7px; background:var(--surface-card); box-shadow:var(--shadow-xs);
}
.plan-tour b{font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:var(--text-body-s); color:var(--text-strong); display:block; margin-bottom:3px}
.plan-tour .preis{font-family:var(--font-mono); font-weight:500; color:var(--text-strong)}
.plan-tour .km{font-family:var(--font-mono); color:var(--text-muted); font-size:var(--text-data-s)}
.plan-leerf{
  font-family:var(--font-mono); font-size:var(--text-data-s); padding:6px 10px; margin-bottom:7px;
  background:var(--surface-sunken); border-radius:var(--radius-sm); color:var(--text-muted);
}
.plan-leerf b{color:var(--status-warn-fg)}

/* Kennzahlen im UI */
.kz{display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:1px; background:var(--border-subtle)}
.kz > div{background:var(--surface-card); padding:16px 18px}
.kz .v{
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:30px;
  color:var(--cc-blue-800); line-height:1; letter-spacing:var(--ls-metric); font-variant-numeric:tabular-nums;
}
.kz .k{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); margin-top:7px; color:var(--text-muted);
}

/* Auftragstabelle */
.ui-tab-wrap{overflow-x:auto}
.ui-tabelle{width:100%; border-collapse:collapse; font-size:var(--text-body-s); min-width:700px}
.ui-tabelle th{
  text-align:left; padding:11px 12px; font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; font-weight:var(--weight-semibold); white-space:nowrap;
  color:var(--text-muted); border-bottom:1px solid var(--border-default);
}
.ui-tabelle td{padding:12px; border-bottom:1px solid var(--border-subtle); vertical-align:top; color:var(--text-body-color)}
.ui-tabelle tbody tr:hover{background:var(--cc-blue-50)}
.ui-tabelle .plz{font-family:var(--font-mono); font-size:var(--text-data-s); color:var(--text-faint); display:block}
.ui-tabelle .ort{font-weight:var(--weight-semibold); color:var(--text-strong)}
.ui-tabelle .nr{font-family:var(--font-mono); font-weight:500; color:var(--text-strong)}
.ui-tabelle .betrag{font-family:var(--font-mono); font-weight:500; color:var(--text-strong)}
.ui-mini{
  padding:5px 12px; font-size:var(--text-caption); font-weight:var(--weight-semibold);
  background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--radius-md);
  display:inline-block; white-space:nowrap;
}
.ui-mini.aus{background:var(--cc-steel-300); color:var(--cc-steel-700)}
.ui-fuss{
  padding:11px 16px; border-top:1px solid var(--border-subtle); background:var(--surface-sunken);
  font-size:var(--text-caption); color:var(--text-muted);
}

/* ══ Mobil ════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .sms-buehne,.erk-buehne,.speak-buehne,.kcc-buehne{grid-template-columns:1fr}
  .gsm-vergleich{grid-template-columns:1fr}
  .handy{width:100%; max-width:340px}
}
@media (max-width:520px){
  .markt-tab{font-size:var(--text-data-s)}
  .markt-tab thead th:nth-child(3),.markt-tab tbody td:nth-child(3){display:none}
  .markt-kpi{grid-template-columns:1fr 1fr}
  .markt-tab thead th,.markt-tab tbody td{padding:10px 8px}
}