/* ---------------------------------------------------------------- holding
 * The security pages (/titel/*, templates/_holding_*.html, static/js/
 * holding.js, product-chart.js): blocks, statistics, the financial and data
 * tables, the chart bars and their chips (class families hv-* and cc-*,
 * WEB-KOM-02). Moved unchanged from the end of corum.css (K-47) and loaded
 * directly after it (web/ui.py), so the cascade is the same rule for rule.
 * A few rules here reach other pages too (.u-half, .is-fullscreen, the 24 px
 * target of .table-sort, the chips); they move into their components once
 * that can be proven without changing a computed value. */
@layer ui {
/* One page per holding (WEB-LAY-04, WEB-LAY-05): a sticky
 * head, tabs that load when opened, statistics in small tables, charts
 * through the product chart engine. Rules and type only - no shadows, no
 * gradients (WEB-GRU-03). */
.holding-link { color: inherit; border-bottom: 1px dotted var(--silver); }
.holding-link:hover { color: var(--corum); }
.hv { --hv-head: 0px; }
/* The head of a security page: ui/dossier.css (Etappe 3). */

.hv-panel:focus-visible { outline-offset: 6px; }
/* A tab's panel switches at once, no fade (WEB-BEW pattern 04). */
.hv-loading { color: var(--graphite); font-size: var(--t-small); }

.hv-block { margin: 0 0 var(--s-7); }
.hv-block__title { margin: 0 0 var(--s-2); }
.hv-unit { margin: 0 0 var(--s-3); color: var(--graphite); font-size: var(--t-micro); }
.hv-note { margin: var(--s-2) 0 var(--s-3); color: var(--graphite); font-size: var(--t-micro); }

/* Overview: the statistics next to the price chart. */
.hv-overview { display: grid; gap: var(--s-6); align-items: start; }
.hv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-4) var(--s-5);
  align-items: start; /* a short table is not stretched to its neighbour's height */ }
.hv-overview .hv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hv-stats--single, .hv-overview .hv-stats--single { grid-template-columns: minmax(0, 32rem); }
.hv-facts { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.hv-facts__title { caption-side: top; text-align: left; font-size: var(--t-micro); color: var(--graphite);
  padding-bottom: var(--s-1); border-bottom: 1px solid var(--graphite); }
.hv-facts th, .hv-facts td { padding: var(--s-1) 0; border-bottom: 1px solid var(--mist); font-weight: 300; vertical-align: top; }
.hv-facts th[scope="row"] { text-align: left; color: var(--slate); padding-right: var(--s-3); }
.hv-facts td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.hv-facts tbody tr:last-child th, .hv-facts tbody tr:last-child td,
.hv-hbars tbody tr:last-child th, .hv-hbars tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.hv-facts tbody tr:hover, .hv-hbars tbody tr:hover { background: none; }

.hv-text p, .hv-text li { font-size: var(--t-small); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.hv-text.is-collapsed { max-height: 6.2em; overflow: hidden; }
/* SWOT and talking points (services/company_swot.py): the Documents look,
   a 2x2 grid of short lists under hairline kicker heads, no cards, no bold
   (WEB-GRU-03, WEB-TYP-03); the Titelporträt draws the same structure. */
/* The marker is the block's basis line: unit role, graphite (WEB-TAB-09). */
.hv-swot__marker { color: var(--graphite); }
.hv-swot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
/* Lists: a small red circle (structural red, WEB-GRU-04), hanging indent,
   every line on one edge. */
.hv-swot__list { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-size: var(--t-small); font-weight: 300; }
.hv-swot__list li { position: relative; margin: 0 0 var(--s-1); padding-left: var(--s-4); }
.hv-swot__list li::before { content: ""; position: absolute; left: .15em; top: .62em; width: .36em; height: .36em;
  border-radius: 50%; background: var(--corum); }
.hv-swot__talk { margin-top: var(--s-5); }
.hv-swot__evidence { margin-top: var(--s-4); font-size: var(--t-micro); }
@media (max-width: 720px) { .hv-swot__grid { grid-template-columns: minmax(0, 1fr); } }
.hv-more { font: inherit; font-size: var(--t-small); color: var(--corum); background: none; border: 0; padding: 0; cursor: pointer; }

/* Tables: horizontal scroll with the first column held. */
.hv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.hv-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-small); }
/* A whole-pixel line height: rows of 32.69 px put every hairline on a
   fraction, and the sticky label column (its own layer) rounded it
   differently from the figures - on a Retina screen the rules broke off
   at the first column (WEB-TAB-06). */
/* Rules and head per WEB-TAB-02/-03: slate, graphite, mist, graphite; the
   head bottom-aligned; cells dense (WEB-TAB-14). */
.hv-table th, .hv-table td { line-height: 1.375rem; padding: var(--s-2) var(--s-3); white-space: nowrap;
  font-weight: 300; border-bottom: 1px solid var(--mist); text-align: left; background: var(--paper); }
