/*
 * shop.css: pricing cards and the account pages. 26.09.2026.
 *
 * Used by kaufen.html, konto.html, kaufen-danke.html and the pricing section
 * of index.html. Sits on top of css/preview-professional.css (house tokens,
 * header, footer, .button, .faq-list) and css/site-controls.css.
 *
 * Why it looks like this: the owner chose mockup "A" on 26.09.2026 (cards in
 * the house style of the home page, a sliding toggle, a quiet "Empfohlen"
 * text label). Rules kept from the site rule and the design review:
 *   - no gradient text, no glow shadows, no animated borders, no badge pills,
 *     no icon before every line except the thin check marks of the list;
 *   - violet only on the active toggle half, the highlighted card (border,
 *     faint tint) and its button;
 *   - motion 150 to 300 ms and only where something changes; all of it is off
 *     under prefers-reduced-motion.
 * The highlight follows the pointer and the keyboard focus (js/shop.js and
 * js/sales-state.js set .is-lit), so no plan looks pushed: Pro carries it
 * only while nothing else is pointed at.
 */

:root {
  --muted-text: #8585b0;
  --sub-text: #a3a3c8;
  --accent-fill: rgba(108, 99, 255, 0.28);
  --accent-line: rgba(108, 99, 255, 0.6);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --surface: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}

/* The hidden attribute always wins over a class that sets display. */
.page-shop [hidden],
.pricing-section [hidden] {
  display: none !important;
}

body.page-shop {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  color-scheme: dark;
}

body.page-shop > main {
  flex: 1 0 auto;
}

.nowrap {
  white-space: nowrap;
}

/* 26.09.2026 (design review): running text never leaves one word alone on
   its last line ("... auf / einmal.", "... vom / Zahlungsdienst."). */
.page-shop p,
.page-shop li,
.pricing-section p,
.pricing-section li {
  text-wrap: pretty;
}

/* ------------------------------------------------------------ shared text */

.fine {
  margin: 0;
  color: var(--muted-text);
  font-size: 13.5px;
  line-height: 1.55;
}

/* 27.09.2026 (design review, G8): ONE look for text links and text actions
   on the sales pages: light text, a 1 px underline at 30 % white, 3 px
   below the line, white under the pointer. */
.inline-link,
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease, color 150ms ease;
}

.inline-link:hover,
.inline-link:focus-visible,
.link-button:hover,
.link-button:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

.sep {
  padding: 0 3px;
  color: rgba(255, 255, 255, 0.22);
}

/* 26.09.2026 (design review): readable separators between the three facts. */
.trust-row .sep {
  padding: 0 8px;
  color: var(--muted-text);
}

.note-line {
  margin: 10px 0 0;
  color: var(--muted-text);
  font-size: 14px;
  line-height: 1.5;
}

.note-line:empty {
  margin: 0;
}

.note-line.is-error {
  color: #ff7b72;
}

.note-line.is-ok {
  color: #3fb950;
}

/* ------------------------------------------------------------ shared motion + touch targets */

/* 27.09.2026 (design review, G5): two ways to appear, with the same names
   and values in every stylesheet of the sales pages.
     ab-drop, 200 ms: what opens under its trigger (message, question,
                      form, extra field, receipt).
     ab-rise, 260 ms: what arrives as page content (licence card, sign-in
                      card, loaded licences, step change).
   Curve var(--ease-out). Use them inside
   @media (prefers-reduced-motion: no-preference) only. */
@keyframes ab-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes ab-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* G4: every button of the sales pages gives way by 1 px while pressed
   (.button already transitions transform in 150 ms). Locked buttons do not
   answer. */
@media (prefers-reduced-motion: no-preference) {
  .plan-buy:not([aria-disabled="true"]):active,
  .page-shop main .button:not([aria-disabled="true"]):active {
    transform: translateY(1px);
  }
}

/* G9: text links get a touch target of about 44 px on touch screens. The
   negative margin takes the padding back, so nothing moves in the picture.
   ONE rule for the file: add further text links here. */
