/* MCD-Cockpit (Neuaufbau 17.10.2026) — eigenes Stylesheet, damit die geteilte
 * index.html nur Container und Skript-Tag trägt. Alles unter .mcdx, Farben wie
 * das bisherige Cockpit (.mcd-cockpit), Farbe nur für Bedeutung. */
.mcdx {
  --x-red: #DA291C; --x-red-dark: #A8200F; --x-gold: #FFC72C; --x-gold-soft: #FFF3C4;
  --x-bg: #F2F2F4; --x-card: #FFFFFF; --x-text: #1D1D1F; --x-dim: #6E6E73; --x-mute: #A8A8AD;
  --x-line: #E5E5EA; --x-good: #007A33; --x-good-bg: #E1F1E5; --x-bad: #B42318; --x-bad-bg: #FDECEA;
  --x-warn: #8A4B00; --x-warn-bg: #FFF4E5; --x-neutral: #3A5A8C; --x-vj: #A8A8AD;
  --x-r: 14px; --x-r-sm: 8px; --x-shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  color: var(--x-text); background: var(--x-bg);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums; padding: 16px; box-sizing: border-box; max-width: 1400px; margin: 0 auto;
}
.mcdx *, .mcdx *::before, .mcdx *::after { box-sizing: border-box; }
.mcdx [hidden] { display: none !important; }
.mcdx button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mcdx button:focus-visible, .mcdx input:focus-visible { outline: 2px solid var(--x-neutral); outline-offset: 2px; }
.mcdx-hinweis, .ibcs-kpi .fuss, .mcdx-karte > header .dim { overflow-wrap: break-word; }
.mcdx h1, .mcdx h2, .mcdx h3 { margin: 0; letter-spacing: -.01em; }
.mcdx .dim { color: var(--x-dim); }
.mcdx .mute { color: var(--x-mute); }
.mcdx .num { text-align: right; white-space: nowrap; }