/* The closing rule in ink under the last shown row (WEB-TAB-02, WEB-TAB-06):
   in @layer ui the hairline above would beat the base table's closing rule. */
.hv-table :where(tbody tr:last-child, tbody tr:nth-last-child(1 of :not([hidden]))) > td,
.hv-table tbody :where(tr:last-child, tr:nth-last-child(1 of :not([hidden]))) > th { border-bottom-color: var(--ink); }
.hv-table thead th { border-top: 1px solid var(--slate); border-bottom: 1px solid var(--graphite);
  color: var(--graphite); font-size: var(--t-micro); vertical-align: bottom; }
.hv-table .u-right { text-align: right; font-variant-numeric: tabular-nums; }
.hv-table tbody th, .hv-table thead th:first-child { position: sticky; left: 0; z-index: 2;
  padding-left: 0; min-width: 12rem; white-space: normal; }
.hv-table tbody th { color: var(--ink); }
/* The other head cells stick to the top with z-index 5 and would slide over it. */
.hv-table thead th:first-child { z-index: 6; }
/* Totals by rule and spacing, never bold (WEB-TAB-07). */
.hv-table tr.is-total th, .hv-table tr.is-total td { font-weight: 300; padding-top: var(--s-2); padding-bottom: var(--s-2); }
/* Its graphite rule is the bottom of the line before: a rule of its own on
   top stood under that line's hairline as a second, doubled rule
   (WEB-TAB-07). The statement grid has its own, finer rule below. */
.hv-table:not(.hv-table--grid) tr:has(+ tr.is-total) > th,
.hv-table:not(.hv-table--grid) tr:has(+ tr.is-total) > td { border-bottom-color: var(--graphite); }
.hv-table--statement tbody tr { cursor: pointer; }
.hv-table--statement tbody tr:hover th, .hv-table--statement tbody tr:hover td { background: var(--porcelain); }
.hv-table--statement tbody tr.is-selected th, .hv-table--statement tbody tr.is-selected td { background: var(--corum-pale); }
.hv-table--statement tbody tr:focus-visible { outline-offset: -2px; }
/* Statement cells hold the value and the change as two spans; the toggle
 * shows one of them (the markup stays small: thousands of cells). */
.hv-table--statement td { text-align: right; font-variant-numeric: tabular-nums; }
.hv-table--statement td > span + span { display: none; }
.hv-table--statement.show-pct td > span:first-child { display: none; }
.hv-table--statement.show-pct td > span + span { display: inline; }
.hv-sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.hv-sort::after { content: " ↕"; color: var(--silver); }
[aria-sort="ascending"] .hv-sort::after { content: " ↑"; color: var(--corum); }
[aria-sort="descending"] .hv-sort::after { content: " ↓"; color: var(--corum); }
.hv-toolbar { display: flex; flex-wrap: wrap; align-items: center; }

.hv-details summary { cursor: pointer; font-size: var(--t-small); color: var(--corum); margin: var(--s-2) 0; }
.hv-chart { width: 100%; min-height: 1px; }
.hv-row-chart { margin-top: var(--s-3); }
.cc-bars__title { font-size: var(--t-small); margin: 0 0 var(--s-2); }
.cc-span { margin: var(--s-2) 0 0; max-width: none; }

