/* THE VERWALTUNG KIT - the one sheet of the reusable elements every Stark15 Verwaltung page is built from (arx-free item 736 c - the owner's
   word of 2026-11-12 ~13:00: „prüfe auch ob wir nicht ein framework für solche dinge nutzen sollten oder zumindest wiederverwendbare elemente
   damit du nicht immer einzeln alles baust. auch im sinne effizienz"; the lead's decision: no framework - the CSP allows `script-src 'self'`
   alone, the house is `h()` + tokens -, a KIT of pure components under webapp/verwaltung/kit/ with THIS sheet; docs/feature-verwaltung.md „The
   kit"). Over the house's tokens alone (web/css/tokens.css - no hex, no raw font size; the CSS gate ratchets this sheet like webapp.css). The
   rule: a Verwaltung page uses the kit, never its own markup; a new element is a kit component with its CSS here and its row on the style-guide
   page `#verwaltung/kit`. The owner's references (refs 1-5 of 2026-11-12): white cards with a hairline on the light ground, the label over the
   control, the toggle with its state word, status pills, KPI cards with a ring, charts by hand, an empty state, the side panel with its footer.
   Desktop first (1024-1440), usable on an iPhone in landscape (844 x 390), portrait one column. The fixation rule (item 604): the figure bold,
   the label and the help the quiet tier. */

