/*
 * site-controls.css: shared controls for the sub pages (shop, thank-you page,
 * legal pages). Needs css/preview-professional.css and css/preview-docs.css.
 *
 * 25.09.2026, the owner's rule: no pill buttons, no chips, no rounded cards
 * or boxes around options. Grouping comes from 1 px hairlines and space;
 * a radius of at most 3 px and only on real controls; no gradients, no glow,
 * no coloured headings.
 *
 * Nearly everything is scoped to body.site-sub so index.html, which links
 * this file only for its footer, keeps its own look. The two blocks right
 * below are the exception and apply to every page.
 */

/* ------------------------------------------------------------ all pages */

/* Two-language text blocks (legal pages). Without JavaScript html has no
   data-lang, so both blocks stay visible. That is on purpose: agb.html and
   widerruf.html travel as mail attachments without JS and CSS. */
html[data-lang="de"] [data-lang-block="en"],
html[data-lang="en"] [data-lang-block="de"] {
  display: none;
}

/* The footer carries six links (plus the contract line above them) since
   the shop went in; let them wrap instead of pushing the page wider than
   the phone. */
.site-footer .footer-layout nav {
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: flex-end;
  max-width: 640px;
}

/* Withdrawal and cancellation, 25.09.2026: Art. 11a RL 2011/83 and § 356a
   BGB want the withdrawal function prominently placed, and a plain footer
   link among eight others is not that. So both links get their own line
   above the link row, set off by a hairline, in the accent colour and
   underlined. No pill, no box. #6c63ff on the footer background #050509
   reaches 4.7:1. */