.hv-hbars { width: 100%; border-collapse: collapse; font-size: var(--t-small); max-width: 40rem; }
.hv-hbars th, .hv-hbars td { padding: var(--s-1) 0; border-bottom: 1px solid var(--mist); font-weight: 300; }
.hv-hbars th[scope="row"] { text-align: left; width: 38%; padding-right: var(--s-3); }
.hv-hbars__bar { width: 45%; }
/* The bar stands at once: data is never animated (WEB-BEW-01, K-25). */
.hv-hbars__bar span { display: block; width: var(--w, 0); height: 8px; background: var(--silver); }  /* one series: color.data.single.bar, never red (ENT-140, K-39) */
.hv-hbars td.u-right { padding-left: var(--s-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.hv-items { list-style: none; padding: 0; margin: 0; }
.hv-items li { padding: var(--s-3) 0; border-bottom: 1px solid var(--cloud); font-size: var(--t-small); }
.hv-items li p { margin: var(--s-1) 0 0; color: var(--slate); }
.hv-items__date { color: var(--graphite); margin-right: var(--s-3); font-variant-numeric: tabular-nums; }
.hv-items a { color: var(--ink); border-bottom: 1px dotted var(--silver); }
.hv-items a:hover { color: var(--corum); }
.hv-items__meta { display: block; color: var(--graphite); font-size: var(--t-micro); }

@media (max-width: 720px) {
  .hv-overview .hv-stats, .hv-stats { grid-template-columns: minmax(0, 1fr); }
  .hv-table tbody th, .hv-table thead th:first-child { min-width: 9rem; max-width: 11rem; }
}

/* ---------------------------------------- holding page: fiscal.ai parity
 * Controls, financial grids, data tables, menus and lists of the
 * interactive components (static/js/holding.js). Rules and type only. */

.hv-switch { display: inline-flex; gap: var(--s-2); align-items: center; font-size: var(--t-small);
  color: var(--slate); margin: 0; }
.hv-switch input, .hv-grid__pick input { accent-color: var(--corum); }
.hv-count { margin-left: auto; }
.hv-table--grid .hv-grid__pick { width: 2rem; padding-left: 0; padding-right: var(--s-1); position: sticky; left: 0;
  z-index: 3; background: var(--paper); }
.hv-table--grid tbody th, .hv-table--grid thead th:nth-child(2) { position: sticky; left: 2rem; z-index: 2; }
.hv-table--grid thead th:first-child { z-index: 7; }
.hv-table--grid thead th:nth-child(2) { z-index: 6; }
.hv-table--grid td { font-variant-numeric: tabular-nums; }
.hv-table tr.is-group th { font-size: var(--t-small);
  color: var(--ink); padding-top: var(--s-4); border-bottom: 1px solid var(--graphite); }
.hv-table tr.is-change th, .hv-table tr.is-change td { color: var(--graphite);
  font-size: var(--t-micro); }
.hv-table tr.is-change th .hv-grid__name, .hv-table tr.is-sub th .hv-grid__name { padding-left: 1.1rem; }
.hv-table tr.is-derived th, .hv-table tr.is-derived td { color: var(--graphite); }
.hv-table tr.is-sub th, .hv-table tr.is-sub td { background: var(--porcelain); font-size: var(--t-micro); }
.hv-table tr.is-selected th, .hv-table tr.is-selected td { background: var(--corum-pale); }
.hv-chev, .hv-x { font: inherit; background: none; border: 0; color: var(--graphite); cursor: pointer;
  padding: 0 var(--s-1) 0 0; }
.hv-chev:hover, .hv-x:hover { color: var(--corum); }
/* The fold buttons keep their small box, so a row keeps its height; a
   pseudo-element widens the hit area to web.control.target-min around the
   chevron (WEB-BAR-08). */
.hv-chev, .hv-sec { position: relative; }
.hv-chev::before, .hv-sec::before { content: ""; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); }
.hv-badge { display: inline-block; font-size: var(--t-micro);
  border: 1px solid var(--mist); color: var(--slate); padding: 0 .4em; white-space: nowrap; }
.hv-badge--muted { color: var(--graphite); }
.hv-table--data td a { color: var(--ink); border-bottom: 1px dotted var(--silver); }
.hv-table--data td a:hover { color: var(--corum); }
.hv-table--sub { margin: var(--s-2) 0; }
.hv-table--sub th, .hv-table--sub td { background: var(--porcelain); }

.hv-kpi { font-size: var(--t-small); color: var(--graphite); margin: var(--s-2) 0; }
.hv-kpi strong { font-weight: 300; font-size: var(--t-h3); color: var(--ink); }
.hv-news { font: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; color: inherit; }
.hv-news:hover .hv-items__title { color: var(--corum); }
.hv-news__detail { padding: var(--s-2) 0 0; }
.hv-news__detail p { margin: 0 0 var(--s-2); color: var(--slate); }
.hv-news__detail a { color: var(--corum); }
.hv-activity { display: grid; }
.hv-block__sub { font-size: var(--t-small); margin: var(--s-5) 0 var(--s-2); }
.hv-comp [data-component] { min-height: 2rem; }
[data-component].is-fullscreen, .is-fullscreen { background: var(--paper); padding: var(--s-5); overflow: auto; }
@media (max-width: 720px) {
  .hv-table--grid tbody th, .hv-table--grid thead th:nth-child(2) { min-width: 8rem; max-width: 10rem; }

}

/* The toolbar of a chart: one tidy row - left the chart's own choices, then
   the periods, the tools at the right edge; on a phone the groups wrap. */
.cc-controls { display: flex; flex-wrap: wrap; align-items: center;
  margin: 0 0 var(--s-5); }

.cc-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cc-bar__lead { display: flex; }
.cc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: calc(-1 * var(--s-3)) 0 var(--s-4); }
.cc-chip span { color: var(--graphite); margin-left: var(--s-1); }
.cc-chip:hover span { color: var(--corum); }
.hv-toolbar { gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }

/* Full screen: the chart fits the window, nothing scrolls. */
.is-fullscreen { position: fixed; inset: 0; z-index: 1000; background: var(--paper);
  padding: var(--s-5) var(--s-6); overflow: hidden; }
:fullscreen.is-fullscreen { position: static; }
body.cc-noscroll { overflow: hidden; }
/* The statistics on one grid: four equal columns, rows of groups padded
   to the same length so their rules end flush (WEB-LAY-11, WEB-TAB-02). */
