/* SCENARIUM – UN-R 185: ODD & Kompetenzen (Schritt 1, r185-odd.js) */
.r7-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r7-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.r7-tile:hover { border-color: var(--accent); }
.r7-tile.miss .v, .r7-tile.bad .v { color: var(--bad); }
.r7-tile.warn .v { color: var(--warn); }
.r7-tile.ok .v { color: var(--ok); }
.r7-tabs { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.r7-tabs .tab .sub { font-weight: 400; margin-left: 4px; }
.r7-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r7-chk { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: var(--panel); user-select: none; }
.r7-chk.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.r7-chk input { margin: 0; accent-color: var(--accent); }
.chip.ok-chip { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.bad-chip { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.r7-bc td:first-child code { white-space: nowrap; }
.r7-ia td, .r7-bc td, .r7-ts td { vertical-align: top; }
.r7-dec { white-space: nowrap; }
.r7-dec .btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
.r7-bc th:nth-child(n+3) { width: 22%; }
.r7-c { border-left: 1px solid var(--line); font-size: 12.5px; }
.r7-c .r7-cs { font-weight: 600; }
.r7-c .r7-cl { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.r7-c .r7-cl .sid { font-size: 11px; }
.r7-c .r7-cr { margin-top: 3px; font-size: 11.5px; }
.r7-c .r7-ca { margin-top: 6px; }
.r7-c.gap { background: var(--bad-soft); }
.r7-c.gap .r7-cs { color: var(--bad); }
.r7-c.scenario { background: color-mix(in srgb, var(--warn-soft) 70%, transparent); }
.r7-c.scenario .r7-cs, .r7-c.spec .r7-cs { color: var(--warn); }
.r7-c.confirmatory .r7-cs { color: var(--accent-2); }
.r7-c.passed { background: var(--ok-soft); }
.r7-c.passed .r7-cs { color: var(--ok); }
.r7-c.fail { background: var(--bad-soft); }
.r7-c.fail .r7-cs { color: var(--bad); }
.r7-c.excluded { background: var(--panel-2); color: var(--muted); }
.r7-c.pend { outline: 1px dashed var(--warn); outline-offset: -3px; }
.r7-c.none { background: transparent; }
.r7-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.r7-area { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.r7-area.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: var(--ok-soft); }
.r7-area.part { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.r7-area.sc { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-soft); }
.r7-area.none { border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: var(--bad-soft); }
.badge.sit-nominal { background: var(--ok-soft); color: var(--ok); }
.badge.sit-critical { background: var(--warn-soft); color: var(--warn); }
.badge.sit-failure { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 900px) { .r7-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r7-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .r7-dec { white-space: normal; } .r7-areas { grid-template-columns: 1fr; } }
/* Schritt 2: Bestätigungsprüfung und Stichprobenplan (app.js confPanel) */
.r7-conf { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; margin: 0 0 14px; background: var(--panel-2); }
.r7-conf.on { border-color: var(--accent); background: var(--accent-soft); }
.r7-samp { margin-top: 10px; }
.r7-samp summary { cursor: pointer; font-size: 13px; }
.r7-sg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin-top: 8px; }
@media (max-width: 640px) { .r7-sg { grid-template-columns: 1fr; } }

/* Prozesskette „So werden die Szenarien gefunden“ (Anhang 7) */
.r7-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; counter-reset: none; }
.r7-step { position: relative; display: flex; }
.r7-step:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700; color: var(--accent); }
.r7-sb { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 12px 14px; background: var(--panel-2, var(--panel)); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.r7-sb:hover { border-color: var(--accent); }
.r7-sb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r7-n { font-size: 20px; line-height: 1; color: var(--accent); }
.r7-st { display: flex; flex-direction: column; }
.r7-h { font-weight: 650; font-size: 14px; }
.r7-ref { font-size: 11.5px; color: var(--muted); }
.r7-v { font-size: 24px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.r7-v small { font-size: 13px; font-weight: 600; color: var(--muted); }
.r7-sub { font-size: 12px; color: var(--muted); }
.r7-step.warn .r7-v { color: var(--warn); }
.r7-step.bad .r7-v { color: var(--bad); }
.r7-w { font-size: 12.5px; color: var(--ink-2, var(--ink)); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
@media (max-width: 1000px) {
  .r7-flow { grid-template-columns: 1fr; gap: 18px; }
  .r7-step:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -18px; transform: none; }
}