.site-footer .footer-contract {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.site-footer .footer-contract a {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 150ms ease;
}

.site-footer .footer-contract a:hover,
.site-footer .footer-contract a:focus-visible {
  color: var(--white);
}

/* The rest of the footer is small print: #8585b0 (5.8:1 on #050509)
   instead of var(--muted), which reaches only 4.4:1 there. */
.site-footer .footer-layout nav a,
.site-footer .footer-layout > div > p,
.site-footer .footer-layout > p {
  color: #8585b0;
}

.site-footer .footer-layout nav a:hover,
.site-footer .footer-layout nav a:focus-visible,
.site-footer .footer-layout nav a[aria-current="page"] {
  color: var(--white);
}

/* Sales state blocks (js/sales-state.js, 25.09.2026). The hidden attribute
   has to win over the display of classes like .stat, which the home page
   sets without body.site-sub. */
[data-sales][hidden] {
  display: none !important;
}

/* One line under the hero figures of the home page: the dated "beta ends on
   ..." while the beta runs, the trial and beta rule once sales are open.
   Plain text below a hairline, no box. */
.sales-line {
  max-width: 36rem;
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
}

/* A link inside running text (home page FAQ). The base style of the site
   removes the underline from every link, which hides a link in a sentence. */
.sales-link {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sales-link:hover {
  color: var(--accent-2);
}

/* Keeps "www.vb-cable.com" from breaking at its hyphen on a phone. */
.nowrap {
  white-space: nowrap;
}

/* Quickstart, 25.09.2026: it used a rounded tinted card, a tinted note box
   and step numbers in circles; the site rule allows none of them. The same
   content now sits between hairlines, the numbers stand alone. The page has
   no body.site-sub, so these rules hang on their own classes. */
.doc-main.qs-main {
  background: var(--bg);
}

.doc-main .qs-block {
  margin: 20px 0;
  padding: 18px 0 16px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.doc-main .qs-block h3 {
  margin-top: 0;
}

.doc-main .qs-block ul {
  margin-bottom: 0;
}

/* The last step already ends on a hairline, so the note needs only space. */
.doc-main .qs-note {
  margin: 22px 0 0;
}

.doc-main .qs-note p {
  margin: 0;
  font-size: 14.5px;
}

/* .doc-main ol indents every list by 24 px; the steps line up with the
   hairlines of the page instead. */
.doc-main .doc-steps.qs-steps {
  padding-left: 0;
}

.doc-main .doc-steps.qs-steps > li {
  padding-left: 44px;
}

/* The step titles inherited the muted list colour; a title is text to read,
   so it gets the normal text colour, like "Voraussetzungen" above it. */
.doc-main .doc-steps.qs-steps h3 {
  color: var(--text);
}

.doc-main .doc-steps.qs-steps > li::before {
  top: 26px;
  width: auto;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
  color: #8585b0;
  line-height: 1.4;
}

/* ---- header, every page (26.09.2026) ------------------------------------
   Every page carries the home page header 1:1 plus one text link at the
   start of the actions: "Anmelden", or "Konto" once signed in
   (js/account.js). It reads like the nav links, no button, no pill. */
.nav-account {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 150ms ease;
}

.nav-account:hover,
.nav-account:focus-visible,
.nav-account[aria-current="page"],
.desktop-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
  color: var(--white);
}

.desktop-nav a,
.nav-actions .button {
  white-space: nowrap;
}

/* 29.09.2026, owner decision: on the sales pages (kaufen, kaufen-danke,
   konto, widerruf, kuendigen) the "Microsoft Store" button in the header is
   neutral, a hairline and white text instead of the gradient, so the only
   coloured action on those pages is the purchase itself. index.html keeps
   the gradient (its button has no nav-store-quiet class).
   To revert: delete these two rules (down to the "end nav-store-quiet"
   line); the class then does nothing. */
.nav-actions .button-primary.nav-store-quiet {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  text-shadow: none;
  box-shadow: none;
}

.nav-actions .button-primary.nav-store-quiet:hover,
.nav-actions .button-primary.nav-store-quiet:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transform: none;
}
/* end nav-store-quiet */

/* With seven links plus "Anmelden" the row no longer fits between 901 and
   1140 px ("So funktioniert es" broke onto two lines at 1100 px). The two
   links that also sit in the page itself step back there; the burger menu
   below 900 px keeps all of them. */
@media (min-width: 901px) and (max-width: 1140px) {
  .desktop-nav .nav-secondary {
    display: none;
  }
}

/* The house stylesheet sets the nav links to 13 px up to 1080 px; the
   account link follows. */
@media (max-width: 1080px) {
  .nav-account {
    font-size: 13px;
  }
}

@media (min-width: 901px) and (max-width: 1000px) {
  .nav-shell {
    gap: 20px;
  }

  .desktop-nav {
    gap: 14px;
  }
}

/* Below 900 px the account link moves into the burger menu, like the nav. */
@media (max-width: 900px) {
  .nav-actions .nav-account {
    display: none;
  }
}

/* Below 900 px the link list gets its own row; side by side it squeezed the
   brand column to a few words per line at tablet width. */
@media (max-width: 900px) {
  .site-footer .footer-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer .footer-layout nav {
    justify-content: flex-start;
    max-width: none;
  }
}

/* ------------------------------------------------------------ sub pages */

body.site-sub {
  /* Native controls (date picker, select list, checkbox) in the dark scheme. */
  color-scheme: dark;
}

/* The hidden attribute always wins, even over a class that sets display
   (a form with display:grid stayed visible after hidden=true). */
body.site-sub [hidden] {
  display: none !important;
}

/* preview-docs.css paints a purple glow behind the page head; the rule has
   no glow, so the sub pages sit on the plain background. */
body.site-sub .doc-main {
  background: var(--bg);
}

/* The eyebrow is a label, not a coloured heading. Text that has to be read
   uses #8585b0 instead of var(--muted), which reaches only 4.31:1 on the
   page background (WCAG AA wants 4.5:1); the same goes for the inactive
   language and choice labels below. */
body.site-sub .eyebrow {
  color: #8585b0;
}

/* 26.09.2026 (design review): the label above the page title reads the same
   as on /kaufen, /konto and /kaufen-danke (12 px, bold, accent). The
   paragraph rule of preview-docs.css had sized it 16 px like body text. */
body.site-sub .doc-main .eyebrow {
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

/* 26.09.2026: the plain-text language choice that stood here is gone. The
   owner wants the home page header on every page, so the DE/EN control of
   css/preview-professional.css applies unchanged on the sub pages too. */

/* ---- buttons ---------------------------------------------------------- */

/* 26.09.2026 (second visual review): the form buttons of /widerruf and
   /kuendigen take the house shape of every other button on the site
   (.button: radius 12), 46 px like the shop's form buttons; the accent edge
   keeps them the page's main action. */
body.site-sub .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-button, 12px);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.site-sub .btn:hover,
body.site-sub .btn:focus-visible {
  background: rgba(108, 99, 255, 0.12);
  border-color: #8f88ff;
  color: var(--white);
  text-decoration: none;
}

body.site-sub .btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
}

body.site-sub .btn[aria-disabled="true"],
body.site-sub .btn[aria-disabled="true"]:hover {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}

body.site-sub .btn[aria-busy="true"] {
  cursor: progress;
}

