/* STARKOS — the legal-UI lane's additions to the legal page shell.
 *
 * css/legal.css styles /impressum and /datenschutz and is shared with pages this
 * lane does not own, so nothing is edited there. This file adds only what the new
 * pages need on top of it:
 *
 *   .statutory   the § 312k / § 356a controls, which must be permanently
 *                reachable and "well legible" — so they are real buttons in the
 *                footer of every page this lane ships, not a line of grey small
 *                print.
 *   .legal-form  the two statutory declaration forms (/kuendigen, /widerruf).
 *
 * Loaded AFTER legal.css so these rules win where they overlap. Same tokens,
 * same 18px outer radius, same 44px minimum targets as the rest of the product.
 */

/* ══════════ THE STATUTORY CONTROLS ══════════ */
.statutory {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 22px 8px;
}

.statutory a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.36);   /* 3.4:1 — above the 3:1 border floor */
  border-radius: 14px;
  /* Deliberately NOT the accent underline legal.css gives every anchor: this is
     a button, and a violet line through a button label reads as a mistake. */
  border-bottom: 1px solid rgba(255,255,255,0.36);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-base) var(--ease);
}
.statutory a:hover { border-color: rgba(255,255,255,0.7); }
.statutory a:active { transform: scale(0.98); }

/* The English mirror beside the statutory German. The German label is the
   statutory one and must read as the label; this is the gloss, so it is dimmer —
   0.5 alpha, 5.26:1, still a sentence anybody can read. */
.statutory .en {
  display: block;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
  font-size: 13px;
  margin-top: 2px;
}

/* ══════════ THE DECLARATION FORMS ══════════
   Used only by /kuendigen and /widerruf. Those two pages are the strictest in the
   product: the page may contain the statutory form and NOTHING ELSE — no
   retention offer, no "are you sure", no discount, no login wall. A German court
   struck retention offers off this page in 2026. There is therefore no `.promo`,
   no `.upsell` and no `.win-back` class here, and there must never be one. */
.legal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}
/* Same trap as `.row[hidden]` below, one level up: both pages do
   `form.hidden = true` once the receipt is on screen, and without this the form
   would stay on the page underneath its own confirmation. */
.legal-form[hidden] { display: none; }

.legal-form .row { display: flex; flex-direction: column; gap: 7px; }

/* ── `[hidden]` HAS TO BE RESTATED HERE, AND THAT IS NOT PEDANTRY ────────────
   `[hidden] { display: none }` lives in the browser's own stylesheet, and ANY
   author declaration beats a UA one regardless of specificity. So the
   `display: flex` above silently un-hid every `hidden` row: /kuendigen shipped
   its first screenshot with the extraordinary-cancellation reason box and the
   date field both on screen with nothing selected. The measurements were all
   green — the labels were verbatim, there was no overflow, there was no
   retention language — and the PICTURE was wrong. This is the fix, and
   tests/e2e-consent-gate.mjs now asserts visibility rather than trusting the
   attribute. */
.legal-form .row[hidden] { display: none; }

.legal-form label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

/* The English gloss under a German field label — its OWN line, in sentence case.
   Inline and inheriting `text-transform: uppercase` it read as one run-on
   shout: "VOR- UND NACHNAME FIRST AND LAST NAME". Also from the screenshot. */
.legal-form label .hint {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  /* 0.5 alpha = 5.26:1 on #040404. This is a sentence somebody reads, so it
     answers to the 4.5:1 floor, not the 3:1 one. */
  color: rgba(255,255,255,0.5);
  line-height: 1.45;
}

/* The same gloss inside a radio row, where it sits after a <br> and must NOT
   pick up the uppercase label treatment either. */
.legal-form .choice label .hint {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.5);
}

.legal-form input[type="text"],
.legal-form input[type="email"],
.legal-form input[type="date"],
.legal-form textarea,
.legal-form select {
  width: 100%;
  background: rgba(255,255,255,0.05);
  /* 0.46 = 4.61:1 on #040404 — the edge of a field you must find and type into,
     which rule 6 puts at 4.5:1. Same token, same value, as every other input in
     the product. */
  border: 1px solid rgba(255,255,255,0.46);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 48px;
  font-family: 'DM Sans', sans-serif;
  /* 16px MINIMUM. Below this, iOS Safari zooms the page on focus — and this form
     is one a person fills in on a phone, under pressure, once. */
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  outline: none;
  -webkit-appearance: none;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.legal-form textarea { min-height: 96px; resize: vertical; }
.legal-form input:focus,
.legal-form textarea:focus,
.legal-form select:focus {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}
.legal-form input::placeholder,
.legal-form textarea::placeholder { color: rgba(255,255,255,0.62); }

/* A radio pair: ordinary vs extraordinary termination, and the reply channel.
   Both are statutory choices, so both options are rendered identically — the
   same size, the same contrast, nothing nudging toward either. */
.legal-form .choice { display: flex; flex-direction: column; gap: 8px; }
.legal-form .choice label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 11px 13px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.legal-form .choice label:active { transform: scale(0.985); }
.legal-form .choice label.on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.07); }

.legal-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  border: 1px solid rgba(255,255,255,0.46);
  border-radius: 50%;
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease);
}
.legal-form input[type="radio"]:checked { border-color: var(--accent); }
.legal-form input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
/* Rule 1: the 44×44 target belongs to the CONTROL, not only to the row around
   it. A ::before overlay centred on the 20px dot, exactly as the consent gate's
   checkboxes do it. */
.legal-form input[type="radio"]::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

.legal-form .submit {
  width: 100%;
  background: #fff;
  color: #040404;
  border: none;
  border-radius: 14px;
  padding: 16px;
  min-height: 48px;
  font-family: 'Unbounded', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.legal-form .submit:active { transform: scale(0.98); opacity: 0.9; }
.legal-form .submit:disabled { opacity: 0.4; cursor: not-allowed; }

.legal-form .err {
  font-size: 13.5px;
  line-height: 1.55;
  color: #ff4d4d;
  background: rgba(255,77,77,0.1);
  border: 1px solid rgba(255,77,77,0.7);
  border-radius: 12px;
  padding: 11px 14px;
  display: none;
}
.legal-form .err.on { display: block; }

/* ══════════ THE RECEIPT ══════════
   Reproduces what was submitted, with its timestamp. A confirmation that does not
   quote the declaration is not a receipt. */
.receipt {
  background: #161616;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 18px 16px;
  margin-top: 22px;
}
.receipt h2 { margin-top: 0; }
.receipt dl { margin: 14px 0 0; }
.receipt dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-top: 12px;
}
.receipt dd {
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  margin: 3px 0 0;
}
.receipt .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.receipt .actions button {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.36);
  background: transparent;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-base) var(--ease);
}
.receipt .actions button:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .statutory a, .legal-form .choice label, .legal-form .submit, .receipt .actions button { transition: none; }
}

/* Printing the receipt is one of the two ways it is durable. Ink on white, and
   nothing but the receipt. */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .legal-head, .legal-foot, .statutory, .legal-form { display: none !important; }
  .receipt { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; }
  .receipt dd, .receipt h2 { color: #000 !important; }
  .receipt dt { color: #333 !important; }
  .receipt .actions { display: none !important; }
}