/* Kopf: Titel, Zeitraum, Vergleich, Filialen */
.mcdx-kopf { position: static; background: var(--x-bg); padding: 4px 0 10px; margin: -4px 0 10px; border-bottom: 1px solid var(--x-line); }
.mcdx-kopf-zeile { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.mcdx-titel { min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mcdx-titel h1 { font-size: 20px; font-weight: 700; text-wrap: balance; }
.mcdx-steuer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
.mcdx-seg { display: inline-flex; min-width: 0; background: var(--x-line); border-radius: 999px; padding: 3px; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.mcdx-seg::-webkit-scrollbar { display: none; }
.mcdx-seg button { border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--x-dim); white-space: nowrap; }
.mcdx-seg button:hover { color: var(--x-text); }
.mcdx-seg button.an { background: var(--x-card); color: var(--x-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mcdx-feld { border: 1px solid var(--x-line); background: var(--x-card); border-radius: var(--x-r-sm); padding: 5px 8px; font: inherit; font-size: 13.5px; }
.mcdx-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.mcdx-nav::-webkit-scrollbar { display: none; }
.mcdx-nav button { border: 0; background: transparent; padding: 8px 12px; border-radius: 10px; font-weight: 600; color: var(--x-dim); white-space: nowrap; font-size: 14px; }
.mcdx-nav button:hover { background: var(--x-line); color: var(--x-text); }
.mcdx-nav button.an, .mcdx-nav button.an:hover { background: var(--x-text); color: #fff; }
.mcdx-filialen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mcdx-chip { border: 1px solid var(--x-line); background: var(--x-card); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.mcdx-chip:hover { border-color: var(--x-dim); }
.mcdx-chip.an { background: var(--x-text); color: #fff; border-color: var(--x-text); }

/* Hinweise: was fehlt oder ausgeklammert ist, wird gesagt */
.mcdx-hinweise { display: grid; gap: 6px; margin: 0 0 12px; }
.mcdx-hinweis { background: var(--x-warn-bg); color: var(--x-warn); border-radius: var(--x-r-sm); padding: 8px 12px; font-size: 13px; }
.mcdx-hinweis.fehler { background: var(--x-bad-bg); color: var(--x-bad); }
.mcdx-hinweis.info { background: #EEF3FA; color: var(--x-neutral); }
.mcdx-laedt { opacity: .55; transition: opacity .15s; }
.mcdx-mehr { justify-self: start; border: 0; background: transparent; color: var(--x-neutral); font-size: 13px; font-weight: 600; padding: 2px 0; }
.mcdx-mehr:hover { text-decoration: underline; }

/* Kennzahlband */
.mcdx-d { display: inline-flex; gap: 3px; align-items: baseline; font-weight: 600; white-space: nowrap; }
.mcdx-d .k { color: var(--x-mute); font-weight: 500; }
.mcdx-d.gut { color: var(--x-good); } .mcdx-d.schlecht { color: var(--x-bad); } .mcdx-d.neutral { color: var(--x-dim); }

/* Karten */
.mcdx-grid { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mcdx-karte { background: var(--x-card); border-radius: var(--x-r); box-shadow: var(--x-shadow); padding: 14px 16px; grid-column: span 12; min-width: 0; }
.mcdx-karte.h6 { grid-column: span 6; } .mcdx-karte.h4 { grid-column: span 4; } .mcdx-karte.h8 { grid-column: span 8; }
.mcdx-karte > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mcdx-karte > header h2 { font-size: 16px; font-weight: 700; }
.mcdx-karte > header .dim { font-size: 12.5px; }
.mcdx-legende { font-size: 12px; color: var(--x-dim); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mcdx-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.mcdx-chart { position: relative; height: 240px; }
.mcdx-chart.hoch { height: 320px; } .mcdx-chart.flach { height: 160px; } .mcdx-chart.abw { height: 90px; }
.ibcs-abw-titel { font-size: 11.5px; color: var(--x-dim); font-weight: 600; margin: 8px 0 0; }

/* Tabellen */
.mcdx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.mcdx-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mcdx-tab th { text-align: left; font-size: 12px; font-weight: 600; color: var(--x-dim); padding: 0; border-bottom: 1px solid var(--x-line); white-space: nowrap; position: sticky; top: 0; background: var(--x-card); }
.mcdx-tab th > button, .mcdx-tab th > span { display: block; width: 100%; text-align: inherit; border: 0; background: transparent; padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--x-dim); white-space: nowrap; }
.mcdx-tab th > button:hover { color: var(--x-text); }
.mcdx-filter { border: 0; background: transparent; padding: 0; font: inherit; text-align: left; color: inherit; text-decoration: underline dotted var(--x-mute); text-underline-offset: 3px; }
.mcdx-filter:hover { color: var(--x-neutral); }
.mcdx-tab th.num { text-align: right; }
.mcdx-tab th .pf { color: var(--x-mute); margin-left: 3px; }
.mcdx-tab td { padding: 7px 8px; border-bottom: 1px solid #F0F0F3; white-space: nowrap; }
.mcdx-tab td:first-child, .mcdx-tab th:first-child { position: sticky; left: 0; background: var(--x-card); z-index: 1; }
.mcdx-tab tr.summe td { font-weight: 700; border-top: 2px solid var(--x-line); background: #FAFAFB; }
.mcdx-tab tr.summe td:first-child { background: #FAFAFB; }
.mcdx-tab tr.klick { cursor: pointer; } .mcdx-tab tr.klick:hover td { background: #FAFAF7; }
.mcdx-tab td.h-g3 { background: rgba(0,122,51,.20); } .mcdx-tab td.h-g2 { background: rgba(0,122,51,.12); } .mcdx-tab td.h-g1 { background: rgba(0,122,51,.05); }
.mcdx-tab td.h-s3 { background: rgba(218,41,28,.20); } .mcdx-tab td.h-s2 { background: rgba(218,41,28,.12); } .mcdx-tab td.h-s1 { background: rgba(218,41,28,.05); }
.mcdx-tab .sub { display: block; font-size: 11px; color: var(--x-mute); font-weight: 500; }
.mcdx-rang { display: inline-block; min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 5px; background: var(--x-line); color: var(--x-dim); }

/* Balken in Zellen (Bullet: Ist gegen Plan) */
.mcdx-bullet { position: relative; height: 14px; background: #F2F2F4; border-radius: 3px; min-width: 120px; }
.mcdx-bullet .ist { position: absolute; left: 0; top: 3px; bottom: 3px; background: var(--x-text); border-radius: 2px; }
.mcdx-bullet .soll { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--x-red); }

/* Handlungsbedarf */
.mcdx-liste { display: grid; gap: 8px; }
.mcdx-fall { width: 100%; text-align: left; font: inherit; color: inherit; border: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, max-content); gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--x-r-sm); background: #FAFAFB; border-left: 3px solid var(--x-line); }
.mcdx-fall.rot { border-left-color: var(--x-bad); } .mcdx-fall.gelb { border-left-color: #E8A33D; }
button.mcdx-fall:hover { background: #F2F2F4; }
.mcdx-fall .was { font-weight: 600; } .mcdx-fall .wo { font-size: 12.5px; color: var(--x-dim); }
.mcdx-fall .zahl { font-weight: 700; text-align: right; max-width: 11em; }
.mcdx-fall { min-width: 0; } .mcdx-fall > div { min-width: 0; }

/* Wasserfall + Heatmap */
.mcdx-heat { display: grid; gap: 2px; font-size: 11px; }
.mcdx-heat .z { display: contents; }
.mcdx-heat .k { padding: 3px 4px; color: var(--x-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcdx-heat .c { height: 20px; border-radius: 3px; }
.mcdx-leer { color: var(--x-mute); padding: 16px 0; text-align: center; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .mcdx-laedt { transition: none; }
}
@media (min-width: 901px) {
  .mcdx-kopf { position: sticky; top: 0; z-index: 5; }
}
@media (max-width: 900px) {
  .mcdx-karte.h6, .mcdx-karte.h4, .mcdx-karte.h8 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .mcdx { padding: 10px; font-size: 14px; }
  .mcdx-karte { padding: 12px; }
  .mcdx-tab { font-size: 12.5px; }
  .mcdx-tab td, .mcdx-tab th { padding: 6px 6px; }
  .mcdx-chart { height: 200px; } .mcdx-chart.hoch { height: 260px; }
  .mcdx-titel h1 { font-size: 17px; }
  .mcdx-steuer { width: 100%; }
  .mcdx-seg { display: flex; width: 100%; }
  .mcdx-seg button { padding: 6px 10px; }
  .mcdx-filialen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .mcdx-filialen::-webkit-scrollbar { display: none; }
  .mcdx-chip { flex: 0 0 auto; }
}

/* ===== IBCS-Startseite „Auf einen Blick" (18.10.2026) =====
 * Notation: IST dunkel gefüllt, VJ grau gefüllt, PL Umriss; grün/rot nur für gut/schlecht. */
.mcdx { --ibcs-ist: #1D1D1F; --ibcs-vj: #B8B8BD; --ibcs-gut: #2E8B57; --ibcs-schlecht: #D0342C; }
.ibcs-botschaft { background: var(--x-card); border-radius: var(--x-r); box-shadow: var(--x-shadow); padding: 16px 18px; margin-bottom: 10px; border-left: 4px solid var(--x-text); }
.ibcs-botschaft .unter { font-size: 12px; color: var(--x-dim); font-weight: 600; letter-spacing: .01em; }
.ibcs-botschaft h2 { font-size: 21px; font-weight: 750; margin: 2px 0 6px; text-wrap: balance; }
.ibcs-botschaft p { margin: 2px 0; font-size: 14.5px; color: var(--x-text); text-wrap: pretty; }
.ibcs-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--x-dim); margin: 0 2px 10px; align-items: center; }
.ibcs-legende i { display: inline-block; width: 12px; height: 9px; margin-right: 5px; vertical-align: 0; border-radius: 1px; }
.ibcs-legende i.ist { background: var(--ibcs-ist); } .ibcs-legende i.vj { background: var(--ibcs-vj); }
.ibcs-legende i.pl { background: transparent; border: 1.5px solid var(--ibcs-ist); }
.ibcs-legende i.gut { background: var(--ibcs-gut); } .ibcs-legende i.schlecht { background: var(--ibcs-schlecht); }
.ibcs-band { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.ibcs-band.frei { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
.ibcs-filialen.n1 .ibcs-zeile { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.9fr) minmax(0, 1fr); }
.ibcs-nadel .stab.neutral { background: var(--x-mute); color: var(--x-mute); } .ibcs-nadel .z.neutral { color: var(--x-dim); }
.ibcs-kpi { background: var(--x-card); border-radius: var(--x-r); box-shadow: var(--x-shadow); padding: 12px 13px 10px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ibcs-kpi .l { font-size: 12.5px; color: var(--x-dim); font-weight: 600; }
.ibcs-kpi .w { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.ibcs-kpi .ist-marke { width: 4px; align-self: stretch; background: var(--ibcs-ist); border-radius: 1px; flex: 0 0 auto; }
.ibcs-kpi .fuss { font-size: 11px; color: var(--x-mute); }
.ibcs-abw { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) 4.8em; align-items: center; gap: 6px; font-size: 12px; }
.ibcs-abw .k { color: var(--x-dim); font-weight: 600; }
.ibcs-abw .spur { position: relative; height: 10px; }
.ibcs-abw .achse, .ibcs-nadel .achse { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--x-text); }
.ibcs-abw .b { position: absolute; top: 1px; bottom: 1px; }
.ibcs-abw .b.gut, .ibcs-nadel .stab.gut { background: var(--ibcs-gut); } .ibcs-abw .b.schlecht, .ibcs-nadel .stab.schlecht { background: var(--ibcs-schlecht); }
.ibcs-abw .b.neutral { background: var(--x-mute); }
/* Über der Skala: Pfeilspitze statt längerem Balken. */
.ibcs-abw .b.ueber::after, .ibcs-nadel .stab.ueber::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; right: -7px; border-left: 7px solid currentColor; }
.ibcs-abw .b.ueber.neg::after, .ibcs-nadel .stab.ueber.neg::after { right: auto; left: -7px; border-left: 0; border-right: 7px solid currentColor; }
.ibcs-abw .b.gut, .ibcs-nadel .stab.gut { color: var(--ibcs-gut); } .ibcs-abw .b.schlecht, .ibcs-nadel .stab.schlecht { color: var(--ibcs-schlecht); }
.ibcs-abw .z { text-align: right; font-weight: 650; white-space: nowrap; }
.ibcs-abw .z.gut { color: var(--ibcs-gut); } .ibcs-abw .z.schlecht { color: var(--ibcs-schlecht); } .ibcs-abw .z.neutral { color: var(--x-dim); }
.ibcs-abw.leer .z { color: var(--x-mute); }
.ibcs-neben { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 2px 2px 12px; }
.mcdx-karte.h5 { grid-column: span 5; } .mcdx-karte.h7 { grid-column: span 7; }
.ibcs-filialen { display: grid; gap: 0; font-size: 13px; }
.ibcs-zeile { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid #F0F0F3; }
.ibcs-zeile.kopf { font-size: 11.5px; color: var(--x-dim); font-weight: 600; border-bottom: 1px solid var(--x-line); }
.ibcs-zeile.kopf span:nth-child(n+3) { text-align: center; }
.ibcs-zeile.summe { border-top: 2px solid var(--x-text); border-bottom: 0; font-weight: 700; }
.ibcs-zeile .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibcs-zeile .ist { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ibcs-ist { display: block; height: 14px; background: var(--ibcs-ist); border-radius: 1px; flex: 0 0 auto; max-width: 70%; }
.ibcs-zeile .ist .z { font-size: 12px; white-space: nowrap; }
.ibcs-nadel { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em; align-items: center; gap: 4px; }
.ibcs-nadel .spur { position: relative; height: 16px; }
.ibcs-nadel .stab { position: absolute; top: 6px; height: 4px; }
.ibcs-nadel .stab::before { content: ''; position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: inherit; right: -5px; }
.ibcs-nadel .stab.neg::before { right: auto; left: -5px; }
.ibcs-nadel .z { text-align: right; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.ibcs-nadel .z.gut { color: var(--ibcs-gut); } .ibcs-nadel .z.schlecht { color: var(--ibcs-schlecht); }
.ibcs-nadel.leer { display: block; text-align: center; color: var(--x-mute); }
@media (max-width: 1100px) { .ibcs-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mcdx-karte.h5, .mcdx-karte.h7 { grid-column: span 12; } }
@media (max-width: 640px) {
  .ibcs-band, .ibcs-band.frei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ibcs-kpi { padding: 10px 10px 8px; } .ibcs-kpi .w { font-size: 19px; }
  .ibcs-abw { grid-template-columns: 2.9em minmax(0, 1fr) 4.3em; font-size: 11px; gap: 4px; }
  .ibcs-botschaft h2 { font-size: 18px; } .ibcs-botschaft p { font-size: 14px; }
  /* Am Handy reicht die Breite nicht für Nadeln: farbige Zahl mit Punkt (IBCS erlaubt die Tabelle). */
  .ibcs-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) 4.7em 4.7em; gap: 5px; font-size: 12px; }
  .ibcs-filialen.n1 .ibcs-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.7em; }
  .ibcs-zeile.kopf span:nth-child(n+3) { text-align: right; }
  .ibcs-zeile .ist { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ibcs-ist { height: 8px; max-width: 100%; }
  .ibcs-zeile .ist .z { font-size: 11.5px; }
  .ibcs-nadel { grid-template-columns: 1fr; }
  .ibcs-nadel .spur { display: none; }
  .ibcs-nadel .z::before { content: "●"; font-size: 7px; vertical-align: 2px; margin-right: 2px; }
  .ibcs-nadel.leer { text-align: right; }
}

/* In der SPA klebt deren eigene Kopfzeile oben — dort klebt das Cockpit nicht. */
.mcd-cockpit .mcdx-kopf { position: static; }
.mcd-cockpit .mcdx { padding-left: 0; padding-right: 0; background: transparent; }
.ibcs-zeile.fehlt .z { color: var(--x-mute); }
.mcdx-tab td.t-gut { color: var(--ibcs-gut); font-weight: 650; } .mcdx-tab td.t-schlecht { color: var(--ibcs-schlecht); font-weight: 650; }
.mcdx-buchung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: var(--x-bg); border-radius: 10px; font-size: 13px; }
.mcdx-buchung label { font-weight: 650; margin-right: 4px; }
.mcdx-buchung input[type="month"] { font: inherit; padding: 4px 6px; border: 1px solid var(--x-line); border-radius: 8px; background: var(--x-card); }
.mcdx-buchung button { font: inherit; font-weight: 600; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--x-line); background: var(--x-card); cursor: pointer; }
.mcdx-buchung button:hover { border-color: var(--x-text); }
.mcdx-buchung button:focus-visible, .mcdx-buchung input:focus-visible { outline: 2px solid var(--x-text); outline-offset: 2px; }

/* Fraud Watch (John 20.10.2026) — eigene Steuerung, die Kopfsteuerung des Cockpits ruht. */
.mcdx.mcdx-ohne-steuer .mcdx-steuer, .mcdx.mcdx-ohne-steuer .mcdx-filialen { display: none; }
.fw-kopf { display: grid; gap: 10px; margin-bottom: 14px; }
.fw-titel h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fw-titel p { margin: 4px 0 0; font-size: 13px; max-width: 75ch; }
.fw-beta { background: var(--x-text); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; }
.fw-steuer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.fw-zahl { display: inline-block; min-width: 1.6em; padding: 0 5px; border-radius: 999px; background: var(--x-line); color: var(--x-text); font-size: 11.5px; text-align: center; }
.mcdx-seg button.an .fw-zahl { background: var(--x-text); color: #fff; }
.fw-h3 { font-size: 14px; font-weight: 700; color: var(--x-dim); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.fw-fuss { font-size: 12px; margin: 10px 0 0; }
.fw-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--x-mute); }
.fw-punkt.hoch { background: var(--x-bad); } .fw-punkt.mittel { background: #E8A33D; } .fw-punkt.niedrig { background: var(--x-neutral); } .fw-punkt.ruhig { background: var(--x-good); }
.fw-gruppe { margin-bottom: 14px; }
.fw-gruppe.fw-hoch { border-top: 3px solid var(--x-bad); } .fw-gruppe.fw-mittel { border-top: 3px solid #E8A33D; } .fw-gruppe.fw-niedrig { border-top: 3px solid var(--x-neutral); }
.fw-liste { display: grid; gap: 6px; }
.fw-meldung { border-radius: var(--x-r-sm); background: #FAFAFB; min-width: 0; }
.fw-meldung.auf { background: var(--x-card); box-shadow: 0 0 0 1px var(--x-line); }
.fw-zeile { width: 100%; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 9px 12px; border-radius: var(--x-r-sm); }
.fw-zeile:hover { background: #F2F2F4; }
.fw-datum { display: grid; font-size: 13px; line-height: 1.25; }
.fw-text { font-size: 13.5px; overflow-wrap: anywhere; }
.fw-regel { display: block; font-size: 11.5px; font-weight: 700; color: var(--x-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1px; }
.fw-betrag { font-weight: 700; white-space: nowrap; font-size: 13.5px; }
.fw-pruef { text-transform: none; letter-spacing: 0; padding: 0 6px; border-radius: 999px; font-weight: 600; }
.fw-pruef.geprueft { background: var(--x-good-bg); color: var(--x-good); } .fw-pruef.erklaert { background: #EEF3FA; color: var(--x-neutral); } .fw-pruef.verdacht { background: var(--x-bad-bg); color: var(--x-bad); }
.fw-detail { padding: 4px 12px 14px; display: grid; gap: 14px; min-width: 0; }
.fw-erklaer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: #F7F7F9; border-radius: var(--x-r-sm); padding: 10px 12px; font-size: 13px; }
.fw-erklaer p { margin: 2px 0 0; color: var(--x-dim); }
.fw-block { min-width: 0; }
.fw-block h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; }
.fw-unter { font-size: 12px; color: var(--x-dim); margin-bottom: 6px; }
.fw-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fw-balken { display: grid; gap: 3px; margin-top: 8px; }
.fw-b-zeile { display: grid; grid-template-columns: minmax(7em, 11em) minmax(40px, 1fr) 5.5em minmax(0, auto); gap: 8px; align-items: center; font-size: 12.5px; }
.fw-b-zeile .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-b-zeile .b { height: 10px; background: #F0F0F3; border-radius: 3px; overflow: hidden; }
.fw-b-zeile .b i { display: block; height: 100%; background: var(--x-mute); }
.fw-b-zeile.rot .b i { background: var(--x-bad); } .fw-b-zeile.rot .n, .fw-b-zeile.rot .v { font-weight: 700; color: var(--x-bad); }
.fw-b-zeile .v { text-align: right; white-space: nowrap; }
.fw-b-zeile .z { font-size: 11.5px; white-space: nowrap; }
.fw-saeulen { display: flex; align-items: flex-end; gap: 2px; height: 80px; border-bottom: 1px solid var(--x-line); }
.fw-saeulen .s { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.fw-saeulen .s i { display: block; width: 100%; background: var(--x-mute); border-radius: 2px 2px 0 0; }
.fw-saeulen .s.neg i { background: #E8A3A0; } .fw-saeulen .s.heute i { background: var(--x-bad); }
.fw-achse { display: flex; justify-content: space-between; font-size: 11px; margin-top: 2px; }
.fw-bon { border: 1px solid var(--x-line); border-radius: var(--x-r-sm); padding: 8px 10px; margin-top: 6px; }
.fw-bon-kopf { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.fw-bon-kopf .mcdx-chip { margin-left: auto; }
.fw-bon-inhalt { margin-top: 8px; }
.fw-werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; margin: 0; font-size: 12.5px; }
.fw-werte div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #F0F0F3; padding: 3px 0; }
.fw-werte dt { color: var(--x-dim); } .fw-werte dd { margin: 0; font-weight: 600; white-space: nowrap; }
.fw-rot { color: var(--x-bad); font-weight: 700; }
.fw-pruefen { background: #F7F7F9; border-radius: var(--x-r-sm); padding: 10px 12px; }
.fw-stand { font-size: 13px; margin-bottom: 8px; } .fw-stand p { margin: 4px 0 0; }
.fw-notiz { width: 100%; resize: vertical; font-size: 13.5px; }
.fw-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fw-k { border: 1px solid var(--x-line); background: var(--x-card); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 13.5px; }
.fw-k:hover { border-color: var(--x-dim); } .fw-k:disabled { opacity: .5; cursor: default; }
.fw-k.gut { border-color: var(--x-good); color: var(--x-good); } .fw-k.rot { border-color: var(--x-bad); color: var(--x-bad); } .fw-k.leise { border-color: transparent; color: var(--x-dim); }
.fw-meldetext { font-size: 12.5px; color: var(--x-bad); margin-top: 6px; }
.fw-muster-kurz { font-size: 13.5px; margin-bottom: 4px; }
.fw-erkl { font-size: 12.5px; margin: 6px 0 0; }
@media (max-width: 900px) { .fw-zwei, .fw-erklaer { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .fw-zeile { grid-template-columns: 3.4em minmax(0, 1fr); }
  .fw-betrag { grid-column: 2; }
  .fw-b-zeile { grid-template-columns: minmax(5em, 8em) minmax(30px, 1fr) 5em; }
  .fw-b-zeile .z { display: none; }
  .fw-detail { padding: 4px 8px 12px; }
}
.mcdx .fw-muster button.mcdx-mehr { color: var(--x-neutral); }

/* Gäste-Feedback (20.10.2026) */
.fb-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.fb-kachel { background: var(--x-card); border-radius: var(--x-r); box-shadow: var(--x-shadow); padding: 12px 14px; min-width: 0; }
.fb-kachel .l { font-size: 12px; font-weight: 600; color: var(--x-dim); }
.fb-kachel .w { font-size: 26px; font-weight: 750; line-height: 1.15; margin-top: 2px; overflow-wrap: anywhere; }
.fb-kachel .w small { font-size: 16px; color: var(--x-gold); }
.fb-kachel .u { font-size: 12px; color: var(--x-dim); margin-top: 3px; }
.fb-kachel.warn .w { color: var(--x-bad); }
.fb-sterne { color: #E8A33D; letter-spacing: 1px; white-space: nowrap; } .fb-sterne .leer { color: var(--x-line); }
.fb-stimmung { font-size: 14.5px; margin: 0 0 6px; }
.fb-h { font-size: 13px; font-weight: 700; color: var(--x-dim); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 6px; }
.fb-liste { display: grid; gap: 6px; }
.fb-punkt { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.fb-punkt .fw-punkt { margin-top: 5px; flex: none; }
.fb-zahl { flex: none; min-width: 2.6em; text-align: center; font-size: 12px; font-weight: 700; background: var(--x-line); border-radius: 999px; padding: 1px 6px; }
.fb-ki-leer { margin: 0; font-size: 13.5px; }
#mcdx-fremd > section { margin-top: 4px; }
@media (max-width: 900px) { .fb-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kopf seit 21.10.2026: Titel + ‹ Übersicht links, ⋯-Menü rechts; die Sektionen liegen im Menü. */
.mcdx-kopf-zeile { flex-wrap: nowrap; }
.mcdx-titel { flex: 1 1 auto; }
.mcdx-zurueck { border: 0; background: transparent; color: var(--x-neutral); font-weight: 600; font-size: 14px; padding: 4px 6px 4px 0; }
.mcdx-zurueck:hover { text-decoration: underline; }
.mcdx-steuer { margin-top: 8px; }
.mcdx-menuewrap { position: relative; flex: none; align-self: flex-start; }
.mcdx-mehrknopf { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--x-line); background: var(--x-card); font-size: 20px; line-height: 1; font-weight: 700; color: var(--x-text); }
.mcdx-mehrknopf:hover, .mcdx-mehrknopf[aria-expanded="true"] { border-color: var(--x-dim); }
.mcdx-menuewrap .mcdx-nav { position: absolute; right: 0; top: 46px; z-index: 30; margin: 0; display: grid; gap: 2px; min-width: 230px; max-height: 70vh; overflow-y: auto;
  background: var(--x-card); border-radius: var(--x-r); box-shadow: 0 8px 28px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08); padding: 6px; }
.mcdx-menuewrap .mcdx-nav button { text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 15px; }
.mcdx.mcdx-start .mcdx-steuer, .mcdx.mcdx-start .mcdx-filialen { display: none; }
.mcdx.mcdx-start .mcdx-kopf { border-bottom: 0; margin-bottom: 4px; }
.mcdx.mcdx-start .mcdx-titel { flex-direction: column; align-items: flex-start; gap: 0; }
.mcdx.mcdx-start .mcdx-titel h1 { font-size: 24px; }

/* Übersicht / Morgenbriefing */
.st { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.st-zr { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.st-zr button { padding: 8px 4px; font-size: 14px; }
.st-h2, .st-block h2 { font-size: 12.5px; font-weight: 700; color: var(--x-dim); text-transform: uppercase; letter-spacing: .04em; margin: 8px 2px 0; display: flex; align-items: center; gap: 6px; }
.st-kpi { background: var(--x-card); border-radius: var(--x-r); box-shadow: var(--x-shadow); min-width: 0; }
.st-kopfzeile { width: 100%; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--x-r); }
.st-kopfzeile:hover { background: #FAFAFB; }
.st-text { display: grid; gap: 2px; min-width: 0; }
.st-label { font-size: 13px; font-weight: 600; color: var(--x-dim); }
.st-wert { font-size: 24px; font-weight: 750; letter-spacing: -.01em; line-height: 1.15; }
.st-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.st-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #F2F2F4; color: var(--x-dim); white-space: nowrap; }
.st-chip .k { font-weight: 500; opacity: .8; }
.st-chip.gut { background: var(--x-good-bg); color: var(--x-good); } .st-chip.schlecht { background: var(--x-bad-bg); color: var(--x-bad); }
.st-chip .fw-punkt { margin-right: 4px; width: 8px; height: 8px; }
.st-pfeil { color: var(--x-mute); font-size: 12px; }
.st-spark { width: 96px; height: 28px; overflow: visible; }
.st-spark polyline { fill: none; stroke: var(--x-dim); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.st-spark circle { fill: var(--x-text); }
.st-spark.gross { width: 100%; height: 46px; grid-column: 1 / -1; grid-row: 2; }
.st-spark.gross polyline { stroke: var(--x-text); stroke-width: 2; }
.st-spark .flaeche { fill: rgba(29,29,31,.07); }
.st-kpi.held .st-kopfzeile { grid-template-columns: minmax(0, 1fr) 14px; }
.st-kpi.held .st-pfeil { grid-column: 2; grid-row: 1; }
.st-kpi.held .st-wert { font-size: 36px; }
.st-fuss { font-size: 12px; color: var(--x-mute); padding: 0 14px 10px; margin-top: -6px; }
.st-filialen { display: grid; border-top: 1px solid var(--x-line); }
.st-filiale { border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) auto; grid-template-areas: "n b w" "c c c"; gap: 2px 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #F0F0F3; }
.st-filiale:hover { background: #FAFAFB; }
.st-filiale .n { grid-area: n; font-size: 14px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.st-filiale .n .u { display: block; font-size: 11.5px; font-weight: 500; color: var(--x-mute); }
.st-filiale .b { grid-area: b; height: 8px; background: #F0F0F3; border-radius: 4px; overflow: hidden; }
.st-filiale .b i { display: block; height: 100%; background: var(--x-mute); border-radius: 4px; }
.st-filiale .w { grid-area: w; font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; }
.st-filiale .c { grid-area: c; display: flex; gap: 4px; flex-wrap: wrap; }
.st-mehr { border: 0; background: transparent; color: var(--x-neutral); font-weight: 600; font-size: 13.5px; padding: 10px 14px; text-align: left; }
.st-mehr:hover { text-decoration: underline; }
.st-block { background: var(--x-card); border-radius: var(--x-r); box-shadow: var(--x-shadow); padding: 4px 0 2px; }
.st-block h2 { margin: 8px 14px 6px; }
.st-liste { display: grid; }
.st-punkt { border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 14px; font-size: 13.5px; border-top: 1px solid #F0F0F3; }
.st-punkt:hover { background: #FAFAFB; }
.st-punkt .fw-punkt { margin: 5px 0 0; }
.st-punkt .z { font-weight: 700; white-space: nowrap; }
.st-zaehl { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 8px; }
.st-ruhig { padding: 4px 14px 10px; font-size: 13.5px; color: var(--x-good); font-weight: 600; }
.st-quelle { font-size: 11.5px; color: var(--x-mute); text-align: center; margin: 6px 0 0; }
@media (min-width: 900px) {
  .st { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .st > .st-zr, .st > .st-kpi.held, .st > .st-h2, .st > .st-block, .st > .st-quelle, .st > .mcdx-hinweis { grid-column: 1 / -1; }
  .st-kpi.auf { grid-column: 1 / -1; }
}