/* --- the page: the title with one line under it, the tab band ----------------------------------------------------------------------------- */
.kit-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.kit-head-text { min-width: 0; }
.kit-head h1 { margin: 0 0 2px; font-size: var(--size-body); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }   /* the doc's scale (verwaltung-design.md 4): the page title 18-20 semibold */
.kit-sub { margin: 0; font-size: var(--size-small); color: var(--ink-3); }
.kit-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-head-actions .btn, .kit-card-head .btn { min-height: 36px; padding: 0 14px; font-size: var(--size-small); }   /* the desktop's working size (the Verwaltung's tables' step); the coarse block lifts them */
.kit-head-actions .input, .kit-card-head .input { width: auto; min-height: 36px; padding: 0 28px 0 10px; font-size: var(--size-small); border: 1px solid var(--line); border-radius: 8px; }   /* a period select top-right (design doc 2: a trend's card) */
.kit-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin: 0 0 12px; background: var(--surface-2); border-radius: 10px; }   /* the doc's frame (1): a segmented bar, the active tab a white pill on the light track */
.kit-tab { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: var(--size-small); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.kit-tab:hover { color: var(--ink); }
.kit-tab.on, .kit-tab[aria-current="page"] { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.kit-tab.soon { color: var(--ink-3); cursor: default; }
.kit-tab:focus-visible { outline: 2px solid var(--headline); outline-offset: -2px; }
.kit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }   /* 24 px between cards on a desktop (the doc's 4), 16 on a phone */
.kit-grid > .web-card { margin: 0; }
.kit-grid > .wide, .kit-grid > .kit-card:only-child { grid-column: 1 / -1; }
@media (min-width: 1200px) { .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .kit-grid > .tall { grid-row: span 2; } .kit-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* --- a fact to read (the doc's 2): the label small and grey ABOVE the value, no box, no border --- */
.kit-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px 24px; }
.kit-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kit-fact-label { font-size: var(--size-tiny); color: var(--ink-3); font-weight: 500; }
.kit-fact-value { font-size: var(--size-small); color: var(--ink); overflow-wrap: anywhere; }
.kit-fact-value.dash { color: var(--ink-3); }
@media (min-width: 900px) and (max-width: 1199px) { .kit-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 0 0 6px; }
.kit-card-head h2 { margin: 0; }
.kit-card h2 .s-info { margin-left: 6px; vertical-align: middle; }
/* --- the pills (a status word), the tiles and the KPI card with its ring ------------------------------------------------------------------- */
.kit-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--size-tiny); font-weight: 600; line-height: 1; background: var(--badge); color: var(--ink-2); white-space: nowrap; }
.kit-pill.ok { background: var(--ok-soft); color: var(--ok-soft-ink); }
.kit-pill.warn { background: var(--attention-soft); color: var(--attention-soft-ink); }
.kit-pill.danger { background: var(--danger-soft); color: var(--danger); }
.kit-pill.blue { background: var(--accent-soft); color: var(--headline); }
.kit-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin: 0 0 12px; }
.kit-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); min-width: 0; }
.kit-tile b { font-size: var(--size-large); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kit-tile-word { font-size: var(--size-small); color: var(--ink-2); }
.kit-kpi { padding: 14px 16px; }
.kit-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.kit-kpi-title { font-size: var(--size-small); color: var(--ink-2); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.kit-kpi-body { display: flex; align-items: center; gap: 14px; }
.kit-ring { width: 64px; height: 64px; flex: none; }
.kit-ring .track { fill: none; stroke: var(--line); stroke-width: 6; }
.kit-ring .arc { fill: none; stroke: var(--headline); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.kit-ring text { font-size: var(--size-tiny); font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.kit-kpi-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.kit-kpi-figure b { font-size: var(--size-title); font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.kit-kpi-total { font-size: var(--size-small); color: var(--ink-3); }
.kit-link { all: unset; cursor: pointer; font-size: var(--size-tiny); font-weight: 600; color: var(--headline); white-space: nowrap; min-height: 24px; display: inline-flex; align-items: center; padding: 0 6px; }
.kit-link:hover { text-decoration: underline; }
.kit-link:focus-visible { outline: 2px solid var(--headline); outline-offset: 2px; border-radius: 4px; }
/* --- the table: sortable heads, a change cell ------------------------------------------------------------------------------------------- */
.kit-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); }
.kit-table { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
.kit-table th, .kit-table td { text-align: left; padding: 0 10px; height: 40px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.kit-table th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: var(--size-tiny); text-transform: uppercase; letter-spacing: .04em; }
.kit-table tr:last-child td { border-bottom: 0; }
.kit-table td.num, .kit-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.kit-table td b { color: var(--ink); }
.kit-table .sub { display: block; font-size: var(--size-tiny); color: var(--ink-3); }
.kit-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; }
.kit-sort .arrows { font-size: var(--size-tiny); color: var(--ink-3); }
.kit-table th.on .kit-sort { color: var(--ink); }
.kit-sort:focus-visible { outline: 2px solid var(--headline); outline-offset: 2px; border-radius: 4px; }
.kit-change { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.kit-change .from { color: var(--ink-3); }
.kit-change .to.up { color: var(--ok-soft-ink); font-weight: 700; }
.kit-change .to.down { color: var(--danger); font-weight: 700; }
.kit-change .arrow { color: var(--ink-3); }
/* --- the charts by hand: the bars (stacked), the donut, the legend, the hover card ------------------------------------------------------- */
.kit-chart { display: block; width: 100%; max-width: 760px; height: auto; }   /* a unit stays near a pixel: the type of the ticks never grows with a stretched picture (the Kraft-Story's lesson, item 642) */
.kit-chart-box { position: relative; }
.kit-bar.s0 { fill: var(--headline); }
.kit-bar.s1 { fill: var(--accent); }
.kit-bar.s2 { fill: var(--ink-3); }
.kit-bar.empty { fill: var(--line); }
.kit-axis text, .kit-chart .tick-label { font-size: var(--size-tiny); fill: var(--muted); }
.kit-axis line, .kit-chart .grid { stroke: var(--line); stroke-width: 1; }
.kit-hit { fill: transparent; }
.kit-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--size-tiny); color: var(--ink-2); }
.kit-legend li { display: inline-flex; align-items: center; gap: 6px; }
.kit-legend .share { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kit-legend.rows { flex-direction: column; gap: 6px; }
.kit-legend.rows li { display: flex; }
.kit-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.kit-dot.s0 { background: var(--headline); }
.kit-dot.s1 { background: var(--accent); }
.kit-dot.s2 { background: var(--ink-3); }
.kit-hover { position: absolute; z-index: 2; pointer-events: none; min-width: 180px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: var(--size-tiny); color: var(--ink-2); }
.kit-hover[hidden] { display: none; }
.kit-hover b { color: var(--ink); }
.kit-hover .row-line { display: flex; justify-content: space-between; gap: 12px; }
.kit-donut { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.kit-donut .part.s0 { stroke: var(--headline); }
.kit-donut .part.s1 { stroke: var(--accent); }
.kit-donut .part.s2 { stroke: var(--ink-3); }
.kit-donut .part { fill: none; stroke-width: 14; }
.kit-donut .total { font-size: var(--size-large); font-weight: 700; fill: var(--ink); text-anchor: middle; }
.kit-donut .word { font-size: var(--size-tiny); fill: var(--muted); text-anchor: middle; }
/* --- the empty state, the side panel ----------------------------------------------------------------------------------------------------- */
.kit-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; text-align: center; }
.kit-empty-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-size: var(--size-large); font-weight: 700; margin-bottom: 4px; }
.kit-empty b { font-size: var(--size-body); color: var(--ink); }
.kit-empty p { margin: 0; font-size: var(--size-small); color: var(--ink-3); max-width: 40ch; }
.kit-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(100%, 560px); display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); }
.kit-panel-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.kit-panel-head h2 { margin: 0 0 2px; font-size: var(--size-body); font-weight: 700; }
.kit-panel-body { flex: 1 1 auto; overflow: auto; padding: 14px 20px; }
.kit-panel-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.kit-panel-close { all: unset; cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--ink-2); font-size: var(--size-body); }
.kit-panel-close:hover { background: var(--surface-2); }
.kit-panel-close:focus-visible { outline: 2px solid var(--headline); }
.kit-scrim { position: fixed; inset: 0; z-index: 29; background: var(--ink); opacity: .25; }
/* --- the toggle: a switch with its state word (the reference's „Active / Disabled") ------------------------------------------------------- */
.kit-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.kit-toggle input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; border: 0; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s; }   /* every checkbox of a cell is a toggle - no plain checkbox rule competes (the third pass: a plain rule beat the track, a widened base beat the :checked state) */
.kit-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.kit-toggle input:checked { background: var(--go); }
.kit-toggle input:checked::after { transform: translateX(16px); }
.kit-toggle input:disabled { opacity: .5; cursor: default; }
.kit-toggle input:focus-visible { outline: 2px solid var(--headline); outline-offset: 2px; }
.kit-toggle-word { font-size: var(--size-small); color: var(--ink); font-weight: 500; }
.kit-toggle-word.off { color: var(--ink-3); font-weight: 400; }
/* --- the settings cards and cells (kit/card.js, kit/field.js; the facade pages/settings_layout.js) - the owner's correction of 12:32 and his
   references of 12:40: THE SETTINGS CARDS AND CELLS. A page = the
   title with one line under it, the tab row, white CARDS with a hairline (`.scard`) - two side by side from 1200 px where two fit (`.scards`;
   a wide card or a card alone on its page spans the width) -, each card a heading and a GRID OF CELLS (`.srows`: as many cells to a line as
   320 px allow - three or four on a desktop, two on an iPhone in landscape, one in portrait). A cell (`.srow`): the label small and grey OVER
   the control, the control as wide as its content (`.w-xs` two digits, `.w-s` four digits or a short code, `.w-t` a time, `.w-m` a word, `.w-l`
   a name, `.w-xl` a sentence - in `ch`, a digit's width; a select its own width), the unit word after it, one short help line under it in the
   quiet grey, the setting's inheritance as the cell's last line (`.inherit`: the source word, the segmented lock switch `.seg`, the quiet
   „Übernehmen"), the ⓘ (`.s-info`) that opens the long explanation under the cell. ONE Save row per card at the bottom right (`.s-actions`).
   The controls at the desktop's working size (36 px, the Verwaltung's tables' step); the coarse-pointer block lifts every control to 44 px. The
   fixation rule (item 604): the label and the help the quiet tier (`--ink-3`, the tiny step - the reference's 12 px), the value the relevant
   thing (`--ink`, the small step). No new colour, no new size. */
