/* ==========================================================================
   Klar – sub pages (2027, "Le Plan"): Trust Center (/sicherheit), cancellation (/kuendigen),
   changelog, legal texts (Impressum, Datenschutz, AGB) and 404.
   Builds on tokens.css + site.css + chrome.css (k-* classes). Values come from tokens.css only.
   Layout (docs/DESIGN.md §3, "Unterseiten"): the architectural grid only behind the page head,
   content on white cards, H1 large and tight, a Caveat note as eyebrow. No animation here except
   the shared reveal – the cancellation page stays sober (no motion, no "stay" CTA).
   ========================================================================== */

/* ---------- Page frame ---------- */
main.page, main.legal {
  position: relative; isolation: isolate;
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(40px, 2rem + 4vw, 112px));
  padding-bottom: var(--section-y);
}
/* The plan grid behind the page head, fading out towards the content. Decorative only. */
main.page::before, main.legal::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: clamp(420px, 22rem + 18vw, 680px);
  transform: translateX(-50%); pointer-events: none;
  background-image: linear-gradient(var(--grid-line) var(--hair), transparent var(--hair)), linear-gradient(90deg, var(--grid-line) var(--hair), transparent var(--hair));
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: calc(50% - var(--grid-cell) / 2) -1px;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent);
}

/* Plan frame: four black corner dots (like the mosaic and the footer card) – set in from the
   corners so the rounded edge never cuts them. */
.core, .form-card, .legal-card, .release, .notfound__card {
  --dot: 6px; --dot-in: 10px;
  background:
    linear-gradient(var(--grid-dot) 0 0) var(--dot-in) var(--dot-in) / var(--dot) var(--dot) no-repeat,
    linear-gradient(var(--grid-dot) 0 0) calc(100% - var(--dot-in)) var(--dot-in) / var(--dot) var(--dot) no-repeat,
    linear-gradient(var(--grid-dot) 0 0) var(--dot-in) calc(100% - var(--dot-in)) / var(--dot) var(--dot) no-repeat,
    linear-gradient(var(--grid-dot) 0 0) calc(100% - var(--dot-in)) calc(100% - var(--dot-in)) / var(--dot) var(--dot) no-repeat,
    var(--paper);
}

.page__head { max-width: 62rem; }
.page__head .eyebrow { display: block; }
.page__head h1 {
  margin-top: var(--s-4); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display);
  font-weight: var(--w-medium); text-wrap: balance;
}
.page__lead {
  margin-top: var(--s-5); max-width: 40ch; font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: var(--track-lead); color: var(--ink-2);
}
.page__meta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-small); color: var(--ink-3); }
.page__meta a { color: var(--ink); }
.nowrap { white-space: nowrap; }
.lead { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: var(--track-lead); color: var(--ink-2); }

/* Section blocks on the plan: label column left, content right on wide screens. */
.block { margin-top: var(--section-y); }
.block__head { max-width: 46rem; margin-bottom: var(--s-7); }
.block__head h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--track-h2); font-weight: var(--w-medium); text-wrap: balance; }
.block__head p { margin-top: var(--s-4); max-width: var(--measure); color: var(--ink-2); }
.block__head a, .prose a { color: var(--ink); }
.prose p + p { margin-top: var(--s-3); }
.prose p { color: var(--ink-2); }

/* ---------- Trust Center: the core statement ---------- */
.core {
  position: relative; margin-top: clamp(48px, 2rem + 4vw, 104px);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5) var(--col-gap);
  padding: clamp(28px, 1rem + 3vw, 64px); border-radius: var(--r-m); box-shadow: var(--shadow-card);
}
.core::after { content: ""; position: absolute; inset: 14px; border: var(--hair) solid var(--rule); border-radius: var(--r-xs); pointer-events: none; }
.core__label {
  align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1;
}
.core__text { max-width: 34ch; font-size: var(--fs-h3); line-height: 1.22; letter-spacing: var(--track-h3); font-weight: var(--w-regular); text-wrap: pretty; }

/* ---------- Trust Center: the way of a dictation ---------- */
.flow { --flow-gap: clamp(48px, 1.5rem + 2.4vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--flow-gap); counter-reset: flow; }
.flow__step {
  --tile: var(--paper); --glyph: url(/assets/img/kit/glyph-desktop.svg);
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); padding-top: 72px; border-radius: var(--r-m); background: var(--tile); color: var(--ink);
  counter-increment: flow; min-height: 300px;
}
.flow__step:nth-child(2) { --tile: var(--tile-sky); --glyph: url(/assets/img/kit/glyph-waveform.svg); color: var(--on-tile); }
.flow__step:nth-child(3) { --tile: var(--tile-apricot); --glyph: url(/assets/img/kit/glyph-sparkle.svg); color: var(--on-tile); }
.flow__step:nth-child(4) { --tile: var(--accent); --glyph: url(/assets/img/kit/glyph-cursor.svg); color: var(--on-accent); }
.flow__step::before {
  content: counter(flow, decimal-leading-zero); position: absolute; top: var(--s-5); left: var(--s-5);
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label);
}
/* The black glyph sits bottom right of each tile (kit glyph as a mask, takes currentColor). */
.flow__step::after {
  content: ""; position: absolute; top: var(--s-5); right: var(--s-5); width: 36px; height: 36px; background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
}
.flow__step h3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: var(--track-h3); font-weight: var(--w-medium); hyphens: manual; overflow-wrap: break-word; }
.flow__step p { font-size: var(--fs-small); line-height: 1.45; }
.flow__step:not(:first-child) p { color: inherit; }
.flow__step:first-child p:not(.flow__where) { color: var(--ink-2); }
.flow__where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: var(--hair) solid currentColor; font-weight: var(--w-medium); }
.region {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  border: var(--hair) solid currentColor; font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.flow__step .region { background: color-mix(in srgb, var(--paper) 55%, transparent); }
/* The arrow to the next step, with what travels along it ("Audio", "Text"): a label over a black disc in the gap. */
.flow__step p.flow__out {
  position: absolute; z-index: 1; top: 50%; right: calc(-1 * var(--flow-gap) / 2); transform: translate(50%, -50%);
  display: grid; justify-items: center; gap: 6px; margin: 0;
  font-size: 10px; font-weight: var(--w-semibold); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1; color: var(--ink-3);
}
.flow__out::after {
  content: ""; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 4px var(--canvas);
}
.flow__out::before {
  content: ""; position: absolute; bottom: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; z-index: 1; background: var(--canvas);
  -webkit-mask: url(/assets/img/kit/glyph-arrow-right.svg) center / contain no-repeat; mask: url(/assets/img/kit/glyph-arrow-right.svg) center / contain no-repeat;
}
.flow__base {
  margin-top: var(--col-gap); display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5); border-radius: var(--r-m); border: var(--hair) dashed var(--field); color: var(--ink-2); font-size: var(--fs-small);
}
.flow__base .region { flex: none; margin-top: 1px; background: var(--tile-sage); color: var(--on-tile); border-color: transparent; }
.flow__base b { color: var(--ink); }
.flow__note { margin-top: var(--s-4); max-width: 80ch; font-size: var(--fs-micro); color: var(--ink-3); }

/* ---------- Trust Center: what Klar does not do ---------- */
.nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.nots li { padding: var(--s-6) var(--s-6) var(--s-6); border-radius: var(--r-m); background: var(--paper); }
.nots h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--track-h3); font-weight: var(--w-semibold); }
/* A coral disc with a black cross – "no" without colour alone (the heading says it). */
.nots h3::before {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: no-repeat center / 18px 18px var(--tile-coral);
  background-image: linear-gradient(45deg, transparent 44%, var(--on-tile) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--on-tile) 44% 56%, transparent 56%);
}
.nots p { margin-top: var(--s-3); padding-left: calc(36px + var(--s-3)); color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- Trust Center: history, export, AVV ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.fact { display: flex; flex-direction: column; padding: var(--s-6); border-radius: var(--r-m); background: var(--paper); }
.fact h3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: var(--track-h3); font-weight: var(--w-medium); padding-bottom: var(--s-4); margin-bottom: var(--s-2); border-bottom: var(--hair) solid var(--rule-2); }
.fact p, .fact li { color: var(--ink-2); font-size: var(--fs-small); }
.fact p { margin-top: var(--s-3); }
.fact ul { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; }
.fact li { padding: var(--s-2) 0; border-bottom: var(--hair) solid var(--rule); }
.fact li b { color: var(--ink); }
.fact a { color: var(--ink); }

/* ---------- Trust Center: sub-processors ---------- */
.sp { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--r-m); background: var(--paper); overflow: hidden; font-size: var(--fs-small); }
.sp caption { caption-side: bottom; padding: var(--s-3) 2px 0; text-align: left; font-size: var(--fs-micro); color: var(--ink-3); }
.sp th, .sp td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; border-top: var(--hair) solid var(--rule); }
.sp thead th { border-top: 0; font-size: var(--fs-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); }
.sp tbody th { font-weight: var(--w-semibold); color: var(--ink); min-width: 9rem; }
.sp td { color: var(--ink-2); }
.sp tbody tr:hover > * { background: var(--paper-2); }
.zone { display: inline-flex; align-items: baseline; gap: var(--s-2); color: var(--ink); font-weight: var(--w-medium); }
.zone::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tile-steel); transform: translateY(1px); }
.zone--eu::before { background: var(--tile-sage); }
.zone--us::before { background: var(--tile-coral); }
.zone--mixed::before { background: linear-gradient(90deg, var(--tile-sage) 50%, var(--tile-coral) 50%); }

/* ---------- Buttons on sub pages (cancel form, 404) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-6);
  border: var(--hair) solid transparent; border-radius: var(--r-pill); background: var(--ink); color: var(--canvas);
  font: var(--w-medium) var(--fs-small)/1 var(--font-sans); letter-spacing: var(--track-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), transform var(--dur-m) var(--ease-spring);
}
.btn--big { min-height: 56px; font-size: var(--fs-body); }
.btn--ink:hover, .btn--cancel:hover { background: color-mix(in srgb, var(--ink) 86%, var(--canvas)); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--field); }
.btn--ghost:hover { background: var(--canvas-2); border-color: var(--ink); }
.btn:focus-visible { border-radius: var(--r-pill); }

/* ---------- Cancellation ---------- */
.cancel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8) var(--col-gap); align-items: start; }
.cancel__intro { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + var(--s-6)); padding-right: var(--s-6); }
.cancel__intro .eyebrow { display: block; }
.cancel__intro h1 { margin-top: var(--s-4); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-medium); }
.cancel__intro .page__lead { max-width: 30ch; }
.cancel__facts { margin-top: var(--s-7); border-top: var(--hair) solid var(--rule-2); counter-reset: fact; }
.cancel__facts li { position: relative; padding: var(--s-4) 0 var(--s-4) var(--s-8); border-bottom: var(--hair) solid var(--rule-2); color: var(--ink-2); font-size: var(--fs-small); counter-increment: fact; }
.cancel__facts li::before {
  content: counter(fact, decimal-leading-zero); position: absolute; left: 0; top: var(--s-4);
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); color: var(--ink); line-height: 1.6;
}
.form-card { position: relative; padding: clamp(24px, 1rem + 2.6vw, 56px); border-radius: var(--r-m); box-shadow: var(--shadow-card); }
.step-label { font-size: var(--fs-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.form-card h2 { margin-top: var(--s-3); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--track-h2); font-weight: var(--w-medium); }
.form-card h2:focus { outline: none; box-shadow: none; }
.form-card__text { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-small); }
.fields { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field__label { font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--ink); }
.field__label small { font-size: var(--fs-small); font-weight: var(--w-regular); color: var(--ink-3); }
.field input[type="email"], .field input[type="text"], .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--r-s); border: var(--hair) solid var(--field);
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-body);
  transition: border-color var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out);
}
.field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-text); }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--ink); box-shadow: 0 0 0 6px var(--focus-halo); border-radius: var(--r-s); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field [aria-invalid="true"] { border-color: var(--negative); border-width: 2px; }
.field__hint { font-size: var(--fs-micro); color: var(--ink-3); }
.field__error { font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--negative); }
.field__error:empty { display: none; }
fieldset.field { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
fieldset.field legend { padding: 0; margin-bottom: var(--s-2); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.choice {
  position: relative; display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-s);
  border: var(--hair) solid var(--field); background: var(--paper); cursor: pointer;
  transition: border-color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out);
}
.choice:hover { border-color: var(--ink); }
.choice input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.choice span { display: grid; gap: 2px; font-weight: var(--w-medium); font-size: var(--fs-small); }
.choice small { font-weight: var(--w-regular); font-size: var(--fs-micro); color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper-2); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-halo); }
.choice input:focus-visible { outline: none; box-shadow: none; }
.form-card__actions { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
.form-card__actions .btn { width: 100%; }
.form-error { padding: var(--s-3) var(--s-4); border-radius: var(--r-s); border: var(--hair) solid var(--negative); background: color-mix(in srgb, var(--negative) 8%, var(--paper)); color: var(--ink); font-size: var(--fs-small); }
.form-error:empty { display: none; }
.summary { margin: var(--s-6) 0 0; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); border-top: var(--hair) solid var(--rule-2); }
.summary dt, .summary dd { margin: 0; padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--rule-2); }
.summary dt { font-size: var(--fs-small); color: var(--ink-3); padding-right: var(--s-4); }
.summary dd { color: var(--ink); font-weight: var(--w-medium); overflow-wrap: anywhere; white-space: pre-line; }
.edit-link { justify-self: center; font-size: var(--fs-small); color: var(--ink-2); }
.edit-link:hover { color: var(--ink); }
.btn--cancel[aria-busy="true"] { opacity: .7; cursor: progress; }
.receipt__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.receipt__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[data-step="done"] h2, [data-step="confirmed"] h2 { margin-top: var(--s-5); }
.receipt__time { margin-top: var(--s-4); font-size: var(--fs-body); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; color: var(--ink); }
.receipt__save { margin-top: var(--s-6); padding: var(--s-4); border-radius: var(--r-s); background: var(--accent-soft); color: var(--ink); font-weight: var(--w-medium); }
.receipt__statement { margin-top: var(--s-3); color: var(--ink); }
.receipt__brand { font-weight: var(--w-semibold); letter-spacing: -.02em; }
.print-only { display: none; }
.cancel__direct { display: grid; gap: var(--s-3); }
.cancel__direct .form-card__text { margin-top: 0; font-size: var(--fs-micro); }
/* The form works without JavaScript (E7h): step 1 posts straight to the API with "jetzt kündigen" and the
   API answers with a printable receipt. kuendigen.js adds .is-ready once it has taken over – then step 1
   ends with "Weiter" and the confirmation step follows on this page. */
[data-cancel]:not(.is-ready) [data-next],
[data-cancel].is-ready [data-direct] { display: none !important; }
/* JavaScript is on, but kuendigen.js has not taken over yet: no flash of the direct path or the reason
   field. If the script never arrives (blocked, network), the direct path shows up after 4 s. */
html.js [data-cancel]:not(.is-ready) [data-direct] { animation: cancel-fallback 0s 4s both; }
html.js [data-cancel]:not(.is-ready) [data-reason] { display: none; }
@keyframes cancel-fallback { from { visibility: hidden; } to { visibility: visible; } }
noscript .form-card__text { margin-top: var(--s-5); font-size: var(--fs-micro); }
noscript a { color: var(--ink); }

/* ---------- Changelog ---------- */
.log { margin-top: clamp(48px, 2rem + 4vw, 104px); display: grid; gap: var(--col-gap); }
.release {
  position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-4) var(--col-gap);
  padding: clamp(24px, 1rem + 2.4vw, 48px); border-radius: var(--r-m);
}
.release > :not(.release__head) { grid-column: 2; }
.release__head { grid-column: 1; grid-row: 1 / span 20; align-self: start; display: grid; gap: var(--s-3); justify-items: start; }
.release h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--track-h2); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.release time { font-family: var(--font-hand); font-size: var(--fs-hand); line-height: 1; color: var(--ink-2); }
.release h3 {
  justify-self: start; display: inline-flex; align-items: center; height: 24px; margin-top: var(--s-3); padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1;
  background: var(--tile-sky); color: var(--on-tile);
}
.release h3:first-of-type { margin-top: 0; }
.release h3:nth-of-type(3n + 1) { background: var(--accent); color: var(--on-accent); }
.release h3:nth-of-type(3n + 3) { background: var(--tile-apricot); }
.release ul { margin: 0; padding: 0; list-style: none; display: grid; color: var(--ink-2); border-top: var(--hair) solid var(--rule-2); }
.release li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6); border-bottom: var(--hair) solid var(--rule-2); }
.release li::before { content: ""; position: absolute; left: 2px; top: calc(var(--s-3) + .62em); width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.release b, .release strong { color: var(--ink); }
.release code { color: var(--ink); }
.feed { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: var(--hair) solid var(--field); color: var(--ink); text-decoration: none; font-weight: var(--w-medium); }
.feed:hover { background: var(--canvas-2); border-color: var(--ink); }
.feed svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- Legal texts (Impressum, Datenschutz, AGB): typography only, wording untouched ---------- */
main.legal { max-width: calc(var(--max) * 8 / 12 + var(--page-x)); }
main.legal > .eyebrow { display: block; }
main.legal > h1 {
  margin: var(--s-4) 0 clamp(40px, 2rem + 3vw, 88px); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-medium);
}
/* Everything after the head sits on one white sheet: the box-shadow column trick keeps the markup flat. */
main.legal > :not(.eyebrow, h1, .notfound) {
  position: relative; margin: 0; padding-inline: clamp(20px, .5rem + 3vw, 64px);
  background: var(--paper); max-width: none;
}
main.legal > h1 + * { padding-top: clamp(28px, 1rem + 3vw, 64px); border-radius: var(--r-m) var(--r-m) 0 0; }
main.legal > :last-child:not(.notfound) { padding-bottom: clamp(28px, 1rem + 3vw, 64px); border-radius: 0 0 var(--r-m) var(--r-m); }
main.legal > h2 {
  padding-top: var(--s-8); padding-bottom: var(--s-3); font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--track-h3); font-weight: var(--w-semibold);
}
main.legal > h1 + h2 { padding-top: clamp(28px, 1rem + 3vw, 64px); }
main.legal > h2::before {
  content: ""; display: block; height: var(--hair); margin-bottom: var(--s-5); background: var(--rule-2);
}
main.legal > h1 + h2::before { display: none; }
main.legal > h3 { padding-top: var(--s-5); padding-bottom: var(--s-2); font-size: var(--fs-body); font-weight: var(--w-semibold); }
main.legal > p, main.legal > ul, main.legal > ol, main.legal > table, main.legal > dl { color: var(--ink-2); padding-bottom: var(--s-3); }
main.legal > p { max-width: none; }
main.legal > p > *, main.legal > ul > * { max-width: 72ch; }
main.legal > ul, main.legal > ol { padding-left: calc(clamp(20px, .5rem + 3vw, 64px) + 1.2em); display: grid; gap: var(--s-2); }
main.legal > ul li::marker { color: var(--ink-3); }
main.legal a { color: var(--ink); }
main.legal b, main.legal strong { color: var(--ink); }
.notfound__tiles img { width: 100%; height: auto; }
main.legal > div { color: var(--ink-2); padding-bottom: var(--s-3); }
main.legal > div > * + * { margin-top: var(--s-3); }
main.legal > div h3 { padding-top: var(--s-3); font-size: var(--fs-body); font-weight: var(--w-semibold); color: var(--ink); }
main.legal > div ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.draft-tag {
  display: inline-flex; align-items: center; height: 22px; margin-left: var(--s-2); padding: 0 9px; border-radius: var(--r-pill); vertical-align: .2em;
  font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1;
  color: var(--on-accent); background: var(--accent); white-space: nowrap;
}

/* ---------- 404 ---------- */
.notfound { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8) var(--col-gap); align-items: end; }
.notfound h1 { margin-top: var(--s-4); font-size: min(var(--fs-display), 12.5vw); line-height: 1.04; letter-spacing: var(--track-hero); font-weight: var(--w-medium); text-wrap: balance; }
.notfound h1 em { background: none; padding: 0; color: var(--ink-3); }
.notfound h1 s { text-decoration-thickness: .08em; color: var(--ink-3); }
.notfound .caret { display: inline-block; width: .06em; height: .8em; margin-left: .06em; vertical-align: -.04em; background: var(--ink); }
/* Blinks four times (≈ 4.4 s, under the 5 s of WCAG 2.2.2), then stays visible. */
@media (prefers-reduced-motion: no-preference) { .notfound .caret { animation: nf-caret 1.1s steps(1) 4; } }
@keyframes nf-caret { 50% { opacity: 0; } }
.notfound__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.notfound__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 360px; justify-self: end; width: 100%; }
.notfound__tiles svg { width: 100%; height: auto; aspect-ratio: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step:nth-child(2) p.flow__out { top: auto; bottom: calc(-1 * var(--flow-gap) / 2); right: auto; left: 50%; transform: translate(-50%, 50%); grid-auto-flow: column; align-items: center; }
  .flow__step:nth-child(2) .flow__out::before { bottom: 9px; left: auto; right: 9px; margin: 0; transform: rotate(90deg); }
  .facts { grid-template-columns: 1fr 1fr; }
  .core { grid-template-columns: 1fr; }
  .release { grid-template-columns: 1fr; }
  .release > :not(.release__head), .release__head { grid-column: 1; grid-row: auto; }
  .release__head { grid-auto-flow: column; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-3); }
}
@media (max-width: 900px) {
  .cancel { grid-template-columns: 1fr; }
  .cancel__intro { position: static; padding-right: 0; }
  .notfound { grid-template-columns: 1fr; }
  .notfound__tiles { justify-self: start; max-width: 280px; }
}
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; }
  .flow__step { min-height: 0; }
  .flow__step p.flow__out, .flow__step:nth-child(2) p.flow__out { top: auto; right: auto; left: var(--s-5); bottom: calc(-1 * var(--flow-gap) / 2); transform: translateY(50%); grid-auto-flow: column; align-items: center; }
  .flow__out::before, .flow__step:nth-child(2) .flow__out::before { bottom: 9px; left: auto; right: 9px; margin: 0; transform: rotate(90deg); }
  .nots, .facts { grid-template-columns: 1fr; }
  .nots p { padding-left: 0; }
  .choices { grid-template-columns: 1fr; }
  .flow__base { flex-direction: column; gap: var(--s-3); }
  .summary { grid-template-columns: 1fr; }
  .summary dt { padding: var(--s-3) 0 0; border-bottom: 0; }
  .summary dd { padding-top: 2px; }
}

/* The subprocessor table needs ~950 px for its five columns: below that it turns into one card per
   provider (two per row on tablets), so the "Hinweis" column (transfer basis) is never cut off. */
@media (max-width: 1080px) {
  .sp, .sp tbody, .sp tr, .sp th, .sp td { display: block; }
  .sp { display: flex; flex-direction: column; background: none; border-radius: 0; overflow: visible; }
  .sp caption { display: block; order: 2; }
  .sp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sp tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .sp tr { min-width: 0; padding: var(--s-4); border-radius: var(--r-m); background: var(--paper); }
  .sp tbody tr:hover > * { background: none; }
  .sp th, .sp td { padding: 3px 0; border-top: 0; overflow-wrap: break-word; }
  .sp tbody th { min-width: 0; font-size: var(--fs-h4); padding-bottom: var(--s-2); }
  .sp td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: var(--fs-micro); }
  .sp td:empty { display: none; }
}
@media (max-width: 760px) { .sp tbody { grid-template-columns: minmax(0, 1fr); } }
/* Phones: the release date (Caveat) goes under the version. Side by side, the wider fallback font
   wrapped the heading until Caveat arrived – a visible layout shift. */
@media (max-width: 479px) { .release__head { grid-auto-flow: row; gap: 2px; } }

/* ---------- Print: the cancellation receipt ---------- */
@media print {
  .k-nav, .k-footer, .nav, .footer, .skip, .no-print, .cancel__intro { display: none !important; }
  main.page::before, main.legal::before { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .page { padding: 0; }
  .cancel { display: block; }
  .form-card { border: 1px solid #999; box-shadow: none; background: #fff; }
  .summary dt { color: #333; }
  .receipt__save { background: none; border: 1px solid #999; }
  /* Nav and footer are hidden – the receipt names Klar itself (§ 312k Abs. 4 BGB). */
  .print-only { display: block !important; }
}

/* ---------- Trust Center head: six tiles with privacy glyphs (decorative) ---------- */
.page__head--art { position: relative; max-width: none; padding-right: min(40%, 520px); }
.tc-art {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(36%, 460px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tc-tile { position: relative; display: block; aspect-ratio: 1; }
.tc-tile__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-tile__glyph { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; transform: translate(-50%, -50%); color: var(--on-tile); }
.tc-art__label { position: absolute; font-size: var(--fs-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.tc-art__label--tl { left: 0; top: -28px; }
.tc-art__label--br { right: 0; bottom: -28px; }
.tc-art::before, .tc-art::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--grid-dot); }
.tc-art::before { left: -3px; top: -3px; }
.tc-art::after { right: -3px; bottom: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .tc-tile { animation: tc-in var(--dur-l) var(--ease-klar) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
  .tc-tile:nth-child(2) { --i: 1; } .tc-tile:nth-child(3) { --i: 2; } .tc-tile:nth-child(4) { --i: 3; } .tc-tile:nth-child(5) { --i: 4; } .tc-tile:nth-child(6) { --i: 5; }
}
@keyframes tc-in { from { opacity: 0; transform: translateY(16px) scale(.92); } }
@media (max-width: 900px) {
  .page__head--art { padding-right: 0; display: flex; flex-direction: column; }
  .tc-art { order: 9; position: relative; top: auto; right: auto; transform: none; width: min(70%, 300px); margin: var(--s-9) 0 0 auto; }
}