.hv-stats--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.hv-stats--grid .hv-facts { table-layout: fixed; }
.hv-stats--grid .hv-facts th[scope="row"] { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; width: 72%; }
/* table-layout: fixed takes the widths from the columns. */
.hv-stats--grid .hv-facts__label { width: 72%; }
.hv-stats--grid .hv-facts td { white-space: nowrap; }
.hv-facts tr.is-pad th, .hv-facts tr.is-pad td { border-bottom-color: transparent; }
.hv-facts tr.is-pad th::before { content: "\00a0"; }
.hv-facts tbody tr.is-pad:last-child th, .hv-facts tbody tr.is-pad:last-child td {
  border-bottom-color: var(--graphite); }
@media (max-width: 960px) {
  .hv-stats--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hv-stats--grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .hv-facts tr.is-pad { display: none; }
  .hv-facts tbody tr:nth-last-child(1 of :not(.is-pad)) th,
  .hv-facts tbody tr:nth-last-child(1 of :not(.is-pad)) td { border-bottom-color: var(--ink); }

  .is-fullscreen { padding: var(--s-3); }
}

/* ------------------------------------------------ halves (WEB-LAY-11)
 * Every block on the holding, fund and
 * product pages is either the full content width or one half of a grid
 * split in the middle - the SWOT grid's gutter (--half-gap). A block that
 * is not a pair takes the left half (.u-half). */
.u-half { width: calc((100% - var(--half-gap)) / 2); max-width: none; }
/* A running text keeps the reading measure inside a full-width block
   (K-36, WEB-TYP-07: «Business» ran over the whole width). */
.hv-items li p, .hv-swot__list li, .hv-unit, .hv-note, .hv-kpi { max-width: none; }
.hv-text p, .hv-text li { max-width: var(--measure); }
.hv-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); }
.hv-stats--single { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); }
.hv-overview .hv-stats--single { grid-template-columns: minmax(0, 1fr); }
/* The four statistics columns nest in the halves: with the same gutter the
   second column ends exactly where the left half does. */
.hv-stats--grid { column-gap: var(--half-gap); }
.hv-swot__grid { column-gap: var(--half-gap); }
.hv-swot__talk { width: calc((100% - var(--half-gap)) / 2); }
.hv-block > .hv-hbars { max-width: calc((100% - var(--half-gap)) / 2); }
.hv-overview .hv-hbars { max-width: none; }
.hv-activity { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--half-gap); }
@media (max-width: 720px) {
  .u-half, .hv-swot__talk { width: auto; }
  /* The overview pair stacks on a phone as well (WEB-LAY-12): side by side
     the table stood on 100 px and the target labels ran into each other. */
  .hv-overview, .hv-stats--single, .hv-activity { grid-template-columns: minmax(0, 1fr); }
  .hv-block > .hv-hbars { max-width: none; }
}

/* One toolbar row per chart (149): the chart's own choices, the periods,
   and at the right end «Optionen» beside «Vollbild». Narrower period
   buttons and gutters keep the row on one line at the content width; on a
   small screen whole groups wrap, the tools staying together. */
.cc-controls { gap: var(--s-3); }

.cc-bar__tools { margin-left: auto; flex-wrap: nowrap; }

/* Technical analysis (151): indicators, interval and their chips on their
   own row directly above the chart. */
.cc-chips--ind { margin: 0 0 var(--s-3); align-items: center; }
.cc-key { display: inline-block; width: 10px; height: 10px; margin-right: var(--s-1); vertical-align: -1px; }
.cc-chip .cc-key { width: 8px; height: 8px; vertical-align: 0; }
.cc-legend__item { display: inline-flex; align-items: center; margin-right: var(--s-4); }
.cc-legend { margin-top: var(--s-2); }
.cc-unit { margin: 0 0 var(--s-2); }

/* The financial table (152-154): a narrow checkbox column, names on one
   edge whether or not a row opens, the unit in the head. One rule for the
   text colour of a row: reported figures ink; the rows CORUM derives
   (margins, changes) graphite and indented - the note under the table says
   so; source lines ink, indented, on porcelain. No italics, no small type. */
/* The head's checkbox cell is the table's first head cell and inherited the
   name column's 12rem minimum - the «wide checkbox column» (152). */
.hv-table.hv-table--grid .hv-grid__pick, .hv-table.hv-table--grid thead th.hv-grid__pick {
  width: 2rem; min-width: 2rem; max-width: 2rem; padding: 0; }
.hv-table--grid .hv-grid__pick input { margin: 0; }
.hv-table--grid tbody th, .hv-table--grid thead th:nth-child(2) { padding-left: 1.1rem; }
/* Figure columns hug their numbers (width 1%, no wrap) with air to the
   left; the name column takes the rest and keeps names on one line. */