.scards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.scards > .web-card { margin: 0; }
.scard { padding: 16px 20px 14px; }   /* 16-24 px inside a card (the doc's 4) */
.scard > h2, .kit-card-head h2 { margin: 0 0 2px; font-size: var(--size-small); font-weight: 600; }   /* the doc's scale (4): the card heading 14-15 semibold */
.s-intro { margin: 0 0 10px; font-size: var(--size-small); color: var(--ink-3); max-width: 90ch; line-height: 1.35; }
.srows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2px 24px; align-items: start; margin-top: 6px; }
.srows:empty { display: none; }
.srow { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 7px 0 9px; }   /* 8 px between a label and its control (the doc's 4), 16 between rows */
.srow.wide, .srow-note, .s-head, .srow-more { grid-column: 1 / -1; }
.srow-label { font-size: var(--size-tiny); color: var(--ink-3); font-weight: 500; line-height: 1.3; display: flex; align-items: center; gap: 6px; }
.srow-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.srow-control { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; }
.srow-unit { font-size: var(--size-tiny); color: var(--ink-3); white-space: nowrap; }
.srow-words { font-size: var(--size-small); color: var(--ink); font-weight: 500; line-height: 1.3; }
.srow-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.srow.is-switch .srow-label { display: flex; }
.srow-help { margin: 0; font-size: var(--size-tiny); color: var(--ink-3); line-height: 1.35; max-width: 48ch; }
.srow-more { margin: 2px 0 4px; font-size: var(--size-tiny); color: var(--ink-2); line-height: 1.4; max-width: 90ch; padding: 8px 10px; border-left: 2px solid var(--line); }
.srow-note { margin: 2px 0; font-size: var(--size-small); color: var(--ink-2); }
.srow-note > p { margin: 0; }
.srow-note .hint { font-size: var(--size-tiny); }
.srow-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.srow-inline .hint, .srow-body > a { font-size: var(--size-tiny); }
.srow-control:has(> .w-xl) { flex: 1 1 100%; }   /* a sentence field takes the cell's width (an inline-flex box would shrink-wrap it) */
.s-head { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--size-tiny); color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.s-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.srow .input, .srow select.input, .srow textarea.input { min-height: 36px; padding: 0 10px; font-size: var(--size-small); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; width: auto; min-width: 0; box-sizing: border-box; background: var(--surface); }
.srow select.input { padding-right: 28px; max-width: 100%; }
.srow .input:focus { outline: 2px solid var(--headline); outline-offset: 1px; border-color: var(--headline); }
.srow .input.inherited { color: var(--ink-3); }
.srow .input:disabled { color: var(--ink-3); background: var(--surface-2); }
.srow .input.w-xs { width: 7ch; text-align: right; }   /* two digits and the field's padding; the spin buttons live in it */
.srow .input.w-s { width: 10ch; }
.srow .input.w-t { width: 12ch; }   /* a time with the browser's clock picker */
.srow .input.w-m { width: 18ch; }
.srow .input.w-l { width: 28ch; max-width: 100%; }
.srow .input.w-xl { width: 100%; max-width: 480px; }
.srow .input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.s-info { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ink-3); color: var(--ink-3); font-size: var(--size-tiny); font-weight: 700; font-family: Georgia, serif; font-style: italic; line-height: 1; flex: none; }
.s-info:hover, .s-info[aria-expanded="true"] { border-color: var(--headline); color: var(--headline); }
.s-info:focus-visible { outline: 2px solid var(--headline); outline-offset: 2px; }
.s-foot[hidden] { display: none; }   /* a card's Save row stands only while the card holds UNSAVED changes (kit/card.js DirtyFoot) - until then the card ends after its last row (the lead's look of pass 5: three green pairs on one screen were heavy) */
.s-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.s-actions .btn { min-height: 36px; padding: 0 16px; font-size: var(--size-small); }
.s-read-only { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--size-tiny); color: var(--ink-3); }
/* the inheritance line (settings_inherit.js -> kit/inherit.js): the source word, the segmented lock switch, the quiet links - one small line.
   Item 736 d (the save-path run of 1.596.0): the line is a flex row WHEREVER it stands - the old markup carried `row wrap tight`, the kit's
   `Inherit` dropped the classes and the layout stood on the cell alone; a line outside a cell (the hours card's line under the weekdays, the
   tariffs' line on the organisation page) glued its words: "Set by the organizationThe organization changes it". */