@media (pointer: coarse) {
  .buy-status .link-button {
    padding: 11px 6px;
    margin: -11px -6px;
  }

  /* An inline link in 13.5 px text: its box is 16 px high, so it takes more. */
  .buy-extra .inline-link {
    padding: 14px 6px;
    margin: -14px -6px;
  }

  .signin-links a {
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
  }
}

/* ------------------------------------------------------------ /kaufen head */

/* 27.09.2026 (design review, G13): the faint light behind the page head has
   one strength (0.08) on /kaufen, /konto and the thank-you page. */
.buy-main {
  padding-top: calc(var(--header-height) + 84px);
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(108, 99, 255, 0.08), rgba(108, 99, 255, 0) 70%),
    var(--bg);
}

.buy-head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.buy-head .eyebrow {
  margin-bottom: 18px;
  color: var(--accent);
}

/* 26.09.2026 (second visual review): the thank-you head used the plain
   32 px / 700 heading and looked smaller than every other page head. */
.buy-head h1,
.thanks-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.buy-head .lead {
  margin: 16px 0 0;
  color: var(--muted-text);
  font-size: 18px;
  line-height: 1.55;
  text-wrap: balance;
}

/* A plain sentence under the lead: cancelled payment, sales closed, test
   mode. Text only, no box. */
.buy-state {
  max-width: 640px;
  margin: 14px auto 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}

/* One sentence per line (cancelled, not ready, test mode). */
.buy-state > span {
  display: block;
}

.buy-state .test-mark {
  color: #d29922;
}

.shop-noscript {
  max-width: 640px;
  margin: 18px auto 0;
  color: #ff7b72;
  text-align: center;
}

/* ------------------------------------------------------------ toggle */

.billing-row {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* Two halves, each with the model name and a second line that explains it
   (licence against subscription) before anyone clicks. */
.billing-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 380px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.02);
}

.billing-switch label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 52px;
  padding: 6px 20px;
  cursor: pointer;
  text-align: center;
}

.billing-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.billing-switch .bill-name {
  color: var(--muted-text);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.3;
  transition: color 150ms ease;
}

.billing-switch .bill-sub {
  color: var(--muted-text);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transition: color 150ms ease;
}

.billing-switch label:hover .bill-name {
  color: var(--text);
}

/* Pressed: the name answers under the finger before the thumb slides. */
.billing-switch label:active .bill-name {
  color: var(--white);
}

.billing-switch input:checked ~ .bill-name {
  color: var(--white);
}

.billing-switch input:checked ~ .bill-sub {
  color: var(--sub-text);
}

.billing-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: var(--accent-fill);
  transition: transform 220ms var(--ease-out);
}

.billing-switch:has(input[value="subscription"]:checked) .billing-thumb {
  transform: translateX(100%);
}

/* Browsers without :has() get the checked state from the script. */
.billing-switch.is-monthly .billing-thumb {
  transform: translateX(100%);
}

.billing-switch:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ status + sign-in */

.buy-status {
  max-width: 760px;
  min-height: 1.55em;
  margin: 20px auto 0;
  color: var(--muted-text);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
  transition: opacity 120ms ease, transform 120ms var(--ease-out);
}

.buy-status:empty {
  min-height: 0;
  margin-top: 0;
}

/* 27.09.2026 (design review): the guest line arrives with the first answer
   of the server and pushed the cards down while they faded in. Its room is
   held while the cards load; a closed shop gives it back once. */
.section-shell:has(> .plans.is-loading) > .buy-status:empty {
  min-height: 1.55em;
  margin-top: 20px;
}

/* The line changes like the card texts (js/shop.js renderStatus sets the
   same two classes): out 90 ms upwards, in 120 ms from below. */
.buy-status.swap-out {
  opacity: 0;
  transform: translateY(-5px);
  transition-duration: 90ms;
}

.buy-status.swap-pre {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}

