/* Contracts and prices v2 ("Verträge und Tarife", Büro). Design source: docs/design/vertraege-v2 (approved).
   Colours and sizes come only from the shared tokens (--ui-*) of theme.css: Kum-Gang red/navy is the default,
   data-brand="hayo" the alternative, light and dark follow the system or an explicit data-theme.
   Every red fill carries white text (--ui-on-action). Main case: desktop 1366 px; also 1440 px and 375 px. */
.cv-body { font-family: var(--ui-font); }
/* The shared page box repeats what each screen now explains itself. */
.cv-body .page-help { display: none; }
.cv-shell { font-size: 17px; line-height: 1.45; }
.cv-shell [hidden] { display: none !important; }
.cv-shell :is(a, button, input, select, summary, [tabindex="-1"]):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.cv-shell h1:focus, .cv-shell h2:focus { outline: none; }
.cv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cv-muted { color: var(--ui-muted); margin: 0; }

/* Top line, tabs, heading, help box */
.cv-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.cv-top-title { margin: 0; color: var(--ui-muted); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }
.cv-shell .cv-button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .6rem 1.2rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-surface); color: var(--ui-ink);
  font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.cv-shell .cv-button:hover:not(:disabled) { border-color: var(--ui-primary); }
.cv-shell .cv-button.primary { background: var(--ui-action); border-color: var(--ui-action); color: var(--ui-on-action); }
.cv-shell .cv-button.quiet { background: transparent; }
.cv-shell .cv-button:disabled { opacity: .55; cursor: not-allowed; }
.cv-shell .cv-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding-bottom: .9rem; border-bottom: 1px solid var(--ui-line); }
.cv-shell .cv-tab { min-height: 3rem; padding: .5rem 1.2rem; border: 1px solid transparent; border-radius: var(--ui-radius-small); background: transparent;
  color: var(--ui-ink); font: inherit; font-weight: 650; cursor: pointer; touch-action: manipulation; }
.cv-shell .cv-tab:hover { border-color: var(--ui-line); }
.cv-shell .cv-tab[aria-current="page"] { background: var(--ui-band); border-color: var(--ui-band); color: #ffffff; }
.cv-shell .cv-heading { text-align: left; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1rem; }
.cv-shell .cv-heading h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.06; }
.cv-shell .cv-eyebrow { margin: 0 0 .5rem; color: var(--ui-primary); font-weight: 650; }
.cv-help { margin: 0 0 1.5rem; padding: .9rem 1.2rem; border: 1px solid var(--ui-line); border-left: 4px solid var(--ui-action);
  border-radius: var(--ui-radius-small); background: var(--ui-surface); color: var(--ui-ink); }
.cv-help strong { margin-right: .5rem; }
.cv-help #cv-help:empty { display: none; }

.cv-shell .cv-heading > :last-child { color: inherit; font-size: inherit; }
.cv-shell button.hint-btn:not(.secondary) { width: 3rem; height: 3rem; min-height: 0; padding: 0; font-size: .95rem; }