/* ---- form fields -------------------------------------------------------- */

body.site-sub .field {
  display: grid;
  gap: 6px;
  margin: 0 0 18px;
  min-width: 0;
}

body.site-sub .field > label,
body.site-sub .field > .field-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* 26.09.2026 (second visual review): with the house-shaped buttons the
   square fields of /widerruf and /kuendigen looked borrowed; they take the
   field of the shop and account forms (46 px, radius 10, a hint of fill). */
body.site-sub .field input,
body.site-sub .field textarea,
body.site-sub .field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}

body.site-sub .field select option {
  background: var(--bg-2);
  color: var(--text);
}

body.site-sub .field textarea {
  min-height: 120px;
  resize: vertical;
}

body.site-sub .field input:focus,
body.site-sub .field textarea:focus,
body.site-sub .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  outline: none;
}

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

/* Square checkbox. */
body.site-sub .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}

body.site-sub .check input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-content: center;
  margin: 3px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

body.site-sub .check input::after {
  width: 10px;
  height: 5px;
  border-bottom: 2px solid var(--white);
  border-left: 2px solid var(--white);
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

body.site-sub .check input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

body.site-sub .check input:checked::after {
  opacity: 1;
}

/* Radio group as text tabs on a hairline: the active one white with a 2 px
   underline, the others muted. The radios stay real radios (visually
   hidden), so arrow keys work. Markup: <fieldset class="choice"><legend>
   <label><input type="radio"><span>Text</span></label>... */
body.site-sub .choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
}

body.site-sub .choice > legend:not(.visually-hidden) {
  float: left;
  width: 100%;
  margin: 0 0 2px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

body.site-sub .choice label {
  position: relative;
  display: inline-flex;
  margin-bottom: -1px;
  cursor: pointer;
}

body.site-sub .choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

body.site-sub .choice label > span {
  display: block;
  padding: 11px 0 9px;
  border-bottom: 2px solid transparent;
  color: #8585b0;
  font-size: 15px;
  font-weight: 600;
  transition: color 150ms ease, border-color 150ms ease;
}

body.site-sub .choice label:hover > span {
  color: var(--text);
}

body.site-sub .choice input:checked + span {
  border-bottom-color: var(--white);
  color: var(--white);
}

body.site-sub .choice input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- facts, steps, notes -------------------------------------------------- */

/* Rows of term and value separated by hairlines. Works with <div> row
   wrappers (dl > div > dt + dd) and with bare dt/dd pairs. */
body.site-sub .facts {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  column-gap: 24px;
  margin: 0;
  border-top: 1px solid var(--line-strong);
}

body.site-sub .facts > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  column-gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

body.site-sub .facts > dt,
body.site-sub .facts > dd {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

body.site-sub .facts dt {
  color: #8585b0;
  font-size: 14px;
  line-height: 1.55;
}

body.site-sub .facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Numbered steps: the number in JetBrains Mono, no circle. */
body.site-sub .steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  counter-reset: site-step;
  list-style: none;
}

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

body.site-sub .steps > li::before {
  position: absolute;
  top: 14px;
  left: 0;
  color: #8585b0;
  content: counter(site-step);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
  line-height: 1.66;
}

body.site-sub .note {
  margin: 10px 0 0;
  color: #8585b0;
  font-size: 14px;
  line-height: 1.5;
}

/* An empty note takes no room but stays in the page, so a screen reader
   still announces text that appears in it later. */
body.site-sub .note:empty {
  margin: 0;
}

body.site-sub .note.is-error {
  color: #ff7b72;
}

body.site-sub .note.is-ok {
  color: #3fb950;
}

/* Small print: #8585b0 because var(--muted) reaches only 4.31:1 on the
   page background. */
body.site-sub .fine {
  color: #8585b0;
  font-size: 13.5px;
  line-height: 1.55;
}

/* One status line between two hairlines. */
body.site-sub .state-line {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

body.site-sub .state-line:empty {
  display: none;
}

/* A decision still open (deploy blocker): amber with a dotted underline,
   no box. */
body.site-sub .open-point {
  color: #d29922;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 680px) {
  body.site-sub .facts,
  body.site-sub .facts > div {
    grid-template-columns: minmax(0, 1fr);
  }

  body.site-sub .facts > div {
    row-gap: 2px;
  }

  body.site-sub .facts > dt {
    padding-bottom: 2px;
    border-bottom: 0;
  }

  body.site-sub .facts > dd {
    padding-top: 0;
  }
}