.buy-status strong {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.buy-status .is-on {
  color: var(--text);
}

/* 26.09.2026 (design review): on a phone the line wrapped with the dot at
   the start of the second line ("· Beta-Preis aktiv · Abmelden"). Below
   480 px the address takes its own line and the other parts stand apart by
   space alone, without dots. */
@media (max-width: 480px) {
  .buy-status.is-parts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 18px;
    row-gap: 2px;
  }

  .buy-status .who {
    flex-basis: 100%;
  }

  .buy-status .part .sep {
    display: none;
  }

  /* The guest line takes two lines on a phone. */
  .section-shell:has(> .plans.is-loading) > .buy-status:empty {
    min-height: 3.1em;
  }
}

.buy-status + .buy-extra {
  margin-top: 6px;
}

.buy-extra {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted-text);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

.buy-extra a {
  color: var(--text);
}

/* The sign-in panel opens in place (200 ms): one compact row on wide
   screens, so the cards stay close to the fold, a column on phones.
   27.09.2026 (design review): as wide as the two cards below (.plans). */
.signin {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 880px;
  margin: 0 auto;
  transition: grid-template-rows 200ms var(--ease-out);
}

.signin.is-open {
  grid-template-rows: 1fr;
}

.signin > div {
  min-height: 0;
  overflow: hidden;
}

.signin-form {
  margin-top: 16px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}

.signin.is-open .signin-form {
  opacity: 1;
  transform: none;
}

.signin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.field label {
  color: var(--muted-text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.field input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* 27.09.2026 (design review, G7): the focus is the accent edge plus a 1 px
   ring, the same on every form of the site. */
.field input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px var(--accent);
  outline: none;
}

.field input[aria-invalid="true"] {
  border-color: #ff7b72;
}

.field input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px #ff7b72;
}

/* 27.09.2026 (design review): the neutral house button (button-secondary in
   kaufen.html); the gradient belongs to "Jetzt kaufen" alone. */
.signin-row .button {
  min-height: 46px;
  padding-inline: 22px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    opacity 150ms ease, transform 150ms ease;
}

.button[aria-busy="true"] {
  cursor: progress;
}

/* G3: waiting for the server. The width stays, the pointer stays usable
   (the script ignores a second click). */
.signin-row .button[aria-busy="true"] {
  opacity: 0.6;
}

.signin-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 14px 0 0;
  font-size: 13.5px;
  text-align: left;
}

.signin-links a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.signin-links a:hover,
.signin-links a:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

.signin-help {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.signin-form .note-line {
  text-align: left;
}

/* A message appears under what caused it (ab-drop); it runs when the line
   goes from empty to filled. */
@media (prefers-reduced-motion: no-preference) {
  .signin-form .note-line:not(:empty),
  .plan-note:not(:empty) {
    animation: ab-drop 200ms var(--ease-out);
  }
}

/* ------------------------------------------------------------ plan cards */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  column-gap: 22px;
  max-width: 880px;
  margin: 40px auto 0;
}

.plan {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: 30px 30px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition:
    transform 200ms var(--ease-out),
    border-color 200ms ease,
    background-color 200ms ease;
}

/* The faint violet tint of the highlighted card fades in on its own layer,
   because a gradient background cannot transition. */
.plan::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(108, 99, 255, 0.075), rgba(108, 99, 255, 0.012));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.plan > * {
  position: relative;
  z-index: 1;
}

.plan.is-lit {
  border-color: var(--accent-line);
}

/* 26.09.2026 (design review): the lift belongs to the card under the pointer
   or the focus (js/shop.js and js/sales-state.js set .is-hot), not to the
   resting recommendation, so names, prices and buttons line up at rest. */
.plan.is-lit.is-hot {
  transform: translateY(-3px);
}

/* Touch screens have no pointer to follow: a tapped card does not lift. */
@media (hover: none) {
  .plan.is-lit.is-hot {
    transform: none;
  }
}

.plan.is-lit::before {
  opacity: 1;
}

.plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.plan-head h2,
.plan-head h3 {
  margin: 0;
  color: var(--white);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* A quiet text label, no pill, no glow. It stays on Pro; it only dims while
   another card holds the highlight. */
.plan-tag {
  margin: 0;
  color: #a19bff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.plan:not(.is-lit) .plan-tag {
  color: var(--muted-text);
}

.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
  margin: 20px 0 0;
  line-height: 1;
}