.srow-end { margin-top: 2px; }
.inherit { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: var(--size-tiny); }
.srow .inherit { margin: 0; }
.inherit-state { font-size: var(--size-tiny); }
.srow-body .hint { font-size: var(--size-tiny); }
.inherit-link.btn, .srow .btn.small.inherit-link { min-height: 24px; padding: 0 6px; font-size: var(--size-tiny); font-weight: 500; border: 0; background: transparent; color: var(--ink-3); white-space: nowrap; }   /* the lead's look of pass 5: QUIET - nothing blue at a cell's end, the Save is the one thing that stands out */
.inherit-link.btn:hover { color: var(--ink); text-decoration: underline; }
.inherit-link.btn[data-armed="true"] { color: var(--danger); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; flex: none; background: transparent; }   /* a small outlined segmented control, grey words, the active half a light tint - no fill colour (the lead's look of pass 5) */
.seg-opt { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; font-size: var(--size-tiny); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.seg-opt + .seg-opt { border-left: 1px solid var(--line); }
.seg-opt.on { background: var(--surface-2); color: var(--ink-2); font-weight: 600; }
.seg-opt:hover:not(.on):not(:disabled) { color: var(--ink-2); }
.seg-opt:disabled { cursor: default; opacity: .7; }
.seg-opt:focus-visible { outline: 2px solid var(--headline); outline-offset: -2px; }
.srow .inherit[data-source="own"][data-locked="false"] { border-left: 0; padding-left: 0; }   /* the own-value mark of 1.273.0 becomes the state word in the ink (below) - no hairline inside a cell */
.srow .inherit[data-source="own"][data-locked="false"] > .inherit-state:first-child { color: var(--ink); font-weight: 700; }
.srow.inherit-target { outline: 2px solid var(--headline); outline-offset: 2px; border-radius: 8px; }
/* the Verwaltung's settings page: the title and its one line, the tab row, the cards two to a line on a wide desktop */
.vw-settings-head { margin: 0 0 10px; }
.vw-settings-head h1 { margin: 0 0 2px; font-size: var(--size-large); font-weight: 700; }
.vw-settings-sub { margin: 0; font-size: var(--size-small); color: var(--ink-3); }
.vw-settings-panel .scards > .web-card:not(.scard), .vw-settings-panel .scards > details.web-card, .scards > .scard.wide, .scards > .scard:only-child { grid-column: 1 / -1; }
.vw-stats a.chip { text-decoration: none; }   /* a tab is no link in a sentence (the pill row of the settings and the Statistik branch alike) */
.vw-settings-panel .inherit-org-row { margin: 0 0 6px; }
/* the organisation page's tab row inside the Verwaltung: the reference's band - a light band, the tabs small, the chosen one in the headline blue */
.vw-settings-panel .settings-tabs { background: var(--surface-2); border-radius: 10px; padding: 4px; gap: 2px; margin: 0 0 12px; }
.vw-settings-panel .settings-tabs .chip { min-height: 32px; padding: 0 12px; font-size: var(--size-small); font-weight: 600; border-color: transparent; background: transparent; }
.vw-settings-panel .settings-tabs .chip.on { background: var(--panel); border-color: var(--line); color: var(--ink); }   /* the doc's frame (1): the active tab a white pill on the light track */
/* the opening hours inside a settings card: the weekday lines at the cards' working size (the structure of 1.273.0 / 736 b untouched) */
.scard .opening-row { padding: 5px 0; gap: 6px 10px; }
.scard .opening-row .input, .scard .opening-row select.input, .scard .opening-row .input[type="time"] { min-height: 36px; padding: 0 10px; font-size: var(--size-small); border: 1px solid var(--line); border-radius: 8px; width: auto; }
.scard .opening-row .weekday { min-width: 100px; font-size: var(--size-small); }
.scard .opening-row .hint { font-size: var(--size-tiny); }
.scard .opening-line { margin-top: 6px; font-size: var(--size-tiny); }
.scard .opening-line .inherit { margin: 0; }
@media (min-width: 1200px) {
  .vw-settings-panel .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-settings-panel .scards > .scard.tall { grid-row: span 2; }   /* the page's first, taller card (the site's facts) lets two small ones stack beside it */
}
@media (min-width: 900px) {
  .vw-settings-nav { display: none; }   /* the tree stands: its sub-entries ARE the navigation - no second row under the title (the lead's look of pass 5) */
}
@media (max-width: 639px) {
  .vw-settings-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }   /* a phone in portrait: the eighteen pills as ONE row that scrolls sideways (the hub's pill bar's way), not six lines */
  .vw-settings-nav::-webkit-scrollbar { display: none; }
  .vw-settings-nav .chip { flex: none; }
}
@media (pointer: coarse) {
  .srow .input, .srow select.input, .scard .opening-row .input, .scard .opening-row select.input, .kit-head-actions .btn, .kit-card-head .btn, .kit-head-actions .input, .kit-card-head .input, .kit-tab { min-height: 44px; }
  .kit-toggle input { width: 44px; height: 24px; }
  .kit-toggle input::after { width: 20px; height: 20px; }
  .kit-toggle input:checked::after { transform: translateX(20px); }
  .vw-settings-panel .settings-tabs .chip { min-height: 44px; }
  .srow input[type="checkbox"] { width: 24px; height: 24px; }
  .s-actions .btn { min-height: 44px; }
  .seg-opt, .inherit-link.btn, .srow .btn.small.inherit-link { min-height: 32px; }
  .s-info { width: 24px; height: 24px; }
}