/* AURA views. Flat tone steps and quiet lines, one face (Inter), tabular
   figures. Lime marks data and the active place, orange is the one action.
   The view lays itself out by its own width, so the same view fits the room,
   a phone, 16:9, 21:9 and 32:9. */
.vw { container-type: inline-size; color: var(--ink); font-family: var(--body); font-variant-numeric: tabular-nums; min-width: 0; }
.vw-kopf { display: grid; gap: 10px; align-content: start; max-width: 62ch; }
.vw-frage { margin: 0; color: var(--muted); font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.vw-befund { margin: 0; font-size: clamp(2.25rem, 9cqi, 5rem); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.vw-zusatz { font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.vw-unter { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.vw-quelle { margin: 4px 0 0; color: var(--muted); font-size: .8125rem; }
.vw-alt { margin: 0; color: var(--warn); font-size: .875rem; }
.vw[data-state="fehler"] .vw-befund { font-size: clamp(1.5rem, 5cqi, 2.5rem); }
.vw-aktion { margin-top: 6px; }

.vw-btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: none; color: var(--ink); font: 500 .9375rem/1 var(--body); cursor: pointer; transition: background-color var(--nex-fast) linear, border-color var(--nex-fast) linear; }
.vw-btn:hover { background: var(--bg-hover); border-color: var(--muted); }
.vw-btn:active { background: var(--bg-elev); }
.vw-btn:focus-visible, .vw a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.vw-btn:disabled { opacity: .5; cursor: not-allowed; }
.vw-btn.is-primaer { background: var(--orange); border-color: var(--orange); color: #14100A; font-weight: 600; }
.vw-btn.is-primaer:hover { background: #FF9A3D; border-color: #FF9A3D; }
.vw-btn.is-primaer:active { background: #E87A12; border-color: #E87A12; }

.vw-beleg { min-width: 0; margin-top: 24px; overflow-x: auto; }
.vw-tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.vw-tabelle th { padding: 0 16px 8px 0; color: var(--muted); font-size: .8125rem; font-weight: 500; text-align: left; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.vw-tabelle td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; color: var(--ink); }
.vw-tabelle .is-zahl { text-align: right; white-space: nowrap; }
.vw-tabelle th:last-child, .vw-tabelle td:last-child { padding-right: 0; }
.vw-tabelle tr.is-warn td:first-child { color: var(--warn); }
.vw-tabelle a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.vw-detail td { color: var(--muted); font-size: .9375rem; padding-top: 0; }
.vw-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.vw-lead a { color: var(--ink); text-underline-offset: 3px; }
.vw-bild { margin: 24px 0 0; }
.vw-bild img { display: block; max-width: 100%; max-height: 62vh; }
.vw-bild figcaption { margin-top: 8px; font-size: .8125rem; color: var(--muted); }
.vw-bild a { color: inherit; }

/* Narrow: a table reads as stacked rows, label beside value. */
@container (max-width: 559px) {
  .vw-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vw-tabelle, .vw-tabelle tbody, .vw-tabelle tr, .vw-tabelle td { display: block; width: 100%; }
  .vw-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .vw-tabelle td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border: 0; text-align: right; }
  .vw-tabelle td::before { content: attr(data-spalte); color: var(--muted); font-size: .8125rem; text-align: left; white-space: nowrap; }
  .vw-tabelle td:first-child { font-weight: 600; }
  .vw-detail td::before { content: none; }
  .vw-detail td { display: block; text-align: left; }
  .vw-aktion .vw-btn { width: 100%; }
}

/* The Widescreen layer. The layer is the container: every composition below
   follows the real width of the display. */
.vw-schicht { container: vw-flaeche / inline-size; position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--ink); font-family: var(--body); outline: none; animation: vw-rein 120ms linear; overflow: auto; }
@keyframes vw-rein { from { opacity: 0; } }
.vw-leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 2.4vw, 48px); border-bottom: 1px solid var(--line); }
.vw-schicht.is-neu .vw-leiste { border-bottom-color: var(--lime); }
.vw-modus { margin: 0; font-size: .9375rem; font-weight: 600; }
.vw-modus::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--lime); border-radius: 50%; }
.vw-leiste-rechts { display: flex; gap: 8px; }
.vw-buehne { position: relative; min-height: 0; padding: clamp(16px, 3vw, 64px) clamp(16px, 2.4vw, 48px); display: grid; gap: 24px; align-content: start; }
.vw-buehne .vw { container-type: normal; }
.vw-buehne .vw-kopf { max-width: none; }
.vw-unter { max-width: 60ch; }
.vw-anker { display: none; }
.vw-kugel { display: block; width: 100%; aspect-ratio: 1; }

/* 16:9: AURA as a rail, finding and evidence beside it, centred on the height. */
@container vw-flaeche (min-width: 1100px) {
  .vw-buehne { grid-template-columns: minmax(120px, 13cqi) minmax(0, 1fr); align-content: center; align-items: center; gap: clamp(24px, 3cqi, 72px); }
  .vw-anker { display: block; }
  .vw-buehne .vw { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4cqi, 96px); align-items: center; }
  .vw-buehne .vw-befund { font-size: clamp(3.25rem, 5cqi, 7rem); }
  .vw-buehne .vw-unter { font-size: clamp(1.0625rem, 1.2cqi, 1.5rem); }
  .vw-buehne .vw-tabelle { font-size: clamp(.9375rem, 1cqi, 1.25rem); }
  .vw-buehne .vw-beleg, .vw-buehne .vw-bild { margin-top: 0; }
  .vw-buehne .vw-bild img { max-height: calc(100vh - 170px); }
}
/* 21:9: the finding keeps its measure, the evidence takes the width. */
@container vw-flaeche (min-width: 2400px) {
  .vw-buehne { grid-template-columns: 260px minmax(0, 1fr); }
  .vw-buehne .vw { grid-template-columns: minmax(0, 900px) minmax(0, 1fr); gap: 96px; }
  .vw-buehne .vw-befund { font-size: clamp(5.5rem, 4.4cqi, 8.5rem); }
  .vw-buehne .vw-tabelle { font-size: 1.25rem; max-width: 1200px; }
}
/* 32:9: AURA in the middle, the finding left of it, the evidence right of it.
   Both lean towards the anchor, the outer ends stay calm. */
@container vw-flaeche (min-width: 4000px) {
  .vw-buehne { grid-template-columns: minmax(0, 1fr); }
  .vw-buehne .vw { grid-template-columns: minmax(0, 1fr) 460px minmax(0, 1fr); gap: 72px; }
  .vw-buehne .vw-kopf { grid-column: 1; justify-self: end; width: min(100%, 1000px); max-width: none; }
  .vw-buehne .vw-beleg, .vw-buehne .vw-bild { grid-column: 3; justify-self: start; width: min(100%, 1500px); }
  .vw-anker { position: absolute; left: 50%; top: 50%; width: 400px; transform: translate(-50%, -50%); }
  .vw-buehne .vw-tabelle { font-size: 1.375rem; }
}
.vw-schicht[data-nur="true"] .vw-beleg, .vw-schicht[data-nur="true"] .vw-quelle { display: none; }
.vw-schicht[data-nur="true"] .vw-buehne .vw { grid-template-columns: minmax(0, 1fr); }

@media (prefers-reduced-motion: reduce) { .vw-schicht { animation: none; } .vw-btn { transition: none; } }
@media (max-width: 767px) { .vw-leiste { flex-wrap: wrap; } .vw-btn { min-height: 48px; } }