/*
 * legal.css: layout of the legal pages only (impressum, datenschutz, agb,
 * widerruf, kuendigen, kontakt). Needs css/site-controls.css.
 * Everything is scoped to body.page-legal. 25.09.2026.
 *
 * The owner's rule applies here too: no boxes, no pills, no doc-card; groups
 * come from 1 px hairlines and space, radius 3 px only on real controls.
 */

/* Body copy. preview-docs.css sets paragraphs in var(--muted), which reaches
   only 4.31:1 on #07070f. Legal pages are read, not skimmed, so the grey is
   raised to about 6.9:1 inside the content. Redefining the token (instead of
   colouring p and li) keeps .fine, .note and .state-line in charge of their
   own colours. */
body.page-legal .doc-main {
  --muted: #9494bb;
  --faint: #8585b0;
}

/* site-controls.css makes .field a grid; the hidden attribute must still win
   (reason field, date field, the withdrawal form before it is opened). */
body.page-legal [hidden] {
  display: none !important;
}

body.page-legal .doc-main h1 {
  margin-bottom: 8px;
}

body.page-legal .doc-updated {
  margin-bottom: 40px;
}

body.page-legal .lead {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
}

/* ---- two-language blocks ------------------------------------------------ */

/* Shown only when no script has chosen a language: in the mail attachment
   (no CSS at all) and with JavaScript off, both versions are on the page and
   this line says where the English one starts. */
html[data-lang] .block-label {
  display: none;
}

body.page-legal .block-label {
  margin: 0 0 8px;
  color: #8585b0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html:not([data-lang]) body.page-legal [data-lang-block="en"] {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
}

/* The first heading of a block sits right under the page head. */
body.page-legal [data-lang-block] > h2:first-child,
body.page-legal [data-lang-block] > .block-label + h2 {
  margin-top: 0;
}

body.page-legal .version-line {
  margin: 0 0 8px;
}

/* ---- terms: paragraph numbers and clauses ------------------------------- */

/* 26.09.2026 (second visual review): 44 px was exactly the width of a
   two-digit "§ 10", so from § 10 on the title touched the number. The width
   now counts in characters of the number's own monospace font: room for
   "§ 10" plus one character, every title on the same edge. */
body.page-legal .doc-main h2 .num {
  display: inline-block;
  min-width: 5ch;
  color: #8585b0;
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.8em;
  font-weight: 500;
}

body.page-legal .clauses {
  margin: 12px 0 20px;
  padding: 0;
  counter-reset: clause;
  list-style: none;
}

/* A list split by a table (§ 3) continues its numbering; start="2" keeps the
   right number in the mail attachment, where no CSS applies. */
body.page-legal .clauses[start="2"] {
  counter-reset: clause 1;
}

body.page-legal .clauses > li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 40px;
  counter-increment: clause;
}

body.page-legal .clauses > li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #8585b0;
  content: "(" counter(clause) ")";
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
  line-height: 1.85;
}

/* Price table: hairlines only, figures aligned. Three columns so it fits a
   375 px phone without scrolling. */
body.page-legal .price-table {
  width: 100%;
  max-width: 560px;
  margin: 16px 0 20px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

body.page-legal .price-table th,
body.page-legal .price-table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

body.page-legal .price-table thead th {
  border-bottom-color: var(--line-strong);
  color: var(--text);
  font-weight: 600;
}

body.page-legal .price-table td {
  color: var(--text);
  white-space: nowrap;
}

/* ---- model withdrawal form: a plain text block with a hairline on the left */

body.page-legal .model-form {
  margin: 16px 0 20px;
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
}

body.page-legal .model-form p {
  margin: 0 0 10px;
}

body.page-legal .model-form ul {
  margin: 0 0 10px;
  padding-left: 0;
  list-style: none;
}

body.page-legal .model-form li {
  margin: 0 0 8px;
}

/* ---- the refund confirmation (26.09.2026) -------------------------------
   Opened from the withdrawal receipt mail; one heading, one line, one button,
   then the result under a hairline like every receipt. */

body.page-legal .refund-confirm h2 {
  margin: 0 0 10px;
}

body.page-legal .refund-confirm .contract-actions {
  margin-top: 20px;
}

/* ---- the two contract forms (withdrawal, cancellation) ----------------- */

body.page-legal .contract-tool {
  margin: 0;
}

/* 25.09.2026: links land on anchors (footer "/widerruf#widerrufen", § links
   in mails, #kauf, #beta). The header is fixed, so without this margin the
   first line of the target (the 14-day line above the form) sits under it. */
body.page-legal .doc-main [id] {
  scroll-margin-top: calc(var(--header-height, 62px) + 24px);
}

/* A hairline only where text follows (the withdrawal instructions under
   the form); on the cancellation page the form ends the content. */
body.page-legal .contract-tool:not(:last-child) {
  margin-bottom: 44px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-strong);
}

