/* Kortex components (docs/design/components.md). Values only from tokens.css. Mobile first; desktop: one
   centred column (max 560 px). No hover-only information; disclosure via <details>. The only modal is the
   strategy detail sheet of onboarding step 3 (<dialog class="sheet">, full screen on mobile). */

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }  /* scrollbar or not, the column stays put between pages */
a { color: var(--ink); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- Typography roles (SPEC §4.1, applied everywhere) ----------------------------------------
   1. naming & controls  -> mono, lower case: titles, section labels, summaries, nav, buttons, links, tags,
                            step titles, KPI labels, names in rows (.kv left side, .row__title)
   2. values             -> mono, case as given: numbers, amounts, %, quantities, dates, symbols, ISIN
   3. calculation lines  -> .calc: mono 12 px muted bullets (case as given)
   4. sentences          -> text (Roboto 300), normal case: explanations, reasons, hints, sub lines (.sub, p)
   Inside a mono row a sentence part is wrapped in .text / .sub. */
.text, p { font-family: var(--font-text); font-weight: var(--weight-light); }
p { margin: 0; line-height: 1.5; }
.sub { display: block; font-family: var(--font-text); font-weight: var(--weight-light); font-size: var(--size-small); color: var(--muted); line-height: 1.45; }
.meta { font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }
.kv .meta, .kv .sub { display: block; white-space: normal; }
.sublabel { font-family: var(--font-mono); font-size: var(--size-label); color: var(--ink); }
.kv { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: var(--size-body); }
.kv > :last-child { text-align: right; white-space: nowrap; }
.kv .is-soon { font-weight: var(--weight-medium); }
.calc { list-style: disc; margin: 4px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.calc li { font-family: var(--font-mono); font-size: var(--size-small); line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }

/* ---- AppShell --------------------------------------------------------------------------------- */
.shell { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.shell--wide { max-width: min(1400px, 100%); }  /* admin tables (Betrieb); .table-scroll stays the mobile fallback */
.shell__main { flex: 1; padding: 22px var(--gutter) 110px; display: flex; flex-direction: column; gap: var(--gap-section); }
.topline { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-tight); }
.brand { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: 15px; letter-spacing: 0.06em; text-decoration: none; }
.topline__meta { font-family: var(--font-mono); font-size: var(--size-label); color: var(--muted); display: flex; gap: 12px; align-items: center; }
.topline__meta a { color: var(--muted); }

.page-title { display: flex; flex-direction: column; gap: 8px; }
.page-title h1 { margin: 0; font-family: var(--font-mono); font-weight: var(--weight-light); font-size: var(--size-display); letter-spacing: 0.02em; line-height: 1.05; }
.page-title h1.long { font-size: var(--size-display-2); }
.page-title__sub { font-family: var(--font-mono); font-size: var(--size-body); color: var(--muted); }
.page-title__figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.page-title__figure .figure { font-family: var(--font-mono); font-weight: var(--weight-light); font-size: 22px; }
.rule { border-top: 1.5px dashed var(--rule-dashed); margin-top: 6px; }

.section { display: flex; flex-direction: column; gap: var(--gap-tight); }
.section-label { font-family: var(--font-mono); font-size: var(--size-label); color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }

.back { font-family: var(--font-mono); font-size: var(--size-body); min-height: var(--touch); display: inline-flex; align-items: center; text-decoration: none; }

:root { --nav-h: calc(var(--touch) + 34px + env(safe-area-inset-bottom, 0px)); }  /* height of .bottom-nav */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--border); z-index: 10; }
.bottom-nav__inner { max-width: 560px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 10px 8px calc(24px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav a { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: var(--touch); text-decoration: none; color: var(--muted); font-family: var(--font-mono); font-size: var(--size-body); }
.bottom-nav a[aria-current="page"] { color: var(--ink); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 6px; }
.bottom-nav .count { color: var(--ink); }

/* ---- cards, lists ----------------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad-card); color: var(--ink-2); }
.card--center { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px; }
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: var(--gap-tight); padding: 12px var(--pad-card); min-height: var(--touch); border-bottom: 1px solid var(--divider); text-decoration: none; color: var(--ink); }
.row:last-child { border-bottom: 0; }
.row__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__title { font-family: var(--font-mono); font-size: 15px; }
.row__title--text { font-family: var(--font-text); font-weight: var(--weight-regular); }
.row__sub { font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }  /* metadata line */
.row__sub--warn { color: var(--state-defensive); }
.row--group { background: var(--surface-sunken); }  /* a sleeve (basis, dynamisch, aktiv) above its strategies */
.row--indent { padding-left: calc(var(--pad-card) + 8px); }  /* the calculation could not follow the model (notice) */
.row__end { font-family: var(--font-mono); font-size: var(--size-body); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.row__arrow { font-family: var(--font-mono); }
.locked { border: 1px dashed var(--locked-border); border-radius: var(--radius); color: var(--faint); background: transparent; padding: 14px var(--pad-card); display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; min-height: var(--touch); }
.locked .marker, .marker { font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }
.row.locked-row { color: var(--faint); }


.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; border-left: 1px dashed var(--line-dashed); }
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi__value { font-family: var(--font-mono); font-weight: var(--weight-light); font-size: var(--size-figure-l); color: var(--ink); }
.kpi__label { font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }

/* ---- disclosure ------------------------------------------------------------------------------- */
details.expand { border-top: 1px solid var(--divider); }
details.expand > summary { list-style: none; cursor: pointer; min-height: var(--touch); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: var(--size-body); }
details.expand > summary::-webkit-details-marker { display: none; }
details.expand > summary .sign::after { content: "+"; }
details.expand[open] > summary .sign::after { content: "−"; }
.expand-body { padding: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.row--info { display: block; padding-top: 0; padding-bottom: 0; }  /* the «i» as the last line inside a box */
.row--info details.info > summary { width: 100%; justify-content: flex-end; }
.row--info details.info[open] > p { padding-bottom: 12px; }
details.info > summary { list-style: none; cursor: pointer; min-height: var(--touch); display: inline-flex; align-items: center; }
details.info > summary::-webkit-details-marker { display: none; }
details.info .info__i { width: 20px; height: 20px; border: 1px solid var(--muted); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--size-label); color: var(--muted); }
details.info[open] .info__i { background: var(--muted); color: var(--surface, #fff); }
details.order { border-bottom: 1px solid var(--divider); }
details.order:last-child { border-bottom: 0; }
details.order > summary { list-style: none; cursor: pointer; padding: 14px var(--pad-card); min-height: 56px; display: flex; align-items: center; gap: 10px; }
details.order > summary::-webkit-details-marker { display: none; }
details.order[open] > summary { background: var(--surface-sunken); }
details.order .order-body { padding: 0 var(--pad-card) 14px; background: var(--surface-sunken); display: flex; flex-direction: column; gap: 8px; font-size: var(--size-body); }

/* ---- choices ---------------------------------------------------------------------------------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--font-mono); font-size: var(--size-label); border: 1px solid var(--ink); border-radius: var(--radius); padding: 6px 12px; text-decoration: none; background: transparent; cursor: pointer; min-height: 32px; }
.chip[aria-current="true"], .chip.is-active { background: var(--ink); color: #FFFFFF; }
/* region switch (strategy page): the flag stays readable, so the current chip is marked by a heavier border */
.region-switch .chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.region-switch .chip[aria-current="true"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: var(--weight-medium); }
.region-switch .chip--off { border-style: dashed; border-color: var(--line-dashed); color: var(--muted); cursor: default; }
.region-switch .chip--off .flag { opacity: .4; }
.region-switch__none { font-size: var(--size-small); color: var(--muted); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.segmented a { text-align: center; padding: 10px; font-family: var(--font-mono); font-size: var(--size-body); text-decoration: none; min-height: var(--touch); }
.segmented a[aria-current="true"] { background: var(--ink); color: #FFFFFF; }
.choice { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px var(--pad-card); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ink); }
.strategy-row:has(input:checked) { background: var(--divider); }  /* the chosen row in a list, clearly marked */
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.choice__main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.choice__title { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.choice__sub { font-size: var(--size-label); color: var(--muted); }
.choice--locked { border-style: dashed; border-color: var(--locked-border); background: transparent; cursor: default; }
.choice--locked .choice__title, .choice--locked .choice__sub { color: var(--faint); }
.choice--locked .marker { flex: none; text-decoration: none; }
.default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
input[type=range] { width: 100%; accent-color: var(--ink); }
.toggle { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.toggle label { padding: 6px 10px; font-family: var(--font-mono); font-size: var(--size-small); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle label:has(input:checked) { background: var(--ink); color: #FFFFFF; }
.question { font-weight: var(--weight-light); font-size: var(--size-question); line-height: 1.35; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, label.small { font-family: var(--font-mono); font-size: var(--size-label); color: var(--muted); }
.input, .field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font-family: var(--font-mono); font-size: var(--size-body-l); width: 100%; }
.input--figure { font-size: var(--size-figure-l); font-weight: var(--weight-light); }
.input--small { width: auto; padding: 6px 8px; font-size: var(--size-small); }
.input--weight { width: 5.5em; padding: 8px 10px; text-align: right; }
.nowrap { white-space: nowrap; }
.row--stacked { flex-wrap: wrap; }
.row--stacked .row__main { flex: 1 1 100%; }
.row__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- buttons, links --------------------------------------------------------------------------- */
.btn-primary, .btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--button-h); border-radius: var(--radius); font-family: var(--font-mono); font-size: 15px; text-decoration: none; cursor: pointer; width: 100%; padding: 0 16px; }
.btn-primary { background: var(--ink); color: #FFFFFF; border: 1px solid var(--ink); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.textlink, .btn-link { font-family: var(--font-mono); font-size: var(--size-body); text-decoration: underline; text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.btn-dashed { border: 1px dashed var(--locked-border); border-radius: var(--radius); background: transparent; min-height: var(--touch); font-family: var(--font-mono); font-size: var(--size-body); cursor: pointer; width: 100%; }

/* ---- badges, states --------------------------------------------------------------------------- */
.tag { font-family: var(--font-mono); font-size: var(--size-small); border: 1px solid var(--ink-2); border-radius: var(--radius-badge); padding: 1px 6px; color: var(--ink-2); white-space: nowrap; }
.watch-icon { display: inline-flex; align-items: center; gap: 2px; color: var(--state-defensive); cursor: help; vertical-align: middle; }
.watch-icon__bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 10px; }
.watch-icon__bars i { display: block; width: 3px; background: var(--muted-2); opacity: .35; }
.watch-icon__bars i:nth-child(1) { height: 4px; } .watch-icon__bars i:nth-child(2) { height: 7px; } .watch-icon__bars i:nth-child(3) { height: 10px; }
.watch-icon__bars i.on { background: currentColor; opacity: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.side-buy, .side-sell { font-family: var(--font-mono); font-size: var(--size-small); padding: 1px 6px; border-radius: var(--radius-badge); border: 1px solid var(--ink); white-space: nowrap; }
.side-buy { background: var(--surface); color: var(--ink); }
.side-sell { background: var(--ink); color: #FFFFFF; }
.badge-change { font-family: var(--font-mono); font-size: var(--size-small); background: var(--ink); color: #FFFFFF; border-radius: var(--radius-badge); padding: 1px 6px; white-space: nowrap; }
.state-offensive, .positive { color: var(--state-offensive); }
.state-defensive, .negative { color: var(--state-defensive); }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.figure-m { font-family: var(--font-mono); font-weight: var(--weight-light); font-size: var(--size-figure-m); }
.note, .flash { font-size: var(--size-label); line-height: 1.5; border-left: 3px solid var(--line-dashed); padding: 8px 12px; background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.flash--err, .note--warn { border-left-color: var(--state-defensive); }
.flash--ok, .note--ok { border-left-color: var(--state-offensive); }
.disclaimer { font-size: var(--size-small); color: var(--muted-2); line-height: 1.5; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); font-size: var(--size-micro); color: var(--muted); }
.legend__hint { font-family: var(--font-mono); font-size: var(--size-micro); color: var(--muted-2); text-align: center; }

/* allocation bars (strategy detail) */
.alloc-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.alloc-row:last-child { border-bottom: 0; }
.alloc-row__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: var(--size-body); }
.alloc-row__bar { height: 4px; background: var(--divider); border-radius: 2px; overflow: hidden; }
.alloc-row__bar > span { display: block; height: 100%; background: var(--ink); }

/* reduced calendar (morgen · als nächstes): date column, entries of that trading day; the margin before a day
   grows with the days in between (set by the view) */
.cal { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--divider); }
.cal__day { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; position: relative; }
.cal__day::before { content: ""; position: absolute; left: -16px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1px solid var(--muted); }
.cal__day.is-soon::before { background: var(--ink); border-color: var(--ink); }
.cal__date { font-family: var(--font-mono); font-size: var(--size-body); display: flex; flex-direction: column; gap: 2px; }
.cal__items { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cal__item { display: flex; flex-direction: column; gap: 1px; }
.cal__title { font-family: var(--font-mono); font-size: var(--size-body); }
.cal__day.is-soon .cal__title, .cal__day.is-soon .cal__date { font-weight: var(--weight-medium); }
.chart { width: 100%; height: auto; display: block; }
.step__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step__title { font-family: var(--font-mono); font-size: var(--size-body); color: var(--ink); }
.step__text { font-family: var(--font-text); font-weight: var(--weight-light); color: var(--muted); }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; text-align: center; }
.pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pair figcaption { font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }
.ring-icon { flex: none; }
.legend-row { display: flex; align-items: center; gap: 10px; min-height: var(--touch); border-bottom: 1px solid var(--divider); text-decoration: none; color: var(--ink); }
.legend-row:last-child { border-bottom: 0; }
.legend-row__name { flex: 1; font-family: var(--font-mono); font-size: 15px; }
.legend-row__name small { font-size: var(--size-small); color: var(--muted-2); }
.legend-row__value { font-family: var(--font-mono); font-size: 15px; }
.legend-row__target { width: 64px; text-align: right; font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }
.legend-row--empty { color: var(--faint); }
.stack { display: flex; flex-direction: column; gap: var(--gap-block); }

/* ---- forms and tables of the settings/admin pages (not part of the designed screens) ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--size-label); }
.data-table th { text-align: left; color: var(--muted); font-weight: var(--weight-regular); font-family: var(--font-mono); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
.data-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--divider); vertical-align: top; }
.data-table .num { text-align: right; white-space: nowrap; font-family: var(--font-mono); }
.data-table tr.dim td { color: var(--muted); }
.table-scroll { overflow-x: auto; }
.fill-table .input { width: 7.5em; text-align: right; }
.fill-table .meta { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.form-grid input, .form-grid select, textarea { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; width: 100%; font-family: var(--font-mono); }
.form-grid label { font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); display: block; margin-bottom: 4px; }
.inline { display: inline; }
/* product catalogue in Betrieb: one compact row per strategy/profile, one sticky save bar */
.cat-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat-filters .input--small { flex: 1 1 120px; }
.cat-filter-check { font-family: var(--font-mono); font-size: var(--size-small); display: inline-flex; gap: 6px; align-items: center; }
.cat-table td { vertical-align: middle; white-space: nowrap; }
.cat-table td.cat-name { white-space: normal; min-width: 160px; }
.cat-table .cat-name summary { cursor: pointer; }
.cat-detail { min-width: 260px; padding-top: 6px; }
.cat-assets { display: flex; gap: 6px; font-family: var(--font-mono); font-size: var(--size-small); }
.cat-assets label { display: inline-flex; gap: 2px; align-items: center; }
.cat-row.is-changed td { background: var(--surface); }
.cat-row.is-changed td:first-child { box-shadow: inset 3px 0 0 var(--ink); padding-left: 6px; }
.cat-save { position: sticky; bottom: var(--nav-h); z-index: 5; display: flex; flex-direction: column; gap: 4px; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--border); }
.cat-row.is-disabled td { color: var(--muted); }

/* layout helpers for screen compositions */
.card--link { display: block; color: inherit; text-decoration: none; }
.donut-row { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.flags { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 6px; }
.flag { display: block; }
/* strategy list (katalog, onboarding step 3) and the detail sheet of the onboarding */
.strategy-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.strategy-row__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; font-family: var(--font-mono); font-size: var(--size-body); }
.strategy-row__head .row__title { min-width: 0; overflow-wrap: anywhere; }
.strategy-row__aside { display: inline-flex; flex: none; justify-content: flex-end; align-items: center; gap: 4px; white-space: nowrap; }
a.strategy-row__open { color: var(--ink); text-decoration: none; }
a.strategy-row__open:hover, a.strategy-row__open:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.choice--locked a.strategy-row__open { color: var(--faint); }
.strategy-row__check { flex: none; display: flex; cursor: pointer; }
.choice .strategy-row__body { cursor: pointer; }
.strategy-row__chevron { flex: none; align-self: center; font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }
.locked .row__title, .choice--locked .row__title { color: var(--faint); }
.list-more { min-height: 1px; }  /* sentinel: next rows when it scrolls into view */
/* werkstatt list: compact rows (title over the full width, flags and numbers below), pages with a pager */
.strategy-row--compact { padding: 10px var(--pad-card); }
.strategy-row--compact .strategy-row__body { gap: 4px; }
.strategy-row--compact .row__title { font-family: var(--font-mono); font-size: var(--size-body); overflow-wrap: anywhere; }
.strategy-row__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.picker__chosen { display: flex; flex-direction: column; gap: 8px; }
.picker__chosen .chips:empty { display: none; }
.picker__chosen .chip { text-align: left; }
.picker__filter { margin-bottom: 12px; }
/* correlation to the choice: a small -1 … 1 scale with a bar from the middle, and the value */
.corr { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-label); color: var(--muted); }
.corr[hidden] { display: none; }
.corr__bar { position: relative; width: 56px; height: 6px; border: 1px solid var(--border); border-radius: 3px; }
.corr__bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px solid var(--muted); }
.corr__bar i { position: absolute; top: 0; bottom: 0; background: var(--ink); border-radius: 2px; }
.picker__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip--small { min-height: 28px; padding: 4px 10px; font-size: var(--size-label); }
.chip[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 20px; }
.pager [data-role=pos] { white-space: nowrap; }
.pager__step { width: 64px; flex: none; padding: 0; }
.pager__step:disabled { opacity: .3; cursor: default; }
.sheet { width: min(560px, calc(100vw - 32px)); max-height: 90vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--ink-2); }
.sheet::backdrop { background: var(--backdrop); }
.sheet-open { overflow: hidden; }  /* background does not scroll while the sheet is open */
.sheet__body { max-height: 90vh; overflow-y: auto; padding: 0 16px 16px; }
.sheet__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; background: var(--bg); }
@media (max-width: 600px) {
  .sheet { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .sheet__body { height: 100%; max-height: 100dvh; }
}

/* heute: distribution of states across the catalogue */
.lage-bar { display: flex; height: 8px; width: 100%; background: var(--divider); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.lage-bar__seg { display: block; height: 100%; background: var(--muted); opacity: .45; }
/* one shade per group, from risk-on (green) over neutral (grey) to defensive (brown); legend swatches reuse them */
.lage-bar__seg--offensive { background: var(--state-offensive); opacity: 1; }
.lage-bar__seg--mixed { background: var(--state-offensive); opacity: .55; }
.lage-bar__seg--breadth { background: var(--state-offensive); opacity: .28; }
.lage-bar__seg--neutral { background: var(--muted); opacity: .5; }
.lage-bar__seg--strategy_specific { background: var(--muted); opacity: .25; }
.lage-bar__seg--defensive { background: var(--state-defensive); opacity: 1; }
.lage-bar__seg--cash { background: var(--state-defensive); opacity: .45; }
.lage-bar__seg--data_unavailable { background: var(--line-dashed); opacity: 1; }
.lage-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); }
.lage-legend__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lage-legend__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* regime scale R1 … R5: all levels, only the current one in its colour */
.regime-scale { display: flex; gap: 3px; margin: 6px 0 4px; }
.regime-scale__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0;
  border-radius: var(--radius-badge); background: var(--divider); color: var(--faint);
  font-family: var(--font-mono); font-size: var(--size-micro); line-height: 1.3; }
.regime-scale--labels .regime-scale__step { padding: 4px 2px; }
.regime-scale__step small { font-size: 10px; text-align: center; }
.regime-scale__step.is-active { color: var(--surface); }
.regime-scale__step--r1.is-active { background: var(--state-offensive); }
.regime-scale__step--r2.is-active { background: color-mix(in srgb, var(--state-offensive) 65%, var(--surface)); }
.regime-scale__step--r3.is-active { background: var(--muted); }
.regime-scale__step--r4.is-active { background: color-mix(in srgb, var(--state-defensive) 65%, var(--surface)); }
.regime-scale__step--r5.is-active { background: var(--state-defensive); }

/* regime band: the last phases, oldest left, in the colours of the active scale step */
.regime-band { display: block; margin: 2px 0 4px; }
.regime-band__bar { display: flex; height: 8px; border-radius: var(--radius-badge); overflow: hidden; background: var(--divider); }
.regime-band__phase { display: block; min-width: 1px; }
.regime-band__phase--r1 { background: var(--state-offensive); }
.regime-band__phase--r2 { background: color-mix(in srgb, var(--state-offensive) 65%, var(--surface)); }
.regime-band__phase--r3 { background: var(--muted); }
.regime-band__phase--r4 { background: color-mix(in srgb, var(--state-defensive) 65%, var(--surface)); }
.regime-band__phase--r5 { background: var(--state-defensive); }
.regime-band__axis { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: var(--size-micro); color: var(--faint); }

/* lage/regime: episode bands behind the lines, R1 (risk-on) to R5 (defensive), low opacity */
.chart--regime .band--r1 { fill: var(--state-offensive); fill-opacity: .28; }
.chart--regime .band--r2 { fill: var(--state-offensive); fill-opacity: .13; }
.chart--regime .band--r3 { fill: var(--muted); fill-opacity: .12; }
.chart--regime .band--r4 { fill: var(--state-defensive); fill-opacity: .14; }
.chart--regime .band--r5 { fill: var(--state-defensive); fill-opacity: .3; }
.chart--regime .line, .chart--unterwasser .line { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart--regime .line--1, .chart--unterwasser .line--1 { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart--unterwasser .line { stroke-width: 1.5; }
.regime-metric { padding: 8px 0; border-top: 1px solid var(--divider); }
.regime-metric:first-of-type { margin-top: 8px; }
.regime-metric .sub { margin: 4px 0 0; }

/* lage: strategies without a state model (every strategy counts once) */
.lage-bar__seg--none { background: var(--line-dashed); opacity: .5; }

/* multi-select filter (katalog, onboarding): <details> with checkboxes, OR within; opens over the list */
details.multi-filter { position: relative; }
details.multi-filter > summary { list-style: none; cursor: pointer; min-height: var(--touch); display: flex; align-items: center;
  padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--size-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.multi-filter > summary::-webkit-details-marker { display: none; }
.multi-filter__options { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--size-small); }
.multi-filter__options label { display: flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.multi-filter__child { padding-left: 20px; color: var(--muted); }

/* vergleichen: the circle of the compared mix beside its sleeves and asset classes */
.chart--regime .line--prev { stroke: var(--faint); stroke-width: 1.2; }

/* Mischungs-Werkstatt: one row per ring – icon, name and chosen strategies, share slider, «wählen» */
.ring-row__main { flex: 1; min-width: 0; }
.ring-row__head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ring-row__name { font-family: var(--font-mono); }
.ring-row__wahl { flex: 1; text-align: right; }
.ring-row__titles { color: var(--muted); }
.ring-row__slider { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.ring-row__slider input[type=range] { flex: 1; }
.share-slider { display: flex; gap: 10px; align-items: center; }
.share-slider input[type=range] { flex: 1; }
.inline-action { display: flex; gap: 10px; align-items: stretch; }
.inline-action select { flex: 1; min-width: 0; }
.inline-action button { flex: none; width: auto; }
.werkstatt-kreis { display: grid; gap: 12px; justify-items: center; }
.step-head { font-family: var(--font-mono); font-size: var(--size-label); color: var(--muted); margin: 4px 0 0; }
.step-head strong { font-weight: 500; }
.step-head--basis strong { color: var(--ring-basis); }
.step-head--dynamisch strong { color: var(--ring-dynamisch); }
#stufe { margin-top: 16px; }
.kreis-anteil { font-family: var(--font-mono); font-size: 10px; font-weight: 500; fill: var(--ink); }
.kreis-anteil--hell { fill: #FFFFFF; }
.kreis-stuecke { width: 100%; }
.kreis-stueck { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.kreis-stueck span:nth-child(2) { flex: 1; }
/* werkstatt result: the dynamic shares typed in 5 % steps, the calculation right below */
.werkstatt-anteile .kreis-stueck { align-items: center; }
.werkstatt-anteile .kreis-stueck label { flex: 1; }
.werkstatt-anteile .anteil { white-space: nowrap; }
.werkstatt-anteile .anteil input { width: 5.5em; text-align: right; }
.werkstatt-anteile .anteil-vorher { flex: none; width: 6.5em; text-align: right; white-space: nowrap; }
/* background calculation: the clicked button (htmx-request on it) gets a strong edge and a spinner; black once done */
[data-role=optimizer] .btn-secondary.htmx-request { box-shadow: inset 0 0 0 1px var(--ink); cursor: progress; }
[data-role=optimizer] .btn-secondary.htmx-request::after { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid var(--border); border-top-color: var(--ink); border-radius: 50%; animation: rechnet 0.8s linear infinite; }
@keyframes rechnet { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-role=optimizer] .btn-secondary.htmx-request::after { animation: none; } }
/* «gewichte berechnen»: one button per goal, the one behind the weights marked; targets with their field */
.ziel-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.ziel-knoepfe .btn-secondary { font-size: var(--size-body); padding: 0 8px; }
/* after a calculation: before and after in one place */
.werkstatt-kandidat { margin: 12px 0; }
.kandidat-tabelle { table-layout: fixed; width: 100%; }
.kandidat-tabelle .kandidat-spalte { width: 34%; }  /* vorher and nachher equally wide */
.btn-secondary.is-active { background: var(--ink); color: #FFFFFF; }
.ziel-wert { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ziel-wert label { flex: 1; font-family: var(--font-mono); font-size: var(--size-body); }
.ziel-wert .anteil input { width: 5em; text-align: right; }
.ziel-wert .btn-secondary { width: auto; flex: none; }
/* a click switches a strategy off (0 %, greyed, still chosen) and on again */
.switch, .switch-placeholder { flex: none; width: var(--touch); height: var(--touch); }
.switch { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); cursor: pointer; padding: 0; }
.switch--ein { color: var(--faint); border-style: dashed; }
.switch:hover, .switch:focus-visible { border-color: var(--ink); color: var(--ink); }
.werkstatt-anteile .kreis-stueck--aus span:nth-child(2) { flex: 1; }
.kreis-stueck--aus { color: var(--faint); }
.kreis-stueck--aus .mono { width: 5.5em; text-align: right; padding-right: 1.2em; }
.werkstatt-rechner { margin-top: 16px; }
.werkstatt-rechner .btn-row { grid-template-columns: 1fr auto; }
.werkstatt-rechner .btn-row select { min-width: 0; }
.kreis-sicht { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.card--center .kreis-stuecke { text-align: left; max-width: 360px; margin: 8px auto 0; }
/* the views under the werkstatt circle: a bar, one view at a time (all stacked without JS) */
/* the werkstatt result as one work area (FLOW-03): the mode on <body> shows only the parts made for it */
/* untersuchen (XR-03/04): cards of the circle's pieces, «was drinsteckt» and the strategies it marks */
#kreis path[data-sid] { cursor: pointer; transition: opacity 0.15s; }
#kreis path[data-sid]:focus { outline: none; }
#kreis path[data-sid]:focus-visible { stroke: var(--ink); stroke-width: 1.5; }
#kreis path.is-blass { opacity: 0.25; }
#kreis .meldrum text { pointer-events: none; }  /* a tap on the % of a piece is a tap on the piece */
/* the list of the strategies: ▸ unfolds a row below it, indented under the name */
.anteil-mehr { flex: none; background: none; border: 0; padding: 4px 6px; margin: -4px -6px -4px 2px; font: inherit; color: var(--muted); cursor: pointer; transition: transform 0.15s; }
.anteil-mehr:hover, .anteil-mehr:focus-visible { color: var(--ink); }
.anteil-mehr.is-offen { transform: rotate(90deg); color: var(--ink); }
.anteil-detail { padding: 2px 0 8px 1.4em; }
body[data-modus=untersuchen] .werkstatt-anteile .switch { visibility: hidden; }  /* nothing to switch there */
.anteil-detail p { margin: 2px 0; }
.drinsteckt { margin-top: 16px; }
.drinsteckt__liste { list-style: none; margin: 6px 0; padding: 0; }
.drinsteckt__zeile { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; padding: 6px 4px; border-bottom: 1px solid var(--line-dashed); cursor: pointer; }
.drinsteckt__zeile .balken, .drinsteckt__mehr { grid-column: 1 / -1; }
.drinsteckt__mehr { display: none; color: var(--muted); }
.drinsteckt__zeile.is-aktiv .drinsteckt__mehr { display: block; }  /* tapped: the contributions in numbers */
/* the hierarchy: an asset class (summary) unfolds into its positions, indented; the cash closes the whole */
.drinsteckt__klasse { border-bottom: 1px solid var(--line-dashed); }
.drinsteckt__kopf { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; padding: 8px 4px; cursor: pointer; list-style: none; }
.drinsteckt__kopf::-webkit-details-marker { display: none; }
.drinsteckt__kopf .balken { grid-column: 1 / -1; height: 10px; }
.drinsteckt__kopf .drinsteckt__name::before { content: "▸ "; color: var(--muted); }
.drinsteckt__klasse[open] > .drinsteckt__kopf .drinsteckt__name::before { content: "▾ "; }
.drinsteckt__kopf--cash { cursor: default; border-bottom: 1px solid var(--line-dashed); }
.drinsteckt__kopf--cash .drinsteckt__name { color: var(--muted); }
.drinsteckt__kopf--cash .drinsteckt__name::before { content: ""; }
.drinsteckt__klasse.is-leer .drinsteckt__kopf { cursor: default; color: var(--muted); }
.drinsteckt__klasse.is-leer .drinsteckt__name::before { content: "  "; white-space: pre; }
.drinsteckt__zeile--cash { cursor: default; color: var(--muted); }
.drinsteckt__kopf--summe { cursor: default; border-top: 1px solid var(--ink); margin-top: -1px; }
.drinsteckt__kopf--summe .drinsteckt__name::before { content: ""; }
.drinsteckt__zuklappen { font-family: var(--font-mono); font-size: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-decoration: underline; }
.drinsteckt__klasse .drinsteckt__liste { margin: 0 0 6px 1.2em; }
/* flags as in the catalogue: before a position of one country, in the region chips (inverted on the dark chip) */
.drinsteckt__name .flag { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.drinsteckt__option:has(input:checked) .flag { filter: invert(1); }
/* region filter and breakdown of a class: chips, the radio inside stays for keyboard and form */
.drinsteckt__wahl { border: 0; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.drinsteckt__wahl legend { float: left; margin-right: 6px; padding: 0; }
.drinsteckt__wahl--klasse { margin: 0 0 6px 1.2em; }
.drinsteckt__option { font-family: var(--font-mono); font-size: var(--size-label); border: 1px solid var(--line-dashed); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.drinsteckt__option input { position: absolute; opacity: 0; pointer-events: none; }
.drinsteckt__option:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.drinsteckt__option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.drinsteckt__gruppe { margin-left: 1.2em; border-bottom: 1px solid var(--line-dashed); }
.drinsteckt__gruppe[open] > .drinsteckt__kopf .drinsteckt__name::before { content: "▾ "; }
.drinsteckt__gruppe .drinsteckt__kopf .balken { height: 7px; }
/* the regions: world map (darker = more of the mix), the regions over several countries as bars under it */
.drinsteckt__regionen { border: 0; margin: 8px 0 12px; padding: 0; min-width: 0; }
.drinsteckt__regionen > legend { padding: 0; }
.weltkarte { display: block; width: 100%; height: auto; margin: 4px 0 6px; }  /* coarse, over the whole width */
.weltkarte__land, .weltkarte__region.is-leer { fill: color-mix(in srgb, var(--ink) 16%, var(--surface)); }
.weltkarte__land, .weltkarte__region { stroke: none; }  /* no borders between the countries */
.weltkarte__region:not(.is-leer) { cursor: pointer; }
.weltkarte__region:not(.is-leer):hover { opacity: .75; }
.weltkarte.has-wahl .weltkarte__region:not(.is-gewaehlt):not(.is-leer) { opacity: .3; }  /* a chosen region: the others pale */
.drinsteckt__farbe { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.drinsteckt__option:has(input:checked) .drinsteckt__farbe { outline: 1px solid #FFFFFF; }
.drinsteckt__breit { margin-top: 6px; }
.drinsteckt__breit > p { margin: 0 0 2px; }
.drinsteckt__breitzeile { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; padding: 6px 4px; border-bottom: 1px solid var(--line-dashed); cursor: pointer; }
.drinsteckt__breitzeile .balken { grid-column: 1 / -1; }
.drinsteckt__breitzeile input { position: absolute; opacity: 0; pointer-events: none; }
.drinsteckt__breitzeile:has(input:checked) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.drinsteckt__breitzeile:has(input:checked) .drinsteckt__name { font-weight: var(--weight-medium); }
.drinsteckt__breitzeile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.drinsteckt.is-fokus .balken__teil:not(.is-fokus) { opacity: 0.2; }  /* a tapped piece: its parts stand out */
/* risikobeitrag: the bar of the risk, a mark at the share of the money */
.risikozeile { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; padding: 6px 4px; border-bottom: 1px solid var(--line-dashed); }
.risikozeile .balken, .risikozeile__senkt { grid-column: 1 / -1; }
.risikobalken { position: relative; overflow: visible; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.risikobalken__risiko { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
/* a bar split by strategy (or asset class): the parts side by side, their width a share of the bar area */
.balken { display: flex; height: 8px; border-radius: 2px; overflow: hidden; }
.balken__teil { display: block; height: 100%; flex: none; }
.balken__teil + .balken__teil { margin-left: 1px; }
.drinsteckt__zeile.is-geteilt > span:first-child::after { content: " ●"; }
.drinsteckt__zeile.is-aktiv { background: color-mix(in srgb, var(--ink) 8%, transparent); }
/* the correlation while choosing (DISC-01): «zusammenhänge» under the step, the pairs in the strategy detail */
.corr-block { margin-top: 16px; }
.corr-block .kv { margin: 8px 0 4px; }
.corr-matrix th[scope=row] { text-align: left; font-weight: normal; white-space: nowrap; }
/* many strategies: the column heads stand upright (read from below), the columns as narrow as the numbers */
.corr-matrix thead th { text-align: center; vertical-align: bottom; padding: 6px 4px; }
.corr-kopf { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-align: left; }
.corr-matrix .corr-zelle, .corr-matrix .corr-diag { width: 3.6em; min-width: 3.6em; }
.corr-matrix .corr-diag { background: var(--line-dashed); opacity: 0.35; }  /* with itself: no value, no colour */
@media (max-width: 600px) {  /* a phone: up to about eight strategies without swiping */
  .corr-matrix { font-size: var(--size-small); }
  .corr-matrix td, .corr-matrix th[scope=row] { padding: 6px 4px; }
  .corr-matrix .corr-zelle, .corr-matrix .corr-diag { width: 3.1em; min-width: 3.1em; }
}
.corr-matrix thead .corr-ab { margin: 0 -4px; }
.corr-matrix th .badge-change { margin-left: 4px; }
.corr-ab { background: none; border: 0; padding: 4px 6px; margin: -4px -6px -4px 0; font: inherit; color: var(--muted); cursor: pointer; }
.corr-ab:hover, .corr-ab:focus-visible { color: var(--ink); }
.corr-matrix .corr-zelle { color: var(--ink); }
.sheet__corr { margin: 12px 0 16px; }
.sheet__corr-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.sheet__corr-list li { display: flex; justify-content: space-between; gap: 12px; }
.corr__bar[hidden] { display: none; }
/* «übernehmen» asks first: what changes and when (werkstatt.html); without JS it stands open in the page */
dialog.bestaetigen { border: 1px solid var(--ink); border-radius: var(--radius); padding: 20px; background: var(--bg); color: var(--ink);
  width: min(420px, calc(100vw - 32px)); margin: 12px 0; }
dialog.bestaetigen:modal { margin: auto; }
dialog.bestaetigen::backdrop { background: rgb(0 0 0 / 0.35); }
dialog.bestaetigen .question { margin: 0 0 16px; }
.bestaetigen__kopf { display: block; font-family: var(--font-mono); font-size: var(--size-label); color: var(--muted); }
/* old and new strategies in one list: staying plain, new bold with a mark, leaving struck through and grey */
.aenderungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: var(--font-mono); font-size: var(--size-body); }
.aenderung--neu { font-weight: var(--weight-medium); }
.aenderung--neu .badge-change { margin-left: 4px; font-weight: normal; }
.aenderung--weg { color: var(--muted); }
/* the choice when, set apart from the list above: a line, then one bordered option each */
dialog.bestaetigen [data-role=when] { border-top: 1px solid var(--line-dashed); margin: 16px 0 20px; padding-top: 16px; display: grid; gap: 8px; }
dialog.bestaetigen [data-role=when] .bestaetigen__kopf { margin-bottom: 0; }
dialog.bestaetigen [data-role=when] label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-dashed);
  border-radius: var(--radius); color: var(--ink); cursor: pointer; }
dialog.bestaetigen [data-role=when] label:has(input:checked) { border-color: var(--ink); }
dialog.bestaetigen [data-role=when] input { width: auto; padding: 0; margin: 0; flex: none; accent-color: var(--ink); }
dialog.bestaetigen .btn-row { margin-top: 0; }
.modus-leiste { display: none; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; margin: 4px 0 12px; }
body[data-modus] .modus-leiste { display: grid; }
.modus-leiste button { font-family: var(--font-mono); font-size: clamp(11px, 3.4vw, 13px); background: transparent; border: 0; padding: 10px 2px; color: var(--ink); cursor: pointer; }
.modus-leiste button + button { border-left: 1px solid var(--ink); }
.modus-leiste button.is-active { background: var(--ink); color: #FFFFFF; }
body[data-modus=kombinieren] [data-zeigen]:not([data-zeigen~=kombinieren]),
body[data-modus=optimieren] [data-zeigen]:not([data-zeigen~=optimieren]),
body[data-modus=untersuchen] [data-zeigen]:not([data-zeigen~=untersuchen]) { display: none; }
body[data-modus=optimieren] .sichten__leiste { display: none; }
body[data-modus=untersuchen] .sichten__leiste { display: none; }  /* risikobeitrag only */
.sichten { width: 100%; margin-top: 14px; }
.sichten__leiste { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.sichten:not(.is-js) .sichten__leiste { display: none; }
.sichten__leiste button { font-family: var(--font-mono); font-size: clamp(10px, 3.1vw, 12px); background: transparent; border: 0; padding: 9px 2px; color: var(--ink); cursor: pointer; }
.sichten__leiste button + button { border-left: 1px solid var(--ink); }
.sichten__leiste button.is-active { background: var(--ink); color: #FFFFFF; }
.sichten__sicht { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.sichten.is-js .sichten__sichten { display: grid; }
.sichten.is-js .sichten__sichten > * { grid-area: 1 / 1; }
.sichten__sicht.is-off { visibility: hidden; }
body[data-modus=untersuchen] .sichten__sicht.is-off { display: none; }  /* risikobeitrag only, nothing to switch: no room kept */
.sichten__chart { display: block; width: 100%; height: auto; font-family: var(--font-mono); font-size: 10px; fill: var(--muted); }
.sichten__achse { stroke: var(--border); }
.sichten__frontier { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 4 3; }
.sichten__frontier--frei { stroke: var(--line-dashed); stroke-width: 1; stroke-dasharray: 2 3; }
.sichten__frei { fill: var(--faint); }
/* moving the mix point along the frontier: a wide invisible line takes taps, the handle takes drags */
.sichten__linie { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; pointer-events: stroke; }
.sichten__griff { fill: transparent; cursor: grab; touch-action: none; }
.sichten__ziel[hidden] { display: none; }
.sichten__chart.is-moving .sichten__mixname { visibility: hidden; }
.sichten__ziel circle { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.sichten__ziel text { fill: var(--ink); font-weight: var(--weight-medium); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.sichten__name { fill: var(--ink-2); }
.sichten__mix { fill: var(--ink); }
.sichten__mixname { fill: var(--ink); font-weight: var(--weight-medium); }
.sichten__chart--text { font-size: 11px; }
.sichten__anteil { fill: var(--corr-mid); }
.sichten__wert { fill: var(--ink); font-weight: var(--weight-medium); }
.sichten__kopf { fill: var(--muted); }
.sichten__zahl { fill: var(--ink); }
.sichten__zahl.is-strong { fill: #FFFFFF; }
/* a swap of the werkstatt (e.g. the basis share) must not move the page: no scroll anchor inside what is swapped */
#ergebnis, #kreis, #stufe { overflow-anchor: none; }
/* below the chosen strategies: back to the step where more are chosen, small */
.werkstatt-anteile [data-role=weitere], .werkstatt-anteile [data-role=zurueck] { font-size: var(--size-small); color: var(--muted); }
/* key figures of the werkstatt: one table look above (the mix) and below (mix against the benchmark) */
.kennzahlen { width: 100%; margin: 8px 0 12px; font-size: var(--size-body); }
.kennzahlen__kopf, .kennzahl { display: grid; grid-template-columns: 1fr 7.5em 7.5em; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--divider); }
.kennzahlen__kopf { font-family: var(--font-mono); font-size: var(--size-small); color: var(--muted); border-bottom-color: var(--border); }
.kennzahlen__kopf span:not(:first-child), .kennzahl span:not(:first-child) { text-align: right; }
.kennzahlen__kopf span:not(:first-child) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kennzahl span:first-child { color: var(--ink-2); }
/* comparison: the drawdown strip under the history and the longest recovery of the mix as a faint band */
.chart--unterwasser { display: block; width: 100%; height: 56px; margin-top: 6px; }
/* mix and benchmark in their own colour: drawdown areas overlap, the timeline bars sit in two lanes */
.tief--vergleich { fill: var(--faint); fill-opacity: 0.45; }
.tief--mix { fill: var(--ring-dynamisch); fill-opacity: 0.55; }
.chart--erholungen { display: block; width: 100%; height: 22px; margin-top: 4px; }
.lauf--mix { fill: var(--ring-dynamisch); }
.lauf--vergleich { fill: var(--faint); }
.lauf--offen { fill-opacity: 0.45; }
.farbe { display: inline-block; width: 12px; height: 8px; vertical-align: middle; }
.farbe--mix { background: var(--ring-dynamisch); }
.farbe--vergleich { background: var(--faint); }
.kennzahl .is-better, .werkstatt-kandidat .is-better { font-weight: var(--weight-medium); color: var(--ink); }