.hv-table--grid td.u-right, .hv-table--grid thead th.u-right { width: 1%; padding-left: 1.5rem; }
.hv-table--grid tbody th, .hv-table--grid td { vertical-align: middle; }
@media (width > 720px) {
  .hv-table--grid tbody th, .hv-table--grid thead th:nth-child(2) { min-width: 17rem; }
}
.hv-table--grid .hv-chev { display: inline-block; width: 1.1rem; margin-left: -1.1rem; padding: 0; text-align: left; }
.hv-grid__unit { color: var(--graphite); margin-left: .35em; }
.hv-table--grid tbody th, .hv-table--grid tbody td { color: var(--ink); }
.hv-table--grid tr.is-derived th, .hv-table--grid tr.is-derived td,
.hv-table--grid tr.is-change th, .hv-table--grid tr.is-change td { color: var(--graphite); font-style: normal;
  font-size: var(--t-small); }
.hv-table--grid tr.is-derived .hv-grid__name, .hv-table--grid tr.is-change .hv-grid__name { padding-left: 1.1rem; }
.hv-table--grid tr.is-sub th, .hv-table--grid tr.is-sub td { background: var(--porcelain); font-size: var(--t-small);
  color: var(--ink); }
.hv-table--grid tr.is-sub .hv-grid__name { padding-left: 1.1rem; }
.hv-table--grid tr.is-group th { padding-left: 0; }

/* ------------------------------ calm controls (WEB-KOM-03, WEB-KOM-06)
 * One dropdown for every choice, one calm bar per table, menus
 * in one light panel style. Nothing changes size on click: dropdowns size
 * to their longest entry, segments keep their width when disabled, the
 * range ends have fixed slots, the search opens over the bar. */

/* Disabled (WEB-ZUS-07): silver text, mist frame, full opacity. */
.cc-dd .cc-dd__btn[disabled], .cc-dd .cc-dd__btn[disabled]:hover { color: var(--silver); border-color: var(--mist); cursor: default; }
.cc-dd__btn[disabled] .cc-dd__label, .cc-dd__btn[disabled] .cc-dd__value { color: var(--silver); }
.cc-dd__btn[disabled]::after { border-color: var(--silver); }
/* One panel style for dropdowns and menus: paper, a mist frame, no shadow. */
.cc-dd__pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%;
  max-height: 22rem; overflow: auto; background: var(--paper); border: 1px solid var(--mist);
  padding: var(--s-2) 0; box-shadow: none; }
.cc-dd--right .cc-dd__pop { left: auto; right: 0; }
.cc-dd__search { display: block; width: calc(100% - 2 * var(--s-3)); margin: 0 var(--s-3) var(--s-2);
  height: var(--ctl-h); padding: 0 var(--s-2); font: inherit; font-size: var(--t-small);
  border: 1px solid var(--rule-control); border-bottom-color: var(--graphite); border-radius: 0; background: var(--paper); color: var(--ink); }
.cc-dd__search:focus { border-color: var(--ink); box-shadow: none; outline: none; }
.cc-dd__list { list-style: none; margin: 0; padding: 0; }
.cc-dd__list [role="option"] { position: relative; padding: .38rem var(--s-4) .38rem 2rem; font-size: var(--t-small);
  color: var(--slate); cursor: pointer; white-space: nowrap; }
.cc-dd__list [role="option"]:hover, .cc-dd__list [role="option"]:focus { background: var(--porcelain); color: var(--ink);
  outline: none; }
/* An option in focus: porcelain and the ring, never a vertical bar
   (WEB-BAR-04); inside the list, so the scrolling list never clips it. */
.cc-dd__list [role="option"]:focus-visible { outline: 2px solid var(--corum); outline-offset: -2px; }
.cc-dd__list [role="option"][aria-selected="true"] { color: var(--ink); }
.cc-dd__list [role="option"][aria-selected="true"]::before { content: ""; position: absolute; left: .85rem; top: 50%;
  width: 4px; height: 8px; margin-top: -6px; border: solid var(--corum); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); }
.cc-dd__list [role="option"][aria-disabled="true"] { color: var(--silver); cursor: default; } /* WEB-ZUS-07 */
.cc-dd__group { list-style: none; margin: var(--s-2) 0 0; padding: .25rem var(--s-4) .2rem;
  font-size: var(--t-micro); color: var(--graphite); }
.cc-dd__group:first-child { margin-top: 0; }

.hv-grid__pick input[type="checkbox"] { margin: 0 .15em 0 0; }

/* A text action of the security pages; its hit area is web.control.target-min
   (WEB-BAR-08), frameless like every text action. */
.cc-link { font: inherit; font-size: var(--t-small); color: var(--corum); background: none; border: 0; padding: 0;
  cursor: pointer; min-height: 24px; }
.cc-link:hover { color: var(--corum-dark); }

/* What differs from the default, beside the title. */
.hv-block--grid .hv-block__title { min-height: 1.6rem; }
.cc-state { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); margin-left: var(--s-4); font-size: var(--t-small);
  vertical-align: 2px; }
