/* Rover app — the rep's app and the owner's page. Bootstrap underneath for reboot, offcanvas and the semantic
   classes; everything visible is drawn here. A member's theme feeds --brand, --brand-ink, --ink, --paper, --fill and
   the three semantic colours; every other colour below is derived from those. Plan and rules: docs/REDESIGN.md. */

/* ── 1. tokens ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --ink: #000; --paper: #fff; --brand: #dc0f1d; --brand-ink: #fff;
  --fill: color-mix(in srgb, var(--ink) 5%, var(--paper));
  /* surfaces */
  --bg: var(--fill);
  --panel: color-mix(in srgb, var(--paper) 30%, #fff);
  --panel-2: color-mix(in srgb, var(--ink) 4%, var(--panel));
  --bar: color-mix(in srgb, var(--bg) 84%, transparent);
  /* labels, lines and control fills: ink at fixed strengths */
  --label: var(--ink);
  --label-2: color-mix(in srgb, var(--ink) 62%, var(--panel));
  --label-3: color-mix(in srgb, var(--ink) 40%, var(--panel));
  --label-4: color-mix(in srgb, var(--ink) 22%, var(--panel));
  --sep: color-mix(in srgb, var(--ink) 13%, transparent);
  --sep-strong: color-mix(in srgb, var(--ink) 22%, transparent);
  --fill-1: color-mix(in srgb, var(--ink) 5%, transparent);
  --fill-2: color-mix(in srgb, var(--ink) 8%, transparent);
  --fill-3: color-mix(in srgb, var(--ink) 13%, transparent);
  /* the tint: the member's colour, for what acts and what is chosen */
  --tint: var(--brand); --tint-ink: var(--brand-ink);
  --tint-wash: color-mix(in srgb, var(--tint) 10%, var(--panel));
  --tint-wash-2: color-mix(in srgb, var(--tint) 16%, var(--panel));
  --tint-pressed: color-mix(in srgb, var(--tint) 82%, #000);
  /* judgement */
  --good: var(--bs-success-text-emphasis, #256e1e); --good-wash: var(--bs-success-bg-subtle, #eef8ea); --good-mark: var(--bs-success, #55c332);
  --care: var(--bs-warning-text-emphasis, #6b4a00); --care-wash: var(--bs-warning-bg-subtle, #fdf3de); --care-mark: var(--bs-warning, #e8a317);
  --bad: var(--bs-danger-text-emphasis, #a3101b); --bad-wash: var(--bs-danger-bg-subtle, #fdecec); --bad-mark: var(--bs-danger, #dc0f1d);
  /* type: the system face at the phone's scale */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-large: 32px; --lh-large: 38px;
  --fs-t1: 28px; --lh-t1: 34px;
  --fs-t2: 22px; --lh-t2: 28px;
  --fs-t3: 20px; --lh-t3: 25px;
  --fs-head: 17px; --lh-head: 22px;
  --fs-body: 17px; --lh-body: 22px;
  --fs-callout: 16px; --lh-callout: 21px;
  --fs-sub: 15px; --lh-sub: 20px;
  --fs-foot: 13px; --lh-foot: 18px;
  --fs-cap: 12px; --lh-cap: 16px;
  /* space and size */
  --gutter: 16px; --row: 44px; --row-2: 52px; --bar-h: 52px; --tool-h: 58px; --btn: 50px; --btn-s: 34px; --hit: 44px;
  --ease: cubic-bezier(.2, .8, .2, 1); --t-press: 110ms; --t-move: 260ms;
  --lift: 0 0 0 .5px var(--sep-strong), 0 12px 40px rgba(0, 0, 0, .16);
  --top: 0px; /* the height of what stays pinned above the content: set by the script, used for anchors */
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 992px) {
  :root {
    --fs-large: 30px; --lh-large: 36px; --fs-t1: 24px; --lh-t1: 30px; --fs-t2: 19px; --lh-t2: 24px; --fs-t3: 17px; --lh-t3: 22px;
    --fs-head: 15px; --lh-head: 20px; --fs-body: 15px; --lh-body: 21px; --fs-callout: 14px; --lh-callout: 19px;
    --fs-sub: 13px; --lh-sub: 18px; --fs-foot: 12px; --lh-foot: 16px; --fs-cap: 11px; --lh-cap: 14px;
    --row: 36px; --row-2: 44px; --btn: 38px; --btn-s: 28px; --hit: 32px;
  }
  /* the owner's page and the sign-in are read, not worked in: they keep the phone's scale on a desk */
  body.area-public {
    --fs-large: 34px; --lh-large: 40px; --fs-t1: 28px; --lh-t1: 34px; --fs-t2: 22px; --lh-t2: 28px; --fs-t3: 20px; --lh-t3: 25px;
    --fs-head: 17px; --lh-head: 22px; --fs-body: 17px; --lh-body: 24px; --fs-callout: 16px; --lh-callout: 22px;
    --fs-sub: 15px; --lh-sub: 20px; --fs-foot: 13px; --lh-foot: 18px; --fs-cap: 12px; --lh-cap: 16px;
    --row: 44px; --row-2: 52px; --btn: 46px; --btn-s: 32px; --hit: 40px;
  }
}

/* ── 2. base ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* a swap keeps its place and an anchor lands at once, as in a native list: no gliding (Bootstrap turns it on) */
:root { scroll-behavior: auto; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--top) + 12px); font-synthesis: none; }
body.area-app, body.area-public { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--label); font-family: var(--font);
  font-size: var(--fs-body); line-height: var(--lh-body); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.area-app *, .area-public * { border-radius: 0; }
/* the base at element weight: it beats Bootstrap's reboot by coming later, and every component's class beats it */
:where(.area-app, .area-public) :is(h1, h2, h3) { margin: 0; color: inherit; font-weight: 700; }
:where(.area-app, .area-public) p { margin: 0; }
:where(.area-app, .area-public) a { color: var(--tint); text-decoration: none; }
:where(.area-app, .area-public) :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
:where(.area-app, .area-public) button { font: inherit; color: inherit; }
:where(.area-app, .area-public) :is(b, strong) { font-weight: 600; }
:where(.area-app, .area-public) summary { list-style: none; cursor: pointer; }
:where(.area-app, .area-public) summary::-webkit-details-marker { display: none; }
:where(.area-app, .area-public) :focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
:where(.area-app, .area-public) ::selection { background: var(--tint-wash-2); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--label-2); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { display: inline-block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square;
  stroke-linejoin: miter; vertical-align: -4px; }
.i-s { width: 16px; height: 16px; vertical-align: -3px; }
.i-l { width: 24px; height: 24px; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 3000; padding: 10px 14px; background: var(--panel); color: var(--label); }
.skip-link:focus { top: 8px; box-shadow: var(--lift); }
@media (prefers-reduced-motion: reduce) { .area-app *, .area-public * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* type roles */
.t-large { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: -.022em; }
.t-1 { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 700; letter-spacing: -.02em; }
.t-2 { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.012em; }
.t-3 { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 600; }
.t-head { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 600; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-callout { font-size: var(--fs-callout); line-height: var(--lh-callout); }
.t-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); }
.t-foot { font-size: var(--fs-foot); line-height: var(--lh-foot); }
.t-cap { font-size: var(--fs-cap); line-height: var(--lh-cap); }

/* ── 3. components ────────────────────────────────────────────────────────────────────────────────────────────── */

/* buttons: one shape, four voices; pressed darkens, busy keeps its width */
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn); padding: 0 18px;
  border: 0; background: var(--fill-2); color: var(--label); font-size: var(--fs-head); line-height: 1.15; font-weight: 600; text-align: center;
  white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--t-press), color var(--t-press), opacity var(--t-press); }
.button:hover { background: var(--fill-3); }
.button:active { background: var(--fill-3); }
.button.is-primary { background: var(--tint); color: var(--tint-ink); }
.button.is-primary:hover, .button.is-primary:active { background: var(--tint-pressed); }
.button.is-secondary { background: var(--fill-2); color: var(--tint); }
.button.is-secondary:hover, .button.is-secondary:active { background: var(--fill-3); }
.button.is-plain { background: transparent; color: var(--tint); padding: 0 4px; }
.button.is-plain:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.button.is-danger { background: var(--bad-wash); color: var(--bad); }
.button.is-danger.is-plain { background: transparent; }
.button.is-wide { display: flex; width: 100%; }
.button.is-small { min-height: var(--btn-s); padding: 0 12px; font-size: var(--fs-sub); }
.button .i { width: 20px; height: 20px; }
.button:disabled, .button[aria-disabled="true"] { background: var(--fill-1); color: var(--label-4); cursor: default; }
.button.is-plain:disabled { background: transparent; }
.button.is-busy { color: transparent !important; pointer-events: none; }
.button.is-busy::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--tint-ink); border-right-color: transparent;
  border-radius: 50% !important; animation: spin .7s linear infinite; } /* the one round thing: a turning ring reads as waiting everywhere */
.button:not(.is-primary).is-busy::after { border-color: var(--label-2); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0; border: 0; background: none; color: var(--tint);
  font-size: inherit; font-weight: 500; cursor: pointer; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.is-danger { color: var(--bad); }
.link.is-quiet { color: var(--label-2); font-weight: 400; }
/* an action that takes something away arms in place: its wash and its question, an Abbrechen beside it */
[data-armed] { background: var(--bad-wash) !important; color: var(--bad) !important; padding-inline: 10px !important; }
.arm-cancel { margin-left: 12px; }

/* icon buttons: a 44 square target, the glyph centred */
.ibutton { display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); padding: 0; border: 0; background: transparent; color: var(--tint);
  cursor: pointer; transition: background-color var(--t-press); }
.ibutton:hover { background: var(--fill-1); }
.ibutton:active { background: var(--fill-2); }
.ibutton.is-filled { background: var(--fill-2); color: var(--label); }
.ibutton.is-on { color: var(--tint); }
.ibutton .i { width: 22px; height: 22px; }

/* the segmented control: views of one thing; the chosen one is the lifted panel on the track */
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; background: var(--fill-2); }
.segmented > a, .segmented > button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: calc(var(--row) - 8px);
  padding: 0 14px; border: 0; background: transparent; color: var(--label); font-size: var(--fs-sub); font-weight: 500; white-space: nowrap; text-decoration: none; }
.segmented > .is-on { background: var(--panel); font-weight: 600; box-shadow: 0 0 0 .5px var(--sep), 0 1px 3px rgba(0, 0, 0, .10); }
.segmented > :not(.is-on):hover { background: var(--fill-1); }
.segmented .count { margin-left: 2px; }

:root { --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='m4.5 12.5 4.8 4.8L19.5 7'/%3E%3C/svg%3E"); }

/* the stepper: − value + on one track */
.stepper { display: inline-grid; grid-template-columns: var(--hit) minmax(64px, auto) var(--hit); align-items: stretch; background: var(--fill-2); }
.stepper > a, .stepper > span { display: grid; place-items: center; min-height: var(--hit); color: var(--label); text-decoration: none; }
.stepper > a:hover { background: var(--fill-1); }
.stepper > .value { padding: 0 8px; font-weight: 600; font-variant-numeric: tabular-nums; border-inline: .5px solid var(--sep); }
.stepper > .is-off { color: var(--label-4); }

/* counts: a figure on a small square */
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--fill-2); color: var(--label-2);
  font-size: var(--fs-foot); font-weight: 600; font-variant-numeric: tabular-nums; }
.is-on > .count, .count.is-tint { background: var(--tint); color: var(--tint-ink); }

/* tags: a small square label; the colour says the judgement, the words say it too */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; background: var(--fill-2); color: var(--label-2);
  font-size: var(--fs-foot); line-height: 1; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.tag .i { width: 13px; height: 13px; stroke-width: 2; }
.tag.is-tint { background: var(--fill-2); color: var(--tint); }
.tag.is-solid { background: var(--tint); color: var(--tint-ink); }
.tag.is-good { background: var(--good-wash); color: var(--good); }
.tag.is-care { background: var(--care-wash); color: var(--care); }
.tag.is-bad { background: var(--bad-wash); color: var(--bad); }
.tag.is-line { background: transparent; box-shadow: inset 0 0 0 1px var(--sep-strong); color: var(--label-2); }

/* the monogram: a business's initials on a square */
.mono { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--fill-2); color: var(--label-2);
  font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.mono.is-small { width: 32px; height: 32px; font-size: 13px; }
.mono.is-tint { background: var(--tint); color: var(--tint-ink); }

/* the meter: k of n as n squares, k filled; past 24 a bar of the same colours */
.meter { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; vertical-align: middle; }
.meter > i { width: 7px; height: 7px; background: var(--fill-3); }
.meter > i.on { background: var(--label); }
.meter.is-tint > i.on { background: var(--tint); }
.meter.is-good > i.on { background: var(--good-mark); }
.meter.is-bar { display: block; width: 100%; height: 7px; background: var(--fill-3); }
.meter.is-bar > i { display: block; width: var(--k, 0%); height: 100%; background: var(--label); }

/* panels: the inset grouped section; a head above, a foot below, rows inside */
.panel { background: var(--panel); }
.panel + .panel, .group + .group { margin-top: 24px; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 var(--gutter) 8px; }
.group-title { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 600; }
.group-title .unit { font-weight: 400; color: var(--label-2); margin-left: 4px; }
.group-foot { padding: 8px var(--gutter) 0; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.panel-pad { padding: 14px var(--gutter); }

/* cells: the row of a list; leading, the words, trailing */
.cell { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--row-2); padding: 10px var(--gutter); color: var(--label);
  text-decoration: none; transition: background-color var(--t-press); }
a.cell:hover, button.cell:hover, summary.cell:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
a.cell:active, button.cell:active, summary.cell:active { background: var(--fill-2); }
button.cell { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.cell-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cell-title { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: break-word; }
.cell-title.is-strong { font-weight: 600; }
.cell-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--label-2); overflow-wrap: break-word; text-wrap: pretty; }
.cell-trail { flex: none; display: flex; align-items: center; gap: 8px; color: var(--label-2); font-size: var(--fs-sub); text-align: right; }
.cell-chev { flex: none; width: 16px; height: 16px; color: var(--label-4); stroke-width: 2; }
.cell.is-struck .cell-title { color: var(--label-3); text-decoration: line-through; }
.cell.is-off { opacity: .55; }
/* the separator between cells starts where the words start */
.cells { --inset: var(--gutter); }
.cells > li { position: relative; }
.cells > li + li::before, .cells > .cell + .cell::before { content: ""; position: absolute; top: 0; left: var(--inset); right: 0; height: .5px; background: var(--sep); z-index: 1; }
.cells.has-lead { --inset: calc(var(--gutter) + 52px); }

/* disclosure: a row that opens what it holds, the chevron turning with it */
.disclose > summary { display: flex; align-items: center; gap: 10px; min-height: var(--row-2); padding: 10px var(--gutter); }
.food-head { display: grid; gap: 1px; }
.food-title { font-weight: 600; }
.food > summary { background: var(--panel); }
.food[open] > summary { box-shadow: inset 0 -.5px 0 var(--sep); }
.food > .sec:first-of-type { margin-top: 20px; }
.food-sub { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 400; }
.disclose > summary::after { content: ""; margin-left: auto; width: 16px; height: 16px; flex: none; background: var(--label-3);
  -webkit-mask: var(--mask-down) center / contain no-repeat; mask: var(--mask-down) center / contain no-repeat; transition: transform var(--t-move) var(--ease); }
.disclose[open] > summary::after { transform: rotate(180deg); }
:root { --mask-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  --mask-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); }
.disclose[open] > :not(summary) { animation: unfold var(--t-move) var(--ease); }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } }
.opens-sheet::after { content: ""; display: block; width: 16px; height: 16px; flex: none; background: var(--label-4);
  -webkit-mask: var(--mask-next) center / contain no-repeat; mask: var(--mask-next) center / contain no-repeat; }