body.page-legal .contract-tool > p:first-child {
  margin-top: 0;
}

/* 26.09.2026 (second visual review): the page's main button "Vertrag
   widerrufen" was a square outline from another kit; it is now the site's
   secondary button (the "Jetzt kaufen" of the Normal card), 46 px high. */
body.page-legal .contract-toggle.button {
  min-height: 46px;
  font-size: 15px;
  cursor: pointer;
}

/* 27.09.2026 (design review): while its form is open the button shows the
   opened state (the hover look, held), so it does not read as a second
   action waiting above "Widerruf bestätigen". */
body.page-legal .contract-toggle.button[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

/* 27.09.2026 (design review): one measure of 640 px. Lead, fields, receipt,
   notes and small print end on the same right edge. */
body.page-legal .contract-form {
  max-width: 640px;
  margin: 24px 0 0;
}

body.page-legal .contract-tool > .fine,
body.page-legal .contract-tool .note {
  max-width: 640px;
  text-wrap: pretty;
}

/* Labels like on /kaufen, /konto and the account pages: grey, 13 px, so the
   fields stand in front (5.8:1 on #07070f). The legend of a choice of two
   takes the same values further down. */
body.page-legal .contract-form .field > label {
  color: #8585b0;
  font-size: 13px;
  font-weight: 500;
}

body.page-legal .field input,
body.page-legal .field textarea,
body.page-legal .field select {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* The field an error belongs to: red edge and ring, also while it has the
   focus (the violet focus ring of site-controls.css won there). */
body.page-legal .field [aria-invalid="true"],
body.page-legal .field [aria-invalid="true"]:focus {
  border-color: #ff7b72;
  box-shadow: 0 0 0 1px #ff7b72;
}

/* contract-forms.js hangs the error line into the field it belongs to; one
   without a field (bot check, server) stays above the button. */
body.page-legal .contract-form .field > .note {
  margin: 0;
}

body.page-legal .contract-form > .note.is-error:not(:empty) {
  margin: 0 0 12px;
}

/* Order number or activation code in the monospace of the receipt, so 0 and
   O, 1 and I can be told apart while typing. */
body.page-legal .field input[name="contract_reference"] {
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 14.5px;
  font-variant-ligatures: none;
  letter-spacing: 0.02em;
}

/* ---- choice of two (cancellation page): the switch of the house ----------
   27.09.2026 (design review): two rows of text tabs under each other read
   like two menus. Now the two-way switch of /kaufen: one frame, the chosen
   half filled. The radios stay real radios, so arrow keys work. Both
   switches share one width, in both languages. */
body.page-legal .contract-form .choice {
  gap: 0;
  margin: 0 0 18px;
  border-bottom: 0;
}

body.page-legal .contract-form .choice > legend:not(.visually-hidden) {
  margin: 0 0 6px;
  color: #8585b0;
  font-size: 13px;
  font-weight: 500;
}

body.page-legal .choice-set {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 360px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-button, 12px);
  background: rgba(255, 255, 255, 0.02);
}

body.page-legal .choice-set label {
  z-index: 1;
  display: flex;
  margin: 0;
}

body.page-legal .choice-set label > span {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  font-size: 14.5px;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}

body.page-legal .choice-set input:checked + span {
  background: rgba(108, 99, 255, 0.28);
}

/* Where the browser knows :has(), the fill slides from one half to the
   other like the thumb of the billing switch. */
@supports selector(:has(a)) {
  body.page-legal .choice-set::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 9px;
    background: rgba(108, 99, 255, 0.28);
    content: "";
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  body.page-legal .choice-set:has(label:last-child input:checked)::before {
    transform: translateX(100%);
  }

  body.page-legal .choice-set input:checked + span {
    background: transparent;
  }

  /* Keyboard focus frames the whole switch, as on /kaufen; a frame around
     one half would sit on the edge of the switch. */
  body.page-legal .choice-set:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  body.page-legal .choice-set input:focus-visible + span {
    outline: 0;
  }
}

body.page-legal .contract-form .field-hint {
  margin: 0;
  color: #8585b0;
  font-size: 13px;
}

body.page-legal .contract-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 6px;
}

