/*
 * The ordering and cancellation pages.
 *
 * Only what a form needs: the tokens, the buttons and the type all come from
 * shared.css, which is the landing page's own stylesheet. Everything here is
 * built from those same variables — --ink, --rule, --radius-card, --shadow-sm —
 * so these pages are the site rather than something that resembles it.
 */

/* ── Page shape ─────────────────────────────────────────────────────────── */

.page { padding: 30px 0 70px; }
/*
 * Ein Mass fuer beide Erklaerungsseiten.
 *
 * Kuendigung und Widerruf haben denselben Aufbau — einspaltiges Formular aus
 * Karten, keine Seitenspalte — und standen trotzdem verschieden breit da: die
 * eine mit `page-narrow` auf 760px, die andere ganz ohne Begrenzung. Das fiel
 * erst auf, als der Container mitwachsen durfte und der Widerruf sich ueber
 * anderthalb Meter zog.
 *
 * 900px, nicht die volle Breite: ein Formular gewinnt nichts dazu, und die
 * Zustimmungstexte darin sind Fliesstext.
 */
.page-narrow,
.order { max-width: 900px; margin-inline: auto; }
.page-head { padding: 26px 0 34px; }
.page-head h1 { margin: 14px 0 0; }
.page-lede { margin: 18px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.65; color: var(--dim); }

/*
 * Das Bestellformular waechst NICHT mit der Seitenbreite mit.
 *
 * Der Container darf inzwischen bis 1760px — gut fuer Raster und Tabellen, und
 * falsch fuer ein Formular: die Eingabefelder haben `width: 100%`, also waere
 * das Adressfeld auf einem grossen Schirm anderthalb Meter breit, und die
 * Zustimmungstexte haetten Zeilen, an deren Ende man den Anfang vergessen hat.
 *
 * Volle Breite ist eine Erlaubnis, keine Pflicht. Hier wird sie nicht genutzt.
 */
.order-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 348px;
  gap: 24px; align-items: start;
  max-width: 1120px; margin-inline: auto;
}
.order-main { display: flex; flex-direction: column; gap: 18px; }

.block {
  padding: 26px;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
.block-head { display: flex; gap: 15px; align-items: flex-start; }
.block-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.block-sub { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--dim); }

.block-n {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
}

/* ── The address field ────────────────────────────────────────────────────
 * The one field on the whole site that is the product rather than a form
 * control, so it is drawn at the size it deserves.
 */

.addr-field {
  display: flex; align-items: center;
  margin-top: 18px;
  border-radius: 14px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--rule);
  transition: border-color .2s, box-shadow .2s;
}
.addr-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(21,24,26,.07); }
.addr-field input {
  flex: 1; min-width: 0;
  padding: 15px 4px 15px 17px;
  border: 0; outline: 0; background: none;
  font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink);
}
.addr-field input::placeholder { color: var(--dim-2); font-weight: 500; }
.addr-suffix {
  padding: 15px 17px 15px 0;
  font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  color: var(--dim-2); white-space: nowrap;
}

