/*
 * content.css: the topic pages, 24.10.2026. German: /lautstaerke-angleichen-windows,
 * /lautstaerkeausgleich-windows, /vergleich, /faq, /ueber; English: the same
 * under /en/. Needs css/preview-professional.css, css/preview-docs.css and
 * css/site-controls.css. Everything is scoped to body.page-content.
 *
 * The owner's rule applies: no boxes, no pills, no chips, no badges, no
 * coloured headings. Groups come from 1 px hairlines and space, like the
 * legal pages (css/legal.css) and the quickstart.
 */

/* Body copy: var(--muted) reaches only 4.31:1 on #07070f. These pages are
   read, so the grey is raised inside the content, as on the legal pages. */
body.page-content .doc-main {
  --muted: #9494bb;
  --faint: #8585b0;
}

/* Anchors (#faq-...) land below the fixed header. */
body.page-content .doc-main [id] {
  scroll-margin-top: calc(var(--header-height, 62px) + 24px);
}

/* ---- page head ------------------------------------------------------------ */

/* The path above the title reads like the eyebrow of the other sub pages. */
body.page-content .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}

body.page-content .crumbs a {
  color: inherit;
}

body.page-content .crumbs a:hover,
body.page-content .crumbs a:focus-visible {
  color: var(--white);
  text-decoration: none;
}

body.page-content .crumbs span[aria-hidden] {
  color: #8585b0;
}

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

body.page-content .doc-updated {
  margin-bottom: 30px;
}

body.page-content .doc-main .lead {
  max-width: 700px;
  margin: 0 0 10px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.62;
}

body.page-content .doc-main .note {
  max-width: 700px;
  margin: 14px 0 0;
  color: #8585b0;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- lists and headings in the text ---------------------------------------- */

body.page-content .doc-main h3 {
  color: var(--text);
}

/* The steps of the quickstart (doc-steps qs-steps) are used as they are. */

/* ---- tables (comparison) ------------------------------------------------- */

/* 24.10.2026 (design review): on a desktop the comparison table (table.wide,
   six columns) is wider than the 840 px text column. From 920 px it steps
   out of the column, centred, up to 1040 px, so the long German words fit
   without clipping. Below 920 px (table.wide) and 600 px (table.pair) every
   row stands as a block between hairlines, each cell with its column name
   (td data-label) above it: no sideways scrolling, no row without its name.
   The strip only scrolls if a cell still does not fit. */
body.page-content .table-scroll {
  margin: 20px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.page-content .doc-main table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}

body.page-content .doc-main table.wide {
  min-width: 0;
}

@media (min-width: 920px) {
  body.page-content .table-scroll:has(> table.wide) {
    width: min(1040px, calc(100vw - 32px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

body.page-content .doc-main caption {
  caption-side: bottom;
  padding-top: 12px;
  color: #8585b0;
  font-size: 13.5px;
  text-align: left;
}

body.page-content .doc-main th,
body.page-content .doc-main td {
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

body.page-content .doc-main thead th {
  border-bottom-color: var(--line-strong);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

body.page-content .doc-main tbody th {
  color: var(--text);
  font-weight: 650;
}

/* The own product stands first and in the reading colour, nothing more. */
body.page-content .doc-main tr.own td {
  color: var(--text);
}

/* Phone and tablet: one block per row (see above). */
@media (max-width: 919px) {
  body.page-content .table-scroll:has(> table.wide) {
    overflow: visible;
  }

  body.page-content .doc-main table.wide,
  body.page-content .doc-main table.wide :is(caption, tbody, tr, th, td) {
    display: block;
  }

  body.page-content .doc-main table.wide thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  body.page-content .doc-main table.wide caption {
    padding: 0 0 10px;
  }

  body.page-content .doc-main table.wide tr {
    padding: 14px 0 6px;
    border-bottom: 1px solid var(--line);
  }

  body.page-content .doc-main table.wide :is(th, td) {
    padding: 0 0 8px;
    border: 0;
  }

  body.page-content .doc-main table.wide td::before {
    content: attr(data-label);
    display: block;
    color: #8585b0;
    font-size: 12.5px;
    font-weight: 600;
  }
}

@media (max-width: 600px) {
  body.page-content .table-scroll:has(> table.pair) {
    overflow: visible;
  }

  body.page-content .doc-main table.pair,
  body.page-content .doc-main table.pair :is(caption, tbody, tr, th, td) {
    display: block;
  }

  body.page-content .doc-main table.pair thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  body.page-content .doc-main table.pair caption {
    padding: 0 0 10px;
  }

  body.page-content .doc-main table.pair tr {
    padding: 14px 0 6px;
    border-bottom: 1px solid var(--line);
  }

  body.page-content .doc-main table.pair :is(th, td) {
    padding: 0 0 8px;
    border: 0;
  }

  body.page-content .doc-main table.pair td::before {
    content: attr(data-label);
    display: block;
    color: #8585b0;
    font-size: 12.5px;
    font-weight: 600;
  }
}

/* An e-mail address never breaks at its hyphen (support@audio-balance.com). */
body.page-content .doc-main a[href^="mailto:"] {
  white-space: nowrap;
}

/* ---- FAQ page -------------------------------------------------------------- */

body.page-content .jump {
  margin: 26px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

body.page-content .jump p {
  margin: 0 0 6px;
  color: #8585b0;
  font-size: 13.5px;
}

body.page-content .jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-content .jump li {
  margin: 0;
  font-size: 15px;
}

body.page-content .faq-group > h2 {
  margin-top: 56px;
}

body.page-content .faq-group h3 {
  margin: 28px 0 6px;
  font-size: 17.5px;
}

body.page-content .faq-group p,
body.page-content .faq-group ul {
  margin-top: 0;
}

/* The short FAQ at the end of the comparison uses the open/close list of
   the home page (.faq-list); inside the narrower text column it needs a
   little less room on the right. */
body.page-content .faq-list {
  margin-top: 18px;
}

body.page-content .faq-list details p {
  margin-right: 44px;
}

/* ---- call to action ------------------------------------------------------- */

/* The store button and the download link of the home page, between two
   hairlines. */
body.page-content .cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 44px 0 0;
  padding: 30px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

body.page-content .cta p {
  margin: 0;
}

body.page-content .cta .cta-intro {
  color: var(--text);
  font-size: 17px;
}

body.page-content .cta .cta-fine {
  color: #8585b0;
  font-size: 14px;
}

/* .doc-main a paints every link in the accent colour; the buttons keep
   their own look. */
body.page-content .doc-main .button-primary,
body.page-content .doc-main .button-primary:hover,
body.page-content .doc-main .button-primary:focus-visible {
  color: var(--white);
  text-decoration: none;
}

body.page-content .doc-main .text-link {
  color: #ccd4d8;
}

body.page-content .doc-main .text-link:hover,
body.page-content .doc-main .text-link:focus-visible {
  color: var(--white);
  text-decoration: none;
}

/* ---- "Weiterlesen" ---------------------------------------------------------- */

body.page-content .more {
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

body.page-content .more li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

body.page-content .more a {
  display: inline-block;
  font-weight: 600;
}

body.page-content .more span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 15px;
}

/* ---- about page: the text to quote ------------------------------------------ */

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

body.page-content .doc-main .quote p {
  margin: 0;
  color: var(--text);
}

@media (max-width: 680px) {
  body.page-content .doc-main .lead {
    font-size: 17px;
  }

  body.page-content .cta {
    align-items: stretch;
  }

  body.page-content .cta .text-link {
    align-self: center;
  }

  body.page-content .faq-list details p {
    margin-right: 20px;
  }
}