.plan-amount {
  color: var(--white);
  font-size: 48px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: opacity 200ms ease;
}

.plan-was {
  color: var(--muted-text);
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: line-through;
  text-decoration-color: rgba(133, 133, 176, 0.85);
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
}

.plan-unit {
  color: var(--muted-text);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

/* While the first answer of the server is on its way the numbers are the
   HTML fallbacks; they wait half visible instead of jumping later. */
.plans.is-loading .plan-amount,
.plans.is-loading .plan-was {
  opacity: 0.35;
}

.plan-scope {
  margin: 12px 0 0;
  color: var(--muted-text);
  font-size: 15.5px;
  line-height: 1.5;
}

.plan-action {
  margin-top: 24px;
}

/* One button look for both cards; the lit card fades the house gradient in
   underneath (180 ms). A gradient cannot transition, its opacity can. */
.plan-buy {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 48px;
  overflow: hidden;
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  cursor: pointer;
}

.plan-buy::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad);
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.plan-buy:hover,
.plan-buy:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.plan.is-lit .plan-buy {
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(6, 10, 30, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.plan.is-lit .plan-buy::before {
  opacity: 1;
}

.plan.is-lit .plan-buy:hover::before,
.plan.is-lit .plan-buy:focus-visible::before {
  background: linear-gradient(135deg, #7d75ff, #2bdcff);
}

.plan-buy[aria-disabled="true"],
.plan-buy[aria-disabled="true"]:hover,
.plan.is-lit .plan-buy[aria-disabled="true"] {
  border-color: var(--line-strong);
  background: transparent;
  box-shadow: none;
  color: var(--muted-text);
  text-shadow: none;
  cursor: not-allowed;
}

.plan-buy[aria-disabled="true"]::before {
  opacity: 0 !important;
}

.plans.is-loading .plan-buy[aria-disabled="true"] {
  cursor: progress;
}

.plan-buy[aria-busy="true"] {
  cursor: progress;
}

/* A message about this card's purchase (price changed, too many attempts,
   no answer). Empty, it takes no room. */
.plan-note {
  margin: 10px 0 0;
  color: #ff7b72;
  font-size: 13.5px;
  line-height: 1.5;
}

.plan-note:empty {
  display: none;
}

/* Two lines in every state (the texts are written to that length), so the
   gap above the divider is the same for Einmalkauf and Monatlich. */
.plan-fine {
  min-height: 3.1em;
  margin: 12px 0 0;
  color: var(--muted-text);
  font-size: 13px;
  line-height: 1.55;
  /* 26.09.2026 (design review): "balance" broke inside the second sentence
     ("... Die / Lizenz kommt ..."). Each sentence starts its own line now
     (the texts carry a line break) and wraps without orphans. */
  white-space: pre-line;
  text-wrap: pretty;
}

/* The beta note and the renewal note of the subscription (27.09.2026) are
   the two lines a buyer must not miss: lighter ink, nothing else. */
.plan-fine.is-beta,
.plan-fine.is-sub {
  color: var(--text);
}

.plan-list {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.plan-list li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0 0 11px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.plan-list li:last-child {
  margin-bottom: 0;
}

.plan-list li:first-child {
  color: var(--white);
  font-weight: 600;
}

.plan-list svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transform: translateY(2px);
  stroke: var(--muted-text);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Text swap on the toggle: out 90 ms upwards, in 120 ms from below. */
[data-swap] {
  display: inline-block;
  transition: opacity 120ms ease, transform 120ms var(--ease-out);
}

p[data-swap],
.plan-fine[data-swap] {
  display: block;
}

[data-swap].swap-out {
  opacity: 0;
  transform: translateY(-5px);
  transition-duration: 90ms;
}

[data-swap].swap-pre {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}

/* Reveal once on scroll, only once the script set html.js. */
html.js .reveal {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 260ms var(--ease-out) var(--d, 0ms),
    translate 260ms var(--ease-out) var(--d, 0ms);
}

html.js .plan.reveal {
  transition:
    transform 200ms var(--ease-out),
    border-color 200ms ease,
    opacity 260ms var(--ease-out) var(--d, 0ms),
    translate 260ms var(--ease-out) var(--d, 0ms);
}

html.js .reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* 27.09.2026 (design review): the checks stand in their card at once; the
   card fades in as a whole (260 ms). One by one the last line was readable
   after 560 ms. */
html.js .plan-list li.reveal {
  opacity: 1;
  translate: 0 0;
  transition: none;
}

/* ------------------------------------------------------------ trust + legal */

.buy-legal {
  max-width: 880px;
  margin: 40px auto 0;
  text-align: center;
}

.trust-row {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.buy-legal .fine {
  margin-top: 10px;
}

.buy-legal .fine a,
.acc-main .fine a,
.thanks-main .fine a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.buy-legal .fine a:hover,
.buy-legal .fine a:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------ FAQ on /kaufen */

.buy-faq {
  margin-top: 96px;
  padding: 96px 0 116px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.buy-faq .faq-heading .eyebrow {
  margin-bottom: 20px;
}

.buy-faq .faq-heading h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
}

.faq-list details p a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.faq-list details p a:hover,
.faq-list details p a:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

/* 27.09.2026 (design review): the FAQ of /kaufen and of the home page are
   the same part (.faq-layout of the house stylesheet), so both get this.
   The heading stays beside the questions while they scroll past (two
   columns only, from 901 px). z-index: measured in Chromium, a sticky part
   takes the subpixel text smoothing from everything painted after it, in
   full-page pictures even far away from it. So it is painted after the
   questions and after the home hero (.hero-inner 4, .hero-next 5) and
   stays under the page header (50). */
@media (min-width: 901px) {
  .faq-layout .faq-heading {
    position: sticky;
    top: calc(var(--header-height) + 40px);
    z-index: 6;
    align-self: start;
  }
}

/* An answer opens and closes in 200 ms. Only where the browser can animate
   to the height of the content; everywhere else it opens at once as before.
   overflow: hidden (not clip) keeps the margins of the answer inside, so the
   height does not jump at the end. The box is 6 px wider than the text on
   both sides, so the focus frame of a link at the start of a line (2 px,
   3 px away) is not cut. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-list {
      interpolate-size: allow-keywords;
    }

    .faq-list details::details-content {
      block-size: 0;
      margin-inline: -6px;
      padding-inline: 6px;
      overflow: hidden;
      opacity: 0;
      transition:
        block-size 200ms var(--ease-out),
        opacity 200ms ease,
        content-visibility 200ms allow-discrete;
    }

    .faq-list details[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

/* ------------------------------------------------------------ home hero */

/* The Store button and, once sales are open, "Jetzt kaufen" beside it. */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-buy {
  min-height: 54px;
  padding-inline: 28px;
  font-size: 16.5px;
}

/* ------------------------------------------------------------ home section */

.pricing-section {
  padding: 112px 0 124px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  scroll-margin-top: var(--header-height);
}

/* Wide screens: heading, toggle and the short foot on the left, the two
   cards on the right, on the same grid as the FAQ below. */
.pricing-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 72px;
  align-items: start;
}

.pricing-copy h2 {
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* 26.09.2026 (design review): no extra gap under the number; 05 and 07 have
   none either. */
.pricing-copy .section-intro {
  margin-top: 16px;
  font-size: 17px;
}

.pricing-copy .billing-row {
  justify-content: flex-start;
  margin-top: 32px;
}

.pricing-copy .billing-switch {
  min-width: 0;
  width: 100%;
  max-width: 400px;
}

.pricing-copy .billing-switch label {
  padding: 6px 10px;
}

.pricing-foot {
  margin-top: 26px;
}

.pricing-foot .fine {
  max-width: 400px;
}

.pricing-foot .text-link {
  margin-top: 14px;
}

.pricing-section .plans {
  max-width: none;
  margin: 0;
}

.pricing-section .plan {
  padding: 26px 26px 28px;
}

.pricing-section .plan-amount {
  font-size: 42px;
}

/* ------------------------------------------------------------ /konto */

.acc-main {
  padding: calc(var(--header-height) + 80px) 0 120px;
  background:
    radial-gradient(900px 340px at 50% 0%, rgba(108, 99, 255, 0.07), rgba(108, 99, 255, 0) 70%),
    var(--bg);
}

.acc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: 40px;
}

.acc-head .eyebrow {
  margin-bottom: 16px;
  color: var(--accent);
}

.acc-head h1:focus {
  outline: none;
}

.acc-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.acc-mail {
  margin: 10px 0 0;
  color: var(--muted-text);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.acc-head .button {
  cursor: pointer;
}

.acc-section {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}

.acc-section > h2 {
  margin: 0;
  padding-top: 2px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.acc-body {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.acc-loading {
  color: var(--muted-text);
}

/* 26.09.2026 (design review): ONE sign-in look on /kaufen (panel), /konto
   (signed out) and /konto-neu, /konto-reset (their inline copy): labels in
   sentence case 13 px, fields 46 px with a 10 px radius, one full-width
   primary button without glow. Signed out, /konto shows the centred card of
   /konto-neu under a centred head. */
body.acc-out .acc-head {
  justify-content: center;
  padding-bottom: 32px;
  text-align: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #0d0d1a;
}

.auth-card > h2 {
  margin: 0 0 24px;
  color: var(--white);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.auth-card .fine {
  margin-top: 22px;
  text-align: center;
}

.acc-signin {
  max-width: 460px;
}

.auth-card .acc-signin {
  max-width: none;
}

.acc-signin .field + .field {
  margin-top: 14px;
}

.acc-signin .button {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  font-size: 15px;
  cursor: pointer;
}

.acc-signin .signin-links {
  margin-top: 16px;
}

/* The house button without its glow (the site rule allows none here). */
.acc-signin .button-primary,
.acc-signin .button-primary:hover,
.acc-signin .button-primary:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.acc-signin + .fine {
  max-width: 460px;
}

.auth-card .acc-signin + .fine {
  max-width: none;
}

.lic-card {
  padding: 26px 28px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.lic-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 18px;
}

.lic-top h3 {
  margin: 0;
  color: var(--white);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lic-top h3 span {
  color: var(--muted-text);
  font-weight: 500;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.status.is-off::before {
  background: var(--muted-text);
}

.status.is-warn::before {
  background: #d29922;
}

.lic-facts {
  margin: 0;
}

.lic-facts > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.lic-facts dt {
  color: var(--muted-text);
  font-size: 14px;
}

.lic-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.lic-facts dd .fine {
  margin-top: 4px;
}

/* 28.09.2026 (design review): one seat is the same piece in every card
   (36 px), so "2 of 3" and "1 of 5" compare at a glance. */
.seats {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.seats i {
  height: 4px;
  flex: 0 1 36px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 200ms ease;
}

.seats i.on {
  background: var(--accent);
}

/* The negative margin keeps the row as high as its neighbours although the
   copy button is 34 px high. */
.code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 34px;
  margin-block: -5px;
}

.code-row .mono {
  color: var(--white);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 16px;
  font-variant-ligatures: none;
  letter-spacing: 0.02em;
  user-select: all;
  -webkit-user-select: all;
}

.mono {
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-variant-ligatures: none;
}

/* 28.09.2026 (design review, G8): an action reads as an action, in the look
   of the text links of the page. */
.text-button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.text-button:hover,
.text-button:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

.text-button.danger:hover,
.text-button.danger:focus-visible {
  color: #ff9a92;
}

/* "Kopieren" is a small secondary button; its minimum width holds it still
   when the word turns to "Kopiert". */
.code-row .text-button {
  min-width: 88px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.code-row .text-button:hover,
.code-row .text-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

/* Copied: the green of the status "Aktiv", for two seconds. */
.text-button.is-done,
.text-button.is-done:hover,
.text-button.is-done:focus-visible {
  color: #3fb950;
  text-decoration-color: transparent;
}

.code-row .text-button.is-done {
  border-color: rgba(63, 185, 80, 0.45);
}

.row-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  min-height: 68px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-strong);
}

.row-list > li:first-child {
  padding-top: 0;
  min-height: 54px;
}

.row-list > li:last-child {
  border-bottom: 0;
}

.row-main {
  min-width: 0;
}

.row-title {
  margin: 0;
  color: var(--white);
  font-size: 15.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.row-title .here {
  margin-left: 10px;
  color: var(--muted-text);
  font-size: 13px;
  font-weight: 500;
}

.row-sub {
  margin: 2px 0 0;
  color: var(--muted-text);
  font-size: 13.5px;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
}

.confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 14px;
}

.confirm > span {
  color: var(--text);
}

.confirm .button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
}

.row-list > li.is-leaving {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
}

.dev-group + .dev-group {
  margin-top: 26px;
}

.dev-group-title {
  margin: 0 0 12px;
  color: var(--muted-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.acc-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}

.plain-text {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.plain-text + .fine {
  margin-top: 6px;
}

/* ------------------------------------------------------------ thank-you page */

/* 26.09.2026 (design review): while the payment is confirmed the page held
   one line and the footer rose to the middle; it then jumped when the licence
   card came. The main area is at least one screen tall. */
.thanks-main {
  min-height: 100vh;
  padding: calc(var(--header-height) + 84px) 0 120px;
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(108, 99, 255, 0.08), rgba(108, 99, 255, 0) 70%),
    var(--bg);
}

.thanks-shell {
  width: min(calc(100% - 48px), 760px);
  margin-inline: auto;
}

.thanks-head {
  text-align: center;
}

.thanks-head h1:focus {
  outline: none;
}

.thanks-state {
  max-width: 620px;
  margin: 14px auto 0;
  text-wrap: balance;
  color: var(--muted-text);
  font-size: 17px;
  line-height: 1.55;
}

.thanks-state.is-wait::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  animation: ab-wait 1.2s ease-in-out infinite;
}

@keyframes ab-wait {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

.thanks-main .lic-card {
  margin-top: 36px;
}

/* 26.09.2026 (second visual review): the one line that replaces the steps
   when the purchase already unlocked this PC. Body size, not fine print:
   it is the answer to "what now". */
.thanks-bound {
  margin: 32px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.thanks-steps {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ab-step;
}

.thanks-steps li {
  position: relative;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  counter-increment: ab-step;
  font-size: 15px;
  line-height: 1.55;
}

.thanks-steps li:first-child {
  border-top: 1px solid var(--line);
}

.thanks-steps li::before {
  position: absolute;
  top: 14px;
  left: 0;
  color: var(--muted-text);
  content: counter(ab-step);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
  line-height: 1.66;
}

.thanks-main .fine {
  margin-top: 14px;
}

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.thanks-actions .button {
  min-height: 46px;
  font-size: 15px;
}

.thanks-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 44px 0 0;
  font-size: 14.5px;
}

.thanks-links a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.thanks-links a:hover,
.thanks-links a:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

/* 28.09.2026 (design review): on the paid page the code is the main thing,
   and the sentences, the button and "Kontakt" under the card share its left
   edge. The short states without a card stay centred under their head. */
@media (min-width: 681px) {
  .thanks-main .code-row .mono {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  #order-paid .thanks-actions {
    justify-content: flex-start;
  }

  .thanks-shell:has(#order-paid:not([hidden])) .thanks-links {
    justify-content: flex-start;
    margin-top: 20px;
  }
}

/* The licence arrives once the payment is confirmed (G5, ab-rise). */
@media (prefers-reduced-motion: no-preference) {
  #order-paid:not([hidden]) {
    animation: ab-rise 260ms var(--ease-out);
  }
}

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1180px) {
  .pricing-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .pricing-copy {
    display: grid;
    grid-template-columns: 64px minmax(0, 760px);
    column-gap: 22px;
  }

  .pricing-copy > * {
    grid-column: 2;
  }

  .pricing-copy .section-number {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }

  .pricing-cards {
    margin-left: 86px;
  }

  .pricing-section .plans {
    max-width: 880px;
  }
}

@media (max-width: 900px) {
  /* Tablet: two narrow cards; a little less padding keeps the longest
     check ("Neue Hauptversion optional für 4,99 €") on one line. */
  .plan {
    padding: 26px 22px 28px;
  }

  .plan-list li {
    font-size: 14.5px;
  }

  .plan-amount {
    font-size: 44px;
  }

  .acc-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .pricing-copy {
    display: block;
  }

  .pricing-cards {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
    max-width: 480px;
  }

  .plan {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .plan-fine {
    min-height: 0;
  }

  .pricing-section .plans {
    max-width: 520px;
  }

  /* One column. 27.09.2026 (design review, G6): the message stands between
     the fields and the button, not under the button. The order is visual
     only; the fields and the button keep their place in the document, so
     the tab order stays. */
  .signin-form {
    display: flex;
    flex-direction: column;
  }

  .signin-row {
    display: contents;
  }

  .signin-row .field + .field {
    margin-top: 12px;
  }

  .signin-form .note-line {
    order: 1;
  }

  .signin-row .button {
    order: 2;
    width: 100%;
    margin-top: 12px;
  }

  .signin-links {
    order: 3;
  }

  .signin-help {
    order: 4;
  }
}

@media (max-width: 680px) {
  .buy-main,
  .thanks-main {
    padding-top: calc(var(--header-height) + 52px);
  }

  .buy-head h1,
  .acc-head h1,
  .thanks-head h1,
  .buy-faq .faq-heading h2,
  .pricing-copy h2 {
    font-size: 32px;
  }

  .buy-head .lead {
    font-size: 16.5px;
  }

  .billing-row {
    margin-top: 28px;
  }

  .billing-switch {
    width: 100%;
    min-width: 0;
    max-width: 380px;
  }

  .billing-switch label {
    padding: 6px 8px;
  }

  .billing-switch .bill-sub {
    font-size: 12px;
  }

  .plans {
    margin-top: 28px;
  }

  .plan,
  .pricing-section .plan {
    padding: 24px 22px 26px;
  }

  .plan-amount,
  .pricing-section .plan-amount {
    font-size: 40px;
  }

  .signin-form {
    padding: 18px 16px 16px;
  }

  /* On a phone the trust row wraps; a "·" left at a line end reads like a
     stray mark (design review 26.09.2026), so the items stand apart by
     space alone there. */
  .trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 16px;
  }

  .trust-row .sep {
    display: none;
  }

  .trust-row .trust-open {
    display: contents;
  }

  /* 27.09.2026 (design review): the seller line the same way. The address
     keeps its units together (no-break spaces in kaufen.html) on lines of
     even length, phone and e-mail stand side by side below it. */
  .seller-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 16px;
  }

  .seller-row .sep {
    display: none;
  }

  .seller-row > span:first-child {
    flex-basis: 100%;
    text-wrap: balance;
  }

  .buy-faq {
    margin-top: 72px;
    padding: 72px 0 84px;
  }

  .pricing-section {
    padding: 80px 0 86px;
  }

  .acc-main {
    padding-top: calc(var(--header-height) + 52px);
  }

  .acc-section {
    padding: 30px 0;
  }

  .lic-card {
    padding: 22px 18px 6px;
  }

  .lic-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 0;
  }

  .code-row {
    margin-block: 2px 0;
    gap: 8px 10px;
  }

  .code-row .text-button {
    min-width: 84px;
    min-height: 40px;
    padding: 0 12px;
  }

  .row-list > li {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .thanks-shell {
    width: min(calc(100% - 32px), 760px);
  }

  .thanks-actions .button {
    width: 100%;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .button {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    translate: 0 0;
  }

  .plan,
  .plan::before,
  .plan-buy::before,
  .billing-thumb,
  .signin,
  .signin-form,
  .signin-row .button,
  .buy-status,
  [data-swap],
  .seats i,
  .text-button {
    transition: none !important;
  }

  .plan.is-lit,
  .plan.is-lit.is-hot {
    transform: none;
  }

  .thanks-state.is-wait::before {
    animation: none;
  }
}