/* 27.09.2026 (design review): the one main action of the page ("Widerruf
   bestätigen", "jetzt kündigen", "Rückzahlung jetzt starten") is the filled
   button of the house, as on /konto: 48 px, inner light edge, no glow. */
body.page-legal .contract-actions .btn[type="submit"],
body.page-legal .contract-actions .btn[data-refund-go] {
  min-height: 48px;
  border-color: transparent;
  background: var(--grad);
  background-origin: border-box;
  color: var(--white);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(6, 10, 30, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.page-legal .contract-actions .btn[type="submit"]:hover,
body.page-legal .contract-actions .btn[type="submit"]:focus-visible,
body.page-legal .contract-actions .btn[data-refund-go]:hover,
body.page-legal .contract-actions .btn[data-refund-go]:focus-visible {
  border-color: transparent;
  background: linear-gradient(135deg, #7d75ff, #2bdcff);
  background-origin: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}

body.page-legal .contract-actions .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* "jetzt kündigen" is shorter than the waiting text ("Einen Moment …",
   170 px), so the button grew while it waited. 172 px holds both, in both
   languages; on a phone the button is as wide as the form anyway. */
@media (min-width: 681px) {
  body.page-legal .contract-actions .btn[type="submit"] {
    min-width: 172px;
  }
}

/* Reached through the refund link with the withdrawal form opened as well:
   "Rückzahlung jetzt starten" is the main action, so the submit button of
   the form below stays the neutral button while that one is on the page
   (one filled button per page). Without :has() both stay filled. */
@supports selector(:has(a)) {
  body.page-legal .refund-confirm:not([hidden]):has(.contract-actions:not([hidden])) ~ .contract-tool .contract-actions .btn[type="submit"] {
    min-height: 46px;
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.03);
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
  }

  body.page-legal .refund-confirm:not([hidden]):has(.contract-actions:not([hidden])) ~ .contract-tool .contract-actions .btn[type="submit"]:hover,
  body.page-legal .refund-confirm:not([hidden]):has(.contract-actions:not([hidden])) ~ .contract-tool .contract-actions .btn[type="submit"]:focus-visible {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
  }
}

/* The outline buttons of site-controls.css ("Seite drucken oder speichern")
   have no transform in their transition; pressing takes 150 ms here too. */
body.page-legal .contract-tool .btn {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    box-shadow 150ms ease, opacity 150ms ease, transform 150ms ease;
}

/* Pressed: every button of the two forms gives way by 1 px. The filled
   buttons are named again, because their hover rule above is more specific
   than the general one and a pressed button is always hovered as well. */
body.page-legal .contract-tool .btn:active,
body.page-legal .contract-toggle.button:active,
body.page-legal .contract-actions .btn[type="submit"]:active,
body.page-legal .contract-actions .btn[data-refund-go]:active {
  transform: translateY(1px);
}

/* Waiting for the server: paler, the width held (contract-forms.js and the
   minimum width above), and still reachable (the script ignores a second press). Stays behind the
   hover and pressed rules, so waiting wins in every state. */
body.page-legal .contract-actions .btn[aria-busy="true"],
body.page-legal .contract-actions .btn[aria-busy="true"]:hover,
body.page-legal .contract-actions .btn[aria-busy="true"]:focus-visible,
body.page-legal .contract-actions .btn[aria-busy="true"]:active {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* 27.09.2026 (design review): the acknowledgement of receipt is the
   strongest statement of the block, clearly above the rows of the list. */
body.page-legal .contract-tool .state-line {
  max-width: 640px;
  margin-top: 24px;
  padding: 16px 0;
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  /* Lines of even length: no address alone on the last line. */
  text-wrap: balance;
}

/* The result of the refund ends the section, whose own hairline follows;
   a second one right above it would only double the rule. Its sentences are
   short: evened out lines broke "E-Mail" at its hyphen, so these lines fill
   up and only avoid a lone last word. */
body.page-legal .refund-confirm .state-line {
  padding-bottom: 0;
  border-bottom: 0;
  text-wrap: pretty;
}

/* The receipt gets focus from the script so screen readers read it; it is
   not a control, so no focus frame around the text. */
body.page-legal .contract-tool .state-line:focus {
  outline: none;
}

/* Focusing the receipt scrolls it into view; keep it clear of the fixed
   header instead of tucked underneath it. */
body.page-legal .contract-tool .state-line {
  scroll-margin-top: calc(var(--header-height) + 32px);
}

/* The reference and the time of day ("um 23:54 Uhr") stay in one piece. */
body.page-legal .receipt-ref,
body.page-legal .receipt-time {
  white-space: nowrap;
}

/* JetBrains Mono comes in 400 and 500 only; in the semibold status line the
   browser would thicken it artificially. */
body.page-legal .state-line .receipt-ref {
  font-weight: 500;
}

body.page-legal .receipt-mail {
  overflow-wrap: anywhere;
}

body.page-legal .contract-tool .state-line + .note {
  margin-top: 12px;
}

/* 25.09.2026: the receipt under the status line lists every entered value
   (§ 312k(3) BGB asks that the declaration can be stored with date and
   time). Plain hairline rows, like every other list of facts. */
body.page-legal .contract-tool .receipt {
  max-width: 640px;
  margin-top: 20px;
}

/* Right under the status line, whose lower hairline then opens the list;
   a second line directly below it would only double the rule. */
body.page-legal .contract-tool .state-line + .receipt {
  margin-top: 0;
  border-top: 0;
}

/* "Save this page" after a failed confirmation mail is an instruction, not
   small print: normal text colour, on the edge of the receipt. */
body.page-legal .contract-tool .receipt + .note {
  margin-top: 16px;
  color: var(--text);
  font-size: 15px;
}

/* Room for the longest label ("Bestellnummer oder Aktivierungscode") on one
   line, so every row of the receipt has the same height. */
@media (min-width: 681px) {
  body.page-legal .contract-tool .receipt > div {
    grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  }
}

/* Message and reason keep the line breaks the customer typed. */
body.page-legal .receipt dd.multiline {
  white-space: pre-wrap;
}

/* The bot check widget draws its own frame (Cloudflare's iframe, as wide as
   the fields, 65 px high). The box only reserves its height so the button
   below does not jump when the widget appears. line-height 0, because the
   iframe stands on a text line, whose room below the baseline made the box
   7 px higher than the widget. */
body.page-legal .turnstile-box {
  min-height: 65px;
  line-height: 0;
}

body.page-legal .contract-after {
  margin-top: 16px;
}

/* ---- rows (contact page) -------------------------------------------------- */

body.page-legal .rows {
  margin: 8px 0 0;
  border-top: 1px solid var(--line-strong);
}

body.page-legal .rows > section {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

body.page-legal .doc-main .rows h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

body.page-legal .rows p {
  margin: 0 0 6px;
}

body.page-legal .rows p:last-child {
  margin-bottom: 0;
}

/* Links in running text are underlined, so they do not rely on colour
   alone. */
body.page-legal .doc-main p a,
body.page-legal .doc-main li a,
body.page-legal .doc-main dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.page-legal .doc-main a:hover,
body.page-legal .doc-main a:focus-visible {
  color: #8f88ff;
}

body.page-legal .doc-main address {
  font-style: normal;
}

/* 27.09.2026 (design review): a link inside the two form blocks is a text
   action next to the main button, so it takes the quiet text link of the
   shop pages (light, thin pale underline) instead of the accent colour. */
body.page-legal .contract-tool p a {
  color: var(--text);
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

body.page-legal .contract-tool p a:hover,
body.page-legal .contract-tool p a:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

/* Touch: the same link is about 44 px high to the finger. Vertical padding
   on an inline box moves nothing on the page. */
@media (pointer: coarse) {
  body.page-legal .contract-tool p a {
    padding-block: 14px;
  }
}

/* What opens under its trigger fades in over 200 ms (form, extra field,
   error line, receipt, result), so the eye finds what has been added. The
   hidden attribute and the script stay as they are: an animation starts by
   itself when an element leaves display: none. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ab-drop {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  body.page-legal .contract-toggle + .contract-form:not([hidden]),
  body.page-legal .contract-form [data-show-when]:not([hidden]),
  body.page-legal .contract-form .note.is-error:not(:empty),
  body.page-legal .contract-tool .state-line:not([hidden]),
  body.page-legal .contract-tool .receipt:not([hidden]),
  body.page-legal .contract-tool .receipt + .note:not([hidden]),
  body.page-legal .contract-after:not([hidden]) {
    animation: ab-drop 200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-legal .contract-tool .btn:active,
  body.page-legal .contract-toggle.button:active,
  body.page-legal .contract-actions .btn[type="submit"]:active,
  body.page-legal .contract-actions .btn[data-refund-go]:active {
    transform: none;
  }
}

@media (max-width: 680px) {
  body.page-legal .lead {
    font-size: 16px;
  }

  /* Four bold lines of 17 px would be too loud on a phone. */
  body.page-legal .contract-tool .state-line {
    font-size: 15px;
  }

  body.page-legal .contract-actions .btn {
    width: 100%;
  }

  body.page-legal .clauses > li {
    padding-left: 34px;
  }
}

/* Printing or saving a page as PDF keeps a record of a withdrawal or a
   cancellation (§ 312k BGB asks that the customer can store it). Only the
   text goes on paper, and the receipt (status line plus every entered
   value) stays on it in black on white. */
@media print {
  body.page-legal {
    color: #000;
    background: #fff;
  }

  body.page-legal .site-header,
  body.page-legal .site-footer,
  body.page-legal .contract-form,
  body.page-legal .contract-toggle,
  body.page-legal .turnstile-box,
  body.page-legal .btn {
    display: none !important;
  }

  body.page-legal .contract-tool .receipt {
    break-inside: avoid;
  }

  body.page-legal .facts,
  body.page-legal .facts > div,
  body.page-legal .state-line {
    border-color: #999;
  }

  body.page-legal .facts dt,
  body.page-legal .note,
  body.page-legal .fine,
  body.page-legal .eyebrow {
    color: #333;
  }

  body.page-legal .lead {
    color: #000;
  }

  body.page-legal .facts dd {
    color: #000;
  }

  body.page-legal .doc-main {
    --muted: #222;
    --faint: #444;
    padding: 0;
    background: #fff;
  }

  body.page-legal .doc-main h1,
  body.page-legal .doc-main h2,
  body.page-legal .doc-main h3,
  body.page-legal .doc-main strong,
  body.page-legal .state-line {
    color: #000;
  }

  body.page-legal .doc-main a {
    color: #000;
  }

  /* The screen rules above set white and light text with a higher
     specificity; on paper the receipt stays black on white. */
  body.page-legal .contract-tool .state-line,
  body.page-legal .contract-tool .receipt + .note,
  body.page-legal .contract-tool p a {
    color: #000;
  }
}