.cc-state:empty { display: none; }
/* The period heads, riding under the page head while a statement scrolls. */
.hv-float { position: fixed; z-index: 15; top: var(--y, 0); left: var(--x, 0); width: var(--w, auto); overflow: hidden;
  background: var(--paper); pointer-events: none; }
/* The copied head follows the table's scroll (--sl); its cells take the
   measured widths (--w), the pick and name columns stand still. */
.hv-float table { margin: 0; width: var(--w, auto); transform: translateX(calc(-1 * var(--sl, 0px))); }
.hv-float thead th { width: var(--w, auto); min-width: var(--w, 0); max-width: var(--w, none); background: var(--paper); }
.hv-float thead th:nth-child(-n+2) { transform: translateX(var(--sl, 0px)); }
/* The peers' bar: the pickers left, the switches right; chips below. */
.cc-bar--peers { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-4); }
.cc-bar--peers .cc-bar__lead, .cc-bar--peers .cc-bar__tools { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3); margin: 0; }

/* ------------------------------------ rhythm (WEB-TOK-06, WEB-TAB-14)
 * web.space.related between related blocks, web.space.topic before a
 * change of topic; dense table rows. */
.hv-block--grid .hv-block__title { margin-bottom: var(--gap-rel); }
/* Sections read as blocks: 28 pt above their head, 7 pt below it. */
.hv-table--grid tr.is-group th { padding: var(--gap-topic) 0 var(--s-2); }
.hv-table--grid tbody tr.is-group:first-child th { padding-top: var(--gap-rel); }
.hv-table--grid thead th { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.hv-table--grid tbody th, .hv-table--grid tbody td { padding-top: var(--s-2); padding-bottom: var(--s-2); }
/* The unit note under the table gets the same air. */
.hv-grid [data-grid-table] > .hv-unit { margin-top: var(--s-3); }
/* Peers and estimates: bar, chips and table on the same rhythm. */
.cc-bar--peers { margin-bottom: var(--gap-rel); }
.cc-chips--bar { margin: 0 0 var(--gap-topic); }
.hv-comp .hv-block__title, .hv-block > .hv-block__title { margin-bottom: var(--gap-rel); }
.hv-block .hv-unit + .hv-chart, .hv-block .hv-unit + .hv-scroll { margin-top: var(--s-3); }
@media (max-width: 720px) {
  .hv-table--grid tr.is-group th { padding-top: var(--s-6); }
}

/* Rules in a statement (WEB-TAB-02, WEB-TAB-07): folded or open, never a
 * doubled rule. Only the four rule roles: graphite above and under the head, mist hairlines
 * between rows, the closing rule - each across the full table width. A
 * section head is space and its kicker, no rule of its own. A total takes
 * one graphite rule above it, drawn as the bottom of the line before, and
 * only where it closes detail lines: after a section head or another total
 * it keeps the plain hairline, so rules never stack. */
.hv-table--grid tr.is-group > th, .hv-table--grid tr.is-group > td { border-bottom: 0; }
.hv-table--grid tr.is-total > th, .hv-table--grid tr.is-total > td { border-top: 0; }
.hv-table--grid tr:not(.is-group):not(.is-total):has(+ tr.is-total) > th,
.hv-table--grid tr:not(.is-group):not(.is-total):has(+ tr.is-total) > td { border-bottom-color: var(--graphite); }
.hv-table--grid td, .hv-table--grid tbody th { border-bottom-color: var(--mist); }
/* The closing rule again, after the grid's hairline (WEB-TAB-02). */
.hv-table--grid :where(tbody tr:last-child, tbody tr:nth-last-child(1 of :not([hidden]))) > td,
.hv-table--grid tbody :where(tr:last-child, tr:nth-last-child(1 of :not([hidden]))) > th { border-bottom-color: var(--ink); }

/* ------------------------------------------------ security page lists
 * Documents by year, news in a time window, the range of price targets. */
.hv-year { border-top: 1px solid var(--mist); }
.hv-year:last-of-type { border-bottom: 1px solid var(--mist); }
.hv-year > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; font-size: var(--t-body); color: var(--ink); }
.hv-year > summary::-webkit-details-marker { display: none; }
.hv-year > summary::before { content: ""; width: 6px; height: 6px; margin: 0 .2em 0 .1em; flex: none;
  border-right: 1px solid var(--slate); border-bottom: 1px solid var(--slate); transform: rotate(-45deg); }