/* glyph tiles: the kind of a thing, on its colour's wash */
.glyph { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; background: var(--fill-2); color: var(--label-2); }
.glyph .i { width: 22px; height: 22px; }
.glyph.is-tint { background: var(--tint); color: var(--tint-ink); }
.glyph.is-good { background: var(--good-mark); color: #fff; }
.glyph.is-care { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 25%, #000); }
.glyph.is-bad { background: var(--bad-mark); color: #fff; }
.glyph.is-ink { background: var(--label); color: var(--panel); }
.glyph.is-soft { background: var(--fill-2); color: var(--label-2); }

/* stat tiles: a figure and what it counts */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--sep); }
.tile { display: grid; align-content: start; gap: 2px; padding: 14px var(--gutter); background: var(--panel); color: var(--label); text-decoration: none; }
a.tile { transition: background-color var(--t-press); }
a.tile:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
a.tile:active { background: var(--fill-2); }
.tile-fig { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-fig small { font-size: var(--fs-sub); font-weight: 600; letter-spacing: 0; margin-left: 3px; }
.tile-label { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; white-space: nowrap; }
.tile-unit { margin-right: auto; color: var(--label-2); font-weight: 400; } /* beside its label; only the chevron goes to the edge */
.tile-sub { font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.tile .tile-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
a.tile .tile-label::after { content: ""; width: 14px; height: 14px; flex: none; background: var(--label-4);
  -webkit-mask: var(--mask-next) center / contain no-repeat; mask: var(--mask-next) center / contain no-repeat; }

/* banners: a state said in place, on its colour's wash, with a glyph, an action and a close */
.banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px var(--gutter); background: var(--panel); color: var(--label);
  font-size: var(--fs-sub); line-height: var(--lh-sub); }
.banner > .i { margin-top: 0; width: 20px; height: 20px; flex: none; }
.banner-text { flex: 1; min-width: 0; text-wrap: pretty; }
.banner-text b { font-weight: 600; }
.banner-act { flex: none; display: flex; align-items: center; gap: 4px; margin: -10px -8px -10px 0; }
.banner-act .link, .banner-act .ibutton { min-height: 40px; height: 40px; color: inherit; font-weight: 600; }
.banner.is-good { background: var(--good-wash); color: var(--good); }
.banner.is-care { background: var(--care-wash); color: var(--care); }
.banner.is-bad { background: var(--bad-wash); color: var(--bad); }
.banner.is-tint { background: var(--tint); color: var(--tint-ink); }
.banner.is-ink { background: var(--label); color: var(--panel); }

/* the toast: what an action did, for a moment, at the top */
.snack { position: fixed; z-index: 1100; left: 50%; top: calc(8px + env(safe-area-inset-top)); width: min(560px, calc(100% - 16px)); transform: translateX(-50%);
  box-shadow: var(--lift); animation: snack-in var(--t-move) var(--ease); }
.snack.is-leaving { animation: snack-out 200ms ease-in forwards; }
@keyframes snack-in { from { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes snack-out { to { opacity: 0; transform: translate(-50%, -12px); } }

/* empty, unavailable and error states: a glyph, a head, a line, an action */
.empty { display: grid; justify-items: center; gap: 8px; padding: 32px var(--gutter); text-align: center; }
.empty .glyph { width: 48px; height: 48px; margin-bottom: 4px; }
.empty .glyph .i { width: 26px; height: 26px; }
.empty-title { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 600; }
.empty-text { max-width: 30rem; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.empty .button { margin-top: 8px; }
.empty.is-row { justify-items: start; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 0; padding: 14px var(--gutter); text-align: left; }
.empty.is-row .glyph { width: 36px; height: 36px; margin: 0; grid-row: span 2; }
.empty.is-row .glyph .i { width: 22px; height: 22px; }

/* skeletons: where the comparison is still coming, in the shape it will take */
.skel { display: block; height: 12px; background: var(--fill-2); }
.skel + .skel { margin-top: 8px; }
.skel.w-60 { width: 60%; } .skel.w-40 { width: 40%; } .skel.w-80 { width: 80%; }

/* fields: a filled box, its label above, its note or error below */
.field-label { display: block; margin: 16px 0 6px; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.field { display: block; width: 100%; min-height: var(--btn); padding: 0 14px; border: 0; background: var(--panel); color: var(--label);
  font: inherit; font-size: var(--fs-body); box-shadow: inset 0 0 0 1px var(--sep-strong); transition: box-shadow var(--t-press), background-color var(--t-press); }
.field:disabled, .field[readonly] { background: var(--fill-1); color: var(--label-2); box-shadow: inset 0 0 0 1px var(--sep); }
.field::placeholder { color: var(--label-3); }
.field:focus { outline: none; background: var(--panel); box-shadow: inset 0 0 0 2px var(--label); } /* ink: a red ring would read as an error */
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad-mark); }
textarea.field { min-height: 12rem; padding: 12px 14px; line-height: 1.5; resize: vertical; }
textarea.field.is-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-foot); white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.field-note { margin-top: 6px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); text-wrap: pretty; }
.field-error { margin-top: 6px; color: var(--bad); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.form-actions { display: grid; gap: 10px; margin-top: 20px; }

/* search: the glass, the words, a clear */
.search { position: relative; display: flex; align-items: center; }
.search > .i { position: absolute; left: 12px; color: var(--label-3); pointer-events: none; }
.search input { width: 100%; height: 40px; padding: 0 36px 0 40px; border: 0; background: var(--fill-2); color: var(--label); font: inherit;
  font-size: var(--fs-body); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--label-3); }
.search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--label); background: var(--panel); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-right: -26px; cursor: pointer;
  background: var(--label-3); -webkit-mask: var(--mask-x) center / contain no-repeat; mask: var(--mask-x) center / contain no-repeat; }
:root { --mask-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='m6 6 12 12m0-12L6 18'/%3E%3C/svg%3E"); }

/* ── 4. bars, sheets and the shell ────────────────────────────────────────────────────────────────────────────── */

/* the nav bar: back, the title once the big one has scrolled away, the trailing buttons; it floats with a blur */
.navbar-app { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr); align-items: center;
  min-height: var(--bar-h); padding: env(safe-area-inset-top) 4px 0; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 .5px 0 transparent; transition: box-shadow var(--t-move); }
.navbar-app.is-scrolled { box-shadow: 0 .5px 0 var(--sep); }
.navbar-app .nav-lead { display: flex; align-items: center; min-width: 0; }
.navbar-app .nav-title { max-width: calc(100vw - 216px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-head); font-weight: 600;
  opacity: 0; transform: translateY(4px); transition: opacity var(--t-move), transform var(--t-move) var(--ease); }
.navbar-app.is-titled .nav-title { opacity: 1; transform: none; }
.navbar-app .nav-trail { display: flex; align-items: center; justify-content: flex-end; }
.nav-back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--hit); padding: 0 8px 0 4px; color: var(--tint); font-size: var(--fs-body);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-back .i { width: 24px; height: 24px; stroke-width: 1.8; margin-right: -2px; }
.nav-back:hover { opacity: .75; }

/* the large title under the bar, scrolling away */
.large-head { padding: 4px var(--gutter) 14px; }
.large-head h1 { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: -.022em; overflow-wrap: break-word; hyphens: auto;
  text-wrap: balance; }
.large-sub { margin-top: 4px; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }

/* the toolbar: the screen's actions at the thumb, floating with a blur */
.toolbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -.5px 0 var(--sep); }
.toolbar form { margin: 0; display: grid; }
.toolbar .button { min-height: 48px; }

/* sheets: Bootstrap's offcanvas as the phone's sheet with a grabber and as the desk's inspector at the right */
.sheet { --bs-offcanvas-bg: var(--bg); --bs-offcanvas-color: var(--label); --bs-offcanvas-border-width: 0; --bs-offcanvas-box-shadow: none;
  --bs-offcanvas-transition: transform var(--t-move) var(--ease); font-size: var(--fs-body); }
.sheet:focus { outline: none; }
.offcanvas-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .3; }
.sheet.offcanvas.offcanvas-bottom { height: auto; max-height: calc(100dvh - 44px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--lift); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 991.98px) {
  .sheet.offcanvas-lg.offcanvas-bottom { height: auto; max-height: calc(100dvh - 44px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: var(--lift); padding-bottom: calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
}
.sheet-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  flex: none; /* the offcanvas is a flex column: a long sheet would squeeze a name on two lines under its own body */ min-height: 56px; padding: 14px 8px 6px var(--gutter); background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; background: var(--fill-3); }
.sheet-title { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 600; min-width: 0; }
.sheet-title .unit { font-weight: 400; color: var(--label-2); margin-left: 4px; }
.sheet-close { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: var(--fill-2); color: var(--label-2); cursor: pointer; }
.sheet-close::after { content: ""; position: absolute; inset: -6px; } /* a 44 px target around the 32 px square */
.sheet-close .i { width: 16px; height: 16px; stroke-width: 2.2; }
.sheet-close:hover { background: var(--fill-3); }
.sheet-body { display: grid; gap: 20px; padding-top: 8px; }
@media (min-width: 992px) {
  .sheet-head::before { content: none; }
  .sheet.inspector.offcanvas { inset: 0 0 0 auto; width: 440px; height: 100dvh; max-height: none; overflow-y: auto; box-shadow: var(--lift);
    transform: translateX(100%); padding-bottom: 32px; }
  .sheet.inspector.offcanvas.showing, .sheet.inspector.offcanvas.show:not(.hiding) { transform: none; }
}

/* ── 5. entities ──────────────────────────────────────────────────────────────────────────────────────────────── */

/* a business in a list: its monogram, name, where, and what its card is */
.biz .cell-title { font-weight: 600; }
.biz .cell-trail { flex-direction: column; align-items: flex-end; gap: 4px; }
.biz .dist { font-variant-numeric: tabular-nums; color: var(--label-2); font-size: var(--fs-foot); }
.biz .pin { color: var(--tint); width: 14px; height: 14px; vertical-align: -1px; margin-left: 4px; }
.biz.is-current { background: var(--fill-1); box-shadow: inset 3px 0 0 var(--tint); }

.biz.is-opening { background: var(--fill-2); }

/* a finding: what the comparison says about the card, as a card of its own */
.findings { display: grid; gap: 10px; }
.finding { background: var(--panel); }
.finding-main { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 16px var(--gutter) 14px; }
.finding-text { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.finding-text b { font-weight: 650; white-space: nowrap; }
.finding-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; color: var(--label-2); font-size: var(--fs-foot); }
.finding-base { color: var(--label-2); font-size: var(--fs-foot); }
.finding > details > summary { display: flex; align-items: center; gap: 8px; min-height: var(--row); padding: 0 var(--gutter) 0 calc(var(--gutter) + 50px);
  color: var(--tint); font-size: var(--fs-sub); font-weight: 600; box-shadow: inset 0 .5px 0 var(--sep); }
.finding > details > summary::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mask-down) center / contain no-repeat;
  mask: var(--mask-down) center / contain no-repeat; transition: transform var(--t-move) var(--ease); }
.finding > details[open] > summary::after { transform: rotate(180deg); }
.finding-hold { display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--gutter) 6px; }
.finding.is-parked .finding-main { padding-block: 12px 10px; }
.finding.is-parked .finding-text { font-size: var(--fs-callout); line-height: var(--lh-callout); }
.finding.is-parked .glyph { width: 30px; height: 30px; }
.finding.is-parked .glyph .i { width: 18px; height: 18px; }

/* the scope: whom the card is compared with, and where it stands */
.scope .tile { min-height: 96px; }
.scope .tile-fig { font-size: var(--fs-t2); line-height: var(--lh-t2); }

/* the card: a head with its source and its prices at a glance, then a panel per section */
.card-head { display: grid; gap: 4px; padding: 16px var(--gutter); background: var(--panel); }
.card-title { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.012em; }
.card-meta { color: var(--label-2); font-size: var(--fs-sub); }
.card-lead { font-size: var(--fs-t1); line-height: var(--lh-t1); letter-spacing: -.02em; text-wrap: balance; } /* the card's verdict */
.card-lead b { color: var(--good); font-weight: 700; }
.card-lead.is-skewed b { color: inherit; }
.card-sub { color: var(--label-2); font-size: var(--fs-callout); line-height: var(--lh-callout); }
.sec { margin-top: 24px; }
.sec-title { padding: 0 var(--gutter) 8px; font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 600; }
.sec-title .count { margin-left: 6px; vertical-align: 1px; }
.lines { background: var(--panel); }
.lines > li { position: relative; }
.lines > li + li::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: 0; height: .5px; background: var(--sep); }

/* a drink line: its name and markers; each size with its price stacked at the right, the verdict under the price */
.line-row, .line-static { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start; min-height: var(--row-2);
  padding: 13px var(--gutter); color: var(--label); text-decoration: none; }
