/* Layout block szenario_box. Source: docs/design/referenz/04-bausteine.html. */
.szen { background: var(--sunk); border-radius: var(--r-lg); padding: 20px 16px; }
.szen h3 { font-size: 26px; font-weight: 900; letter-spacing: -.02em; margin: 2px 0 8px; scroll-margin-top: 80px; }
.szen-intro { font-size: 15px; color: var(--ink-2); margin-bottom: 16px; }
.szen-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.szen-line li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-block: 10px; border-top: 1px dashed var(--line); }
.szen-line .h { font-family: var(--f-display); font-weight: 900; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.szen-line .h small { font-size: .5em; font-weight: 700; margin-left: 2px; }
.szen-line p { font-size: 14px; line-height: 1.45; }
.szen-line li:nth-child(1) .h { opacity: .55; }
.szen-line li:nth-child(2) .h { opacity: .7; }
.szen-line li:nth-child(3) .h { opacity: .82; }
.szen-line li:nth-child(4) .h { opacity: .92; }

@container page (min-width: 900px) {
  .szen { padding: 28px; }
  .szen h3 { font-size: 34px; }
  .szen-line li { grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; padding-block: 12px; }
  .szen-line .h { font-size: 40px; }
  .szen-line p { font-size: 16px; }
}