.hv-year[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.hv-year > summary:hover { color: var(--corum); }
.hv-year__count { font-size: var(--t-micro); color: var(--graphite); }
.hv-year .hv-items { margin: 0 0 var(--s-4); }
.hv-year .hv-items li:last-child { border-bottom: 0; }
.hv-timefilter { margin: 0 0 var(--gap-rel, 19px); }
.hv-more-items { margin-top: var(--gap-rel, 19px); }
.hv-items__none { font-size: var(--t-small); color: var(--graphite); margin: var(--s-3) 0 0; }
/* Range of the analysts' targets: the band from lowest to highest, the
   average in corum, the last price as an ink mark. */
.hv-trange__title { margin: 0 0 var(--s-3); padding-bottom: var(--s-1); border-bottom: 1px solid var(--graphite); }
.hv-trange { padding: 4.2rem 0 0; }
.hv-trange__line { position: relative; height: 2px; background: var(--mist); margin: 0 1.5rem; }
.hv-trange__band { position: absolute; top: -3px; left: var(--x, 0); width: var(--w, 0); height: 8px; background: var(--silver); }
.hv-trange__mark { position: absolute; top: -6px; left: var(--x, 0); width: 2px; height: 14px; margin-left: -1px; background: var(--graphite); }
.hv-trange__mark.is-mean { width: 2px; height: 20px; top: -9px; margin-left: -1px; background: var(--corum); }
/* prf-ignore PRF-WEB-11: Kursmarke im Kursband, ein Datenmass (ENT-434 Nr. 69), kein Abstand */
.hv-trange__mark.is-price { width: 2px; height: 26px; top: -12px; background: var(--ink); }
.hv-trange__labels { position: relative; height: 3.4rem; margin: var(--s-3) 1.5rem 0; }
.hv-trange__labels span { position: absolute; left: var(--x, 0); transform: translateX(-50%); text-align: center; white-space: nowrap;
  font-size: var(--t-micro); color: var(--graphite); line-height: 1.3; }
/* The figures in the chart label size (web.chart.label.size, WEB-DIA-13). */
.hv-trange__labels strong { display: block; font-weight: 300; font-size: var(--t-micro); color: var(--ink);
  font-variant-numeric: tabular-nums; }
.hv-trange__labels .is-mean strong { color: var(--corum); }
.hv-trange__labels .is-price { top: auto; bottom: calc(100% + 1.9rem); }
/* On a phone the three labels do not fit one row (DAT-DIA-07): the lowest
   stands flush left of the band's line, the highest flush right, and the
   average takes a row of its own under its mark, kept inside the line. */
@media (max-width: 720px) {
  .hv-trange__labels { height: calc(var(--s-7) + var(--s-7)); }
  .hv-trange__labels .is-low { left: 0; transform: none; text-align: left; }
  .hv-trange__labels .is-high { left: auto; right: 0; transform: none; text-align: right; }
  .hv-trange__labels .is-mean { top: var(--s-7); left: clamp(2.5rem, var(--x, 50%), calc(100% - 2.5rem)); }
  .hv-trange__labels .is-price { left: clamp(2.5rem, var(--x, 50%), calc(100% - 2.5rem)); }
}

/* --------------- financial table controls (WEB-KOM-03, WEB-KOM-05, -09)
 * Three kinds of control, none looks like another, and every segment and dropdown carries
 * a label over it saying what it changes:
 *   segment  - a choice among two to five visible options: porcelain, the
 *              options divided by cloud, the chosen one on paper with the
 *              red underline (the grammar of the active tab, .switch__option);
 *   dropdown - more options or long names: the only control with a full
 *              frame (silver, steel on hover), the chevron at its right;
 *   tool     - an action without a state (search, download, full screen):
 *              a 17 px icon, no frame, its name as tooltip and aria-label.
 * One bar per table, between two cloud rules: left which data, right how
 * they are shown; on a narrow screen whole groups wrap, never a button. */
/* Bar, labelled control, segment (with the older .cc-seg markup), the
   dropdown's frame, tool and the «Eigener …» panel: static/css/ui/
   (control-bar, segment, select, tool). What follows is the financial
   table itself. */
/* The title line: title, the chips of what differs, «Alle zuklappen». */
.hv-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  min-height: var(--ctl-h-sm); margin: 0 0 var(--gap-rel); } /* a chip arriving moves nothing */
.hv-titlebar > .hv-block__title, .hv-block--grid .hv-titlebar > .hv-block__title { margin: 0; min-height: 0; }
.hv-titlebar .cc-state { margin-left: 0; vertical-align: 0; }
.hv-titlebar__fold { margin-left: auto; }
.hv-titlebar__fold.is-held { visibility: hidden; }
.cc-link:focus-visible, .cc-chip:focus-visible, .hv-sec:focus-visible, .hv-order:focus-visible,
.hv-chev:focus-visible { outline: 2px solid var(--corum); outline-offset: 1px; }

/* The chart row: the ticked rows as chips, «Alle entfernen»; bars or lines. */
.grid-chart { margin: 0 0 var(--gap-topic); }
.grid-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-3);
  --ctl-h: var(--ctl-h-sm); } /* its own bar (bars | lines) is dense */
.grid-chart__picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t-small); color: var(--graphite); }
.cc-chip--key .cc-key { margin: 0; }
.cc-chip--key button { font: inherit; font-size: var(--t-body); line-height: 1; margin: 0;
  border: 0; background: none; color: var(--graphite); cursor: pointer; }
