/* Nachbau der even-App-Oberfläche (Light-Mode) für Produktbilder und Animationen.
   Tokens aus frontend/app/globals.css: Primär #ff5131, Buttermilch #fff8d6 (aktive Navigation),
   Rahmen #e6e6e6, Radius 6/8 px, Inter 13 px. Alles läuft auf einer logischen Bühne
   (Standard 1280 × 800) und wird per JS (--s) auf die Containerbreite skaliert. */

.window {
  position: relative; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-xl);
}
.window-bar {
  height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: #f4f4f2; border-bottom: 1px solid #e7e6e2;
}
.window-bar .dots { display: flex; gap: 7px; flex: none; }
.window-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.window-bar .dots i:nth-child(1) { background: #ff5f57; }
.window-bar .dots i:nth-child(2) { background: #febc2e; }
.window-bar .dots i:nth-child(3) { background: #28c840; }
.window-bar .url {
  flex: 0 1 460px; margin: 0 auto; height: 24px; border-radius: 7px; background: #fff; border: 1px solid #e6e6e6;
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #6b6b6b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; font-variant-numeric: tabular-nums;
}
.window-bar .url .icon { font-size: 11px; color: #999; }
.window-bar .sample {
  flex: none; font-size: 11px; font-weight: 600; color: #8a6d00; background: #fff6d6; padding: 3px 8px; border-radius: 6px;
}
.window-bar .spacer { width: 47px; flex: none; }

.app-viewport { position: relative; width: 100%; overflow: hidden; background: #fff; }
.app-stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s, 1));
  font-family: var(--font); font-size: 13px; line-height: 1.5; color: #000;
  font-feature-settings: "cv11", "ss01", "rlig", "calt";
  -webkit-font-smoothing: antialiased;
}
.app-stage * { box-sizing: border-box; }
.app-stage .icon { width: 1em; height: 1em; stroke-width: 1.75; }

/* ------------------------------------------------------------- Screen-Wechsel */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; transform: translateY(6px); }
.screen.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }

/* ------------------------------------------------------------- Shell */
.app { display: flex; width: 100%; height: 100%; background: #fff; }
.app-side { width: 232px; flex: none; border-right: 1px solid #e6e6e6; display: flex; flex-direction: column; background: #fff; }
.side-head { height: 48px; flex: none; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid #e6e6e6; }
.side-head img { height: 20px; width: auto; }
.side-search {
  margin: 12px 12px 4px; height: 32px; border: 1px solid #e6e6e6; border-radius: 6px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px; font-size: 12px; color: #666;
}
.side-search .icon { font-size: 14px; }
.side-search kbd { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; border: 1px solid #e6e6e6; background: #f5f5f5; border-radius: 4px; padding: 0 4px; color: #666; }
.side-label { padding: 14px 14px 6px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #666; }
.side-project { display: flex; align-items: center; gap: 8px; margin: 0 8px 6px; padding: 4px 6px; }
.side-project code { flex: none; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; background: #f5f5f5; color: #555; border-radius: 4px; padding: 1px 5px; }
.side-project span { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav { flex: 1; overflow: hidden; padding-bottom: 8px; }
.nrow {
  position: relative; height: 30px; display: flex; align-items: center; gap: 8px; margin: 1px 8px; padding: 0 8px; border-radius: 6px;
  font-size: 13px; color: #333; white-space: nowrap;
}
.nrow .icon { font-size: 14px; color: #777; }
.nrow .chev { font-size: 12px; color: #999; margin-left: -2px; }
.nrow.phase { color: #000; }
.nrow.l1 { margin-left: 22px; }
.nrow.l2 { margin-left: 40px; }
.nrow.active { background: #fff8d6; font-weight: 500; color: #000; }
.nrow.active .icon { color: #000; }
.nrow .st { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; flex: none; }
.nrow .st.ok { background: #10b981; }
.nrow .st.cur { background: #ff5131; }
.tree { position: relative; }
.tree::before { content: ""; position: absolute; left: 26px; top: 2px; bottom: 6px; width: 1px; background: #efefef; }
.side-foot { flex: none; border-top: 1px solid #e6e6e6; padding: 12px 14px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #666; display: flex; align-items: center; gap: 6px; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 48px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 24px; border-bottom: 1px solid #e6e6e6; color: #666; font-size: 13px; }
.topbar .crumb-sep { font-size: 12px; color: #b2b2b2; }
.topbar .crumb-last { color: #000; font-weight: 500; }
.topbar .tools { margin-left: auto; display: flex; align-items: center; gap: 14px; color: #444; }
.topbar .tools .icon { font-size: 16px; }
.topbar .bell { position: relative; }
.topbar .bell b { position: absolute; top: -6px; right: -7px; min-width: 15px; height: 15px; border-radius: 99px; background: #c62b10; color: #fff; font-size: 9.5px; display: grid; place-items: center; font-weight: 600; }
.topbar .vsep { width: 1px; height: 20px; background: #e6e6e6; }
.topbar .who { display: flex; align-items: center; gap: 8px; color: #000; font-size: 13px; }
.topbar .avatar { width: 26px; height: 26px; border-radius: 50%; background: #f5f5f5; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }

.content { flex: 1; min-height: 0; overflow: hidden; padding: 24px 24px 0; position: relative; }
.back { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666; margin-bottom: 8px; }
.back .icon { font-size: 12px; }
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.page-sub { margin-top: 4px; font-size: 13px; color: #666; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.page-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ------------------------------------------------------------- Primitive */
.card { border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; overflow: hidden; }
.card-h { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid #e6e6e6; }
.card-h .icon { font-size: 14px; color: #666; }
.card-h .ttl { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.375; }
.card-h .sub { font-size: 12px; color: #666; }
.card-h .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-b { padding: 14px 16px; }
.ct-toggle { display: inline-flex; border: 1px solid #e6e6e6; border-radius: 6px; padding: 2px; background: #fff; }
.ct-toggle span { height: 22px; padding: 0 9px; display: grid; place-items: center; font-size: 11.5px; font-weight: 500; color: #666; border-radius: 4px; }
.ct-toggle span.on { background: #fff6d6; color: #000; }

.btnx { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.btnx .icon { font-size: 14px; }
.btnx.primary { background: #ff5131; color: #fff; }
.btnx.outline { background: #fff; border-color: #e6e6e6; color: #000; }
.btnx.sm { height: 28px; padding: 0 10px; font-size: 12px; }

.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge .icon { font-size: 11px; }
.badge.ok { background: #ddfced; color: #047857; }
.badge.brand { background: #ffedea; color: #e6401f; }
.badge.muted { background: #f5f5f5; color: #666; }
.badge.warn { background: #ffeadc; color: #b45309; }
.badge.lilac { background: #f1ecff; color: #5b3fc4; }
.tag-chosen { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid #ff5131; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #ff5131; }

.seg { display: inline-flex; background: #f5f5f5; border-radius: 6px; padding: 2px; }
.seg span { height: 24px; padding: 0 10px; display: grid; place-items: center; font-size: 12px; color: #666; border-radius: 4px; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.seg span.on { background: #fff; color: #000; font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }

.kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { border: 1px solid #e6e6e6; border-radius: 8px; padding: 12px 14px; }
.kpi .l { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.kpi .v { margin-top: 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .h { margin-top: 2px; font-size: 11px; color: #888; }

.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 500; color: #666; background: #fcfcfc; padding: 7px 12px; border-bottom: 1px solid #ececec; white-space: nowrap; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid #f2f2f2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tr:last-child td { border-bottom: 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }

.selectx { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; padding: 0 8px; min-width: 132px; border: 1px solid #e6e6e6; border-radius: 6px; background: #fff; font-size: 12px; }
.selectx .icon { font-size: 12px; color: #999; }
.check-ok { width: 18px; height: 18px; border-radius: 50%; background: #10b981; color: #fff; display: grid; place-items: center; }
.check-ok .icon { font-size: 11px; stroke-width: 3; }

.chart-svg text { font-family: var(--font); }

/* ------------------------------------------------------------- Upload */
.dropzone { border: 1.5px dashed #ffb8ab; background: #fff6f5; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 14px; }
.dropzone .ico { width: 40px; height: 40px; border-radius: 8px; background: #fff; border: 1px solid #ffd3ca; display: grid; place-items: center; color: #ff5131; }
.dropzone .ico .icon { font-size: 20px; }
.filechip { display: flex; align-items: center; gap: 10px; border: 1px solid #e6e6e6; border-radius: 8px; padding: 10px 12px; background: #fff; }
.filechip .ficon { width: 32px; height: 36px; border-radius: 4px; background: #e9f9ef; color: #0f8a55; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.progress { height: 6px; border-radius: 99px; background: #f0f0f0; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: #ff5131; border-radius: 99px; }

/* ------------------------------------------------------------- Planer */
.pshell { border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.ps-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #e6e6e6; }
.ps-head .area-ico { width: 32px; height: 32px; border-radius: 8px; background: #ffedea; color: #ff5131; display: grid; place-items: center; }
.ps-head .area-ico .icon { font-size: 16px; }
.ps-head .nm { font-size: 13px; font-weight: 600; }
.ps-head .meta { font-size: 11.5px; color: #666; font-variant-numeric: tabular-nums; }
.ps-head .right { margin-left: auto; display: flex; gap: 8px; }
.ps-kpis { display: flex; border-bottom: 1px solid #e6e6e6; }
.ps-kpi { flex: 1 1 136px; padding: 7px 14px 8px; border-right: 1px solid #e6e6e6; min-width: 0; }
.ps-kpi:last-child { border-right: 0; }
.ps-kpi .l { font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #666; white-space: nowrap; }
.ps-kpi .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; }
.ps-kpi .v.brand { color: #ff5131; }
.ps-kpi .v.ok { color: #047857; }
.ps-kpi .v.warn { color: #b45309; }
.ps-kpi .s { font-size: 10.5px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-kpi .bar { margin-top: 3px; height: 4px; border-radius: 99px; background: #f0f0f0; overflow: hidden; }
.ps-kpi .bar i { display: block; height: 100%; border-radius: 99px; background: #10b981; transition: width .3s ease, background-color .3s ease; }
.ps-body { display: grid; grid-template-columns: 214px 1fr; min-height: 0; flex: 1; }
.ps-rail { background: #fcfcfc; border-right: 1px solid #e6e6e6; font-size: 11.5px; overflow: hidden; }
.ps-rail .over { padding: 10px 14px 4px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #999; }
.rsec { padding: 10px 14px 12px; border-bottom: 1px solid #ececec; }
.rsec .rt { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #666; margin-bottom: 8px; }
.rsec .rt .icon { font-size: 12px; }
.rstatus { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: #047857; line-height: 1.4; }
.rstatus .icon { font-size: 12px; margin-top: 1px; }
.rnote { margin-top: 6px; font-size: 11px; color: #555; line-height: 1.45; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.palette span { border: 1px solid #e6e6e6; border-radius: 6px; background: #fff; padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: #444; text-align: center; line-height: 1.2; }
.palette .icon { font-size: 15px; color: #777; }
.rtool { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; font-size: 11.5px; color: #444; border: 1px solid transparent; }
.rtool .icon { font-size: 13px; }
.rtool.on { border-color: #ffb8ab; background: #ffedea; color: #ff5131; }
.ps-stage { position: relative; background: #fcfcfc; overflow: hidden; }
.ps-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-stage > canvas { position: absolute; left: 0; top: 0; }
.stage-chrome { position: absolute; display: flex; align-items: center; gap: 4px; background: rgb(255 255 255 / 95%); border: 1px solid #e6e6e6; border-radius: 8px; padding: 3px; box-shadow: 0 1px 2px rgb(0 0 0 / 6%); font-size: 11px; color: #444; z-index: 2; }
.stage-chrome .b { height: 24px; min-width: 24px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.stage-chrome .b .icon { font-size: 13px; }
.stage-chrome .b.on { background: #ffedea; color: #ff5131; }
.stage-chrome .sepv { width: 1px; height: 16px; background: #e6e6e6; }
.stage-chrome.tl { left: 10px; top: 10px; }
.stage-chrome.tr { right: 10px; top: 10px; }
.stage-chrome.bl { left: 10px; bottom: 10px; padding: 6px 10px; flex-direction: column; align-items: flex-start; gap: 3px; }
.legend-row { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #555; }
.legend-row i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.ps-tabs { display: flex; align-items: center; gap: 2px; padding: 0 10px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background: #fcfcfc; }
.ps-tab { position: relative; height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 12.5px; color: #666; }
.ps-tab .icon { font-size: 13px; }
.ps-tab.on { color: #000; font-weight: 500; }
.ps-tab.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: #ff5131; }
.ps-tabs .hint { margin-left: auto; font-size: 11px; color: #888; display: flex; align-items: center; gap: 5px; }
.ps-tabbody { padding: 12px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pgroup .gt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.pgroup .gt .icon { font-size: 14px; color: #888; }
.pfield { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #555; margin-top: 5px; }
.pfield .in { height: 26px; min-width: 84px; border: 1px solid #e6e6e6; border-radius: 6px; padding: 0 8px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: #000; font-variant-numeric: tabular-nums; background: #fff; }
.pfield .in small { color: #888; font-size: 10.5px; }

/* ------------------------------------------------------------- Lösungsauswahl */
.gate { display: flex; align-items: center; gap: 10px; border: 1px solid #b7efd0; background: #f0fdf6; border-radius: 8px; padding: 9px 14px; font-size: 12.5px; color: #065f46; margin-bottom: 14px; }
.gate .icon { font-size: 16px; color: #10b981; }
.gate b { font-weight: 600; }
.matrix th, .matrix td { padding: 7px 12px; }
.matrix .sec td { background: #fcfcfc; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #777; padding: 6px 12px; }
.matrix td.rowlbl { color: #000; }
.matrix td.rowlbl small { display: block; color: #888; font-size: 10.5px; }
.matrix .chosen { background: #fff6f5; }
.matrix th .tname { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #000; font-weight: 600; }
.matrix th .tname i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.matrix th .tmeta { font-size: 10.5px; color: #888; font-weight: 400; margin-top: 1px; }
.decision { border: 1px solid #ffa898; border-radius: 8px; overflow: hidden; }
.decision .card-h .icon { color: #ff5131; }
.decision .body { padding: 14px 16px; font-size: 12.5px; line-height: 1.5; color: #333; }
.decision .bigk { display: flex; gap: 18px; margin: 12px 0 10px; }
.decision .bigk .v { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.decision .bigk .l { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #777; }
.decision .meta { font-size: 11.5px; color: #888; }

/* ------------------------------------------------------------- ABC × XYZ-Matrix */
.mx { display: grid; grid-template-columns: 22px repeat(3, 1fr); gap: 6px; align-items: stretch; }
.mx-h { font-size: 10.5px; color: #666; text-align: center; padding-bottom: 2px; }
.mx-r { display: grid; place-items: center; font-weight: 600; font-size: 12px; color: #000; position: relative; }
.mx-r::before { content: ""; position: absolute; left: 2px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--c); }
.mx-cell { border-radius: 6px; padding: 7px 8px; display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; line-height: 1.3; min-height: 50px; }
.mx-cell b { font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------- Einblende-Animationen der Screens (CSS, beim Aktivieren) */
.screen .anim-w { width: 0; transition: width 1.1s cubic-bezier(.3, .7, .2, 1) var(--d, .15s); }
.screen.on .anim-w { width: var(--w, 100%); }
.screen .pop { transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s), opacity .3s ease var(--d, 0s); }
.screen.on .pop { transform: none; opacity: 1; }
.screen .fade-up { opacity: 0; transform: translateY(8px); transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s); }
.screen.on .fade-up { opacity: 1; transform: none; }
.screen .grow { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--d, 0s)); }
.screen.on .grow { transform: none; }
.screen .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .2, 1) calc(.2s + var(--d, 0s)); }
.screen.on .draw { stroke-dashoffset: 0; }
.screen .cline[stroke-dasharray] { stroke-dashoffset: 0; transition: none; } /* gestrichelte IST-Linie nicht „zeichnen“ */
.screen .cdot { opacity: 0; transition: opacity .3s ease calc(.6s + var(--d, 0s)); }
.screen.on .cdot { opacity: 1; }
.screen .pa, .screen .pl, .screen .pv, .screen .ptag { opacity: 0; transition: opacity .5s ease 1.2s; }
.screen.on .pa, .screen.on .pl, .screen.on .pv, .screen.on .ptag { opacity: 1; }
.screen .payback { opacity: 0; transition: opacity .5s ease 1.7s; }
.screen.on .payback { opacity: 1; }
.screen .ring-v { stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s cubic-bezier(.3, .7, .2, 1) .2s; }
.screen.on .ring-v { stroke-dasharray: 96 100; }
.screen .row-new td { transition: background-color 1.2s ease 1.3s; }
.screen.on .row-new td { background-color: #f0fdf6; }
.payback .pulse { animation: pulse-ring 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse-ring { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .screen .anim-w, .screen .pop, .screen .fade-up, .screen .grow, .screen .draw, .screen .cdot, .screen .pa, .screen .pl, .screen .pv, .screen .ptag, .screen .payback, .screen .ring-v, .screen .row-new td { transition: none; }
  .payback .pulse { animation: none; }
}

/* ------------------------------------------------------------- Mikro-Animationen (logische Bühne 560 × 400) */
.micro-viewport { position: relative; width: 100%; aspect-ratio: 560 / 400; background: transparent; border-radius: 18px; }
.micro-stage { width: 560px; height: 400px; }
.mpanel { position: absolute; background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 14px 34px -14px rgb(43 45 53 / 22%); overflow: hidden; }
.mpanel .card-h { padding: 9px 14px; }
.mpanel .card-h .ttl { font-size: 13.5px; }
.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 20; pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 30%)); transition: none; }
.cursor .ring { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(255 81 49 / 55%); opacity: 0; }
.mrow { display: grid; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid #f2f2f2; font-size: 12px; }
.mrow:last-child { border-bottom: 0; }
.mfade { transition: opacity .3s ease, transform .3s ease; }
.pill-k { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Kleine Bildschirme: Fensterleiste mitskalieren */
@media (max-width: 560px) {
  .window { border-radius: 10px; }
  .window-bar { height: 26px; gap: 8px; padding: 0 10px; }
  .window-bar .dots { gap: 5px; }
  .window-bar .dots i { width: 8px; height: 8px; }
  .window-bar .url { height: 17px; font-size: 9.5px; border-radius: 5px; }
  .window-bar .url .icon { display: none; }
  .window-bar .sample { font-size: 9.5px; padding: 2px 6px; }
}
.nrow > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }