/* Klar – trust pages: /sicherheit, /kuendigen, /changelog and the legal drafts.
   Builds on the tokens and components in site.css; never loaded on the landing page. */

.nav__back { font-size: .9375rem; color: var(--text-2); text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.nav__back:hover { background: var(--bg-2); color: var(--text); }
.nav__actions--sub { margin-left: auto; }

/* ---------- Page frame ---------- */
.page { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(72px, 9vw, 120px); }
.page__head { max-width: 860px; }
.page__head h1 { margin-top: 18px; font: 400 clamp(2.75rem, 7vw, 5.5rem)/.98 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.page__head h1 em { color: var(--text); }
.page__lead { margin-top: 22px; max-width: 58ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--text-2); }
.page__meta { margin-top: 14px; font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text-3); }
.page__meta a { color: inherit; text-underline-offset: 3px; }
.block { margin-top: clamp(56px, 8vw, 104px); }
.block__head { max-width: 760px; margin-bottom: 28px; }
.block__head h2 { font: 400 clamp(2rem, 4vw, 3.25rem)/1.02 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.block__head p { margin-top: 14px; color: var(--text-2); max-width: 62ch; }
.block__head a, .prose a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.block__head a:hover, .prose a:hover { text-decoration-color: var(--signal); }
.prose p + p { margin-top: 12px; }
.prose p { color: var(--text-2); }

/* ---------- Core statement ---------- */
.core { margin-top: clamp(36px, 5vw, 56px); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: var(--invert-bg); color: var(--invert-text); }
.core__label { font: 500 .75rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--invert-text-2); }
.core__text { margin-top: 16px; max-width: 40ch; font: 400 clamp(1.5rem, 2.8vw, 2.25rem)/1.25 var(--font-display); text-wrap: pretty; }

/* ---------- Data flow ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 72px; counter-reset: flow; }
.flow__step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); counter-increment: flow; min-width: 0; }
.flow__step::before { content: counter(flow, decimal-leading-zero); font: 500 .75rem/1 var(--font-mono); color: var(--text-3); }
.flow__step h3 { font: 400 1.625rem/1.05 var(--font-display); letter-spacing: -.01em; }
.flow__step p { font-size: .9375rem; color: var(--text-2); }
.flow__where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: .8125rem; color: var(--text-3); }
.region { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--text); background: var(--bg); white-space: nowrap; }
.region--eu { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.region--us { border-color: color-mix(in srgb, var(--signal) 55%, transparent); background: var(--signal-soft); }
.region--mixed, .region--global { background: var(--bg-2); }
/* The arrow to the next step, with what travels along it ("Audio", "Text"). */
.flow__out { position: absolute; top: 50%; left: 100%; width: 72px; transform: translateY(-50%); display: grid; justify-items: center; gap: 6px; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); z-index: 1; }
.flow__out::before { content: ""; width: 44px; height: 2px; border-radius: 2px; background: var(--text-3); grid-row: 2; }
.flow__out::after { content: ""; position: absolute; right: 9px; top: calc(50% + 4px); width: 7px; height: 7px; border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3); transform: rotate(45deg); }
.flow__out span { grid-row: 1; }
.flow__step--eu { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.flow__step--us { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); }
.flow__base { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 20px; border-radius: var(--r-m); border: 1px dashed var(--line-2); color: var(--text-2); font-size: .9375rem; }
.flow__base b { color: var(--text); font-weight: 600; }
.flow__note { margin-top: 14px; font-size: .875rem; color: var(--text-3); max-width: 80ch; }

/* ---------- What Klar does not do ---------- */
.nots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nots li { padding: 22px 24px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); }
.nots h3 { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.0625rem; }
.nots h3::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--signal); background: linear-gradient(135deg, transparent 45%, var(--signal) 45%, var(--signal) 55%, transparent 55%); }
.nots p { margin-top: 8px; color: var(--text-2); font-size: .9375rem; }

/* ---------- Facts (history, export, AVV) ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fact { padding: 24px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.fact h3 { font: 400 1.75rem/1.05 var(--font-display); }
.fact p, .fact li { color: var(--text-2); font-size: .9375rem; }
.fact p { margin-top: 10px; }
.fact ul { margin: 10px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.fact a { color: var(--text); text-underline-offset: 3px; }

/* ---------- Sub-processors ---------- */
.sp { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; font-size: .9375rem; }
.sp caption { caption-side: bottom; padding: 14px 4px 0; text-align: left; font-size: .8125rem; color: var(--text-3); }
.sp th, .sp td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.sp thead th { border-top: 0; font: 500 .6875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); }
.sp tbody th { font-weight: 600; color: var(--text); }
.sp td { color: var(--text-2); }
.zone { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text); font-weight: 520; }
.zone::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); transform: translateY(-1px); }
.zone--eu::before { background: var(--ok); }
.zone--us::before { background: var(--signal); }
.zone--mixed::before { background: linear-gradient(90deg, var(--ok) 50%, var(--signal) 50%); }

/* ---------- Cancel ---------- */
.cancel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cancel__intro h1 { margin-top: 18px; font: 400 clamp(2.75rem, 6vw, 5rem)/.98 var(--font-display); letter-spacing: -.03em; }
.cancel__intro h1 em { color: var(--text); }
.cancel__intro .page__lead { max-width: 40ch; }
.cancel fieldset.field legend { font: 600 .9375rem/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 7px; }
.cancel__facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.cancel__facts li { position: relative; padding-left: 28px; color: var(--text-2); }
.cancel__facts li::before { content: ""; position: absolute; left: 0; top: .25em; width: 3px; height: 1.1em; border-radius: 3px; background: var(--signal); }
.form-card { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.step-label { font: 500 .75rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.form-card h2 { margin-top: 12px; font: 400 clamp(2rem, 3.4vw, 2.75rem)/1.02 var(--font-display); letter-spacing: -.015em; }
.form-card h2:focus { outline: none; }
.form-card__text { margin-top: 10px; color: var(--text-2); }
.fields { display: grid; gap: 20px; margin-top: 26px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field__label { font-size: .9375rem; font-weight: 600; color: var(--text); }
.field__label small { font-weight: 450; color: var(--text-3); font-size: .875rem; }
.field input[type="email"], .field input[type="text"], .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: .8; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__hint { font-size: .8125rem; color: var(--text-3); }
.field__error { font-size: .875rem; font-weight: 560; color: var(--danger); }
.field__error:empty { display: none; }
fieldset.field { margin: 0; padding: 0; border: 0; }
fieldset.field legend { padding: 0; margin-bottom: 7px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.choice input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--text); }
.choice span { display: grid; gap: 2px; font-weight: 560; }
.choice small { font-weight: 400; font-size: .8125rem; color: var(--text-3); }
.choice:has(input:checked) { border-color: var(--text); background: var(--surface-2); box-shadow: var(--shadow-1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }
.form-card__actions { margin-top: 28px; display: grid; gap: 14px; }
.form-card__actions .btn { width: 100%; }
.form-error { padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--text); font-size: .9375rem; }
.form-error:empty { display: none; }
.summary { margin: 24px 0 0; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); border-top: 1px solid var(--line); }
.summary dt, .summary dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary dt { font-size: .875rem; color: var(--text-3); padding-right: 16px; }
.summary dd { color: var(--text); font-weight: 560; overflow-wrap: anywhere; white-space: pre-line; }
.edit-link { justify-self: center; font-size: .875rem; color: var(--text-2); text-underline-offset: 3px; }
.edit-link:hover { color: var(--text); }
.btn--cancel { background: var(--text); color: var(--bg); }
.btn--cancel[aria-busy="true"] { opacity: .7; cursor: progress; }
.receipt__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.receipt__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.receipt__time { margin-top: 14px; font: 500 .9375rem/1.4 var(--font-mono); color: var(--text); }
.receipt__save { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--signal-soft); border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); color: var(--text); font-weight: 560; }
.receipt__statement { margin-top: 10px; color: var(--text); }
.receipt__brand { font-weight: 700; letter-spacing: -.02em; }
.print-only { display: none; }
.cancel__direct { display: grid; gap: 12px; }
.cancel__direct .form-card__text { margin-top: 0; font-size: .875rem; }
/* 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: 18px; font-size: .875rem; }
noscript a { color: var(--text); text-underline-offset: 3px; }

/* ---------- Changelog ---------- */
.log { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 20px; max-width: 900px; }
.release { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.release__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.release h2 { font: 400 clamp(2rem, 3.6vw, 2.75rem)/1 var(--font-display); letter-spacing: -.015em; }
.release time { font: 500 .75rem/1 var(--font-mono); color: var(--text-3); }
.release h3 { margin: 22px 0 8px; font: 500 .75rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.release ul { margin: 0; padding-left: 1.15em; display: grid; gap: 7px; color: var(--text-2); }
.release > ul { margin-top: 16px; }
.release li::marker { color: var(--signal); }
.release b, .release strong { color: var(--text); font-weight: 600; }
.release code { font: 500 .8125em/1 var(--font-mono); padding: 2px 6px; border-radius: 6px; background: var(--bg-2); color: var(--text); overflow-wrap: anywhere; }
.feed { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); text-underline-offset: 3px; }
.feed svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Legal drafts ---------- */
.draft-tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; vertical-align: 2px; font: 500 .6875rem/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text); background: var(--signal-soft); border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); white-space: nowrap; }
.legal ul { color: var(--text-2); padding-left: 1.2em; display: grid; gap: 6px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 10px; }
.legal a { color: var(--text); text-underline-offset: 3px; }
.legal h3 { margin: 22px 0 6px; font-weight: 600; font-size: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
  .flow__step:nth-child(2) .flow__out { top: auto; bottom: -56px; left: 50%; width: auto; height: 56px; transform: translateX(-50%); }
  .flow__step:nth-child(2) .flow__out { grid-auto-flow: column; align-items: center; justify-items: start; gap: 10px; }
  .flow__step:nth-child(2) .flow__out::before { width: 2px; height: 34px; grid-row: 1; }
  .flow__step:nth-child(2) .flow__out::after { right: auto; left: -2.5px; top: auto; bottom: 10px; transform: rotate(135deg); }
  .flow__step:nth-child(2) .flow__out span { grid-row: 1; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .cancel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; gap: 52px; }
  .flow__out, .flow__step:nth-child(2) .flow__out { top: auto; bottom: -52px; left: 28px; width: auto; height: 52px; transform: none; grid-auto-flow: column; align-items: center; justify-items: start; gap: 10px; }
  .flow__out::before, .flow__step:nth-child(2) .flow__out::before { width: 2px; height: 30px; grid-row: 1; }
  .flow__out::after, .flow__step:nth-child(2) .flow__out::after { right: auto; left: -2.5px; top: auto; bottom: 10px; transform: rotate(135deg); }
  .nots, .facts { grid-template-columns: 1fr; }
  .choices { grid-template-columns: 1fr; }
  /* The table turns into one card per provider. */
  .sp, .sp tbody, .sp tr, .sp th, .sp td { display: block; }
  .sp { display: flex; flex-direction: column; border: 0; 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; gap: 10px; }
  .sp tr { padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); }
  .sp th, .sp td { padding: 3px 0; border-top: 0; }
  .sp tbody th { font-size: 1.0625rem; padding-bottom: 6px; }
  .sp td[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); font-size: .8125rem; }
  .sp td:empty { display: none; }
  .summary { grid-template-columns: 1fr; }
  .summary dt { padding: 12px 0 0; border-bottom: 0; }
  .summary dd { padding-top: 2px; }
}

/* ---------- Print: the cancellation receipt ---------- */
@media print {
  .nav, .footer, .skip, .no-print, .cancel__intro { display: none !important; }
  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; }
}