:root {
  --wb-primary: #0E518D;
  --wb-muted: #C5C7C4;
}
.wb-navbar { background: var(--wb-primary); }
.btn-primary { background-color: var(--wb-primary); border-color: var(--wb-primary); }
body { background:#f7f7f7; }
#xlsxList .list-group-item, #wcFields .list-group-item { cursor: pointer; }
.map-row-invalid { background: #fff3cd; }

/* Beide Spalten nutzen die Höhe des Viewports minus Kopfzeile */
@media (min-width: 992px) {
  .map-col { height: calc(100vh - 220px); }
}

.pane { display: flex; flex-direction: column; }
.pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Mapping-Tabelle Spaltenbreite harmonisieren */
.map-table th:first-child, .map-table td:first-child { width: 40%; }
.map-table th:last-child, .map-table td:last-child   { width: 60%; }

/* Buttons in Listen angenehm */
#xlsxList .btn, #wcFields .btn { white-space: nowrap; }

:root{
  --rbn-bg: linear-gradient(180deg, #0e4d7a 0%, #0a3d62 100%);
  --rbn-surface: #0a3d62;
  --rbn-text: #ecf2f7;
  --rbn-soft: rgba(255,255,255,.14);
  --rbn-border: rgba(255,255,255,.18);
}

.app-ribbon{
  background: var(--rbn-bg);
  color: var(--rbn-text);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(0,0,0,.15);
  z-index: 1030;
}

.app-ribbon .ribbon-surface{
  padding: 14px 16px 16px 16px;
}

.ribbon-title .brand-dot{
  width: 14px; height: 14px; border-radius: 50%;
  background: #34d399; /* Akzentgrün */
  box-shadow: 0 0 0 3px rgba(52,211,153,.25);
}

.ribbon-eyebrow{
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  opacity: .8; margin-bottom: 2px;
}

.ribbon-h1{
  font-size: clamp(1.1rem, 1.6vw + .6rem, 1.6rem);
  font-weight: 700; line-height: 1.15;
}

.ribbon-actions .btn{
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.chip{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .85rem;
  border: 1px solid var(--rbn-border);
  backdrop-filter: saturate(120%) blur(2px);
  white-space: nowrap;
}
.chip-soft{ background: var(--rbn-soft); color: var(--rbn-text); }

.form-label{ color: rgba(255,255,255,.9); font-weight: 600; }
.form-control{
  background: rgba(255,255,255,.95);
}
.btn-outline-primary{
  --bs-btn-color: #d6eaff;
  --bs-btn-border-color: #9cc7ea;
  --bs-btn-hover-bg: #d6eaff;
  --bs-btn-hover-color: #0a3d62;
  --bs-btn-hover-border-color: #d6eaff;
}
.btn-primary{
  background: #0ea5e9; border-color: #0ea5e9;
}
.btn-success{
  background: #10b981; border-color: #10b981;
}

/* Layout-Feinschliff */
.ribbon-row .form-group{ min-width: 220px; }
.vr{ border-left: 1px solid var(--rbn-border); height: 40px; }

/* Kleinere Screens */
@media (max-width: 576px){
  .ribbon-actions{ justify-content: flex-start; }
  .chip{ display: none; } /* auf Mobile Chips ausblenden, Platz sparen */
}

/* Logo im dunklen Ribbon */
.app-ribbon .brand-logo{
  height: 28px;             /* Desktop */
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* Mobile etwas kleiner */
@media (max-width: 576px){
  .app-ribbon .brand-logo{ height: 22px; }
}

/* Wenn das Logo eher dunkel ist, Kontrast leicht anheben: optional aktivieren */
/*
.app-ribbon .brand-logo{
  filter: brightness(1.05) saturate(1.05) drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
*/
/* Ribbon-Chips veredeln */
.app-ribbon .ribbon-actions { gap: .5rem .5rem; }
.app-ribbon .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:6px 12px; line-height:1;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#ecf2f7;
  box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
}
.app-ribbon .chip i{ opacity:.9; }

/* Zustände */
.chip-ok   { background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.40); }
.chip-warn { background: rgba(234,179,8,.20);  border-color: rgba(234,179,8,.45); }
.chip-bad  { background: rgba(239,68,68,.20);  border-color: rgba(239,68,68,.45); }

.kpi{
  display:flex; gap:.9rem; align-items:center;
  padding:.75rem 1rem; border-radius:.75rem;
  border:1px solid var(--bs-border-color);
  background:#fff;
}
.kpi .icon{
  width:38px; height:38px; border-radius:.6rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}
.kpi .num{ font-weight:700; font-size:1.2rem; line-height:1; }

.btn-outline-primary { --bs-btn-color:#0e65a3; --bs-btn-border-color:#9cc7ea; }
.btn-outline-primary:hover{ background:#d6eaff; border-color:#d6eaff; color:#0a3d62; }
.btn-outline-secondary{ --bs-btn-color:#475569; --bs-btn-border-color:#cbd5e1; }
.btn-outline-secondary:hover{ background:#e2e8f0; border-color:#e2e8f0; color:#0f172a; }

.badge-log { font-size: .72rem; }
.badge-log.info  { background:#e0f2fe; color:#075985; }
.badge-log.warn  { background:#fff3cd; color:#7c5b00; }
.badge-log.error { background:#fee2e2; color:#991b1b; }

/* JSON-Preview */
.jsonbox{
  background:#0f172a; color:#e2e8f0;
  padding:12px 14px; border-radius:8px;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre; overflow: auto; max-height: 60vh;
}
/* Klickbare Listeneinträge */
.list-compact .list-group-item{ cursor: pointer; }

/* Defs: Accordion-Optik light */
.def-group{ border:1px solid var(--bs-border-color); border-radius:.75rem; margin-bottom:1rem; }
.def-head{ padding:.6rem .9rem; background:#f8fafc; border-bottom:1px solid var(--bs-border-color); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.def-body{ padding:.5rem .75rem; display:none; }
.def-open .def-body{ display:block; }
.def-pill{ font-size:.72rem; border-radius:999px; padding:.2rem .5rem; background:#eef2ff; color:#3730a3; }
.table-compact td, .table-compact th{ padding:.35rem .5rem; vertical-align:middle; }

/* Aktivitäten-Log: fester Bereich mit vertikalem Scroll */
.log-pane{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;           /* <- vertikales Scrollen */
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: #fff;
}

/* Log-Tabelle im "Terminal"-Look */
.log-table{
  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  margin-bottom: 0;
  white-space: nowrap;      /* wie echter Log; lange Messages umbrechen wir selektiv */
}
@media (max-width: 576px){
  .log-table{ font-size: 11.5px; }
}

/* Kompaktere Zellen */
.log-table th, .log-table td{
  padding: .25rem .5rem;
  vertical-align: middle;
}

/* Sticky Header, damit Spalten sichtbar bleiben */
.log-table thead th{
  position: sticky; top: 0;
  background: #f8fafc;
  z-index: 1;
  border-bottom: 1px solid var(--bs-border-color);
}

/* dezente Trennlinien zwischen Zeilen */
.log-table tbody tr + tr td{
  border-top-style: dashed;
  border-top-color: #e2e8f0;
}

/* Zeitspalte leicht abgetönt */
.log-table td:first-child{
  color: #64748b;
}

/* Wenn ein Eintrag viel Kontext-Text hat, nur diesen Teil umbrechen */
.log-table .wrap{
  white-space: normal;
  word-break: break-word;
}

/* Dashboard-Grid auf feste Viewport-Höhe setzen */
.dash-row{
  height: calc(100vh - 180px); /* Header + Abstände grob rausgerechnet */
}
.dash-row > [class*="col-"]{
  display: flex;
}
.dash-row .card{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.dash-row .card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* wichtig für Scroll-Children */
}

/* Aktivitäten-Log: eigener Scrollbereich */
.log-pane{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;   /* vertikal scrollen */
  overflow-x: hidden; /* keine horizontale Wurst */
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: #fff;
}

/* Log-Tabelle: klein, monospace, sticky Header */
.log-table{
  font: 11.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  margin-bottom: 0;
  table-layout: fixed;   /* Spaltenbreiten respektieren */
  width: 100%;
}
.log-table th, .log-table td{
  padding: .25rem .5rem;
  vertical-align: middle;
  white-space: nowrap;   /* default: einzeilig wie „echter Log“ */
}
.log-table thead th{
  position: sticky; top: 0;
  background: #f8fafc;
  z-index: 1;
  border-bottom: 1px solid var(--bs-border-color);
}
.log-table tbody tr + tr td{
  border-top-style: dashed;
  border-top-color: #e2e8f0;
}
.log-table td:first-child{ color: #64748b; }

/* Nur die frei formulierte Nachricht darf umbrechen */
.log-table .wrap{
  white-space: normal;
  word-break: break-word;
}

/* Weg mit der Zwangs-Viewport-Höhe */
.dash-row{ height:auto; }
.dash-row > [class*="col-"]{ display:block; }

/* Karten dürfen maximal so hoch sein wie die linke Referenz-Karte */
.dash-row .card{
  max-height: var(--dash-maxh, none);
  display: flex;
  flex-direction: column;
}

/* Log-Pane scrollt innerhalb der Karte und respektiert reservierten Platz */
.log-pane{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: #fff;

  /* Gesamthöhe der Karte minus Titel/Buttons/Polster im Log-Body */
  max-height: calc(var(--dash-maxh, 420px) - var(--log-reserved, 140px));
}

/* Log wie Terminal, klein bleiben */
.log-table{
  font: 11.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  margin-bottom: 0; table-layout: fixed; width: 100%;
}
.log-table th,.log-table td{ padding:.25rem .5rem; white-space:nowrap; }
.log-table thead th{ position: sticky; top:0; background:#f8fafc; z-index:1; }

/* Mobile: keine Max-Höhe erzwingen, natürlicher Fluss */
@media (max-width:1199.98px){
  .dash-row .card{ max-height:none; }
  .log-pane{ max-height:320px; } /* angenehmer Fallback */
}

/* Sub-Toolbar unter dem Haupt-Ribbon */
.app-subbar{
  background: #f1f5f9;           /* helles Grau/Slate */
  padding: .5rem .75rem;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.app-subbar .form-label{ font-size:.75rem; color:#64748b; }
.app-subbar .vr{ height: 28px; }

/* Optional: leicht sticky, damit die Tools oben bleiben */
@media (min-width: 992px){
  .app-subbar.sticky-top{ top: 64px; }  /* wenn dein Header ~64px hoch ist */
}
/* === Mapping UX compact === */

/* Tech-Schrift für Listen & Tabelle */
.tech {
  font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .01em;
}

/* Zwei Listen-Karten optisch schmaler machen und deren Höhe deckeln */
.mapping-two-cols { max-width: 1200px; margin-inline: auto; } /* zentriert auf breiten Screens */

@media (min-width: 992px){
  .pane.compact { max-height: 420px; }   /* Deckel für Kartenhöhe */
  .map-col { height: auto !important; }  /* alte viewport-Höhe kassieren */
}

/* kompakte Listeneinträge */
.list-compact .list-group-item{
  padding: .35rem .5rem;
  border-color: #e2e8f0;
}
.list-compact .list-group-item + .list-group-item{
  border-top-style: dashed;
}

/* Mapping-Tabelle präsenter & kompakt */
.map-table{
  font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  border-top: 2px solid #0ea5e9; /* feine Akzentkante oben */
}
.map-table th, .map-table td{ padding: .4rem .6rem; }
.map-table thead th{
  position: sticky; top: 0; z-index: 1;
  background: #fff; border-bottom: 1px solid #e2e8f0;
}
.map-table tbody tr:hover td{ background: #f8fafc; }

/* Kopfzeilen der Karten knapper */
.card-header{ padding: .5rem .75rem; }

/* Subbar Abstand minimieren */
.app-subbar{ padding: .4rem .75rem; }
.app-subbar .form-control-sm{ height: 32px; padding: .25rem .5rem; }

/* Gemeinsame Maxbreite für oben + Mapping unten */
.mapping-max { max-width: 1600px; margin-inline: auto; }

/* Kartenkörper: nur vertikal scrollen, niemals horizontal */
.pane .card-body,
.pane-body{
  overflow-y: auto;
  overflow-x: hidden;
}

/* Listen kompakter + sauber umbrechen; Badges bleiben einzeilig */
.list-compact .list-group-item{
  padding: .35rem .5rem;
  border-color: #e2e8f0;
  white-space: normal;
  word-break: break-word;
}
.list-compact .badge{ white-space: nowrap; }

/* Mapping-Tabelle: kompakt, technisch, ohne Weißwüste */
.map-table{
  font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  table-layout: auto;
  border-top: 2px solid #0ea5e9;
}
.map-table th, .map-table td{ padding: .35rem .5rem; }
.map-table thead th{
  position: sticky; top: 0; z-index: 1;
  background: #fff; border-bottom: 1px solid #e2e8f0;
}
.map-table tbody tr:hover td{ background: #f8fafc; }

/* Letzte Spalte: Select + "Aufheben" auf einer Linie */
.map-table td:last-child{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.map-table td:last-child .form-select{
  flex: 0 1 520px;            /* genug Platz, bricht aber nicht das Layout */
  min-width: 260px;
}
.map-table td:last-child .btn-link{
  padding: 0;                 /* nicht nach Button aussehen */
  line-height: 1.2;
}

/* Obere zwei Karten: dezent höher, aber nicht viewport-hoch */
.pane.compact{ max-height: 420px; }
@media (max-width: 991.98px){
  .pane.compact{ max-height: none; }
}

/* Tabellen-Optik */
.imp-table td { vertical-align: middle; }

/* Container für mehrere Assets in einer Zelle */
.asset-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Thumbnails */
.imp-thumb{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .12s ease;
}
.imp-thumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Badges für Video/Datei/Text */
.asset-badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .45rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font: 12px/1.2 ui-monospace, Menlo, Consolas, monospace;
}
.asset-vid { background: #eef6ff; border-color: #cfe3ff; }
.asset-file{ background: #f8fafc; }
.asset-text{ background: #f8fafc; color:#64748b; }

/* Button-Reset für Medien-Klicks */
.asset-view{
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  line-height: 0;
  cursor: zoom-in; /* Bilder */
}
.asset-view[data-kind="video"],
.asset-view[data-kind="file"]{ cursor: pointer; }

/* Asset-Leiste wie gehabt */
.asset-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Monospace für normalen Text */
.text-mono{ font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Modal insgesamt nicht zu breit */
#assetModal .modal-dialog{
  max-width: min(96vw, 1280px);
}

/* Body: zentrieren, dunkler Hintergrund, nicht höher als der Viewport minus Header/Footer */
#assetModal .asset-modal-body{
  background:#0b1324;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;                          /* falls Medien größer sind -> scrollen statt auslaufen */
  max-height: calc(100vh - 180px);        /* Header + Footer + etwas Luft */
}

/* Ein Stil für beide: Bild & Video passen sich an und bleiben im Rahmen */
.viewer-media{
  max-width: 90vw;
  max-height: calc(100vh - 220px);        /* noch etwas weniger als Body, damit nix anstößt */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  background:#000;                        /* für Videos hübsch */
}

/* HTML-Vorschaukasten in der Tabelle */
.html-box{
  max-width: 520px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.html-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Tabellenkopf-Typografie */
.imp-th .hdr{
  display:inline-block;
  max-width:22ch;                 /* 22 Zeichen */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}
.imp-th.full .hdr{
  max-width:none;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

/* optional: auch Ziel-Feld kürzen, gleiches Verhalten */
.imp-th .hdr-dst{ max-width:22ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.imp-th.full .hdr-dst{ max-width:none; white-space:normal; overflow:visible; }

 /* Weclapp-Liste kompakter & technisch */
  #list-weclapp .list-group-item{ padding:.5rem .75rem; }
  #list-weclapp .fld-label{ font-weight:600; font-size:.95rem; line-height:1.05; }
  #list-weclapp .fld-key{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size:.8rem; color:#6c757d; /* Bootstrap muted */
    display:block;
  }
  #list-weclapp .badge{ opacity:.9; }

/* compact, technical look for the key line under the label */
.field-item .keyline,
.imp-field-sub,
.text-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .8rem;
  opacity: .8;
}

/* Kleiner, monospace-ähnlich wie links */
  #wcFields .list-group-item {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .85rem;
    line-height: 1.2;
    padding: .5rem .75rem;
  }
  #wcFields .text-muted.small {
    font-size: .75rem;
  }
  #mapTable td { vertical-align: middle; }
  #mapTable .form-select.form-select-sm { font-size: .85rem; }
  
  .searchable-select .search-input{
  width:100%;
  margin-bottom:.25rem;
  padding:.25rem .5rem;
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.searchable-select select{
  width:100%;
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Kompakter, technischer Look */
.searchable-select { display:flex; flex-direction:column; gap:4px; }

.searchable-select .searchbox {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .80rem;
  padding: .15rem .35rem;
  color: #6c757d;              /* muted */
  border-color: #ced4da;
}

.searchable-select select.form-select {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .80rem;
}
/* ===== Variants Preview – Look & Feel Update ===== */

/* 1) Typografie & Grundabstände */
:root{
  --vp-text: #0f172a;         /* slate-900 */
  --vp-muted: #64748b;        /* slate-500 */
  --vp-border: #e5e7eb;       /* slate-200 */
  --vp-soft: #f8fafc;         /* slate-50 */
}
body{ color:var(--vp-text); }
.ribbon-h1{ letter-spacing:.1px; }

/* Kopfzeilen wie Action Cards */
.card .card-title{
  display:flex; align-items:center; gap:.5rem; font-weight:800;
}
.card .card-title .bi{ opacity:.8; }

/* 2) Tabellen kompakter & ruhiger */
.table{ font-size:.925rem; }
.table th{ font-weight:700; color:var(--vp-muted); }
.table td, .table th{ vertical-align:middle; }
.table-hover tbody tr:hover{ background:#f8fafc; }
.table-fixed-head thead th{
  position:sticky; top:0; z-index:1; background:linear-gradient(#fff, #fff);
  box-shadow: 0 1px 0 var(--vp-border) inset;
}

/* Pane-Rahmen wie bei den neuen Cards */
.log-pane, .result-pane{
  border:1px solid var(--vp-border);
  border-radius:.75rem;
  box-shadow:0 6px 24px rgba(15,23,42,.04);
}

/* 3) Badges/Chips – kleiner & eleganter */
.pill{
  font-size:.8rem; font-weight:600; color:#334155;
  padding:.18rem .5rem; border-radius:999px;
  border:1px solid var(--vp-border); background:#fff;
}

/* Optionen (Attribut:Wert) – dezenter, schmaler */
.opt-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.78rem; line-height:1;
  padding:.18rem .45rem; border-radius:999px;
  border:1px solid var(--vp-border);
  background:linear-gradient(180deg,#fff, #f9fafb);
  color:#0f172a; margin:2px 6px 2px 0;
  box-shadow:0 1px 0 rgba(15,23,42,.03) inset;
}
.opt-badge .muted{ color:var(--vp-muted); }

/* Ergebnis-Badges für XLSX-Checker – kompakter */
.var-badge{
  font-size:.78rem; line-height:1;
  padding:.18rem .48rem; border-radius:999px; margin:2px 6px 0 0;
  border:1px solid;
}
.var-badge.ok{
  background:#ecfdf5; color:#065f46; border-color:#a7f3d0;
}
.var-badge.miss{
  background:#fef2f2; color:#991b1b; border-color:#fecaca;
}

/* 4) Subbar (Filterleiste) feiner abstimmen */
.ribbon-subbar{
  margin:.5rem calc(var(--pad-x,16px)*-1) 0;
  padding:.75rem var(--pad-x,16px);
  background:#ffffffc9; backdrop-filter:saturate(105%) blur(2px);
  border-top:1px solid var(--vp-border);
}
.ribbon-subbar .form-label{
  margin-bottom:.2rem; font-size:.85rem; color:var(--vp-muted); font-weight:700;
}
.ribbon-subbar .input-group-text{ background:#fff; border-color:var(--vp-border); }
.ribbon-subbar .form-control,
.ribbon-subbar .form-select{
  border-color:var(--vp-border);
}

/* 5) Kopfzellen/IDs in Mono, aber leichter */
.tech{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.text-muted{ color:var(--vp-muted) !important; }

/* 6) CTA-Buttons fein rund – Angleichen */
.btn{ border-radius:.6rem; }
.btn-outline-secondary, .btn-outline-primary{ border-color:var(--vp-border); }

/* 7) Responsive Feinschliff für kleinere Screens */
@media (max-width: 992px){
  .table{ font-size:.9rem; }
  .opt-badge, .var-badge{ font-size:.76rem; }
}

/* 8) Sanfte Zeilen-Trenner in Tabellenkörper, kein harter Grid */
#tbody tr + tr td, #xlResultBody tr + tr td{
  border-top:1px dashed rgba(148,163,184,.35);
}