.line-row { transition: background-color var(--t-press); }
.line-row:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.line-row:active { background: var(--fill-2); }
.line-name { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; text-wrap: pretty; } /* only a word too long for its line breaks, at a syllable */
.line-meta { display: block; margin-top: 2px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.keep { white-space: nowrap; }
.pours { display: grid; row-gap: 6px; justify-items: end; }
.pour { display: grid; grid-template-columns: auto minmax(4.2em, auto); column-gap: 10px; align-items: baseline; justify-items: end; font-variant-numeric: tabular-nums; }
.pour-size { color: var(--label-2); font-size: var(--fs-sub); white-space: nowrap; }
.pour-price { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
.pour .verdict { grid-column: 1 / -1; margin-top: 2px; }
.pour-open { color: var(--label-3); font-weight: 400; }
/* the markers after a name: the member's brand, a rare drink, a line read unsure */
.mark-own { display: inline-block; width: 8px; height: 8px; margin-left: 6px; background: var(--tint); vertical-align: 2px; }
.mark-rare { color: var(--good-mark); fill: currentColor; stroke-width: 1; width: 14px; height: 14px; margin-left: 5px; vertical-align: -1px; }
.mark-unsure { display: inline-block; width: 8px; height: 8px; margin-left: 6px; box-shadow: inset 0 0 0 2px var(--care-mark); vertical-align: 2px; } /* hollow, where the own brand's square is filled */
.line.is-open .line-row { background: var(--fill-1); box-shadow: inset 3px 0 0 var(--tint); } /* the line whose sheet is up */
.line.is-added { background: var(--tint-wash); }
.line.is-added .line-name::before { content: "Neu"; display: inline-block; margin-right: 8px; padding: 0 6px; background: var(--label); color: var(--panel);
  font-size: var(--fs-cap); line-height: 18px; font-weight: 700; vertical-align: 2px; }
.line.is-struck .line-text, .line.is-struck .pour { color: var(--label-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.line.is-pair-only .line-static { color: var(--label-2); }
/* the rep's card as a map of its prices: each size a tile in its verdict's colour, so the card reads at a glance, green
   where the business prices in line, amber where it stands out, plain where nothing compares */
.o-card .line-row, .o-card .line-static { align-items: center; min-height: 58px; padding-block: 6px; }
.o-card .line-name { font-weight: 500; }
@media (max-width: 479px) { /* a line with several sizes keeps its tiles beside the name where they fit, else gives them a row of their own */
  .o-card .line.is-multi .line-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; }
  .o-card .line.is-multi .line-name { flex: 1 1 7em; min-width: 0; }
  .o-card .line.is-multi .ptiles { max-width: none; margin-left: auto; }
}
.ptiles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 194px; } /* two to a row on the phone */
@media (min-width: 768px) { .ptiles { max-width: 294px; } }
.ptile { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; width: 94px; padding: 5px 7px 6px; color: var(--label); font-variant-numeric: tabular-nums; } /* plain without a verdict; a tile stretched beside a taller one keeps its rows at the top */
.ptile-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 3px; min-height: 16px; color: var(--label-2);
  font-size: 12px; line-height: 16px; white-space: nowrap; } /* a long size ("alkoholfrei") puts the verdict on a line of its own */
.ptile-v { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; font-size: 12px; font-weight: 700; }
.ptile-size { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a variant read as the size ("gefüllt mit …") stays in its tile */
.ptile-v .i { width: 13px; height: 13px; stroke-width: 2.8; }
.ptile-price { font-size: 19px; line-height: 23px; font-weight: 700; letter-spacing: -.01em; text-align: right; white-space: nowrap; }
.ptile-price.is-open { color: var(--label-3); font-size: var(--fs-sub); font-weight: 400; }
.ptile-mid { min-height: 14px; margin-top: 1px; color: var(--label-2); font-size: 12px; line-height: 14px; font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* the Rahmen it is judged by */
.ptile.is-rahmen .ptile-mid { color: color-mix(in srgb, var(--good) 72%, var(--label)); }
.ptile.is-teurer .ptile-mid, .ptile.is-guenstiger .ptile-mid { color: inherit; opacity: .86; }
.ptile.is-rahmen { background: var(--good-wash); }
.ptile.is-rahmen .ptile-v { color: var(--good); }
.ptile.is-teurer, .ptile.is-guenstiger { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 18%, #000); }
.ptile.is-teurer .ptile-top, .ptile.is-guenstiger .ptile-top { color: inherit; }
.line.is-struck .ptile { background: transparent; color: var(--label-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.line.is-struck .ptile-top, .line.is-struck .ptile-v { color: var(--label-3); }

/* a section: its title and its verdicts as counts, their bar as the top edge of its lines */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 var(--gutter) 8px; }
.sec-head .sec-title { padding: 0; font-size: var(--fs-head); line-height: var(--lh-t3); font-weight: 700; } /* one size for every heading, however the card prints it */
.sec-sum { display: inline-flex; flex: none; align-self: center; gap: 4px; font-size: 13px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sec-sum span { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px 0 4px; }
.sec-sum .i { width: 12px; height: 12px; stroke-width: 2.8; }
.sec-sum .is-rahmen { background: var(--good-wash); color: var(--good); }
.sec-sum .is-teurer, .sec-sum .is-guenstiger { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 18%, #000); }
.sec-bar { display: block; width: 100%; height: 4px; }
.sec-bar .is-rahmen { fill: var(--good-mark); }
.sec-bar .is-teurer, .sec-bar .is-guenstiger { fill: var(--care-mark); }
.sec-bar .is-ohne { fill: var(--fill-3); } /* prices without a comparison */

/* the card head's verdict tiles: a tap shows the lines of that verdict alone, a second tap all again */
.vstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.vstat { display: grid; justify-items: start; gap: 0; padding: 10px 12px 11px; border: 0; background: var(--fill-1); color: var(--label); font: inherit;
  text-align: left; cursor: pointer; transition: background-color var(--t-press), box-shadow var(--t-press); }
.vstat-n { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vstat { min-width: 0; }
.vstat-l { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; white-space: nowrap; }
.gl-preise { container-type: inline-size; }
@container (max-width: 380px) { /* a narrow card: the verdicts' words smaller, never broken */
  .vstat { padding-inline: 8px; }
  .vstat-l { font-size: var(--fs-cap); }
}
.vstat-l .i { width: 12px; height: 12px; stroke-width: 2.8; }
.vstat.is-rahmen { background: var(--good-wash); color: var(--good); }
.vstat.is-teurer, .vstat.is-guenstiger { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 18%, #000); }
.vstat:disabled, .vstat.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--sep-strong); color: var(--label-3); cursor: default; }
a.vstat { text-decoration: none; }
.gl-preise .vstats { margin-top: 14px; }
.vstat[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--label); }
.vstat:not(:disabled):active { filter: brightness(.96); }
.band-filter { font-weight: 600; }
.band-filter.is-rahmen { background: var(--good-wash); color: var(--good); }
.band-filter.is-teurer, .band-filter.is-guenstiger { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 18%, #000); }
.o-card[data-vf] .lines > li:not(.line), .o-card[data-vf] .line.is-pair-only { display: none; }
.o-card[data-vf="rahmen"] .line:not([data-v~="rahmen"]), .o-card[data-vf="teurer"] .line:not([data-v~="teurer"]),
.o-card[data-vf="guenstiger"] .line:not([data-v~="guenstiger"]) { display: none; }
.o-card[data-vf="kc"] .line:not([data-kc-hit]) { display: none; }
.o-card[data-vf="kc"] .sec:not(:has(.line[data-kc-hit])) { display: none; }
.o-card[data-vf="kc"] .card-head, .o-card[data-vf] .kc, .o-card[data-vf="kc"] .sec-sum, .o-card[data-vf="kc"] .sec-bar { display: none; } /* the lines alone */
.o-card[data-vf="kc"] .line[data-kc-hit] { box-shadow: inset 3px 0 0 var(--care-mark); } /* what the rule speaks of */
.band-filter.is-kc { background: var(--label); color: var(--panel); }
.o-card[data-vf="rahmen"] .sec:not(:has(.line[data-v~="rahmen"])), .o-card[data-vf="teurer"] .sec:not(:has(.line[data-v~="teurer"])),
.o-card[data-vf="guenstiger"] .sec:not(:has(.line[data-v~="guenstiger"])) { display: none; }

/* the Kartencheck: how the card itself is made, rule by rule, between the card's head and its lines, in the colours of
   the price tiles: solid amber where the law asks, an amber wash for the other rules worth a look, a green wash where
   met, an outline where locked; a rule opens in place to its sentence, why it matters and its lines */
.kc { margin-top: 12px; background: var(--panel); }
.kc-head { display: grid; gap: 10px; padding: 14px var(--gutter) 12px; }
.kc-headline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kc-title { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 700; }
.kc-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; font-size: 13px; line-height: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.kc-chips span { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 5px; white-space: nowrap; }
.kc-chips .i { width: 13px; height: 13px; stroke-width: 2.8; }
.kc-chips .is-look { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 18%, #000); }
.kc-chips .is-ok { background: var(--good-wash); color: var(--good); }
.kc-chips .is-locked { box-shadow: inset 0 0 0 1px var(--sep-strong); color: var(--label-2); font-weight: 600; }
.kc-cells { display: flex; gap: 2px; }
.kc-cells i { flex: 1; height: 6px; }
.kc-cells i.is-ok { background: var(--good-mark); }
.kc-cells i.is-look { background: var(--care-mark); }
.kc-cells i.is-locked { box-shadow: inset 0 0 0 1px var(--sep-strong); }
.kc-list > li { position: relative; }
.kc-list > li::before { content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 40px); right: 0; height: .5px; background: var(--sep); }
.kc-head + .kc-list > li:first-child::before { left: 0; }
.kc-sum { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px; column-gap: 12px; align-items: center; min-height: 50px;
  padding: 8px var(--gutter); list-style: none; cursor: pointer; transition: background-color var(--t-press); }
.kc-sum::-webkit-details-marker { display: none; }
.kc-sum:active { background: var(--fill-1); }
.kc-glyph { display: grid; place-items: center; width: 28px; height: 28px; }
.kc-glyph .i { width: 16px; height: 16px; stroke-width: 2.8; }
.is-look .kc-glyph { background: var(--care-wash); color: var(--care); }
.is-look.is-law .kc-glyph { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 18%, #000); } /* the law asks it */
.is-ok .kc-glyph { background: var(--good-wash); color: var(--good); }
.is-locked .kc-glyph { box-shadow: inset 0 0 0 1px var(--sep-strong); color: var(--label-2); }
.is-locked .kc-glyph .spin { width: 14px; height: 14px; }
.kc-short { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: var(--fs-callout); line-height: var(--lh-callout);
  font-weight: 600; overflow-wrap: break-word; }
.is-ok > details > .kc-sum .kc-short, .kc-inner .kc-short { font-weight: 500; }
.kc-basis { color: var(--label-3); font-size: var(--fs-foot); line-height: var(--lh-foot); white-space: nowrap; }
.kc-chev { grid-column: 4; color: var(--label-3); transition: transform var(--t-move) var(--ease); } /* one column for every row's chevron */
@media (max-width: 479px) { /* the basis under the rule's words, so a long rule keeps its line */
  .kc-sum { grid-template-columns: 28px minmax(0, 1fr) 16px; row-gap: 1px; }
  .kc-sum > .kc-glyph { grid-row: 1 / span 2; }
  .kc-sum > .kc-basis { grid-column: 2; grid-row: 2; }
  .kc-sum:not(:has(> .kc-basis)) > .kc-glyph, .kc-sum:not(:has(> .kc-basis)) > .kc-chev { grid-row: 1; } /* no empty second line under a rule alone */
  .kc-sum > .kc-chev { grid-column: 3; grid-row: 1 / span 2; }
}
.kc-chev .i { width: 16px; height: 16px; }
details[open] > .kc-sum .kc-chev { transform: rotate(180deg); }
.kc-more { display: grid; gap: 6px; padding: 0 var(--gutter) 14px calc(var(--gutter) + 40px); }
.kc-rule { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; }
.kc-text { font-size: var(--fs-sub); line-height: var(--lh-sub); overflow-wrap: break-word; text-wrap: pretty; }
.kc-why { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.kc-foot { margin-top: 4px; }
.kc-show { min-height: 0; font-size: var(--fs-sub); font-weight: 600; }
.kc-inner { background: color-mix(in srgb, var(--ink) 2.5%, var(--panel)); }
.kc-inner > li:first-child::before { left: 0; }
.kc-inner .kc-sum { min-height: 44px; padding-block: 6px; }
.kc-locked { cursor: default; grid-template-columns: 28px minmax(0, 1fr) auto; }
.kc-locked:active { background: transparent; }
.kc-locked .kc-main { display: grid; gap: 1px; min-width: 0; }
.kc-locked .kc-text { color: var(--label-2); }
.kc-act { align-self: center; }
.kc-static { cursor: default; grid-template-columns: 28px minmax(0, 1fr); padding-block: 10px; }
.kc-static:active { background: transparent; }
.is-note .kc-glyph { background: var(--fill-2); color: var(--label-2); }
.is-note .kc-text { color: var(--label-2); }

/* the Chancen beside the card, in the Kartencheck's panel: its takeaway in one line, a cell per drink group with its
   drinks and their lean against the middle neighbour (only a gap in solid ink), then a row per chance (ink) and per
   thing the card stands out with (green), each with whom it counts */
.st { margin-top: 0; }
.kc-chips .is-chance { background: var(--label); color: var(--panel); }
.st-lead { margin-top: -2px; font-size: var(--fs-callout); line-height: var(--lh-callout); font-weight: 650; }
.st-lead > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.st-lead > summary::-webkit-details-marker { display: none; }
details[open].st-lead > summary .kc-chev { transform: rotate(180deg); }
.st-lead-text { display: inline-flex; align-items: center; gap: 6px; text-wrap: pretty; }
.st-lead-text .i { flex: none; width: 17px; height: 17px; stroke-width: 2.8; }
.st-lead.is-good { color: var(--good); }
.st-lead.is-note { color: var(--label-2); font-weight: 600; }
.st-rule { margin-top: 6px; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 400; text-wrap: pretty; }
.st-cap .i { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; stroke-width: 2.6; }
.st-cap .i + .i { margin-right: 3px; }
.st-sum { min-height: 54px; }
.st-main { display: grid; gap: 3px; min-width: 0; padding-block: 9px; }
.st-sub { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--label-2); font-size: var(--fs-foot);
  line-height: var(--lh-foot); text-wrap: pretty; font-variant-numeric: tabular-nums; } /* two lines: the neighbour's name and its distance are the point */
.st-main .meter { gap: 2px; margin-top: 3px; }
.st-main .meter > i { width: 6px; height: 6px; }
.st-main .meter-bar { max-width: 180px; height: 6px; margin-top: 3px; }
.meter.is-soft > i.on { background: var(--label-3); }
.st-depth { display: block; width: 100%; max-width: 180px; height: 10px; margin-top: 4px; overflow: visible; }
.st-depth .track { fill: var(--fill-3); }
.st-depth .is-here { fill: var(--care-mark); } /* a thin list, as its group's tile draws it */
.st-depth .is-there { fill: var(--label-2); }
.is-good .st-depth .is-here { fill: var(--good-mark); }
.is-soft .st-depth .is-here { fill: var(--label-3); }
.st-own .mark-own { margin: 0 0 0 7px; vertical-align: 1px; } /* after its brand, as on the card, never alone on a line */
.st-count { margin-left: 4px; color: var(--label-3); font-weight: 500; }
.st-row.is-chance .kc-glyph { box-shadow: inset 0 0 0 1.5px var(--label); color: var(--label); } /* hollow: a place to fill; the filled square with its plus is the card's action alone */
.st .kc-headline { align-items: baseline; }
.st-counts { flex: none; color: var(--label-2); font-size: var(--fs-foot); line-height: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-row.is-good .kc-glyph { background: var(--good-wash); color: var(--good); }
.st-row.is-done .kc-glyph { background: var(--good-mark); color: #fff; }
.st-row.is-soft .kc-glyph { box-shadow: inset 0 0 0 1px var(--sep-strong); color: var(--label-2); }
.st-row.is-soft .kc-short, .st-more > details > .kc-sum .kc-short { font-weight: 500; }
.st-more .kc-glyph { background: var(--fill-2); color: var(--label-2); }
.st-acts { margin-top: 4px; }
.st-nbs { margin: 6px calc(-1 * var(--gutter)) 0 calc(-1 * (var(--gutter) + 40px)); }
.st-rest > summary { display: inline-flex; min-height: 0; margin-top: 6px; font-size: var(--fs-sub); font-weight: 600; cursor: pointer; }
.st-rest > summary::-webkit-details-marker { display: none; }
.st-offers { display: grid; gap: 2px; margin-top: 4px; }
.st-offers .offer-list { margin: 0 calc(-1 * var(--gutter)); }
.st-hold { margin-top: 6px; }
.st-hold .link { min-height: 0; color: var(--label-3); font-size: var(--fs-foot); font-weight: 500; }
[data-flash] { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 40% { box-shadow: inset 0 0 0 3px var(--label); } 100% { box-shadow: inset 0 0 0 3px transparent; } }

/* the location as figures: one tile a fact, two to a row */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.facts > .fact:last-child:nth-child(odd) { grid-column: span 2; }
.fact { display: grid; align-content: start; gap: 2px; padding: 12px var(--gutter) 13px; background: var(--panel); }
.fact-fig { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fact-label { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; text-wrap: pretty; }
.fact-sub { color: var(--label-3); font-size: var(--fs-foot); line-height: var(--lh-foot); text-wrap: pretty; }

/* the Standort's widgets beyond the location: the buses and trains by the hour, the residents by age beside the
   city, the places around */
.um-chart { margin-top: 2px; }
.um-chart .chart-box { height: 132px; }
.chart-key i.is-win { background: var(--label); }
.ages { display: grid; gap: 9px; }
.age { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 3em; align-items: center; column-gap: 12px; }
.age-label { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; white-space: nowrap; }
.age-bar { display: block; width: 100%; height: 10px; overflow: visible; }
.age-bar .track { fill: var(--fill-3); }
.age-bar .here { fill: var(--label); }
.age-bar .city { fill: var(--label-2); }
.age-pct { text-align: right; font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.w .ages + .g-cap { margin-top: 12px; }
.um-around { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px 16px; } /* one place a line, two where the sheet is wide */
.um-around li { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.um-n { flex: none; min-width: 2.6em; text-align: right; color: var(--label); font-size: var(--fs-t3); line-height: 1; font-weight: 800; font-variant-numeric: proportional-nums; }

/* a verdict, one of three, in the colours of the card's price tiles: a price in line with the others on green (a check
   and the words), a price beyond their Rahmen on amber (an arrow, the distance to their middle and the words); a pin
   after it where the city's or the state's prices give it */
.verdict { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px 0 4px; font-size: var(--fs-cap); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--fill-2); color: var(--label-2); }
.verdict .i { width: 12px; height: 12px; stroke-width: 2.4; }
.verdict.is-rahmen { background: var(--good-wash); color: var(--good); }
.verdict.is-teurer, .verdict.is-guenstiger { background: var(--care-mark); color: color-mix(in srgb, var(--care-mark) 18%, #000); }

/* the card's prices at a glance: the three verdicts as tiles that filter the card */
.pricesum { margin: 14px 0 6px; }

/* the card's prices section by section: the section names are the rows, each with a track on which the script sets a
   dot per price, at its distance from the usual price; a line down the middle is the usual price. The names give the
   figure its height, so nothing moves when the chart draws; without the script the figure is not there. */
.pmap { --pmap-label: min(36%, 168px); margin: 18px 0 2px; }
html:not(.has-js) .pmap { display: none; }
.pmap-body { position: relative; }
.pmap-rows { display: grid; padding-block: 4px; } /* room for a square stepped above the first track or below the last */
.pmap-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--pmap-label) 1fr; align-items: center; height: 30px; pointer-events: none; }
.pmap-row.is-dense { height: 52px; }
.pmap-name { display: -webkit-box; overflow: hidden; padding-right: 10px; color: var(--label-2); font-size: var(--fs-cap); line-height: 1.15; font-weight: 600;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; hyphens: auto; overflow-wrap: break-word; pointer-events: auto; }
.pmap-name:hover { color: var(--label); }
.pmap-plot { position: absolute; inset: 0; }
.pmap-axis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 0 var(--pmap-label); padding: 6px 7px 0; box-shadow: inset 0 1px 0 var(--sep);
  color: var(--label-2); font-size: var(--fs-cap); line-height: var(--lh-cap); font-variant-numeric: tabular-nums; }
.pmap-axis > * { white-space: nowrap; }
.pmap-key { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 var(--pmap-label); color: var(--label-2); font-size: var(--fs-cap); line-height: var(--lh-cap); }
.pmap-key i { width: 0; height: 0; border-block: 5px solid transparent; border-left: 8px solid var(--care-mark); } /* the triangle a far price points with */
.pmap-word { display: none; }
@container (min-width: 460px) { .pmap-word { display: inline; } } /* the words where the track has room for them */
.pmap { container-type: inline-size; }
.pmap-axis > :nth-child(2) { color: var(--label); font-weight: 600; text-align: center; }
.pmap-axis > :last-child { text-align: right; }

/* a gap on the card: a row like the card's lines on a faint fill, what is missing and why, the add button where a
   line has its price; open, the member's articles to add */
.slot { position: relative; }
.slot-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--row-2); padding: 10px var(--gutter); border: 0; background: var(--panel);
  color: var(--label); font-size: var(--fs-body); text-align: left; cursor: pointer; transition: background-color var(--t-press); }
.slot-plus { display: grid; place-items: center; flex: none; order: 2; width: 32px; height: 32px; background: var(--tint); color: var(--tint-ink); }
.slot-plus .i { width: 18px; height: 18px; stroke-width: 2.2; }
.slot-text { flex: 1; min-width: 0; font-weight: 500; }
.slot-sub { display: block; margin-top: 1px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 400; text-wrap: pretty; }
a.slot-row { text-decoration: none; }
.slot-row:hover { background: var(--fill-2); }
.slot-row:active, .slot.is-open .slot-row { background: var(--fill-3); } /* pressed, or the gap whose sheet is up */
.slot-chev { display: none; }
.slot-done { display: flex; align-items: center; gap: 10px; min-height: var(--row-2); padding: 10px var(--gutter); color: var(--label-2); font-size: var(--fs-sub); }
.slot-done > span { flex: 1; min-width: 0; }
.slot-done > .link { flex: none; white-space: nowrap; }
/* the member's articles offered for a gap or a section: a list of rows, each the article, its size and number, the
   member's tags, why it fits in a few words, and its add button; the whole row adds */
.offer-list { background: var(--fill-1); }
.offer form { margin: 0; }
.offer-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  min-height: var(--row-2); padding: 12px var(--gutter); border: 0; background: transparent; color: var(--label); text-align: left; cursor: pointer;
  transition: background-color var(--t-press); }
.offer + .offer .offer-row::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: 0; height: .5px; background: var(--sep); }
.offer-row:hover { background: var(--fill-1); }
.offer-row:active { background: var(--fill-2); }
.offer-main { display: grid; gap: 2px; min-width: 0; }
.offer-name { font-size: var(--fs-callout); line-height: var(--lh-callout); font-weight: 600; overflow-wrap: break-word; }
.offer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot);
  font-variant-numeric: tabular-nums; }
.offer-why { margin-top: 2px; font-size: var(--fs-foot); line-height: var(--lh-foot); text-wrap: pretty; }
.offer-why b { font-weight: 600; }
.offer-add { display: grid; place-items: center; width: 36px; height: 36px; background: var(--tint); color: var(--tint-ink); }
.offer-add .i { width: 18px; height: 18px; stroke-width: 2.2; }
.sec-add[open] > .slot-row { background: var(--fill-2); }
.sec-add > .slot-row .slot-plus { display: none; } /* a list to open, not a line to add: its chevron says so, where the rows have their plus */
.sec-add > .slot-row .slot-chev { display: block; flex: none; order: 3; width: 18px; height: 18px; margin-right: 7px; color: var(--label-2); transition: transform var(--t-move) var(--ease); }
.sec-add[open] > .slot-row .slot-chev { transform: rotate(180deg); }
.sec-add > summary { list-style: none; }
.sec-add > summary::-webkit-details-marker { display: none; }

/* the price module of a line's size: its price and verdict, the answer in words, how many cards ask each price, what
   the prices mean, the areas side by side. The words carry every number; the charts (drawn by the script, tokens read
   at drawing time) only show them, and without the script they collapse. */
.pm { padding: 18px var(--gutter) 20px; background: var(--panel); }
.pm + .pm { box-shadow: inset 0 .5px 0 var(--sep); }
.pm-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pm-size { color: var(--label-2); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.pm-price { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pm-top .verdict { align-self: center; height: 24px; padding: 0 8px 0 6px; font-size: var(--fs-foot); }
.pm-head { margin-top: 12px; font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-wrap: balance; }
.pm-sub { margin-top: 2px; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.pm-sub b, .pm-notes b { color: var(--label); font-weight: 600; }
.pm-why { margin-top: 8px; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.pm-notes { margin-top: 16px; font-size: var(--fs-sub); line-height: var(--lh-sub); font-variant-numeric: tabular-nums; }
.pm-notes li { padding: 10px 0; box-shadow: inset 0 .5px 0 var(--sep); text-wrap: pretty; }
.pm-notes li:last-child { padding-bottom: 0; }
.chart { margin: 18px 0 0; }
.chart-box { position: relative; height: 144px; }
.chart-box canvas { display: block; }
.chart.is-areas { margin-top: 20px; }
.chart.is-areas .chart-box { height: 148px; }
.chart.is-areas.is-3 .chart-box { height: 204px; }
.chart-title { margin-bottom: 6px; font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; text-wrap: balance; }
.chart-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-variant-numeric: tabular-nums; }
.chart-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--label-4); }
.chart-key i.is-band { width: 16px; background: var(--good-wash); } /* the band as the chart draws it, no edge */
.chart-key i.is-mid { width: 2px; height: 12px; margin-right: 7px; vertical-align: -2px; background: var(--label); }
.chart-key i.is-near { width: 8px; height: 8px; vertical-align: 0; background: var(--label); }
.chart-key i.is-dot { width: 8px; height: 8px; vertical-align: 0; background: var(--label); }
.chart-key i.is-here { width: 2px; height: 12px; margin-right: 7px; vertical-align: -2px; background: var(--care-mark); }
.chart-key i.is-here.is-rahmen { background: var(--good-mark); }
/* a gap's sheet: the count as a figure and a sentence with its meter, what the neighbours ask for it, who has it, and
   the one thing to do */
.gap-fig { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gap-says { margin-top: 2px; font-size: var(--fs-callout); line-height: var(--lh-callout); text-wrap: pretty; }
.gap-why .meter, .gap-why .meter-bar { margin-top: 12px; }
.pm-sub.is-lead { margin-top: 0; color: var(--label); font-size: var(--fs-callout); line-height: var(--lh-callout); }
.gap-who .chart-title { margin-bottom: 2px; }
.gap-take { padding: 16px var(--gutter); }
.gap-take .offer-list { margin: 8px calc(-1 * var(--gutter)) 0; }
.gap-add { width: 100%; justify-content: center; gap: 8px; }
html:not(.has-js) .chart { display: none; } /* a chart without its script would be an empty box: the words above it stand alone */
@media (min-width: 992px) {
  .chart-box { height: 128px; }
  .chart.is-areas .chart-box { height: 136px; }
  .chart.is-areas.is-3 .chart-box { height: 188px; }
}

/* a price corrected on a line's sheet: one field per size, its old price in it, taken over for the whole team */
.fix-price > summary { list-style: none; cursor: pointer; }
.fix-price > summary::-webkit-details-marker { display: none; }
.fix-body { display: grid; gap: 10px; padding: 4px var(--gutter) 16px; }
.fix-row { display: grid; grid-template-columns: minmax(3.6em, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fix-label { color: var(--label-2); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.fix-field { position: relative; display: block; min-width: 0; }
.fix-input { min-height: var(--btn-s); padding-right: 30px; background: var(--fill-1); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.fix-unit { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--label-2); pointer-events: none; }
.fix-note { color: var(--label-3); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.ptile-fixed { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }
.pm-top .tag { align-self: center; }

/* coverage: who carries the drink */
.cov-mod { padding: 16px var(--gutter); background: var(--panel); }
.cov-text { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.cov-mod .meter { margin-top: 10px; }

/* a neighbour: whom the comparison counts, and what the rep can do with it */
.nb { position: relative; }
.nb-row { display: flex; align-items: center; gap: 12px; min-height: var(--row-2); padding: 10px var(--gutter); transition: background-color var(--t-press); }
.nb-row:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.nb-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nb-name { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: break-word; }
.nb-meta { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.nb-item { color: var(--label); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.nb-more[open] > .nb-row { background: var(--fill-1); }
.nb-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px var(--gutter) 14px calc(var(--gutter) + 44px); background: var(--fill-1); }
.nb-actions form { margin: 0; }
.nb.is-struck .nb-name { color: var(--label-3); text-decoration: line-through; }
.nb.is-aside .nb-name { color: var(--label-2); }
.nb-back { position: absolute; top: 10px; right: var(--gutter); }

/* the radar: the business in the middle, a ring per step, each neighbour where it is */
.radar { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.radar-disc { fill: var(--fill-1); }
.radar-ring { fill: none; stroke: var(--sep); stroke-width: 1; }
.radar-ring.is-edge { stroke: var(--label-4); }
.radar-label { fill: var(--label-2); font-size: 10.5px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--panel);
  stroke-width: 4px; stroke-linejoin: round; }
.radar-halo { fill: var(--tint-wash-2); }
.radar-label-bg { fill: var(--panel); opacity: .9; }
.radar-self { fill: var(--tint); stroke: var(--panel); stroke-width: 2; }
.radar-dot { fill: var(--label); stroke: var(--panel); stroke-width: 1.5; }
.radar-dot.is-aside { fill: var(--panel); stroke: var(--label-3); stroke-width: 1.4; }
.radar-dot.is-struck { fill: var(--label-4); }
.radar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px; color: var(--label-2); font-size: var(--fs-foot); }
.radar-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--label); vertical-align: 0; }
.radar-legend i.is-aside { background: none; box-shadow: inset 0 0 0 1.4px var(--label-3); }
.radar-legend i.is-self { width: 10px; height: 10px; background: var(--tint); vertical-align: -1px; }

/* the reading: its steps, each with its state; its end as a panel */
.run-steps { background: var(--panel); }
.run-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; align-items: center;
  min-height: var(--row-2); padding: 12px var(--gutter); }
.run-step + .run-step::before { content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 42px); right: 0; height: .5px; background: var(--sep); }
.run-mark { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 28px; height: 28px;
  box-shadow: inset 0 0 0 1.5px var(--sep-strong); color: var(--label-3); font-size: var(--fs-foot); font-weight: 600; }
.run-steps { counter-reset: run; }
.run-step { counter-increment: run; }
.run-mark::before { content: counter(run); }
.run-label { grid-column: 2; color: var(--label-3); font-size: var(--fs-body); }
.run-detail { grid-column: 3; justify-self: end; color: var(--label-2); font-size: var(--fs-foot); font-variant-numeric: tabular-nums; text-align: right; }
.run-hint { grid-column: 2 / 4; display: none; color: var(--label-2); font-size: var(--fs-foot); }
.run-bar { grid-column: 2 / 4; display: none; }
.is-now .run-mark { box-shadow: none; background: transparent; }
.is-now .run-mark::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--tint); border-right-color: transparent; border-radius: 50% !important; animation: spin .8s linear infinite; }
.is-now .run-label, .is-done .run-label, .is-fail .run-label { color: var(--label); }
.is-now .run-label { font-weight: 600; }
.is-now .run-hint { display: block; }
.is-now .run-bar { display: block; height: 3px; margin-top: 4px; background: var(--fill-2); overflow: hidden; }
.run-bar span { display: block; width: 30%; height: 100%; background: var(--tint); animation: run 1.1s ease-in-out infinite; }
.run-bar.is-measured span { width: var(--p, 0%); animation: none; transition: width .2s linear; }
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.is-done .run-mark { box-shadow: none; background: var(--good-mark); color: #fff; }
.is-done .run-mark::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; }
.is-fail .run-mark { box-shadow: none; background: var(--bad-mark); color: #fff; }
.is-fail .run-mark::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mask-x) center / contain no-repeat; mask: var(--mask-x) center / contain no-repeat; }

/* the pages of a reading: each a tile to take away again */
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; }
.pages:empty { display: none; }
.page { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; }
.page.is-new { animation: page-in .22s var(--ease); }
@keyframes page-in { from { opacity: 0; transform: scale(.92); } }
.page-face { display: grid; place-items: center; aspect-ratio: 3 / 4; margin-bottom: 6px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 .5px var(--sep-strong); }
.page-face img { width: 100%; height: 100%; object-fit: cover; }
.page-face.is-pdf { align-content: center; gap: 4px; color: var(--label-2); }
.page-face b { font-size: var(--fs-foot); font-weight: 700; }
.page-doc { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.page-name { font-size: var(--fs-foot); line-height: var(--lh-foot); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-size { color: var(--label-2); font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }
.page-drop { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  background: color-mix(in srgb, #000 62%, transparent); color: #fff; cursor: pointer; }
.page-drop .icon, .page-drop .i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* the contact card on the owner's page */
.contact { display: grid; gap: 14px; padding: 16px var(--gutter); background: var(--panel); }
.contact-who { display: flex; align-items: center; gap: 12px; }
.contact-name { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 600; }
.contact-org { color: var(--label-2); font-size: var(--fs-sub); }
.contact-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.contact-plain { color: var(--label-2); font-size: var(--fs-foot); }
.meter-bar { display: block; width: 100%; height: 7px; }
.meter-bar .off { fill: var(--fill-3); }
.meter-bar .on { fill: var(--label); }
.meter-bar.is-good .on { fill: var(--good-mark); }
.meter-bar.is-tint .on { fill: var(--tint); }

/* ── the component gallery (staff only) ── */
.gallery { max-width: 720px; margin: 0 auto; padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
.gallery .group { margin-top: 32px; }
.gallery .stack { display: grid; gap: 12px; }
.gallery .stack-tight { display: grid; gap: 8px; }
.gallery .hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gallery .icons { gap: 14px; color: var(--label); }
.gallery .type-list { display: grid; gap: 10px; }
.gallery .banner .muted-on { opacity: .75; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--sep); }
.swatch-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); font-size: var(--fs-foot); }
.swatch-chip { width: 28px; height: 28px; box-shadow: inset 0 0 0 .5px var(--sep-strong); }
.swatch-chip.bg { background: var(--bg); } .swatch-chip.panel { background: var(--panel); } .swatch-chip.panel-2 { background: var(--panel-2); }
.swatch-chip.label { background: var(--label); } .swatch-chip.label-2 { background: var(--label-2); } .swatch-chip.label-3 { background: var(--label-3); } .swatch-chip.label-4 { background: var(--label-4); }
.swatch-chip.sep { background: var(--sep); } .swatch-chip.fill-1 { background: var(--fill-1); } .swatch-chip.fill-2 { background: var(--fill-2); } .swatch-chip.fill-3 { background: var(--fill-3); }
.swatch-chip.tint { background: var(--tint); } .swatch-chip.tint-wash { background: var(--tint-wash); } .swatch-chip.tint-wash-2 { background: var(--tint-wash-2); }
.swatch-chip.good { background: var(--good); } .swatch-chip.good-wash { background: var(--good-wash); } .swatch-chip.care { background: var(--care); } .swatch-chip.care-wash { background: var(--care-wash); }
.swatch-chip.bad { background: var(--bad); } .swatch-chip.bad-wash { background: var(--bad-wash); }

/* ── 6. screens ───────────────────────────────────────────────────────────────────────────────────────────────── */

/* while a tap's answer is on its way the canvas stays; only an answer slower than a blink dims it */
[data-canvas][aria-busy="true"] .o-grid { opacity: .55; transition: opacity .12s linear .15s; }
html.is-leaving body::before { content: ""; position: fixed; inset: 0 0 auto 0; z-index: 2000; height: 3px; background: var(--tint); transform-origin: 0 50%;
  animation: leaving 2s cubic-bezier(.1, .7, .2, 1) .15s both; }
@keyframes leaving { from { transform: scaleX(0); } to { transform: scaleX(.9); } }
.spin { display: inline-block; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50% !important; animation: spin .8s linear infinite; }

/* the Start pane: the phone's first screen, the desk's sidebar. A bar with the member's logo and the account, the large
   title, the search pinned under the bar, the lists */
.pane-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: calc(10px + env(safe-area-inset-top)) 6px 2px var(--gutter); }
.bar-brand { display: flex; align-items: center; min-width: 0; }
.bar-brand img { display: block; height: 52px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.wordmark { color: var(--label); font-size: var(--fs-t3); font-weight: 700; letter-spacing: -.01em; }
.bar-trail { display: flex; align-items: center; gap: 2px; }
.me .mono { width: 30px; height: 30px; background: var(--label); color: var(--panel); font-size: 12px; letter-spacing: .03em; }
.me:hover .mono { background: color-mix(in srgb, var(--label) 82%, var(--panel)); }
.pane-title { padding-top: 10px; padding-bottom: 10px; }
.pane-search { position: sticky; top: 0; z-index: 25; padding: 8px var(--gutter) 12px; background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: box-shadow var(--t-move); }
.pane-search.is-stuck { box-shadow: 0 .5px 0 var(--sep); }
.search .key { display: none; position: absolute; right: 10px; }
@media (hover: hover) and (pointer: fine) { .search input:placeholder-shown:not(:focus) ~ .key { display: inline-grid; } }
.key { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: var(--panel); color: var(--label-2);
  box-shadow: inset 0 0 0 .5px var(--sep-strong), 0 1px 0 var(--sep); font: 600 12px/1 var(--font); vertical-align: 1px; }
.start-lists { padding: 8px 0 calc(40px + env(safe-area-inset-bottom)); }
.start-lists .group + .group { margin-top: 28px; }
.mine .biz .pin { display: none; } /* every row of Meine Kunden is one */
.create { margin-top: 12px; }
.detail-idle { display: none; }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .start .pane { max-width: 720px; margin-inline: auto; }
  .start .panel { box-shadow: 0 0 0 .5px var(--sep); }
}
@media (min-width: 1200px) {
  /* the desk: the pane is the sidebar, the same beside the empty detail and beside a business; it scrolls with the
     page, which is the one scroll of every screen (UI.md) */
  .start { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .pane { display: flex; flex-direction: column; background: var(--panel); border-right: .5px solid var(--sep-strong); }
  .pane .pane-bar { flex: none; min-height: 84px; padding: 14px 8px 6px var(--gutter); }
  .pane .bar-brand img { height: 56px; max-width: 200px; }
  .pane .pane-title { display: none; }
  .pane .pane-search { position: static; padding: 4px var(--gutter) 10px; background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pane .search input { height: 32px; }
  .pane .start-lists { padding-top: 4px; }
  .pane .group + .group { margin-top: 18px; }
  .pane .group-head { padding-bottom: 4px; }
  .pane .group-title { font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; color: var(--label-2); }
  .pane .group-title .unit { margin-left: 6px; }
  .pane .panel { background: transparent; box-shadow: none; }
  .pane .cells.has-lead { --inset: calc(var(--gutter) + 44px); }
  .pane .biz { min-height: 52px; padding-block: 8px; }
  .pane .biz .mono { width: 32px; height: 32px; font-size: 12px; }
  .pane .biz .cell-title { font-size: var(--fs-sub); line-height: var(--lh-sub); }
  .pane .biz .cell-sub { font-size: var(--fs-foot); line-height: var(--lh-foot); }
  .pane .biz .cell-trail { display: none; }
  .pane .empty.is-row { padding-block: 10px; }
  .pane .empty.is-row .glyph { width: 32px; height: 32px; }
  .pane .empty-title { font-size: var(--fs-sub); line-height: var(--lh-sub); }
  .pane .empty-text { font-size: var(--fs-foot); line-height: var(--lh-foot); }
  .detail-idle { display: grid; place-items: center; align-self: start; min-height: 100dvh; padding: 48px var(--gutter); }
  .detail-idle .empty-text { max-width: 22rem; }
}

/* the screens under Start (Konto, Team, Sortiment, Anlass): the bar, the large title, the groups in one column; the
   Team spreads over two on the desk */
.screen { max-width: 720px; margin: 0 auto; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.screen.is-wide { max-width: 720px; }
.screen .large-head { padding-top: 2px; }
.screen .group { margin-top: 28px; }
.screen .large-head + .group, .screen .large-head + .screen-note { margin-top: 8px; }
.screen-note { margin-top: 8px; }
.screen-note + .group, .screen-note + .screen-cols > .screen-col > .group:first-child { margin-top: 20px; }
.screen-cols > .screen-col:first-child > .group:first-child { margin-top: 16px; }
.form-panel { display: grid; padding: 2px var(--gutter) 18px; }
.form-panel > .banner { margin: 0 calc(-1 * var(--gutter)) 4px; }
.form-panel .field-label { margin-top: 14px; }
.form-panel > .button { margin-top: 20px; }
.form-panel + .group-foot { padding-top: 10px; }
.panel + .form-panel, .cells + .form-panel { margin-top: 1px; }
.row-act { gap: 12px; color: var(--tint); font-size: var(--fs-body); font-weight: 500; }
.row-act.is-danger { color: var(--bad); }
.row-act[data-armed] { padding-inline: var(--gutter) !important; }
.prose p + p { margin-top: 8px; }
.prose p, .prose li { text-wrap: pretty; }
.panel.prose { font-size: var(--fs-callout); line-height: var(--lh-callout); }
.bullets { display: grid; gap: 6px; margin-top: 10px !important; }
.bullets > li { position: relative; padding-left: 16px; color: var(--label-2); }
.bullets > li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 5px; height: 5px; background: var(--label-3); }
.mono.is-ink { background: var(--label); color: var(--panel); }
.tiles.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles:not(.is-three) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles .tile-sub { font-size: var(--fs-foot); text-wrap: pretty; }

/* Konto: the account as a card, the ways on, the password, sign out */
.profile { display: flex; align-items: center; gap: 16px; padding: 18px var(--gutter); }
.profile .mono { width: 60px; height: 60px; background: var(--label); color: var(--panel); font-size: 21px; }
.profile-main { min-width: 0; display: grid; gap: 2px; }
.profile-name { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 600; }
.profile-mail { color: var(--label-2); font-size: var(--fs-sub); overflow-wrap: anywhere; }
.profile-role { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px !important; }
.profile-org { color: var(--label-2); font-size: var(--fs-foot); }
.profile + .banner { box-shadow: inset 0 .5px 0 var(--sep); }

/* Team: coverage per city, the members and the sent pages as rows with their actions */
.coverage .cell { align-items: flex-start; }
.coverage .cell-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.coverage .meter-bar { width: 100%; height: 6px; margin: 6px 0 4px; }
.cov-fig { font-size: var(--fs-head); font-weight: 600; font-variant-numeric: tabular-nums; }
.coverage .tag { margin-left: 6px; }
.members > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start;
  padding: 12px var(--gutter); }
.member.is-off .mono, .member.is-off .member-name { opacity: .5; }
.member-main { min-width: 0; display: grid; gap: 2px; align-self: center; }
.member-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.member-sub { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); overflow-wrap: anywhere; }
.member-note { margin-top: 4px !important; }
.member-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.member-acts form { margin: 0; }
@media (min-width: 1200px) {
  .screen.is-wide { max-width: 1160px; }
  .screen-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
}
@media (min-width: 992px) {
  .members > li { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
  .member-acts { grid-column: 3; justify-content: flex-end; }
}

/* Sortiment */
.file-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-pick { flex: none; cursor: pointer; }
.file-name { min-width: 0; color: var(--label-2); font-size: var(--fs-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sorten > summary { gap: 8px; }
.sorten > summary .t-head { flex: 1; }
.sorten .panel-pad { box-shadow: inset 0 .5px 0 var(--sep); }
.sorten-head { margin: 14px 0 2px !important; font-size: var(--fs-sub); font-weight: 600; }
.sorten-head:first-child { margin-top: 0 !important; }
.sorten-names { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }

/* sign-in: the member's logo, one panel, the way in; on the desk a card in the middle of the page */
.signin { display: grid; grid-template-rows: 1fr auto; min-height: 100dvh; }
.signin-box { width: 100%; max-width: 440px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 0 32px; }
.signin-brand { padding: 0 var(--gutter) 28px; }
.signin-brand img { display: block; height: 72px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; }
.signin-title { padding: 0 var(--gutter); font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: -.022em; }
.signin-for { margin-top: 4px !important; padding: 0 var(--gutter) 18px; color: var(--label-2); font-size: var(--fs-sub); }
.signin-help { padding: 12px var(--gutter) 0; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); text-wrap: pretty; }
.signin-foot { padding: 16px var(--gutter) calc(20px + env(safe-area-inset-bottom)); color: var(--label-3); font-size: var(--fs-foot); text-align: center; }
.signin-foot a { color: var(--label-2); }
@media (min-width: 768px) {
  .signin-box { align-self: center; padding-top: 48px; }
  .signin .form-panel { box-shadow: 0 0 0 .5px var(--sep), 0 8px 28px rgba(0, 0, 0, .06); }
}

/* errors and the lost: the logo, one empty state, the way back */
.lost { display: grid; grid-template-rows: auto 1fr; min-height: 100dvh; }
.lost-brand { display: block; padding: calc(16px + env(safe-area-inset-top)) var(--gutter) 0; }
.lost-brand img { display: block; height: 52px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.lost .empty { align-self: center; padding-bottom: 12vh; }

/* the owner's page: a document from the member, not a screen of the app. The letterhead and the closing band run
   across the window; the parts of the page stand in one column of 720 px on the grouped background, each part a
   title, a line under it and its panels: the comparison (the groups as tiles, the findings with their squares), the
   proposals as cards, the card as a menu, the contact. The rep's preview frames it with a note and the sending bar. */
.geteilt { --col: 720px; --edge: max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter))); padding-bottom: env(safe-area-inset-bottom); }
.geteilt.has-share-bar { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.rep-note { width: min(100%, var(--col)); margin-inline: auto; padding: 12px 0 0; }
.rep-note .banner { padding-block: 14px; }
.g-page { display: grid; }
.g-head { padding: calc(28px + env(safe-area-inset-top)) var(--edge) 30px; background: var(--panel); box-shadow: 0 .5px 0 var(--sep); }
.rep-note + .g-page .g-head { margin-top: 12px; padding-top: 28px; }
.g-vendor { margin-bottom: 30px !important; }
.g-vendor img { display: block; height: 64px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; }
.g-name { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 800; letter-spacing: -.028em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.g-name.is-long { font-size: var(--fs-t1); line-height: var(--lh-t1); }
.g-dateline { max-width: 32em; margin-top: 8px !important; color: var(--label-2); font-size: var(--fs-callout); line-height: var(--lh-callout); text-wrap: pretty; }
.g-sec, .g-page > .group { width: min(100%, var(--col)); margin: 44px auto 0; }
.g-title { padding: 0 var(--gutter); font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.g-title-by { color: var(--label-2); font-weight: 700; }
.g-lead { max-width: 40em; margin-top: 6px !important; padding: 0 var(--gutter); color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }

/* the groups: a tile each, on the rep's Chancen and on the owner's page alike; the card's count large, a bar on which
   the usual count is a tick at the same place in every tile; a group the card lacks that most carry in solid ink, a thin
   one on the caution's wash, a broad one on the success's, one the Entwurf brings on the tint's. Three to a row on a
   narrow panel, the last filling its row; on a wide one the count that fills the rows (colsFor). */
.g-groups { margin: 18px 0 0; container-type: inline-size; }
.g-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.g-cell { display: grid; }
.g-cell:last-child:nth-child(3n+2) { grid-column: span 2; } /* a hole would read as a missing group */
.g-cell:last-child:nth-child(3n+1) { grid-column: span 3; }
@container (min-width: 560px) {
  .g-cells.is-4 { grid-template-columns: repeat(4, 1fr); }
  .g-cells.is-5 { grid-template-columns: repeat(5, 1fr); }
  .g-cells:is(.is-4, .is-5) .g-cell:last-child { grid-column: auto; }
}
.g-cell-in { display: grid; grid-template-rows: auto 1fr auto 14px; min-height: 104px; padding: 10px var(--gutter) 10px; background: var(--panel); color: var(--label); }
a.g-cell-in { transition: filter var(--t-press); }
a.g-cell-in:active { filter: brightness(.95); }
.g-cell-label { color: var(--label-2); font-size: var(--fs-cap); line-height: var(--lh-cap); font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.g-cell-line { grid-row: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 8px; }
.g-cell-fig { font-size: var(--fs-t1); line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: proportional-nums; }
.g-cell-sub { color: var(--label-2); font-size: var(--fs-cap); line-height: var(--lh-cap); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 559px) { /* narrow tiles say the usual count under their own, every tile of the panel alike, so no long count wraps alone */
  .g-cell-line { flex-direction: column; align-items: flex-start; gap: 3px; }
}
.g-cell-bar { grid-row: 4; align-self: end; display: block; width: 100%; height: 10px; overflow: visible; }
.g-cell-bar .track { fill: var(--fill-3); }
.g-cell-bar .here { fill: var(--label); }
.g-cell-bar .usual { fill: var(--label-2); }
.g-cell:is(.is-duenn, .is-weniger) .g-cell-bar .here { fill: var(--care-mark); }
.g-cell:is(.is-breit, .is-mehr) .g-cell-bar .here { fill: var(--good-mark); }
.g-cell.is-fehlt .g-cell-in { background: var(--label); color: var(--panel); }
.g-cell.is-fehlt :is(.g-cell-label, .g-cell-sub) { color: color-mix(in srgb, var(--panel) 74%, transparent); }
.g-cell:is(.is-duenn, .is-weniger) .g-cell-sub { color: var(--care); font-weight: 600; }
.g-cell:is(.is-breit, .is-mehr) .g-cell-sub { color: var(--good); font-weight: 600; }
.g-cell.is-neu .g-cell-in { background: var(--tint-wash); }
.g-cell.is-neu :is(.g-cell-fig, .g-cell-sub) { color: var(--tint); }
.g-cell.is-ohne .g-cell-fig { color: var(--label-3); }
.g-cap { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; padding: 0 var(--gutter); color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.g-key { display: inline-flex; align-items: center; gap: 7px; }
.g-key::before { content: ""; flex: none; }
.g-key.is-here::before { width: 16px; height: 4px; background: var(--label); }
.g-key.is-usual::before { width: 2px; height: 12px; background: var(--label-2); }
.g-key.is-more::before { width: 16px; height: 4px; background: var(--good-mark); }
.g-key.is-less::before { width: 16px; height: 4px; background: var(--care-mark); }
/* on the rep's white Chancen panel the tiles stand on a faint fill, narrower */
.kc-head .g-groups { margin-top: 14px; }
.kc-head .g-cell-in { min-height: 96px; padding: 9px 11px 9px; background: var(--panel-2); }
.kc-head .g-cap { padding: 0; }

/* a finding: its glyph, its subject, the sentence, a square for each card compared, the proposal that answers it */
.g-finds { display: grid; gap: 2px; margin-top: 18px; }
.g-groups + .g-finds { margin-top: 24px; }
.g-find { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 18px var(--gutter) 20px; background: var(--panel); }
.g-sec > .g-find { margin-top: 18px; }
.g-find-title { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 700; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
.g-find-title + .g-find-text { margin-top: 4px !important; }
.g-find-text { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.g-find .glyph { margin-top: -4px; }
.g-find .meter.is-big { display: flex; flex-wrap: nowrap; gap: 3px; width: 100%; margin-top: 14px; }
.g-find .meter.is-big > i { flex: 0 1 12px; width: auto; min-width: 3px; height: auto; aspect-ratio: 1; }
.g-find .meter-bar.is-big { display: block; width: 100%; height: 10px; margin-top: 14px; }
.g-find-meta { margin-top: 8px !important; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.g-find-answer { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); margin: 6px 0 -10px; font-weight: 600; }
.g-find-answer .i, .g-prop-go .i { width: 18px; height: 18px; }

/* a proposal: a card with "Neu", the drink large, its size, where on the card and the member's number */
.g-props-list { display: grid; gap: 2px; margin-top: 18px; }
.g-prop { display: flex; flex-direction: column; align-items: flex-start; padding: 20px var(--gutter) 10px; background: var(--panel); scroll-margin-top: calc(var(--top) + 16px); }
.g-prop-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.g-prop-instead { color: var(--label-2); font-size: var(--fs-sub); }
.g-prop-instead s { text-decoration-thickness: 1.5px; }
.g-prop-name { max-width: 100%; margin-top: 12px !important; font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 800; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; font-variant-numeric: proportional-nums; }
.g-prop-meta { display: flex; flex-wrap: wrap; margin-top: 6px !important; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); font-variant-numeric: tabular-nums; }
.g-prop-meta > span { white-space: nowrap; }
.g-prop-meta > span + span::before { content: "·"; margin: 0 7px; }
.g-prop-place { margin-top: 2px !important; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.g-prop-go { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); margin-top: auto; padding-top: 8px; font-weight: 600; }
.g-prop.is-text { padding-bottom: 18px; }
.g-prop.is-text .g-prop-name { margin-top: 0 !important; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; letter-spacing: 0; }
.g-prop:target { box-shadow: inset 0 0 0 2px var(--tint); }

/* the card as a menu: a panel per section, its title and whole-section price, each line with what it holds, the
   sizes and prices in a column; a proposal on the tint's wash with "Neu" and the owner's price open */
.g-menu { margin-top: 18px; background: var(--panel); }
.g-menu-secs { padding: 4px 0 12px; }
.menu { padding-top: 16px; }
.menu + .menu { margin-top: 14px; }
.menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); }
.menu-title { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
.menu-price { display: grid; justify-items: end; font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-detail { margin-top: 2px !important; padding: 0 var(--gutter); color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.menu-lines { margin-top: 8px; }
.menu-head + .menu-lines { margin-top: 6px; }
.menu-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 9px var(--gutter); scroll-margin-top: calc(var(--top) + 16px); }
.menu-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; overflow-wrap: break-word; hyphens: manual; }
.menu-name .tag { align-self: center; }
.menu-desc { flex-basis: 100%; margin-top: 1px; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 400; }
.menu-pours { display: grid; row-gap: 4px; justify-items: end; }
.menu-pour { display: grid; grid-template-columns: auto 4.6em; column-gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.menu-size { color: var(--label-2); font-size: var(--fs-sub); text-align: right; white-space: nowrap; }
.menu-amount { font-size: var(--fs-body); font-weight: 600; text-align: right; white-space: nowrap; }
.menu-amount.is-open { color: var(--label-2); font-weight: 500; }
.menu-line.is-added { background: var(--tint-wash); }
.menu-line.is-struck :is(.menu-text, .menu-pour) { color: var(--label-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.menu-line:target { box-shadow: inset 0 0 0 2px var(--tint); }
.g-rest { box-shadow: inset 0 .5px 0 var(--sep); }
.g-rest > summary { display: flex; align-items: center; gap: 10px; min-height: var(--row-2); padding: 0 var(--gutter); cursor: pointer; list-style: none; }
.g-rest > summary::-webkit-details-marker { display: none; }
.g-rest-title { flex: 1; font-size: var(--fs-head); font-weight: 600; }
.g-rest-count { color: var(--label-2); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.g-rest > summary .i { width: 18px; height: 18px; color: var(--label-3); transition: transform var(--t-move) var(--ease); }
.g-rest[open] > summary .i { transform: rotate(180deg); }
.g-rest .g-menu-secs { padding-top: 0; }
.g-features { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 14px var(--gutter) 16px; box-shadow: inset 0 .5px 0 var(--sep); color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.g-features li { display: inline-flex; align-items: center; gap: 6px; }
.g-features .i { width: 16px; height: 16px; color: var(--good); stroke-width: 2.2; }

/* the contact: who to ask, large, and the ways to reach them */
.g-contact .contact { margin-top: 18px; }
.contact { display: grid; gap: 18px; padding: 20px var(--gutter); }
.contact-who { display: flex; align-items: center; gap: 14px; }
.contact-who .mono { width: 56px; height: 56px; color: var(--label); font-size: 20px; font-weight: 700; }
.contact-name { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 700; }
.contact-org { color: var(--label-2); font-size: var(--fs-sub); }
.contact-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contact-ways > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.contact-ways .button { padding: 0 10px; }
.contact-plain { color: var(--label-2); font-size: var(--fs-foot); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.g-foot { display: grid; gap: 4px; width: min(100%, var(--col)); margin: 36px auto 0; padding: 0 var(--gutter) 36px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.g-foot a { color: var(--label); text-decoration: underline; text-decoration-color: var(--sep-strong); text-underline-offset: 3px; }
.g-band { display: flex; align-items: center; min-height: 168px; padding: 48px var(--edge) calc(48px + env(safe-area-inset-bottom)); background: var(--tint); }
.g-band img { display: block; height: 72px; width: auto; max-width: 280px; object-fit: contain; object-position: left center; }
.g-newer { padding: 12px var(--gutter) 0; }
.g-prose { font-size: var(--fs-body); line-height: 1.5; }
.g-prose p + p { margin-top: 12px; }
.share-bar { grid-template-columns: auto 1fr; padding-inline: max(var(--gutter), calc((100% - 720px) / 2 + var(--gutter))); }
.share-bar > .is-wide, .share-bar > .button.is-wide { grid-column: 1 / -1; }
.share-bar .button { width: 100%; }
@media (min-width: 640px) {
  .g-props-list:not(.is-one) { grid-template-columns: 1fr 1fr; }
  .g-contact .contact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .g-contact .contact-ways { grid-template-columns: none; grid-auto-flow: column; }
  .g-contact .contact-ways > :first-child:nth-last-child(odd) { grid-column: auto; }
  .g-contact .contact-ways .button { padding: 0 18px; }
  .g-contact .contact-plain { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .geteilt:has(.rep-note) { padding-top: 12px; }
  .g-head { padding-block: 48px 40px; }
  .rep-note + .g-page .g-head { padding-top: 40px; }
  .g-vendor { margin-bottom: 40px !important; }
  .g-sec, .g-page > .group { margin-top: 56px; }
  .g-finds, .g-props-list { gap: 10px; }
  .geteilt .panel, .g-find, .g-prop, .g-menu, .g-page .g-cell:not(.is-fehlt, .is-neu) .g-cell-in { box-shadow: 0 0 0 .5px var(--sep); }
}
@media (min-width: 1200px) {
  .geteilt { --col: 960px; }
  .g-find-text, .g-lead { max-width: 44em; }
  .g-props-list:not(.is-one) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .g-menu-secs { columns: 2; column-gap: 0; }
  .menu-head, .menu-detail { break-after: avoid; }
  .menu-line, .menu-head { break-inside: avoid; }
}

/* the admin's replay: a bar in ink above a canvas shown as a rep saw it, the ways back at its end */
.replay-banner { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px var(--gutter);
  background: var(--label); color: var(--panel); font-size: var(--fs-foot); }
.replay-banner span { flex: 1 1 320px; }
.replay-banner a { color: var(--panel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body:has(.replay-banner) .o-side, body:has(.replay-banner) .navbar-app { top: 0; }

/* print: the owner's page on white, without the rep's frame, the bars or the member's band; lines stay whole */
@media print {
  .share-bar, .rep-note, .toolbar, .g-band, .contact-ways, .g-prop-go, .g-find-answer, .snack { display: none !important; }
  body.area-public, body.area-app, .geteilt { background: #fff; padding: 0; }
  .geteilt { --col: 100%; }
  .geteilt .panel, .g-head, .g-find, .g-prop, .menu, .g-rest, .g-cell { box-shadow: none !important; }
  .line, .finding, .sec-title, .contact, .g-find, .g-prop, .g-cell, .menu-line, .menu-head { break-inside: avoid; }
  .g-name { font-size: 26pt; line-height: 1.1; }
}

/* the business: bar, title, the pinned band, the findings beside the card */
.objekt { min-height: 100dvh; }
.o-side { display: none; }
.o-head { padding: 2px var(--gutter) 16px; }
.o-name { font-size: var(--fs-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: -.022em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.o-sub { margin-top: 6px; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.o-actions { display: none; }
.o-star { margin: 0; }
.star-btn.is-on { color: var(--tint); }
.o-band { position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top)); z-index: 20; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 .5px 0 var(--sep); }
/* the band holds the business's four pages in one row, a quarter each on the phone */
.o-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px var(--gutter); }
.o-tabs > a { min-width: 0; padding-inline: 2px; white-space: nowrap; }
.o-tabs .count { flex: none; }
@media (max-width: 374.98px) { .o-tabs > a { font-size: var(--fs-sub); } }
@media (min-width: 768px) { .o-tabs { width: 520px; } }
.o-band .banner { padding-block: 10px; }
.banner-sub { display: block; font-weight: 400; opacity: .78; }
/* the pages: the Übersicht's cards and the Standort's widgets on the page's ground, the Karte and the Ideen as the card
   beside what it is read against */
.o-main { padding-bottom: calc(var(--tool-h) + 32px + env(safe-area-inset-bottom)); }
.o-page { display: grid; gap: 12px; align-content: start; padding: 16px 0 0; }
.o-page .panel + .panel, .o-page .w-cols > * + * { margin-top: 0; }
.o-grid { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 0; }
.o-cue { display: grid; gap: 12px; align-content: start; }
.o-cue > .panel + .panel { margin-top: 0; }
.o-grid.is-ideen > .o-cue { display: contents; } /* the improvements and the tips, the Entwurf, then what the neighbours carry */
.o-grid.is-ideen > .o-cue > * { order: 2; }
.o-grid.is-ideen > .o-cue > :is(.st, #kartencheck) { order: 0; }
.o-grid.is-ideen > .o-cue > .kc { margin-top: 0; }

/* the Übersicht as a story: what matters at a glance, then the improvements, then the prices in depth */
.ov-sec { display: grid; gap: 12px; scroll-margin-top: calc(var(--top) + 8px); }
.ov-title { padding: 6px var(--gutter) 0; font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 800; letter-spacing: -.01em; }
.ov-kpis, .ov-cols, .ov-stack { display: grid; gap: 12px; align-content: start; }
.ov-kpis .gl-head { font-size: var(--fs-head); line-height: var(--lh-head); }
.ov-stack > .panel + .panel { margin-top: 0; }
.gl-preise .w-kicker + .gl-head { margin-top: -4px; }
.o-grid.is-ideen > .o-card { order: 1; }
.is-standort .w-cols, .is-standort .w-col { display: grid; gap: 12px; align-content: start; }
.st-sources { padding: 0 var(--gutter); margin: 0 !important; }

/* the Übersicht: whom it is compared with in a line, the Chancen and the prices with their chart side by side from
   the tablet, then one card a finding in a row of their own; a card is one tap to where it is told in full. The phone
   reads the short cards before the long chart. */
.gl-basis { display: flex; align-items: center; gap: 10px; min-height: var(--hit); padding: 0 var(--gutter); color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.gl-basis > .i:first-child { flex: none; width: 18px; height: 18px; }
.gl-basis span { flex: 1; min-width: 0; text-wrap: pretty; }
.gl-basis:hover { color: var(--label); }
@media (min-width: 768px) { .o-page > .o-foot { padding-inline: 0; } }
.gl-proof { margin-top: -2px !important; }
.gl, .gl-col { display: grid; gap: 12px; align-content: start; }
.gl-preise .pmap { margin-top: 14px; }
.gl-card { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px var(--gutter) 16px; color: var(--label); }
a.gl-card { transition: background-color var(--t-press); }
a.gl-card:hover { background: color-mix(in srgb, var(--ink) 2%, var(--panel)); }
a.gl-card:active { background: var(--fill-1); }
.gl-top { display: flex; align-items: center; gap: 8px; color: var(--label-2); }
.gl-label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; }
.gl-label .i { width: 16px; height: 16px; }
.gl-counts { margin-left: auto; font-size: var(--fs-foot); line-height: var(--lh-foot); }
.gl-chev { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--label-3); }
.gl-counts + .gl-chev { margin-left: 0; }
.gl-head { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; }
.gl-head.is-good, .gl-head.is-free { color: var(--good); }
.gl-head.is-note { color: var(--label-2); }
.gl-head.is-miss, .gl-head.is-look { color: var(--care); }
.gl-sub { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.gl-bar { height: 6px; margin-top: 4px; }
.gl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gl-rows { margin: 6px calc(-1 * var(--gutter)) 0; }
.gl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 9px var(--gutter); color: var(--label);
  transition: background-color var(--t-press); }
.gl-row:hover { background: var(--fill-1); }
.gl-rows > li + li .gl-row { box-shadow: inset calc(var(--gutter) + 40px) .5px 0 var(--panel), inset 0 .5px 0 var(--sep); }
.gl-row-main { display: grid; min-width: 0; }
.gl-row-title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; overflow-wrap: anywhere; }
.gl-row-sub { display: -webkit-box; overflow: hidden; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gl-all { display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-height: var(--hit); color: var(--tint); font-size: var(--fs-sub); font-weight: 600; }
.gl-all .i { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .o-page, .o-grid { padding: 20px var(--gutter) 0; }
  .ov-sec, .ov-kpis, .ov-cols, .ov-stack { gap: 16px; }
  .ov-title { padding-inline: 0; }
  .ov-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .o-page { gap: 28px; }
}
@media (min-width: 1200px) { .ov-cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 992px) {
  .is-standort .w-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .is-standort .w-col { gap: 16px; }
  .o-page { max-width: 1280px; }
}
.tile-bar { display: block; width: 100%; height: 4px; margin-top: 6px; }
.tile-bar .is-rahmen { fill: var(--good-mark); }
.tile-bar .is-teurer, .tile-bar .is-guenstiger { fill: var(--care-mark); }
.o-card { scroll-margin-top: var(--top); }
.o-card .sec { scroll-margin-top: calc(var(--top) + 52px); } /* under the bar, the band and the filter's line */
.group.o-card { margin-top: 0; padding-bottom: 0; } /* the gallery's card */
.held { padding-top: 10px; }
.held-title { padding: 0 var(--gutter) 4px; color: var(--label-2); font-size: var(--fs-foot); font-weight: 600; }
.held-btn { font-size: var(--fs-body); }
.is-struck-text { color: var(--label-3); text-decoration: line-through; }
.cell-trail.link { min-height: 0; font-size: var(--fs-sub); font-weight: 600; color: var(--tint); }
.o-grid > .o-card { margin-top: 0; }
.card-key { margin-top: 8px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); text-wrap: pretty; }
.card-marks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.card-marks li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.card-marks .mark-own, .card-marks .mark-unsure, .card-marks .mark-rare { margin: 0; vertical-align: 0; }
.card-marks .mark-rare { width: 12px; height: 12px; }
.reading-row { margin-top: 12px; }
.card-none { margin-top: 12px; }
.features { margin-top: 20px; padding: 0 var(--gutter); color: var(--label-2); font-size: var(--fs-foot); }
.o-foot { display: grid; gap: 4px; margin-top: 24px; padding: 0 var(--gutter); max-width: 1280px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.o-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-bottom: 8px; padding: 10px var(--gutter); margin-inline: calc(-1 * var(--gutter));
  background: var(--panel); color: var(--label); font-size: var(--fs-sub); }
/* the two actions keep their places from business to business, Karte lesen before Teilen, equally wide; which one is
   filled changes with the Entwurf */
.o-toolbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.finding-body { min-width: 0; }
.finding .meter { margin-top: 1px; }
.nb-chev { flex: none; width: 18px; height: 18px; color: var(--label-4); }
.nbs { background: var(--panel); }
.nbs.has-lead { --inset: calc(var(--gutter) + 44px); } /* the hairline starts where the name does, after the small monogram */
.finding .nbs { background: transparent; box-shadow: inset 0 .5px 0 var(--sep); }
.finding details .nb-actions { background: var(--fill-1); }

/* the sheets of the business: Vergleich, Umfeld, the line, the reading */
.line-sheet .sheet-body, .capture .sheet-body { padding-top: 4px; }
.vg { display: grid; gap: 14px; }
.vg > .w-head { margin-bottom: 0; }
.vg .radar { justify-self: center; width: 100%; max-width: 300px; }
.vg-list { margin: 0 calc(-1 * var(--gutter)) -18px; box-shadow: inset 0 .5px 0 var(--sep); }
.vg-list > summary { display: grid; gap: 2px; padding: 12px var(--gutter); cursor: pointer; list-style: none; }
.vg-list > summary::-webkit-details-marker { display: none; }
.vg-list > summary > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--tint); font-size: var(--fs-sub); font-weight: 600; }
.vg-list > summary > span:first-child::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mask-down) center / contain no-repeat;
  mask: var(--mask-down) center / contain no-repeat; transition: transform var(--t-move) var(--ease); }
.vg-list[open] > summary > span:first-child::after { transform: rotate(180deg); }
.vg-stamp { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.vg .held, .vg .closed { margin: 0 calc(-1 * var(--gutter)) -18px; }
.vg-controls { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; } /* the stepper as tall as the switch beside it */
.vg-controls .segmented > a { min-height: var(--hit); }
.vg-near { display: grid; gap: 6px; font-size: var(--fs-sub); line-height: var(--lh-sub); }
.closed { padding-top: 10px; }
.facts .cell-title { font-size: var(--fs-callout); line-height: var(--lh-callout); text-wrap: pretty; }
.facts .glyph { width: 32px; height: 32px; }
.facts .glyph .i { width: 20px; height: 20px; }
.sheet-heading { min-width: 0; }
.sheet-sub { margin-top: 2px !important; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); overflow-wrap: break-word; }
.sheet-title .mark-rare { width: 17px; height: 17px; vertical-align: -1px; margin-left: 6px; }
.line-sheet .sheet-title { overflow-wrap: break-word; hyphens: auto; }
.ls-marks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--gutter); }
.ls-marks .mark-own { margin: 0 2px 0 0; }
.ls-note { padding-top: 0; }
.ls-who > summary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--row); margin-top: 6px; color: var(--tint); font-size: var(--fs-sub); font-weight: 600; }
.ls-who > summary::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mask-down) center / contain no-repeat; mask: var(--mask-down) center / contain no-repeat;
  transition: transform var(--t-move) var(--ease); }
.ls-who[open] > summary::after { transform: rotate(180deg); }
.ls-who .nbs { margin: 0 calc(-1 * var(--gutter)); box-shadow: inset 0 .5px 0 var(--sep); }
.crop { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px var(--gutter); color: var(--label); }
.crop img { width: 72px; height: 72px; object-fit: cover; object-position: top; box-shadow: 0 0 0 .5px var(--sep-strong); }
.crop-label { display: inline-flex; align-items: center; gap: 8px; color: var(--tint); font-size: var(--fs-sub); font-weight: 600; }
.ls-actions { }
.ls-act { gap: 12px; color: var(--tint); font-size: var(--fs-body); }
.ls-actions form + form .ls-act, .ls-actions form + form .ls-act { box-shadow: inset var(--gutter) .5px 0 var(--panel), inset 0 .5px 0 var(--sep); }
.ls-act.is-danger { color: var(--bad); }
.ls-act[data-armed] { padding-inline: var(--gutter) !important; }
.capture-for { display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter); }
.capture-pick, .capture-run { display: grid; gap: 12px; }
.capture[data-state="pick"] .capture-run, .capture:not([data-state="pick"]) .capture-pick { display: none; }
.capture-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--gutter); }
.pick { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 104px; padding: 12px; background: var(--panel); color: var(--tint);
  font-size: var(--fs-sub); font-weight: 600; text-align: center; cursor: pointer; transition: background-color var(--t-press); }
.pick .i { width: 28px; height: 28px; }
.pick:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.pick.is-primary { background: var(--tint); color: var(--tint-ink); }
.pick.is-primary:hover { background: var(--tint-pressed); }
.capture.has-pages .pick { min-height: 64px; grid-auto-flow: column; gap: 8px; }
.capture.has-pages .pick .i { width: 22px; height: 22px; }
.drop { display: none; }
@media (hover: hover) and (pointer: fine) {
  .drop { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 176px; margin: 0 var(--gutter); padding: 24px; background: var(--panel);
    color: var(--label-2); text-align: center; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--sep-strong); transition: box-shadow var(--t-press), background-color var(--t-press); }
  .drop:hover { box-shadow: inset 0 0 0 1.5px var(--tint); }
  .capture-picks { display: none; }
}
.drop-icon { width: 30px; height: 30px; color: var(--tint); }
.drop-title { color: var(--label); font-size: var(--fs-head); font-weight: 600; }
.drop-hint { font-size: var(--fs-sub); }
.drop-choose { color: var(--tint); font-weight: 600; }
.capture.is-over .drop { background: var(--tint-wash); box-shadow: inset 0 0 0 2px var(--tint); }
.capture.has-pages .drop { min-height: 96px; }
.pages-head { padding: 0 var(--gutter); color: var(--label-2); font-size: var(--fs-foot); font-weight: 600; }
.pages-head:empty { display: none; }
.pages { padding: 0 var(--gutter); }
.capture .field-label { margin: 4px var(--gutter) 6px; }
.capture .field { width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter); background: var(--panel); }
.capture-go { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: 2; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.capture .note { margin: 0 var(--gutter); }
.capture .note[hidden] { display: none; }
.run-note { padding: 0 var(--gutter); color: var(--label-2); font-size: var(--fs-foot); }
.capture[data-state="done"] .run-note, .capture[data-state="fail"] .run-note { display: none; }
.run-end { display: grid; gap: 10px; padding: 0 var(--gutter); }
.run-end[hidden] { display: none; }
.run-end > .banner { margin: 0 calc(-1 * var(--gutter)) 4px; }
.run-end form { margin: 0; display: grid; }

/* the desk from 992 px: the bar keeps the way back, the head its actions, the findings beside the card, Vergleich and
   Umfeld standing open among the findings, the line and the reading as an inspector at the right */
@media (min-width: 992px) {
  .o-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 12px var(--gutter) 18px; }
  .o-title { min-width: 0; }
  .o-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  .o-actions form { margin: 0; }
  .o-actions .button { min-width: 150px; justify-content: center; } /* the two actions equally wide, as in the phone's bar */
  .o-nav .nav-trail .o-star { display: none; }
  .o-toolbar { display: none; }
  .o-main { padding-bottom: 48px; }
  .o-grid { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1280px; }
  .o-grid > .o-cue { gap: 16px; }
  .o-grid > .o-cue.is-pinned { position: sticky; top: calc(var(--top) + 16px); } /* what fits the window stays beside the long card */
  .o-grid > .o-cue, .o-grid.is-ideen > .o-cue { display: grid; grid-column: 1; grid-row: 1; }
  .o-grid.is-karte { grid-template-columns: minmax(0, 1fr); max-width: 900px; } /* the card alone, at a reading width */
  .o-grid.is-karte > .o-card { grid-column: 1; }
  .o-grid > .o-card { grid-column: 2; grid-row: 1; }
  .o-grid > .o-card { margin-top: 0; }
  .radar { max-width: 300px; }
  .findings { gap: 8px; }
  .line-row:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
}
@media (min-width: 1200px) {
  .objekt { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .o-side { display: flex; }
  .o-main { min-width: 0; }
  .o-nav { display: none; }
  .o-band { top: 0; }
  .o-head { padding-top: 28px; }
}

/* the tablet: the toolbar's actions and the sheets keep to a column of their own instead of the whole width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .toolbar { padding-inline: max(var(--gutter), calc((100% - 720px) / 2)); }
  .sheet.offcanvas-bottom, .sheet.offcanvas-lg.offcanvas-bottom { left: calc(50% - 300px); right: auto; width: 600px; }
}
/* the desk: a form's button at the form's end, as wide as its words; the bars of the screens under Start on the
   content's column */
@media (min-width: 992px) {
  .form-panel > .button.is-wide { justify-self: end; width: auto; min-width: 180px; }
  .screen-bar { padding-inline: max(4px, calc((100% - 720px) / 2)); }
  .screen-bar.is-wide { padding-inline: max(4px, calc((100% - 1160px) / 2)); }
}
@media (min-width: 1200px) {
  .screen-cols > .screen-col > .group:first-child { margin-top: 16px; }
}


.empty-text .link { min-height: 0; font-weight: 600; }

/* round two of the review */
.no-card { color: var(--label-3); font-size: var(--fs-foot); white-space: nowrap; }
.rep-bar .nav-title { opacity: 1; transform: none; }
.nav-lead form { margin: 0; }
button.nav-back { border: 0; background: none; font: inherit; font-size: var(--fs-body); cursor: pointer; }
.band-draft .banner-act { margin-right: 0; }
.g-legal { padding-bottom: 18px; }
.signin-foot a { color: var(--label-2); text-decoration: underline; text-decoration-color: var(--sep-strong); text-underline-offset: 3px; }
.articles-list .cell-trail { gap: 6px; }
.more-articles { margin-top: 12px; }
.more-articles > summary { gap: 8px; }
.more-articles > summary .t-head { flex: 1; }
.more-articles .cells { box-shadow: inset 0 .5px 0 var(--sep); }
.edit-text > summary { display: inline-flex; min-height: var(--hit); margin-top: 10px; font-size: var(--fs-sub); font-weight: 600; }
.edit-text > summary::after { content: ""; width: 14px; height: 14px; margin-left: 6px; background: currentColor; -webkit-mask: var(--mask-down) center / contain no-repeat;
  mask: var(--mask-down) center / contain no-repeat; transition: transform var(--t-move) var(--ease); }
.edit-text[open] > summary::after { transform: rotate(180deg); }
.edit-text[open] > summary { margin-bottom: 0; }
.edit-text .field-label { margin-top: 4px; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .o-head, .o-grid, .o-page, .o-band > .banner, .o-tabs, .o-main > .o-foot { max-width: 720px; margin-inline: auto; }
  .o-main > .o-foot { padding-inline: 0; }
  .o-nav { padding-inline: max(var(--gutter), calc((100% - 720px) / 2)); }
  .o-head, .o-grid, .o-page { padding-inline: 0; } /* the title, the pages and the cards on one left edge */
  .o-tabs { width: auto; }
  .sheet.offcanvas-bottom, .sheet.offcanvas-lg.offcanvas-bottom { top: 40px; bottom: auto; max-height: calc(100dvh - 80px); }
  .sheet-head::before { content: none; }
}
@media (min-width: 768px) {
  .geteilt .lines { box-shadow: 0 0 0 .5px var(--sep); }
}
@media (min-width: 1200px) {
  .pane [data-here] { display: none; } /* the office has no "here": the sidebar reads the same on Start and beside a business */
}


/* ── 9. the rep's app around the businesses: tab bar, frame, desk home, welcome, Gesendet, Neue Kunden, Konto ──── */
/* "Bald": a part of the app that is coming, said in a word, never in a colour of its own */
.soon { display: inline-block; padding: 0 5px; background: var(--fill-2); color: var(--label-2); font-size: var(--fs-cap); line-height: 18px;
  font-weight: 700; letter-spacing: 0; vertical-align: 2px; white-space: nowrap; }
.soon.is-large { padding: 0 8px; font-size: 13px; line-height: 24px; vertical-align: 6px; }

/* the tab bar: the app's parts at the thumb on the phone and the tablet, a bar with a blur like the toolbar; the part
   that is open in the tint, as what is chosen */
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; justify-content: center;
  padding: 2px max(6px, env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -.5px 0 var(--sep); }
.tab { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 2px; min-width: 0; max-width: 132px;
  min-height: 47px; padding: 3px 2px 0; color: var(--label-2); font-size: 10.5px; line-height: 13px; font-weight: 600; text-align: center; }
.tab .i { width: 28px; height: 28px; stroke-width: 1.6; }
.tab.is-on { color: var(--tint); }
.tab:active { opacity: .6; }
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-soon { position: absolute; top: 2px; left: calc(50% + 9px); padding: 0 3px; background: var(--fill-2); color: var(--label-2);
  font-size: 10px; line-height: 14px; font-weight: 700; }
body:has(.tabbar) .start-lists, body:has(.tabbar) .screen, .frame-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 1200px) { .tabbar:not(.is-inline) { display: none; } }
.tabbar.is-inline { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; } /* the gallery's, in place */

/* the frame: a part of the app on its own screen on the phone and the tablet, beside the sidebar on the desk */
.frame-side { display: none; }
.frame-main { max-width: 720px; margin: 0 auto; }
.frame-main .large-head { padding-top: 10px; } /* where Start's title stands under the same bar */
.frame-main .group { margin-top: 28px; }
.frame-main .large-head + .group, .frame-main .large-head + .screen-note { margin-top: 10px; }
.frame-main .screen-note + .group { margin-top: 16px; }
@media (min-width: 1200px) {
  .frame { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100dvh; }
  .frame-side { display: flex; }
  .frame-main { width: 100%; max-width: 780px; margin: 0; padding: 30px 48px 64px; }
  .frame-main.is-wide { max-width: 1180px; }
  .frame-main .large-head { padding-top: 14px; padding-inline: var(--gutter); }
  .frame-bar { display: none; }
}

/* the desk's sidebar: the parts of the app under the member's logo, the open one in the tint */
.side-nav { display: none; }
@media (min-width: 1200px) {
  .side-nav { display: grid; padding: 0 0 12px; box-shadow: inset 0 -.5px 0 var(--sep); margin-bottom: 12px; }
  .side-link { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 var(--gutter); color: var(--label); font-size: var(--fs-sub);
    line-height: var(--lh-sub); font-weight: 600; transition: background-color var(--t-press); }
  .side-link .i { flex: none; width: 20px; height: 20px; margin-right: 12px; color: var(--label-2); } /* the label on the rows' text */
  .side-link:hover { background: var(--fill-1); }
  .side-link.is-on { background: var(--fill-1); box-shadow: inset 3px 0 0 var(--tint); } /* as the open business */
  .side-link.is-on .i { color: var(--tint); }
  .side-link .soon { margin-left: auto; }
  .pane [data-here] + .group { margin-top: 0; } /* the hidden "Hier" leaves no gap: the sidebar reads the same everywhere */
}

/* the desk's home while no business is open: the greeting, the day, three ways on */
@media (min-width: 1200px) {
  .detail-idle.home { display: block; place-items: normal; min-height: 0; max-width: 780px; padding: 30px 48px 64px; }
  .home-head { padding: 14px var(--gutter) 0; }
  .home-drafts { margin-top: 36px; }
  .home-date { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; }
  .home-title { margin-top: 4px !important; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.024em; }
  .home-sub { max-width: 36rem; margin-top: 10px !important; color: var(--label-2); font-size: var(--fs-body); line-height: var(--lh-body); }
  .home-sub .key { margin-inline: 1px; }
  .home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
  .home-tile { display: grid; align-content: start; gap: 5px; height: 100%; min-height: 164px; padding: 22px 24px; background: var(--panel);
    color: var(--label); transition: background-color var(--t-press); }
  .home-tile:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
  .home-glyph { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; background: var(--fill-2); color: var(--label); }
  .home-glyph .i { width: 22px; height: 22px; }
  .home-tile-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700; }
  .home-tile-title .soon { vertical-align: 0; }
  .home-tile-text { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
}

/* the welcome: five pages to swipe, each the part it names in the app's own components over its words; a page fills
   the screen between the member's logo and the dots */
.intro { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); }
.intro-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(8px + env(safe-area-inset-top)) 8px 4px var(--gutter); }
.intro-brand img { display: block; height: 46px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
.intro-bar form { margin: 0; }
.intro-skip { min-height: var(--hit); padding: 0 8px; border: 0; background: none; color: var(--label-2); font: inherit; font-size: var(--fs-sub); font-weight: 600; cursor: pointer; }
.intro-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.intro-track::-webkit-scrollbar { display: none; }
.intro-page { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; }
.intro-stage { display: grid; place-items: end center; min-height: 0; padding: 8px var(--gutter) 28px; } /* every example on one line */
.stage-card { --gutter: 16px; width: 100%; max-width: 380px; background: var(--panel); box-shadow: 0 0 0 .5px var(--sep); pointer-events: none; user-select: none; }
.intro-copy { width: 100%; max-width: 560px; min-height: calc(2 * var(--lh-t1) + 7 * var(--lh-body) + 22px); padding: 0 var(--gutter) 12px; } /* the words start on one line */
.intro-title { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.intro-text { margin-top: 10px !important; color: var(--label-2); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.intro-note { display: flex; gap: 8px; margin-top: 16px !important; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.intro-note .i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.intro-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.intro-dots { display: flex; align-items: center; gap: 6px; }
.intro-dots i { width: 8px; height: 8px; background: var(--fill-3); transition: width var(--t-move) var(--ease), background-color var(--t-move) var(--ease); }
.intro-dots i.is-on { width: 22px; background: var(--label); }
.intro-next, .intro-go .button { min-width: 148px; }
.intro-go { display: none; margin: 0; }
.intro.is-last .intro-next { display: none; } /* the last page goes on to Start from the same place */
.intro.is-last .intro-go { display: block; }
/* the stages: the app's components as the business page draws them, drawn a little closer */
.stage-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 16px 16px 0; font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.01em; }
.stage-sub { padding: 2px 16px 14px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.stage-scope .tile { min-height: 0; padding: 12px 16px 14px; }
.stage-scope .tile-fig { font-size: var(--fs-t2); line-height: var(--lh-t2); }
.stage-card.o-card { margin: 0; padding: 0 0 4px; }
.stage-card .sec-head { padding: 14px 16px 10px; }
.stage-card .sec-title { font-size: var(--fs-head); font-weight: 700; }
.stage-card.kc { margin: 0; }
.stage-card .st-sub { -webkit-line-clamp: 2; }
.stage-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px; background: var(--bg); }
.stage-picks .pick { min-height: 84px; }
.stage-read .run-step { min-height: 46px; padding-block: 9px; }
.stage-letter { display: grid; justify-items: start; gap: 6px; padding: 16px 16px 14px; box-shadow: inset 0 -.5px 0 var(--sep); }
.stage-letter img { display: block; height: 34px; width: auto; }
.stage-letter-sub { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.stage-prop { margin: 6px 0 0; box-shadow: none !important; }
.stage-offer { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 12px 16px 14px; box-shadow: inset 0 .5px 0 var(--sep);
  color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.stage-offer b { color: var(--label); font-weight: 600; }
.stage-offer .mark-own { flex: none; margin: 0; vertical-align: 0; }
.stage-contact { display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 14px 0 16px; box-shadow: inset 0 .5px 0 var(--sep); }
.stage-contact-main { display: grid; min-width: 0; }
.stage-contact-name { font-size: var(--fs-callout); line-height: var(--lh-callout); font-weight: 600; }
.stage-contact-org { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
@media (min-width: 768px) and (max-width: 991px) { /* a tablet: the example over its words, one column in the middle */
  .intro-page { align-content: center; justify-items: center; grid-template-rows: auto auto; }
  .intro-stage { width: 100%; min-height: 580px; padding: 0 0 36px; }
  .stage-card { zoom: 1.2; max-width: 400px; }
  .intro-copy { max-width: 480px; padding: 0; }
  .intro-foot { width: 100%; max-width: calc(480px + 2 * var(--gutter)); margin-inline: auto; }
}
@media (min-width: 992px) {
  .intro { --fs-t2: 22px; --lh-t2: 28px; --fs-head: 17px; --lh-head: 22px; --fs-body: 17px; --lh-body: 22px; --fs-callout: 16px; --lh-callout: 21px;
    --fs-sub: 15px; --lh-sub: 20px; --fs-foot: 13px; --lh-foot: 18px; --fs-cap: 12px; --lh-cap: 16px; --row: 44px; --row-2: 52px; --btn: 46px; }
  .intro-bar { padding: 22px max(40px, calc((100vw - 1080px) / 2)) 8px; } /* logo, example and dots on one edge */
  .intro-page { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px;
    padding: 0 max(40px, calc((100vw - 1080px) / 2)); }
  .intro-stage { place-items: center stretch; padding: 0; }
  .stage-card { max-width: none; }
  .intro-copy { padding: 0; }
  .intro-title { font-size: 34px; line-height: 40px; }
  .intro-text { font-size: 17px; line-height: 25px; }
  .intro-foot { padding: 18px max(40px, calc((100vw - 1080px) / 2)) 36px; }
}

/* Gesendet: the rep's pages, each with its business, the day and how long it shows, and what can be done with it */
.sent-list > li { position: relative; }
.sent-list > li + li::before { content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 52px); right: 0; height: .5px; background: var(--sep); }
.sent-row .cell-title { font-weight: 600; }
.sent-row .cell-trail .tag { white-space: nowrap; }
.sent-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--gutter) 14px calc(var(--gutter) + 52px); }
.sent-acts form { margin: 0; }
.sent.is-ended .cell-title { color: var(--label-2); }
.sent-ended > summary { gap: 10px; }
.sent-ended > summary .t-head { flex: 1; }
.sent-ended .sent-list { box-shadow: inset 0 .5px 0 var(--sep); }
.sent-none { display: grid; justify-items: center; gap: 8px; padding: 40px var(--gutter) 36px; text-align: center; }
.sent-none-glyph { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; background: var(--fill-2); color: var(--label-2); }
.sent-none-glyph .i { width: 28px; height: 28px; }
.sent-none-title { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700; }
.sent-none-text { max-width: 25rem; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.sent-none .button { margin-top: 12px; }
@media (max-width: 479px) {
  .sent-row { flex-wrap: wrap; }
  .sent-row .cell-trail { width: 100%; padding-left: 52px; }
  .sent-acts { gap: 6px; padding-left: var(--gutter); }
  .sent-acts .button { padding-inline: 10px; font-size: var(--fs-foot); }
  .sent-acts .button .i { display: none; }
}

/* Neue Kunden: the coming search, its three steps with what the member has and empty shapes where businesses will stand */
.flow { display: grid; gap: 10px; }
.flow > .panel { margin: 0; }
.flow-step { padding: 16px var(--gutter) 18px; }
.flow-head { display: flex; align-items: center; gap: 12px; }
.flow-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; background: var(--label); color: var(--panel);
  font-size: var(--fs-foot); font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-title { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700; }
.flow-text { margin: 6px 0 0 40px !important; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.flow-eg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0 40px !important; }
.flow-eg-label { margin-right: 4px; color: var(--label-3); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; }
.lead-rows { margin: 12px 0 0 40px; }
.lead-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; }
.lead-row .cell-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.lead-why { display: block; margin-top: 2px; font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; }
@media (max-width: 479px) { .lead-rows, .flow-eg { margin-left: 0 !important; } } /* the example gets the panel's width */
.ghost-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 11px 0; opacity: .6; }
:is(.lead-row, .ghost-row) + .ghost-row { box-shadow: inset 0 .5px 0 var(--sep); }
.ghost-row + .ghost-row { opacity: .3; } /* the list goes on, fading: shapes, not businesses */
.ghost-mono { width: 40px; height: 40px; background: var(--fill-2); }
.ghost-main { display: grid; gap: 6px; min-width: 0; }
.ghost-bar { display: block; height: 10px; background: var(--fill-2); }
.ghost-bar.is-title { width: 58%; height: 12px; background: var(--fill-3); }
.ghost-bar.is-sub { width: 86%; }
.ghost-row + .ghost-row .is-title { width: 44%; } .ghost-row + .ghost-row .is-sub { width: 70%; }
.ghost-tag { height: 20px; background: var(--fill-2); }
.cell.is-static { cursor: default; }
.cell .cell-title .soon { margin-left: 6px; }
.wish { display: grid; justify-items: start; gap: 8px; padding: 16px var(--gutter) 18px; }
.wish-title { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700; }
.wish-text { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.wish form { margin: 6px 0 0; }
.wish-done { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px !important; color: var(--label); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; }
.wish-done .i { flex: none; width: 20px; height: 20px; }

/* Konto: Rover itself as rows, the app on the phone behind one, the password behind another */
.cell-disclose { position: relative; }
.cell-disclose > summary { list-style: none; cursor: pointer; }
.cell-disclose > summary::-webkit-details-marker { display: none; }
.cells > .cell + .cell-disclose::before, .cells > .cell-disclose + .cell::before { content: ""; position: absolute; top: 0; left: var(--inset); right: 0;
  height: .5px; background: var(--sep); z-index: 1; }
.cell-fold { flex: none; display: grid; place-items: center; color: var(--label-3); transition: transform var(--t-move) var(--ease); }
.cell-fold .i { width: 16px; height: 16px; }
.cell-disclose[open] .cell-fold { transform: rotate(180deg); }
.howto { display: grid; gap: 8px; padding: 0 var(--gutter) 16px calc(var(--gutter) + 52px); color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.howto b { color: var(--label); font-weight: 600; }
.howto .i { width: 16px; height: 16px; vertical-align: -3px; }
@media (min-width: 1200px) { .cell-disclose.is-handheld { display: none; } } /* the desk keeps Rover in its browser */
.contact-preview { pointer-events: none; } /* the owner's card as he sees it, to look at */
.help-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--gutter) 14px calc(var(--gutter) + 52px); }
.pw > summary .t-head { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
.account-foot a { color: var(--label-2); text-decoration: underline; text-underline-offset: 2px; }
.pw > summary { gap: 12px; }
.pw > summary .t-head { flex: 1; }
.pw .form-panel { padding-top: 4px; }
.account-foot { margin-top: 24px; text-align: center; }

/* Neuer Betrieb: two steps, the address and then the card. The steps stand as squares with their words; the address
   field suggests houses in a list under it, the one under the finger or the arrow keys marked as the chosen state is,
   and the house chosen becomes a row to change. */
.add-steps { display: flex; gap: 20px; margin: 2px var(--gutter) 12px; color: var(--label-3); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; }
.add-steps li { display: flex; align-items: center; gap: 8px; }
.add-step-n { display: grid; place-items: center; width: 22px; height: 22px; background: var(--fill-2); color: var(--label-2); font-variant-numeric: tabular-nums; }
.add-step-n .i { width: 14px; height: 14px; stroke-width: 2.4; }
.add-steps :is(.is-now, .is-done) { color: var(--label); }
.add-steps :is(.is-now, .is-done) .add-step-n { background: var(--label); color: var(--panel); }
.add-steps.is-sheet { margin: 0 0 12px; padding: 0 var(--gutter); }
.add-form > .button { margin-top: 22px; }
.combo { position: relative; }
.combo-list { margin-top: 6px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--sep-strong); }
.combo-opt { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: var(--row-2);
  padding: 9px 14px; cursor: pointer; }
.combo-opt + .combo-opt::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; height: .5px; background: var(--sep); }
.combo-opt .i { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--label-3); }
.combo-line { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; overflow-wrap: anywhere; }
.combo-town { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.combo-opt[aria-selected="true"] { background: var(--fill-1); box-shadow: inset 3px 0 0 var(--tint); }
.combo-opt.is-here .combo-line { color: var(--tint); }
.combo-opt.is-here .i { color: var(--tint); }
.combo-field { position: relative; }
.combo-field .field { padding-right: 48px; }
.combo-field:has(.combo-spin:not([hidden])) .field { padding-right: 80px; } /* room for the spinner only while it turns */
.combo-spin { position: absolute; top: 50%; right: 48px; width: 16px; height: 16px; margin-top: -8px; color: var(--label-3); }
.combo-spin[hidden] { display: none; }
.combo-clear { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 48px; height: 100%; border: 0; background: none;
  color: var(--label-3); cursor: pointer; }
.combo-clear .i { width: 18px; height: 18px; stroke-width: 2; }
.combo-clear[hidden], .combo-list[hidden], .combo-where[hidden] { display: none; }
.combo-where { display: flex; align-items: center; gap: 6px; }
.combo-where .i { width: 14px; height: 14px; flex: none; }
.frame-main.add { padding-bottom: 48px; }
@media (min-width: 1200px) {
  .frame-main > .screen-bar { display: none; } /* the sidebar leads back */
  .frame-main.add { max-width: 640px; }
}

/* A widget of the business's pages: what it is about in a small line, the answer as its title, a sentence at most,
   then its figure; the sources in a foot line. */
.w { margin: 0; padding: 16px var(--gutter) 18px; } /* a figure widget too: no margin of its own, the page's gap stands between */
.w-head { display: grid; gap: 2px; margin-bottom: 14px; }
.w-kicker { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; }
.w-title { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.w-title.is-big { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: 800; letter-spacing: -.02em; }
.w-says { margin-top: 4px !important; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); text-wrap: pretty; }
.w-foot { max-width: 76ch; margin-top: 12px !important; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); text-wrap: pretty; }
.w-cap { margin-bottom: 2px !important; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; }
.w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px 14px; margin-bottom: 14px; }
.w-stat { display: grid; }
.w-stat b { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.w-stat span { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.w .g-cap { padding: 0; }

/* Lage: the kind of location as the title, the three sources of guests as gauges on the Chancen's tiles: the figure,
   what it counts, a bar beside a tick at the city's typical location, strong in the judgement's green */
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.gauge { display: grid; grid-template-rows: auto auto 1fr auto auto; min-width: 0; padding: 12px; background: var(--panel-2); }
.gauge-label { color: var(--label-2); font-size: var(--fs-cap); line-height: var(--lh-cap); font-weight: 600; }
.gauge-strength { margin-top: 6px; font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 700; }
.gauge.is-stark .gauge-strength { color: var(--good); }
.gauge-strength + .gauge-sub { margin-top: 0; }
.gauge-fig { margin-top: 6px; font-size: var(--fs-t1); line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gauge-unit { margin-top: 4px; color: var(--label-2); font-size: var(--fs-cap); line-height: var(--lh-cap); text-wrap: balance; }
.gauge-bar { display: block; width: 100%; height: 10px; margin-top: 10px; overflow: visible; }
.gauge-bar .track { fill: var(--fill-3); }
.gauge-bar .here { fill: var(--label); }
.gauge-bar .usual { fill: var(--label-2); }
.gauge-sub { margin-top: 6px; color: var(--label-2); font-size: var(--fs-cap); line-height: var(--lh-cap); font-variant-numeric: tabular-nums; }
.gauge.is-stark .gauge-bar .here { fill: var(--good-mark); }
.lage .g-cap { margin-top: 12px; }

/* Wann die Nachbarn geöffnet haben: the week as a grid, one cell an hour, its shade how many are open (ink, never
   a verdict's colour); the business's own hours underlined in the tint, as the radar marks it; its free window in
   the judgement's green, a day it is closed while most are open in amber. Figures stand in the cells where they fit. */
.week-sets { width: 100%; margin-bottom: 14px; }
.week-sets > button { min-width: 0; min-height: var(--hit); padding: 0 8px; white-space: normal; text-wrap: balance; line-height: 1.15; }
.week-finds { display: grid; gap: 2px; margin: 0 calc(-1 * var(--gutter)) 14px; }
.week-find { display: grid; grid-template-columns: 4px minmax(0, 1fr); column-gap: 12px; padding: 10px var(--gutter); background: var(--panel-2); }
.week-find-mark { background: var(--good-mark); }
.week-find.is-miss .week-find-mark { background: var(--care-mark); }
.week-find-main { display: grid; gap: 1px; min-width: 0; }
.week-find-title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; text-wrap: pretty; }
.week-find-title b { font-weight: 700; white-space: nowrap; }
.week-find-say { color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.heat-wrap { margin: 0; overflow: hidden; }
.heat { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px 3px; font-variant-numeric: tabular-nums; }
.heat th { color: var(--label-2); font-size: 11px; line-height: 14px; font-weight: 600; text-align: center; }
.heat thead th { padding-bottom: 2px; }
.heat thead th:first-child, .heat tbody th { width: 24px; text-align: left; }
.heat tbody th { color: var(--label-2); font-size: var(--fs-cap); }
.heat td { position: relative; height: 26px; padding: 0; color: transparent; font-size: 10px; line-height: 26px; font-weight: 600; text-align: center; }
.heat { --heat-green: #0f7d3c; --heat-red: #e2061b; } /* the report's scale: green where few neighbours are open, white at about 60 %, red where nearly all are */
.heat .s0, .heat-key i.s0 { background: var(--heat-green); }
.heat .s1 { background: color-mix(in srgb, var(--heat-green) 82%, var(--panel)); }
.heat .s2 { background: color-mix(in srgb, var(--heat-green) 65%, var(--panel)); }
.heat .s3, .heat-key i.s3 { background: color-mix(in srgb, var(--heat-green) 48%, var(--panel)); }
.heat .s4 { background: color-mix(in srgb, var(--heat-green) 31%, var(--panel)); }
.heat .s5 { background: color-mix(in srgb, var(--heat-green) 15%, var(--panel)); }
.heat .s6, .heat-key i.s6 { background: color-mix(in srgb, var(--label) 4%, var(--panel)); }
.heat .s7 { background: color-mix(in srgb, var(--heat-red) 30%, var(--panel)); }
.heat .s8, .heat-key i.s8 { background: color-mix(in srgb, var(--heat-red) 55%, var(--panel)); }
.heat .s9 { background: color-mix(in srgb, var(--heat-red) 78%, var(--panel)); }
.heat .s10, .heat-key i.s10 { background: var(--heat-red); }
.heat td.is-own { box-shadow: inset 0 -4px 0 var(--label); } /* the business's own hours: an ink bar at the cell's foot, on green as on red */
.heat-key .heat-scale { display: inline-flex; gap: 2px; }
.heat-key .heat-scale i { margin: 0; }
.heat-key i.is-own { height: 4px; vertical-align: 2px; background: var(--label); }
.heat-key .heat-scale { --heat-green: #0f7d3c; --heat-red: #e2061b; }

/* Preise: the price level as bars from the country's line (the house in the tint, the quarters with its rent in
   the judgement's green: what the location carries), the key drinks as rows with the card's own price tiles, and the
   price room folded under one row: there, not in front. */
.pz-bars { display: grid; gap: 10px; }
.pz-bar { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem; align-items: center; gap: 2px 12px; }
.pz-bar-label { grid-column: 1 / -1; color: var(--label-2); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.pz-bar.is-self .pz-bar-label { color: var(--label); font-weight: 700; }
.pz-bar-svg { display: block; width: 100%; height: 10px; overflow: visible; }
.pz-bar-svg .track { fill: var(--fill-2); }
.pz-bar-svg .val { fill: var(--label); }
.pz-bar.is-self .pz-bar-svg .val { fill: var(--tint); }
.pz-bar-svg .zero { fill: var(--label-2); }
.pz-bar-pct { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-level { container-type: inline-size; }
.pz-key-list { margin: 10px calc(-1 * var(--gutter)) -16px; }
.pz-key-list > li + li { box-shadow: inset 0 .5px 0 var(--sep); }
.pz-key { display: flex; align-items: center; gap: 12px; min-height: var(--row-2); padding: 10px var(--gutter); color: var(--label); transition: background-color var(--t-press); }
.pz-key:hover { background: var(--fill-1); }
.pz-key-main { display: grid; flex: 1; min-width: 0; }
.pz-key-group { color: var(--label-3); font-size: var(--fs-cap); line-height: var(--lh-cap); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pz-key-name { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; overflow-wrap: anywhere; }
.pz-key-base { color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.pz-key .ptiles { flex: none; }
.pz-room > summary { gap: 10px; }
.pz-room > summary .t-head { flex: 1; }
.pz-room-sum { color: var(--label-2); font-size: var(--fs-foot); }
.pz-room-title { padding: 12px var(--gutter) 4px; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; box-shadow: inset 0 .5px 0 var(--sep); }
.pz-room-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 9px var(--gutter); color: var(--label); }
.pz-room-row:hover { background: var(--fill-1); }
.pz-room-name { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; }
.pz-room-meta { grid-row: 2; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.pz-room-gap { grid-row: 1 / span 2; align-self: center; font-size: var(--fs-sub); font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-room-gap.is-up { color: var(--good); }
.pz-room-gap.is-down { color: var(--care); }
.pz-room-list { padding-bottom: 8px; }

/* Was die Nachbarn führen: one row a drink, its name and its state on this card in words (missing in solid ink, as
   a missing group's tile), how many of them list it as the Chancen's meter and in numbers; a tap shows it on the card */
.carry-list { margin: 8px calc(-1 * var(--gutter)) 0; }
.carry-list > li + li { box-shadow: inset 0 .5px 0 var(--sep); }
.carry-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: center; column-gap: 12px; row-gap: 4px; padding: 9px var(--gutter);
  color: var(--label); transition: background-color var(--t-press); }
.carry-row:hover { background: var(--fill-1); }
.carry-name { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 600; overflow-wrap: anywhere; }
.carry-state { justify-self: end; }
.carry-state .tag .i { width: 12px; height: 12px; }
.carry-on { padding-right: 0; background: transparent; color: var(--label-2); } /* its words end where the chips' boxes do */
.carry-gap { background: var(--label); color: var(--panel); }
.carry-meter { grid-column: 1; min-width: 0; }
.carry-meter .meter { flex-wrap: wrap; }
.carry-k { grid-column: 2; justify-self: end; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-variant-numeric: tabular-nums; }
.carry-sub { margin-top: 14px !important; color: var(--label-2); font-size: var(--fs-foot); line-height: var(--lh-foot); font-weight: 600; }
.carry-more { margin-top: 2px; }
.carry-more > summary { display: flex; align-items: center; min-height: var(--hit); color: var(--tint); font-size: var(--fs-sub); font-weight: 600; cursor: pointer; list-style: none; }
.carry-more > summary::-webkit-details-marker { display: none; }
.carry-more[open] > summary { display: none; }

/* the owner's page: the location under its own heading, the panels in the page's column */
.g-lage .w { margin-top: 12px; box-shadow: 0 0 0 .5px var(--sep); }
.g-lage .w + .w { margin-top: 18px; }
.g-lage .lage .w-kicker { display: none; } /* under "Ihre Lage" the kind of location is the title */

/* the rep's lists on Betriebe, folded until opened: a customer's name stays out of sight at the table */
.fold > .fold-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--hit); cursor: pointer; list-style: none; }
.fold > .fold-head::-webkit-details-marker { display: none; }
.fold-chev { width: 18px; height: 18px; color: var(--label-3); transition: transform var(--t-move) var(--ease); }
.fold[open] .fold-chev { transform: rotate(180deg); }
.fold:not([open]) { padding-bottom: 0; }

/* the Karte's head: its age, its size and the three verdicts as one slim row of filters */
.card-head .vstats { margin-top: 10px; }
.card-head .vstat { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px; padding: 8px 10px; }
.card-head .vstat-n { font-size: var(--fs-t3); line-height: 1; }
@media (min-width: 1200px) { .start > .pane { min-height: 100dvh; } } /* the sidebar's ground to the foot, folded lists or not */