.state { display: flex; align-items: center; gap: 8px; margin: 13px 0 0; min-height: 20px; font-size: 13px; color: var(--dim); }
.state[data-tone="ok"] { color: #17803D; }
.state[data-tone="bad"] { color: #B42318; }
.state svg { flex: none; }

/* ── Plain fields ───────────────────────────────────────────────────────── */

.field {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans); font-size: 15px;
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.field::placeholder { color: var(--dim-2); }
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(21,24,26,.07); }
.field-spaced { margin-top: 18px; }
.field-label { display: block; margin: 18px 0 8px; }
/* „optional" am Feldnamen. Leiser als das Label, aber nicht so leise, dass
   jemand es überliest und das Feld für Pflicht hält. */
.field-opt {
  margin-left: 6px;
  font-style: normal; font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2);
}
.field-note { margin: 8px 0 0; min-height: 17px; font-size: 12.5px; color: var(--dim); }
.field-note[data-tone="bad"] { color: #B42318; }
/* Fehlte, solange unter einem Feld nur Schlechtes stehen konnte. Der geprüfte
   Gutschein ist die erste Stelle, an der ein Feld auch gut ausgehen kann. */
.field-note[data-tone="ok"] { color: #17803D; }
.field-group { margin-top: 18px; }
textarea.field { resize: vertical; min-height: 84px; font-family: var(--sans); }

/* ── The picker ───────────────────────────────────────────────────────────
 * Radio buttons, actually. A row of cards that only looks like a choice is a
 * choice a keyboard cannot make and a screen reader cannot announce.
 */

.pick { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.pick-row {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--rule); background: var(--bg);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.pick-row:hover { border-color: var(--dim-2); }
.pick-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-dot {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--dim-2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background-color .2s;
}
.pick-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.pick-row:has(input:checked) { border: 1.5px solid var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.pick-row:has(input:checked) .pick-dot { border-color: var(--ink); background: var(--ink); }
.pick-row:has(input:checked) .pick-dot::after { transform: scale(1); }
.pick-row:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pick-body { flex: 1; min-width: 0; }
.pick-body b { display: block; font-size: 14px; font-weight: 600; }
.pick-body small { display: block; margin-top: 3px; font-size: 12px; color: var(--dim); }
.pick-price { flex: none; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.pick-tag {
  margin-left: 7px; padding: 3px 8px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: middle;
}

/* ── Consent ──────────────────────────────────────────────────────────────
 * Never pre-ticked and never styled to look already given. A consent that looks
 * given is not one.
 */

.agree {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 13px; line-height: 1.65; color: var(--ink-2);
  cursor: pointer;
}
.agree-first { margin-top: 8px; }
.agree:last-of-type { border-bottom: 0; }
.agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.agree a { text-decoration: underline; }
.agree-box {
  width: 19px; height: 19px; border-radius: 6px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--dim-2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background-color .2s;
}
.agree-box::after {
  content: ''; width: 10px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transform-origin: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.agree:has(input:checked) .agree-box { border-color: var(--ink); background: var(--ink); }
.agree:has(input:checked) .agree-box::after { transform: rotate(-45deg) scale(1); }
.agree:has(input:focus-visible) .agree-box { outline: 2px solid var(--ink); outline-offset: 2px; }
/*
 * Ein Knopf, der wie ein Link aussehen soll — und dafuer alles ablegen muss,
 * was ein Knopf mitbringt.
 *
 * Vorher standen hier nur Unterstreichung, Farbe und Polsterung. Hintergrund,
 * Rahmen und Schriftart blieben die des Browsers, und damit sass mitten im
 * Fliesstext ein grauer Kasten in Systemschrift. `font: inherit` ist das
 * Entscheidende: es holt Familie, Groesse und Zeilenhoehe aus der Umgebung.
 */
.linkish {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.linkish:hover { text-decoration-thickness: 2px; }
.linkish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

/* ── The summary ──────────────────────────────────────────────────────────
 * §312j Abs. 2 wants the essentials immediately before the button, and
 * §312j Abs. 3 wants the button itself to say what pressing it does. So the
 * summary is sticky and the button lives inside it.
 */

.order-side { position: sticky; top: 22px; }
.sum { margin: 16px 0 0; }
.sum > div { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.sum dt { flex: none; width: 88px; font-size: 12px; color: var(--dim); }
.sum dd { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; text-align: right; }
.sum-total { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0 6px; font-size: 13px; color: var(--dim); }
.sum-total b { font-size: 27px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
/* Was der Gutschein deckt. Steht zwischen Gesamtpreis und Steuerhinweis, weil
   es genau dort gelesen wird — und deutlicher als der Hinweis darunter, weil
   es die Zahl ist, nach der jemand sucht. */
.sum-credit {
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid var(--rule-soft); border-radius: 10px;
  background: var(--bg-sand);
  font-size: 12.5px; line-height: 1.5; color: var(--ink);
}
.sum-vat { margin: 14px 0 18px; font-size: 11.5px; line-height: 1.55; color: var(--dim-2); }
.sum-hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); text-align: center; }
.sum-hint[data-tone="bad"] { color: #B42318; }

/*
 * Luft über einer Schaltfläche, die auf einen Absatz folgt.
 *
 * Die Klasse stand in `cancel.html`, war aber nirgends definiert — der Text
 * klebte am Knopf, gemessene null Pixel. Beim Nachbauen der Widerrufsseite ist
 * derselbe Fehler mitgewandert, was ihn erst sichtbar gemacht hat.
 *
 * `.block-sub` hat bewusst keinen Unterrand (er sitzt sonst überall im Weg), also
 * kommt der Abstand von der Schaltfläche.
 */
.btn-spaced { margin-top: 18px; }

/*
 * Ein Hinweis zwischen den Formularabschnitten.
 *
 * Bewusst KEIN `.block`: die nummerierten Karten sind Schritte, die man abarbeitet,
 * und ein Hinweis, der genauso aussieht, wird als übersprungener Schritt gelesen.
 * Sandfarben statt weiß, ohne Nummer, mit derselben Kantenrundung — er gehört
 * dazu, ohne sich einzureihen.
 *
 * Vorher stand hier `.legal-note` aus `legal.css`, das diese Seite gar nicht lädt.
 * Der Kasten sah nur deshalb nach etwas aus, weil `.block` daneben stand.
 */
.note-inline {
  padding: 18px 22px;
  border-radius: var(--radius-card);
  background: var(--bg-sand);
  border: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.6;
}
.note-inline p { margin: 0; }
.note-inline p + p { margin-top: 8px; }

/*
 * Die Erklärung im Wortlaut, die der Kunde abgibt.
 *
 * Kräftigere Kante und weißer Grund, weil das der Satz ist, den § 356a Abs. 4 in
 * der Bestätigung verlangt — er soll sich vom erklärenden Text drumherum abheben.
 */
.note-quote {
  /* 18px ist der Abstand, den `.block-head` überall sonst zum ersten Element im
     Abschnitt hat — dasselbe Maß wie zwischen den Abschnitten selbst. Ohne den
     klebte das Zitat gemessen bei null an der Überschrift. */
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.note-quote p { margin: 0; }

.btn-block { width: 100%; justify-content: center; }
/* Der Gutscheincode wird abgetippt, nicht gelesen: Schreibmaschinenschrift mit
   Sperrung, damit O und 0 auseinandergehen — im Alphabet der Codes kommen sie
   zwar gar nicht vor, aber wer das nicht weiss, vergleicht Zeichen fuer Zeichen. */
.field-code {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.field-code::placeholder { letter-spacing: .08em; text-transform: none; }

.note-box {
  display: flex; gap: 12px; margin-top: 18px;
  padding: 15px 17px; border-radius: 14px;
  background: var(--bg-sand); border: 1px solid var(--rule);
  font-size: 13px; line-height: 1.65; color: var(--ink-2);
}
.note-box svg { flex: none; margin-top: 3px; color: var(--dim); }

/* ── The receipt ──────────────────────────────────────────────────────────
 * §312k Abs. 4 wants the confirmation immediately and in text form. This is
 * the "immediately"; the email is the "text form".
 */

.done { text-align: center; padding: 46px; }
.done-mark {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: #DCFCE7; color: #17803D;
}
.done h2 { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -.03em; }
.done-text { margin: 14px auto 0; max-width: 48ch; font-size: 15px; line-height: 1.65; color: var(--dim); }
.receipt {
  margin: 28px auto 0; max-width: 440px; padding: 22px;
  border-radius: 14px; text-align: left;
  background: var(--bg-sand); border: 1px solid var(--rule);
}
.receipt dl { margin: 14px 0 0; }
.receipt dt { font-family: var(--mono); }
.receipt dd { font-family: var(--mono); font-size: 12.5px; }
.done-actions { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .order-grid { grid-template-columns: minmax(0, 1fr); }
  /* Not sticky on a narrow screen: a summary pinned to a small viewport eats
     the form it is summarising. It moves to the end, which is also where the
     button belongs — the last thing before ordering. */
  .order-side { position: static; }
}

@media print {
  /* The receipt is the artefact somebody keeps. */
  header, footer, .done-actions { display: none; }
  .done { padding: 0; }
  .receipt { border-color: #999; }
}

/* ── The monthly / yearly switch ──────────────────────────────────────────
 * Same control as on the pricing section, but that one lives in the landing
 * page's inline stylesheet and does not reach these pages. Copied here rather
 * than imported, because pulling the whole inline sheet in for one control
 * would drag 90 kB along with it.
 */
.plan-switch { display: flex; align-items: center; gap: 14px; }
.plan-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius-pill); background: var(--bg-sand-deep); }
.plan-seg > button {
  padding: 8px 18px; border-radius: var(--radius-pill); border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--dim);
  transition: background-color .2s, color .2s;
}
.plan-seg > button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.plan-save { font-family: var(--mono); font-size: 12px; color: var(--ink); }

/* ── Die Abschlussseite ──────────────────────────────────────────────────────
 *
 * Sie tritt an die Stelle des Formulars, statt darunter zu erscheinen: was der
 * Kunde eben ausgefuellt hat, ist erledigt, und es stehen zu lassen laedt zum
 * zweiten Absenden ein.
 *
 * Schmal und zentriert, weil hier nichts mehr zu tun ist — die einzige Zeile,
 * die zaehlt, ist die Adresse.
 */
.order-done {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 0 40px;
  text-align: center;
}
.done-mark {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 26px;
  background: rgba(34, 197, 94, .12);
  color: #16a34a;
}
.done-mark svg { width: 26px; height: 26px; }
.order-done h1 { margin: 0 0 18px; }

/* Die Adresse ist das Ergebnis der ganzen Seite. Also gross, in
   Schreibmaschinenschrift und in einem Kasten, den man abschreiben kann. */
.done-url {
  display: inline-block;
  margin: 0 0 24px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--bg-sand);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 17px;
  color: var(--ink);
  word-break: break-all;
}
.done-lead {
  margin: 0 0 30px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--dim);
}

.done-facts {
  margin: 0 0 26px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  text-align: left;
}
.done-facts > div {
  display: flex; gap: 18px; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.done-facts > div:first-child { padding-top: 0; }
.done-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.done-facts dt {
  flex: none; width: 128px;
  font-size: 12px; color: var(--dim);
}
.done-facts dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.done-facts a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.done-note {
  margin: 0;
  font-size: 12.5px; line-height: 1.55; color: var(--dim-2);
}
.done-note a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .done-facts > div { flex-direction: column; gap: 3px; }
  .done-facts dt { width: auto; }
}