/* Praxisdemo: außen Website-Stil, innen nachgebaute Programmfenster. */

/* ---------- Seitenkopf ---------- */
.demo-kopf { padding: 132px 0 44px; color: var(--white); background: var(--ink); }
.demo-label { display: inline-block; margin: 0 0 18px; padding: 4px 10px; color: #9ebcfb; border: 1px solid rgba(158, 188, 251, .45); border-radius: 2px; font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.demo-kopf h1 { max-width: 760px; margin: 0 0 14px; color: var(--white); font-size: clamp(36px, 5vw, 58px); line-height: 1.05; }
.demo-kopf h1 span { color: #9ebcfb; }
.demo-lead { max-width: 560px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.5; }

/* ---------- Demo-Bereich und Szenario-Karten ---------- */
.demo-bereich { padding: 36px 0 64px; background: #f4f6f9; }
.szenarien-titel { margin: 0 0 12px; color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.szenarien-titel b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 4px; color: #fff; background: var(--blue); border-radius: 50%; font-size: 14px; }
.szenarien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 30px; scroll-margin-top: 96px; }
.szenario { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 172px; padding: 18px 18px 16px; text-align: left; color: var(--ink); background: var(--white); border: 2px solid #cdd5df; border-radius: 4px; font: inherit; cursor: pointer; box-shadow: 4px 4px 0 transparent; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease; }
.szenario:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 4px 4px 0 #cdd5df; }
.szenario[aria-selected="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 #9ebcfb; transform: none; }
.szenario[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 22px; height: 22px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.szenario-oben { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.szenario-nr { color: var(--blue); font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; }
.szenario[aria-selected="true"] .szenario-nr { color: #9ebcfb; }
.szenario-apps { display: inline-flex; align-items: center; gap: 5px; }
.chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; border-radius: 5px; font: 800 15px/1 "Segoe UI", system-ui, sans-serif; }
.chip-o { background: #0f6cbd; } .chip-w { background: #185abd; } .chip-x { background: #107c41; }
.chip-ordner { position: relative; width: 32px; height: 24px; margin-top: 4px; background: #f8c544; border-radius: 2px 4px 4px 4px; }
.chip-ordner::before { content: ""; position: absolute; left: 0; top: -5px; width: 13px; height: 7px; background: #e0a800; border-radius: 2px 3px 0 0; }
.chip-pfeil { color: #8a96a8; font-weight: 700; }
.szenario-titel { flex: 1; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.25; }
.szenario-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.szenario-programm { color: var(--ink-soft); font-size: 13.5px; }
.szenario[aria-selected="true"] .szenario-programm { color: rgba(255, 255, 255, .72); }
.szenario-cta { color: var(--blue); font-size: 14.5px; font-weight: 700; }
.szenario .cta-an, .szenario[aria-selected="true"] .cta-aus { display: none; }
.szenario[aria-selected="true"] .cta-an { display: inline; color: #9ebcfb; }
.demo-weiter { display: inline-flex; align-items: center; min-height: 48px; margin-top: 18px; padding: 10px 18px; color: var(--white); background: var(--blue); border: 0; border-radius: 2px; font-family: var(--font-display); font-size: 15px; font-weight: 700; cursor: pointer; }
.demo-weiter:hover { background: var(--ink); }
.szenario:focus-visible, .demo-weiter:focus-visible, .demo-panel button:focus-visible, .demo-panel input:focus-visible, .demo-panel [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.demo-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.demo-schritte { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.demo-schritte li { counter-increment: schritt; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14.5px; font-weight: 600; }
.demo-schritte li::before { content: counter(schritt); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--ink-soft); border: 1px solid #b9c3d0; border-radius: 50%; font-family: var(--font-display); font-size: 12px; }
.demo-schritte li.ist-aktiv { color: var(--ink); }
.demo-schritte li.ist-aktiv::before { color: var(--white); background: var(--blue); border-color: var(--blue); }
.demo-schritte li.ist-erledigt::before { content: "✓"; color: var(--white); background: #1b7a45; border-color: #1b7a45; }
.demo-reset { min-height: 44px; padding: 8px 14px; color: var(--ink); background: transparent; border: 1px solid #b9c3d0; border-radius: 2px; font-weight: 600; cursor: pointer; }
.demo-reset:hover { border-color: var(--ink); }

.demo-status { min-height: 26px; margin: 14px 0 0; padding-left: 12px; color: var(--ink); border-left: 3px solid var(--blue); font-weight: 600; }
.demo-status[data-art="ok"] { border-color: #1b7a45; }
.demo-status[data-art="hinweis"] { border-color: #c2410c; }
.demo-status[data-art="fehler"] { color: #a12a0a; border-color: #c2410c; }
.demo-hinweis { margin: 18px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.demo-details { margin-top: 26px; max-width: 760px; }
.demo-details summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.demo-details p { margin: 10px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.demo-nojs { padding: 16px; background: var(--white); border: 1px solid #cdd5df; }
html:not(.demo-bereit) .demo-panel { display: none; }

/* Knöpfe im Inneren der Programmfenster */
.demo-knopf { min-height: 44px; padding: 9px 16px; color: #fff; background: var(--app-farbe, #0f6cbd); border: 1px solid transparent; border-radius: 4px; font: 600 14px/1.2 "Segoe UI", system-ui, -apple-system, sans-serif; cursor: pointer; }
.demo-knopf:hover:not(:disabled) { filter: brightness(.92); }
.demo-knopf:disabled { color: #6b7280; background: #e5e7eb; cursor: not-allowed; }
.demo-knopf.zweit { color: var(--app-farbe, #0f6cbd); background: #fff; border-color: currentColor; }
.demo-knopf.klein { min-height: 40px; padding: 7px 12px; }

/* ---------- Gemeinsamer Fensterrahmen ---------- */
.app { overflow: hidden; color: #242424; background: #fff; border: 1px solid #c8ccd2; border-radius: 8px; box-shadow: 0 18px 40px -24px rgba(16, 36, 62, .45); font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
.app-titel { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; color: #fff; background: var(--app-farbe); }
.app-logo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--app-farbe); background: #fff; border-radius: 4px; font-weight: 800; font-size: 13px; }
.app-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.app-suche { flex: 1; max-width: 320px; margin: 0 auto; padding: 4px 10px; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .18); border-radius: 4px; font-size: 13px; }
.app-fensterknoepfe { display: flex; gap: 14px; margin-left: auto; }
.app-fensterknoepfe span { width: 10px; height: 10px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 2px; }
.app-outlook { --app-farbe: #0f6cbd; }
.app-explorer { --app-farbe: #005fb8; }
.app-excel { --app-farbe: #107c41; }
.app-word { --app-farbe: #185abd; }
#demo-mail { --app-farbe: #0f6cbd; }
#demo-zahlen { --app-farbe: #107c41; }
#demo-belege { --app-farbe: #005fb8; }

/* ---------- Outlook ---------- */
.ol-werkzeuge { display: flex; gap: 6px 18px; flex-wrap: wrap; padding: 8px 14px; color: #424242; background: #f5f5f5; border-bottom: 1px solid #e1e1e1; font-size: 13px; }
.ol-werkzeuge .ol-neu { padding: 2px 10px; color: #fff; background: #0f6cbd; border-radius: 4px; }
.ol-raster { display: grid; grid-template-columns: 170px minmax(220px, 290px) minmax(0, 1fr); min-height: 460px; }
.ol-ordner { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: #fafafa; border-right: 1px solid #e1e1e1; }
.ol-ordner span { padding: 6px 10px; border-radius: 4px; }
.ol-ordner .ist-aktiv { background: #dcebfa; font-weight: 600; }
.ol-ordner b { float: right; color: #0f6cbd; }
.ol-ordner-titel { color: #616161; font-size: 12px; font-weight: 600; }
.ol-spalte { border-right: 1px solid #e1e1e1; }
.ol-spalte-titel { margin: 0; padding: 12px 14px 8px; font-size: 16px; font-weight: 600; }
.ol-liste { margin: 0; padding: 0; list-style: none; }
.ol-mail { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 10px 14px; text-align: left; color: #242424; background: #fff; border: 0; border-bottom: 1px solid #ededed; border-left: 3px solid transparent; font: inherit; cursor: pointer; }
.ol-mail:hover { background: #f5f9fd; }
.ol-mail.ist-aktiv { background: #dcebfa; border-left-color: #0f6cbd; }
.ol-mail-von { font-weight: 700; }
.ol-mail-zeit { color: #616161; font-size: 12px; }
.ol-mail-betreff { grid-column: 1 / -1; color: #0f6cbd; font-size: 13.5px; }
.ol-mail-vorschau { grid-column: 1 / -1; overflow: hidden; color: #616161; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ist-uebernommen .ol-mail-vorschau { color: #1b7a45; font-weight: 600; }
.ol-leer { display: flex; align-items: center; justify-content: center; color: #8a8a8a; }
.ol-lesen { min-width: 0; padding: 18px 22px 22px; }
.ol-zurueck { display: none; }
.ol-betreff { margin: 0 0 12px; font: 600 19px/1.3 "Segoe UI", system-ui, sans-serif; color: #242424; letter-spacing: 0; }
.ol-absender { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ol-absender small { color: #616161; }
.ol-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; color: #fff; background: #8764b8; border-radius: 50%; font-weight: 700; }
.ol-text { margin: 0 0 16px; padding: 12px 14px; background: #fafafa; border: 1px solid #ededed; border-radius: 4px; }
.ol-text p { margin: 0; overflow-wrap: anywhere; }

.auftrag { margin-top: 4px; padding: 14px; background: #f3f9ff; border: 1px solid #b4d3f2; border-radius: 6px; }
.auftrag-titel { margin: 0 0 10px; color: #0f6cbd; font-weight: 700; }
.auftrag-felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 12px; }
.auftrag-feld { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.auftrag-label, .auftrag-feld label { color: #616161; font-size: 13px; }
.auftrag-wert { font-weight: 600; overflow-wrap: anywhere; }
.auftrag-feld.fehlt { padding: 8px; background: #fff4ec; border: 1px solid #f2b48f; border-radius: 4px; }
.auftrag-feld.fehlt small { grid-column: 2; color: #a12a0a; font-size: 12.5px; }
.auftrag-ergaenzen { display: flex; gap: 8px; }
.auftrag-ergaenzen input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid #c8ccd2; border-radius: 4px; font: inherit; }

/* ---------- Word ---------- */
.word-menue, .xl-menue { display: flex; gap: 4px 18px; flex-wrap: wrap; padding: 6px 14px 0; background: #fff; font-size: 13px; }
.word-menue span, .xl-menue span { padding-bottom: 6px; color: #424242; }
.word-menue .ist-aktiv, .xl-menue .ist-aktiv { color: var(--app-farbe); border-bottom: 2px solid var(--app-farbe); font-weight: 600; }
.word-band { display: flex; gap: 12px; align-items: center; padding: 8px 14px; background: #f5f5f5; border-bottom: 1px solid #e1e1e1; font-size: 13px; }
.word-schrift { min-width: 90px; padding: 2px 8px; background: #fff; border: 1px solid #d1d1d1; border-radius: 3px; }
.word-flaeche { padding: 26px 16px; background: #e9e9e9; }
.word-blatt { position: relative; max-width: 640px; margin: 0 auto; padding: 48px 52px; color: #1f1f1f; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .14); font-family: "Aptos", "Segoe UI", system-ui, sans-serif; }
.word-blatt h4 { margin: 18px 0 10px; font-size: 18px; font-family: inherit; letter-spacing: 0; }
.word-blatt p { margin: 0 0 8px; }
.word-stempel { position: absolute; top: 16px; right: 16px; margin: 0; padding: 3px 8px; color: #a12a0a; border: 1.5px solid #a12a0a; border-radius: 3px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; transform: rotate(3deg); }
.word-absender { color: #185abd; font-weight: 700; }
.word-anschrift { color: #424242; font-size: 13.5px; }
.word-tabelle { width: 100%; margin: 10px 0 14px; border-collapse: collapse; font-size: 13.5px; }
.word-tabelle th, .word-tabelle td { padding: 7px 8px; text-align: left; border: 1px solid #c8ccd2; vertical-align: top; }
.word-tabelle th { background: #eef3fb; }
.word-fuss { margin-top: 18px !important; color: #6b7280; font-size: 12px; }
.word-aktionen { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid #e1e1e1; }

/* ---------- Excel ---------- */
.xl-modus { display: inline-flex; flex-wrap: wrap; margin: 0 0 12px; border: 1px solid #b9c3d0; border-radius: 2px; }
.xl-modus button { min-height: 44px; padding: 8px 14px; color: var(--ink); background: #fff; border: 0; font: 600 14px/1.2 var(--font-body, system-ui); cursor: pointer; }
.xl-modus button + button { border-left: 1px solid #b9c3d0; }
.xl-modus button[aria-pressed="true"] { color: #fff; background: #107c41; }
.xl-formelzeile { display: flex; align-items: center; gap: 0; margin: 0; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #d4d4d4; background: #fff; font-size: 13px; }
.xl-namensfeld { min-width: 64px; padding: 5px 8px; border-right: 1px solid #d4d4d4; font-weight: 600; }
.xl-fx { padding: 5px 10px; color: #8a8a8a; font-style: italic; border-right: 1px solid #d4d4d4; }
.xl-formeltext { overflow: hidden; padding: 5px 10px; font-family: Consolas, "Courier New", monospace; white-space: nowrap; text-overflow: ellipsis; }
.xl-tabelle-rahmen { overflow-x: auto; }
.xl-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.xl-tabelle th, .xl-tabelle td { height: 40px; padding: 0 10px; border: 1px solid #d4d4d4; white-space: nowrap; }
.xl-ecke, .xl-spalte, .xl-zeile { color: #555; background: #f3f3f3; font-weight: 400; font-size: 12.5px; text-align: center; }
.xl-zeile { width: 36px; }
.xl-titel { background: #e8f3ec; color: #0b5a2f; font-weight: 700; text-align: left; white-space: normal; line-height: 1.25; }
.xl-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.xl-editierbar { padding: 0 !important; background: #fffde7; }
.xl-eingabe { width: 100%; min-width: 70px; height: 40px; padding: 0 10px; text-align: right; color: #1f1f1f; background: transparent; border: 0; font: inherit; font-weight: 700; }
.xl-eingabe:focus { outline: 2px solid #107c41 !important; outline-offset: -2px; background: #fff; }
.xl-eingabe.ist-fehler { color: #a12a0a; background: #fdecea; }
.xl-formel { position: relative; color: #0b5a2f; font-weight: 600; cursor: default; }
.xl-formel:focus { outline: 2px solid #107c41; outline-offset: -2px; }
.xl-formel.ist-knapp, .xl-balken-wert.ist-knapp { color: #b4440a; }
.xl-formel.ist-veraltet { color: #8a8a8a; background: #fdecea; text-decoration: line-through; }
.xl-marke { display: inline-block; margin-left: 6px; padding: 0 5px; color: #fff; background: #c2410c; border-radius: 3px; font-size: 10.5px; font-weight: 700; text-decoration: none; vertical-align: middle; }
.ist-neu { animation: demo-aufleuchten 1.2s ease; }
@keyframes demo-aufleuchten { 0% { background: #c9f0d6; } 100% { background: transparent; } }
.xl-uebersicht { margin: 14px; padding: 14px; border: 1px solid #d4d4d4; border-radius: 4px; }
.xl-uebersicht.ist-veraltet { background: #fff8f6; border-color: #f2b48f; }
.xl-uebersicht-titel { margin: 0 0 10px; font-weight: 700; }
.xl-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.xl-kennzahlen div { padding: 8px 10px; background: #f3f8f5; border-radius: 4px; }
.xl-kennzahlen dt { color: #555; font-size: 12.5px; }
.xl-kennzahlen dd { margin: 0; color: #0b5a2f; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xl-uebersicht.ist-veraltet .xl-kennzahlen dd { color: #8a8a8a; }
.xl-balken { display: grid; gap: 8px; }
.xl-balken-zeile { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; }
.xl-balken-spur { position: relative; height: 14px; background: #eef0f2; border-radius: 2px; }
.xl-balken-wert { position: absolute; inset: 0 auto 0 0; background: #107c41; border-radius: 2px; transition: width 300ms ease; }
.xl-balken-wert.ist-knapp { background: #e07b39; }
.xl-uebersicht.ist-veraltet .xl-balken-wert { background: #b8b8b8; }
.xl-balken-min { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #242424; }
.xl-balken-zahl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.xl-legende { margin: 10px 0 0; color: #616161; font-size: 12.5px; }
.xl-blaetter { display: flex; gap: 2px; padding: 0 10px; background: #f3f3f3; border-top: 1px solid #d4d4d4; font-size: 12.5px; }
.xl-blaetter span { padding: 6px 14px; color: #555; }
.xl-blaetter .ist-aktiv { color: #107c41; background: #fff; border-bottom: 2px solid #107c41; font-weight: 600; }

/* ---------- Abschluss ---------- */
.demo-cta { padding: 56px 0; background: var(--white); border-top: 1px solid var(--line); }
.demo-cta-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.demo-cta h2 { flex: 1 1 320px; margin: 0; font-size: clamp(26px, 3vw, 36px); }
.demo-cta-link { color: var(--blue-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Tablet und Handy: vereinfachte Fenster ---------- */
@media (max-width: 1000px) {
  .ol-raster { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
  .ol-ordner { display: none; }
}
@media (max-width: 700px) {
  .demo-kopf { padding: 104px 0 32px; }
  .demo-lead { font-size: 16.5px; }
  .app-suche, .ol-werkzeuge span:not(.ol-neu), .app-fensterknoepfe { display: none; }
  .ol-raster { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ol-spalte { border-right: 0; }
  .ol-raster.hat-auswahl .ol-spalte { display: none; }
  .ol-raster:not(.hat-auswahl) .ol-lesen, .ol-raster:not(.hat-auswahl) .ol-leer { display: none; }
  .ol-zurueck { display: inline-block; min-height: 44px; margin: 0 0 8px; padding: 0; color: #0f6cbd; background: none; border: 0; font: 600 14px/1 "Segoe UI", system-ui, sans-serif; cursor: pointer; }
  .ol-lesen { padding: 14px; }
  .auftrag-feld { grid-template-columns: minmax(0, 1fr); }
  .auftrag-feld.fehlt small { grid-column: 1; }
  .word-menue, .xl-menue { display: none; }
  .word-flaeche { padding: 12px 8px; }
  .word-blatt { padding: 40px 18px 22px; }
  .word-tabelle, .word-tabelle tbody, .word-tabelle tr, .word-tabelle td { display: block; width: 100%; }
  .word-tabelle thead { display: none; }
  .word-tabelle td { border: 0; border-bottom: 1px solid #e1e1e1; padding: 6px 0; }
  .xl-modus { display: grid; grid-template-columns: 1fr; width: 100%; }
  .xl-modus button + button { border-left: 0; border-top: 1px solid #b9c3d0; }
  .xl-spalte, .xl-ecke, .xl-zeile { display: none; }
  .xl-tabelle th, .xl-tabelle td { padding: 0 6px; font-size: 13px; }
  .xl-eingabe { min-width: 54px; height: 44px; padding: 0 6px; }
  .xl-tabelle th, .xl-tabelle td { height: 44px; }
  .xl-tabelle .xl-text, .xl-tabelle tr > .xl-titel:nth-child(2) { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #d4d4d4; }
  .xl-tabelle tr > .xl-titel:nth-child(2) { background: #e8f3ec; }
  .xl-kennzahlen dd { font-size: 18px; }
  .xl-balken-zeile { grid-template-columns: 88px minmax(0, 1fr) 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ist-neu { animation: none; }
  .xl-balken-wert, .szenario { transition: none; }
  .szenario:hover { transform: none; }
}

@media (max-width: 700px) { .auftrag-ergaenzen input, .demo-knopf.klein { min-height: 44px; } }

/* Excel: Bedienhilfe und Artikelkarten fürs Handy. Desktop bleibt Tabelle. */
.xl-hilfe { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; color: #3d3d3d; background: #fff; border-bottom: 1px solid #e1e1e1; font-size: 13.5px; font-weight: 600; }
.xl-hilfe-farbe { flex: none; width: 16px; height: 16px; background: #fff3a6; border: 1px solid #d9b300; border-radius: 2px; }
.xl-editierbar { background: #fff3a6; }
.xl-eingabe { box-shadow: inset 0 0 0 1px #d9b300; }
.xl-karten { display: none; }
@media (max-width: 700px) {
  .xl-tabelle-rahmen { display: none; }
  .xl-karten { display: grid; gap: 10px; margin: 0; padding: 12px; list-style: none; background: #f7f7f7; }
  .xl-karte { padding: 12px; background: #fff; border: 1px solid #d4d4d4; border-radius: 4px; }
  .xl-karte-name { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; color: #0b5a2f; font-size: 16px; font-weight: 700; }
  .xl-karte-zeile { color: #8a8a8a; font-size: 12.5px; font-weight: 400; }
  .xl-karte-eingaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
  .xl-karte-feld label { display: block; margin-bottom: 4px; color: #3d3d3d; font-size: 13.5px; font-weight: 600; }
  .xl-karte-feld .xl-eingabe { width: 100%; height: 48px; padding: 0 12px; text-align: right; background: #fff3a6; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #d9b300; font-size: 18px; }
  .xl-karte-feld .xl-eingabe:focus { box-shadow: inset 0 0 0 2px #107c41; outline: 0 !important; }
  .xl-karte-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .xl-karte-werte > div { padding: 6px 8px; background: #f3f3f3; border-radius: 4px; }
  .xl-karte-werte .xl-karte-ergebnis { background: #e8f3ec; }
  .xl-karte-werte .xl-karte-ergebnis.ist-veraltet { background: #fdecea; }
  .xl-karte-werte dt { color: #555; font-size: 12.5px; }
  .xl-karte-werte dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .xl-karte-werte dd.xl-formel { color: #0b5a2f; }
  .xl-karte-werte dd.ist-knapp { color: #b4440a; }
  .xl-karte-werte dd.ist-veraltet { color: #8a8a8a; text-decoration: line-through; }
  .xl-karte-werte .xl-marke { display: block; width: max-content; margin: 2px 0 0; text-decoration: none; }
}
/* ---------- Explorer (Belege) ---------- */
.app-explorer .app-titel { color: #1f1f1f; background: #eef1f5; border-bottom: 1px solid #dde2e8; }
.app-explorer .app-logo { position: relative; width: 20px; height: 15px; margin-top: 3px; background: #f8c544; border-radius: 1px 3px 3px 3px; }
.app-explorer .app-logo::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 5px; background: #e0a800; border-radius: 2px 2px 0 0; }
.app-explorer .app-fensterknoepfe span { border-color: #6b6b6b; }
.ex-befehle { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px; color: #424242; background: #f9fafb; border-bottom: 1px solid #e5e5e5; font-size: 13px; }
.ex-befehle .ex-neu { padding: 2px 10px; color: #fff; background: #005fb8; border-radius: 4px; }
.ex-adresse { display: flex; align-items: center; gap: 12px; padding: 6px 14px; background: #fff; border-bottom: 1px solid #e5e5e5; font-size: 13px; }
.ex-pfeile { color: #8a8a8a; white-space: pre; }
.ex-pfad { display: inline-flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px; background: #f3f3f3; border: 1px solid #e1e1e1; border-radius: 4px; font-weight: 600; }
.ex-suche { width: 160px; padding: 5px 10px; color: #8a8a8a; background: #f3f3f3; border: 1px solid #e1e1e1; border-radius: 4px; }
.ex-ordner-icon { position: relative; display: inline-block; flex: none; width: 16px; height: 12px; margin-top: 3px; background: #f8c544; border-radius: 1px 2px 2px 2px; }
.ex-ordner-icon::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 4px; background: #e0a800; border-radius: 1px 2px 0 0; }
.ex-raster { display: grid; grid-template-columns: 180px minmax(0, 1fr) 270px; min-height: 470px; }
.ex-baum { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; background: #fafafa; border-right: 1px solid #e5e5e5; font-size: 13.5px; }
.ex-baum span { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; }
.ex-baum .ebene-1 { padding-left: 22px; } .ex-baum .ebene-2 { padding-left: 36px; }
.ex-baum .ist-aktiv { background: #cce4f7; font-weight: 600; }
.ex-baum b { margin-left: auto; color: #005fb8; font-size: 12px; }
.ex-mitte { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #e5e5e5; }
.ex-liste { flex: 1; padding: 6px 0; }
.ex-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; padding: 4px 14px 6px 46px; color: #616161; border-bottom: 1px solid #ededed; font-size: 12.5px; }
.ex-dateien { margin: 0; padding: 0; list-style: none; }
.ex-datei { display: grid; grid-template-columns: 26px minmax(0, 1fr) 100px; gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 6px 14px; text-align: left; color: #1f1f1f; background: #fff; border: 0; border-left: 3px solid transparent; font: inherit; cursor: pointer; }
.ex-datei:hover { background: #f0f6fc; }
.ex-datei.ist-aktiv { background: #cce4f7; border-left-color: #005fb8; }
.ex-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 30px; color: #fff; border-radius: 2px 7px 2px 2px; font-size: 8.5px; font-weight: 800; letter-spacing: .02em; }
.ex-icon-pdf { background: #c43e1c; }
.ex-icon-jpg { background: #2e8bc7; }
.ex-datei-text { display: flex; flex-direction: column; min-width: 0; }
.ex-datei-name { font-weight: 600; overflow-wrap: anywhere; }
.ex-datei-unter { color: #616161; font-size: 12.5px; overflow-wrap: anywhere; }
.ex-datei-datum { color: #616161; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ex-gruppe { margin: 0 0 6px; }
.ex-gruppe-titel { display: flex; align-items: center; gap: 8px; margin: 8px 14px 2px; padding-bottom: 4px; color: #1f1f1f; border-bottom: 1px solid #ededed; font-weight: 700; }
.ex-gruppe-zahl { margin-left: auto; color: #616161; font-size: 12.5px; font-weight: 400; }
.ex-leer { margin: 4px 14px 6px 50px; color: #8a8a8a; font-size: 13px; }
.ex-gruppe.ist-pruefen { margin: 10px 10px; background: #fff4ec; border: 1px solid #f2b48f; border-radius: 6px; }
.ex-gruppe.ist-pruefen .ex-gruppe-titel { color: #a12a0a; border-color: #f2b48f; }
.ex-gruppe.ist-pruefen .ex-datei { background: transparent; }
.ex-nachtragen { padding: 4px 14px 12px; }
.ex-nachtragen label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.ex-nachtragen-zeile { display: flex; gap: 8px; }
.ex-nachtragen input { flex: 1; min-width: 0; max-width: 180px; min-height: 44px; padding: 6px 10px; background: #fff3a6; border: 1.5px solid #d9b300; border-radius: 4px; font: inherit; font-size: 16px; font-weight: 700; }
.ex-nachtragen input.ist-fehler { background: #fdecea; border-color: #c2410c; }
.ex-nachtragen input:focus { outline: 2px solid #005fb8; outline-offset: 1px; }
.ex-gruppe.ist-doppelt .ex-gruppe-titel { color: #616161; }
.ex-gruppe.ist-doppelt .ex-datei-name { color: #616161; text-decoration: line-through; }
.ex-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; background: #f9fafb; border-top: 1px solid #e5e5e5; }
.ex-aktion span { color: #616161; font-size: 13px; }
.ex-sortieren { min-height: 48px; font-size: 15px; }
.ex-vorschau { min-width: 0; padding: 14px; background: #fafafa; }
.ex-vorschau-leer { display: flex; align-items: center; justify-content: center; color: #8a8a8a; text-align: center; }
.ex-zurueck { display: none; }
.ex-bon { max-width: 230px; margin: 0 auto 14px; padding: 14px 14px 12px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .15); font: 12.5px/1.45 Consolas, "Courier New", monospace; }
.ex-bon p { margin: 0; }
.ex-bon-kopf { font-weight: 700; text-align: center; }
.ex-bon-datum { padding-bottom: 6px; color: #555; text-align: center; border-bottom: 1px dashed #999; }
.ex-bon ul { margin: 6px 0; padding: 0; list-style: none; }
.ex-bon li, .ex-bon-summe { display: flex; justify-content: space-between; gap: 10px; }
.ex-bon-summe { padding-top: 6px; border-top: 1px dashed #999; font-weight: 700; }
.ex-bon.ist-unscharf ul, .ex-bon.ist-unscharf .ex-bon-summe { filter: blur(1.2px); }
.ex-erkannt-titel { margin: 0 0 6px; color: #005fb8; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ex-erkannt { display: grid; gap: 4px; margin: 0; }
.ex-erkannt div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.ex-erkannt dt { color: #616161; }
.ex-erkannt dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ex-erkannt .ist-fehlt dd { color: #a12a0a; }
.ex-statusleiste { padding: 4px 14px; color: #616161; background: #f9fafb; border-top: 1px solid #e5e5e5; font-size: 12px; }
.ex-datei.ist-neu { animation: demo-aufleuchten 1.2s ease; }

@media (max-width: 1000px) {
  .szenario { min-height: 150px; padding: 14px; }
  .szenario-titel { font-size: 17px; }
  .ex-raster { grid-template-columns: minmax(0, 1fr) 240px; }
  .ex-baum { display: none; }
}
@media (max-width: 700px) {
  .szenarien { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 22px; }
  .szenario { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nr titel apps" "nr unten unten"; gap: 4px 12px; align-items: center; min-height: 0; padding: 12px 14px; }
  .szenario[aria-selected="true"]::after { display: none; }
  .szenario-oben { display: contents; }
  .szenario-nr { grid-area: nr; font-size: 28px; }
  .szenario-apps { grid-area: apps; align-self: start; }
  .chip { width: 24px; height: 24px; font-size: 13px; }
  .chip-ordner { width: 28px; height: 20px; }
  .szenario-titel { grid-area: titel; font-size: 16px; }
  .szenario-unten { grid-area: unten; }
  .szenario-programm, .szenario-cta { font-size: 13px; }
  .demo-weiter { width: 100%; justify-content: center; }
  .ex-befehle span:not(.ex-neu), .ex-suche, .ex-pfeile { display: none; }
  .ex-raster { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ex-mitte { border-right: 0; }
  .ex-spalten { display: none; }
  .ex-datei { grid-template-columns: 26px minmax(0, 1fr); padding: 8px 12px; }
  .ex-datei-datum { display: none; }
  .ex-raster:not(.hat-auswahl) .ex-vorschau { display: none; }
  .ex-raster.hat-auswahl .ex-mitte { display: none; }
  .ex-zurueck { display: inline-block; min-height: 44px; margin: 0 0 8px; padding: 0; color: #005fb8; background: none; border: 0; font: 600 14px/1 "Segoe UI", system-ui, sans-serif; cursor: pointer; }
  .ex-sortieren { width: 100%; }
  .ex-nachtragen input { max-width: none; }
}