/* Cards */
.cv-card { padding: 1.3rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.cv-card h2 { margin: 0 0 .6rem; font-size: 1.5rem; letter-spacing: -.02em; }
.cv-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.cv-card-head h2 { margin: 0; }
.cv-chip { margin: 0; padding: .35rem .8rem; border-radius: 999px; background: var(--ui-soft); color: var(--ui-ink); font-weight: 650; font-size: .95rem; }
.cv-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 1.2rem; align-items: start; }
.cv-aside { display: grid; gap: 1rem; }
.cv-note { padding: 1.1rem 1.3rem; border-radius: var(--ui-radius); background: var(--ui-soft); color: var(--ui-ink); }
.cv-note h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.cv-note p { margin: .3rem 0 0; }
.cv-note.ok { background: var(--ui-success-bg); color: var(--ui-success); }
.cv-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; align-items: center; }
.cv-big-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .4rem 0 .6rem; color: var(--ui-ink); }
.cv-big-price strong { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.cv-big-price span { color: var(--ui-muted); }
.cv-big-line { margin: .4rem 0; font-size: 1.2rem; font-weight: 650; }
.cv-state { padding: 1.6rem 1.2rem; text-align: center; border-radius: var(--ui-radius); background: var(--ui-soft); color: var(--ui-ink); }
.cv-state h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.cv-state p { max-width: 38rem; margin: .4rem auto 0; }
.cv-state .cv-row { justify-content: center; }
li.cv-state { list-style: none; }

/* Price table: rows are terms, columns are weekly sessions; on a phone every term becomes a group of two columns */
.cv-shell .cv-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; display: table; }
.cv-shell .cv-table th { text-align: left; font-weight: 500; color: var(--ui-muted); padding: .2rem .4rem .6rem; }
.cv-shell .cv-table tbody th { padding: .4rem .6rem; width: 8rem; color: var(--ui-ink); }
.cv-shell .cv-table tbody th strong { font-size: 1.8rem; letter-spacing: -.02em; }
.cv-shell .cv-table tbody th span { display: block; }
.cv-shell .cv-table td { padding: .4rem; vertical-align: top; border: 0; }
.cv-cell { display: grid; gap: .4rem; justify-items: center; align-content: start; height: 100%; padding: .9rem .6rem; text-align: center;
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-soft); color: var(--ui-ink); }
.cv-cell.is-missing { border-style: dashed; }
.cv-cell-label { display: none; color: var(--ui-muted); font-size: .95rem; }
.cv-cell-price { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; }
.cv-shell .ct-button.secondary { background: transparent; border-color: var(--ui-primary); color: var(--ui-primary); }
.cv-shell .cv-cell-button { display: inline-flex; gap: .3rem; min-height: 2.75rem; padding: .3rem .6rem; border: 0; background: transparent; color: var(--ui-ink); font: inherit; font-weight: 500;
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cv-shell .cv-cell-button:hover { color: var(--ui-primary); }
.cv-cell .ct-badge { white-space: normal; text-align: center; }

/* Forms */
.cv-field { font-weight: 650; }
.cv-shell label.cv-field { display: grid; position: relative; padding-right: 2.6rem; margin: .8rem 0 .4rem; }
.cv-shell label.cv-field .hint-text { padding-right: 1rem; }
.cv-shell .ct-price-label { margin-top: 1rem; }
.cv-shell input[type="text"], .cv-shell input[type="search"], .cv-shell input[type="date"], .cv-shell select { width: 100%; min-height: 3.4rem; padding: .7rem 1rem;
  border: 1.5px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 1.15rem; }
.cv-shell .ct-price-input { font-size: 1.5rem; font-weight: 650; min-height: 4rem; }
.cv-shell [aria-invalid="true"] { border: 2px solid var(--ui-danger); background: var(--ui-danger-bg); }
.cv-shell .ct-error { color: var(--ui-danger); font-weight: 650; margin: .4rem 0; }
.cv-price-form { max-width: 34rem; }
.cv-price-form .ct-button { min-height: 3rem; }
.cv-plan-intro { margin-bottom: .4rem; }
.cv-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; margin: .4rem 0 1.2rem; }
.cv-person-focus { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1.2rem;
  padding: 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-soft); }
.cv-person-photo-slot, .cv-person-photo { width: 4rem; height: 4rem; border-radius: 50%; }
.cv-person-photo-slot { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ui-line); background: var(--ui-surface); }
.cv-person-photo { display: block; object-fit: cover; }
.cv-person-photo-fallback { display: grid; place-items: center; color: var(--ui-ink); font-weight: 700; }
.cv-person-copy p, .cv-person-copy h2, .cv-person-copy small { margin: 0; }
.cv-person-copy p, .cv-person-copy small { color: var(--ui-muted); }
.cv-person-copy h2 { overflow-wrap: anywhere; }
.cv-confirm .ct-row, .cv-confirm .cv-row { margin-top: 1rem; }
.cv-decision { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--ui-line); }
.cv-decision .cv-field + input, .cv-decision .cv-field + select { margin-bottom: .6rem; }

/* Contract list */
.cv-contracts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cv-contract { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr) auto auto; gap: 1rem; align-items: center;
  padding: .9rem 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-surface); }
.cv-contract > div { display: grid; gap: .15rem; }
.cv-contract-who span, .cv-contract-start span { color: var(--ui-muted); }
.cv-shell .ct-badge { background: var(--ui-soft); color: var(--ui-ink); font-size: .9rem; padding: .3rem .7rem; }
.cv-shell .ct-badge.ok { background: var(--ui-success-bg); color: var(--ui-success); }
.cv-shell .ct-badge.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }

/* Reading a contract */
.cv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.6rem; padding-top: 1rem; border-top: 1px solid var(--ui-line); }
.cv-fact { display: grid; gap: .15rem; }
.cv-fact strong { font-size: 1.2rem; overflow-wrap: anywhere; }
.cv-fact-label { color: var(--ui-muted); }
.cv-agreed { display: grid; gap: .1rem; margin-top: 1.4rem; }
.cv-agreed .cv-big-price { margin: .1rem 0; }
.cv-signed { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--ui-line); }
.cv-actions { display: grid; gap: .8rem; justify-items: start; box-shadow: none; }
.cv-actions:empty { display: none; }
.cv-mail { display: grid; gap: .6rem; justify-items: start; width: 100%; }
.cv-more { margin-top: 1.4rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-surface); }
.cv-more > summary { padding: .9rem 1.2rem; min-height: 3rem; font-weight: 650; cursor: pointer; }
.cv-more > p { padding: 0 1.2rem; }
.cv-more-body { display: grid; gap: 1.2rem; padding: 1rem 1.2rem 1.3rem; }
.cv-new { margin-top: 1.4rem; }
.cv-new > section { padding: 0 1.2rem 1.2rem; }

/* Requests */
.cv-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cv-request { display: grid; gap: .5rem; justify-items: start; }
.cv-request h2, .cv-request p { margin: 0; }

/* Mail dialog (contracts.css supplies the box) */
.ct-mail-dialog .ct-form { gap: .8rem; }

/* Contribution timeline: a horizontally scrollable month sequence at 375 px. Marks and words carry every status. */
.contribution-section { margin-top: 1.2rem; }
.contribution-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 1rem 0; padding: 0; list-style: none; color: var(--ui-muted); }
.contribution-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); gap: .75rem; margin: 1rem 0 0;
  padding: .25rem .25rem 1rem; overflow-x: auto; overscroll-behavior-inline: contain; list-style: none; scrollbar-gutter: stable; }
.contribution-entry { position: relative; }
.contribution-entry { min-width: 0; }
.contribution-entry:not(:last-child)::after { content: ""; position: absolute; top: 1.6rem; left: 100%; width: .75rem; border-top: 2px solid var(--ui-line); pointer-events: none; }
/* .cv-shell raises the specificity above the shared `.ui button` (inline-flex row, 48 px), which otherwise flattens the chip. */
.cv-shell .contribution-point { display: grid; align-content: start; justify-content: stretch; gap: .2rem; justify-items: start; width: 100%; min-width: 0; min-height: 8.2rem; padding: .8rem; border: 2px solid var(--ui-line);
  border-radius: var(--ui-radius-small); background: #fff; color: #162b4d; font: inherit; text-align: left; cursor: pointer;
  color-scheme: light; overflow-wrap: normal; word-break: normal; }
.contribution-point:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.contribution-point[data-status="paid"] { border-color: #1d5a2d; background: #e4f3ea; color: #163d22; }
.contribution-point[data-status="open"] { border-color: #9b2c2c; background: #fff0f0; color: #651c1c; }
.contribution-point[data-status="upcoming"] { border-color: #8b806c; background: #f5f1e8; color: #162b4d; }
.contribution-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid currentColor; font-weight: 800; }
.contribution-month, .contribution-amount, .contribution-status { display: block; min-width: 0; overflow-wrap: normal; word-break: normal; }
.contribution-amount { white-space: nowrap; }
.contribution-month, .contribution-status { white-space: normal; }
.contribution-status { color: #4d5b70; font-size: .92rem; }
.contribution-dialog { width: min(calc(100% - 1rem), 34rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.2rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink); font-family: var(--ui-font); }
.contribution-dialog::backdrop { background: rgb(10 20 38 / .72); }
.contribution-dialog h2 { margin-top: 0; }
.contribution-dialog-body { display: grid; gap: 1rem; }
.contribution-receipt { padding-top: .8rem; border-top: 1px solid var(--ui-line); }
.contribution-receipt:first-child { padding-top: 0; border-top: 0; }

@media (max-width: 64rem) {
  .cv-contract { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cv-contract .ct-badge { justify-self: start; }
}
@media (max-width: 48rem) {
  .cv-grid { grid-template-columns: 1fr; }
  .cv-shell .cv-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .cv-shell .cv-cell-button { white-space: nowrap; font-size: .95rem; padding: .3rem .2rem; }
  .cv-facts { grid-template-columns: 1fr; }
  .cv-search-row { grid-template-columns: 1fr; }
  .cv-person-focus { grid-template-columns: auto minmax(0, 1fr); }
  .cv-person-focus .cv-button { grid-column: 1 / -1; width: 100%; }
  .cv-shell .cv-table, .cv-shell .cv-table tbody { display: block; }
  .cv-shell .cv-table thead { display: none; }
  .cv-shell .cv-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.2rem; padding: 0; border: 0; background: transparent; }
  .cv-shell .cv-table td { display: block; padding: 0; }
  .cv-shell .cv-table tbody th { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .4rem; padding: 0; width: auto; text-align: left; }
  .cv-shell .cv-table tbody th span { display: inline; }
  .cv-cell-label { display: block; }
  .cv-contract { grid-template-columns: 1fr; }
  .cv-contract .cv-button, .cv-row .cv-button, .cv-row .ct-button { width: 100%; }
  .cv-actions { justify-items: stretch; }
  .cv-mail .cv-button { width: 100%; }
}
@media (max-width: 30rem) {
  .cv-shell { font-size: 16px; }
  .cv-tabs { display: grid; grid-template-columns: 1fr; }
  .cv-card { padding: 1rem; }
  .contribution-timeline { margin-inline: -.5rem; padding-inline: .5rem; grid-auto-columns: minmax(10.5rem, 1fr); }
}
/* Beitrag (KGP-PREIS1): section in "Vertrag lesen" and its dialogs. Tokens only; the action fill is the shared .primary button. */
.po-section { margin-top: 1.2rem; }
.po-head { position: relative; padding-right: 2.6rem; margin-bottom: .6rem; }
.po-head h2 { margin: 0; }
.po-head .hint-text { margin-top: .6rem; }
.po-section h3 { margin: 1.2rem 0 .6rem; font-size: 1.15rem; }
.po-now { display: grid; gap: .3rem; padding: 1rem 1.2rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-soft); }
.po-now.is-different { border-color: var(--ui-warn); background: var(--ui-warn-bg); }
.po-now .cv-big-price { margin: 0; }
.po-now p { margin: 0; }
.po-line { font-weight: 650; }
.po-different { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.po-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.po-entry { display: grid; gap: .3rem; padding: .8rem 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-surface); }
.po-entry.is-open { border-left: 4px solid var(--ui-action); }
.po-entry-top { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.po-entry-line { margin: 0; overflow-wrap: anywhere; }
.po-entry .cv-row { margin-top: .4rem; }
.po-dialog { width: min(calc(100% - 1rem), 36rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.2rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink); font-family: var(--ui-font); }
.po-dialog::backdrop { background: rgb(10 20 38 / .72); }
.po-dialog h2 { margin: 0 0 .4rem; font-size: 1.5rem; }
.po-dialog :is(input, select, button):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.po-form { display: grid; gap: .6rem; }
.po-field { display: grid; gap: .3rem; position: relative; padding-right: 3.4rem; font-weight: 650; }
.po-dialog .hint-btn, .po-head .hint-btn { width: 3rem; height: 3rem; min-height: 0; min-width: 0; padding: 0; font-size: .95rem; }
.po-field .hint-text { padding-right: 1rem; font-weight: 400; }
.po-field > :is(input, select) { width: 100%; min-height: 3.2rem; padding: .6rem .9rem; border: 1.5px solid var(--ui-line); border-radius: var(--ui-radius-small);
  background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 1.1rem; font-weight: 400; }
.po-dialog [aria-invalid="true"] { border: 2px solid var(--ui-danger); background: var(--ui-danger-bg); }
.po-dialog .ct-error { color: var(--ui-danger); font-weight: 650; margin: 0; }
.po-dialog .ct-error:empty { display: none; }
.po-tariff, .po-change { margin: 0; }
.po-change strong { font-size: 1.25rem; overflow-wrap: anywhere; }
.po-warn { margin: 0; padding: .6rem .8rem; border-radius: var(--ui-radius-small); background: var(--ui-warn-bg); color: var(--ui-warn); font-weight: 650; }
.po-above { display: grid; gap: .5rem; }
.po-above[hidden], .po-review[hidden], .po-form[hidden] { display: none; }
.po-review { display: grid; gap: .6rem; }
.po-review p { margin: 0; }
@media (max-width: 30rem) {
  .po-dialog { width: calc(100% - .5rem); max-height: calc(100dvh - .5rem); padding: .9rem; }
  .po-dialog .ct-row .ct-button { width: 100%; }
  .po-field { padding-right: 3.4rem; }
  .po-section .cv-row .cv-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cv-shell * { scroll-behavior: auto !important; transition: none !important; } }