.cc-chip--key button:hover { color: var(--corum); }
.cc-chip--key button:focus-visible { outline: 2px solid var(--corum); outline-offset: 1px; }
/* Nothing ticked: a quiet line instead of the chart. */
.grid-hint { margin: 0 0 var(--gap-topic); padding: var(--s-3) var(--s-4); font-size: var(--t-small);
  color: var(--graphite); background: var(--porcelain); max-width: none; }

/* The head of the name column: the unit, then the order one click turns. */
.hv-grid__head { white-space: nowrap; }
.hv-grid__head .hv-grid__unit { margin: 0; }
.hv-grid__dot { margin: 0 .45em; color: var(--graphite); }
.hv-order { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 0; font: inherit;
  color: var(--graphite); background: none; border: 0; cursor: pointer; }
.hv-order:hover { color: var(--corum); }
.hv-order svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.3; }
/* On a phone the unit and the order do not fit the name column on one
   line: the order goes under the unit instead of over the first period. */
@media (max-width: 720px) {
  .hv-grid__head { white-space: normal; }
  .hv-grid__head .hv-grid__unit { display: block; }
  .hv-grid__dot { display: none; }
  /* A long name («Nettoverschuldung/EBITDA») with its unit stays inside the
     name column: it breaks behind the slash (holding.js sets the break
     point) and only as a last resort inside a word - never over the first
     value column (WEB-LAY-12, DAT-TAB-13). No automatic hyphenation: it
     narrowed the column and split names that fit («Eigenkapitalrendi-te»). */
  .hv-table--grid th[scope="row"], .hv-table--grid thead th:not(.u-right) {
    overflow-wrap: break-word; }
}

/* Sections in the table are the navigation: normal case, the table's
   small type in ink, a chevron, and they fold. */
.hv-sec { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: 0; font: inherit;
  font-size: var(--t-small); color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left; }
.hv-sec:hover .hv-sec__name { color: var(--corum); }
/* The chevron of a section head and of a line (.hv-chev, holding.js):
   down while open, right while closed, one height in both states so the
   turn (WEB-BEW pattern 06) does not jump. */
.hv-sec__chev { flex: none; display: inline-block; width: 6px; height: 6px; margin: -2px 2px 0 1px;
  vertical-align: middle; border-right: 1px solid var(--slate); border-bottom: 1px solid var(--slate);
  transform: rotate(45deg); }
[aria-expanded="false"] > .hv-sec__chev { transform: rotate(-45deg); }
.hv-sec__more { font-size: var(--t-micro); color: var(--graphite); }
.hv-table--grid tr.is-group th { font-size: var(--t-small); color: var(--ink); }

/* A ticked row: porcelain - one red bar per row would be several red
   statements. */
.hv-table--grid tr.is-selected th, .hv-table--grid tr.is-selected td { background: var(--porcelain); }

/* Full screen for a whole block. */
.hv-block.is-fullscreen { overflow: auto; }

@media (max-width: 720px) {
  .hv-titlebar__fold { margin-left: auto; }
.hv-titlebar__fold.is-held { visibility: hidden; }
  /* On a phone the chips take their own line, reserved even when empty:
     a chip arriving never pushes the bar down. */
  .hv-titlebar .cc-state, .hv-titlebar .cc-state:empty { display: flex; order: 3; flex-basis: 100%; min-height: var(--ctl-h-sm); }
}
/* Muted text on a picked row keeps its contrast (axe color-contrast). */
.hv-table tr.is-selected .u-muted { color: var(--slate); }

/* ------------------------------------------------ chips and small buttons
 * State chips beside a title and chart chips under a bar are one component
 * (WEB-KOM-03, WEB-KOM-10, K-30): a silver frame on paper, the compact
 * height 30 px (WEB-KOM-04, K-29). A close × inside a chip and the sort and
 * order buttons in a table head keep a target of at least 24 px
 * (web.control.target-min, WEB-BAR-08). */
.cc-chip, .cc-chip--key { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--s-1);
  height: var(--ctl-h-sm); margin: 0; padding: 0 var(--s-2); font: inherit; font-size: var(--t-micro); line-height: 1;
  white-space: nowrap; color: var(--slate); background: var(--paper); border: 1px solid var(--silver); border-radius: 0; }
button.cc-chip { cursor: pointer; }
.cc-chip:hover, .cc-chip--key:hover { border-color: var(--steel); color: var(--ink); }
.cc-chip--key { padding-right: var(--s-1); cursor: default; }
.cc-chip--key button { display: inline-flex; align-items: center; justify-content: center; min-width: 24px;
  min-height: 24px; padding: 0; }
.hv-order, .hv-sort, .table-sort { min-height: 24px; }
/* The remove button of a peer: a hit area of 24 px (WEB-BAR-05, PRF-WEB-23;
   it measured 12 x 22 on the real-data page). */
.hv-x { min-width: 24px; min-height: 24px; }
.hv-sort, .table-sort { display: inline-flex; align-items: center; }
}  /* @layer ui */