/* Legal pages — Imprint, AGB, Datenschutzerklärung -------------------------
 *
 * Restyled, not rebuilt. The wording is legal text: it must survive the
 * redesign character for character, and the safest way to guarantee that is to
 * leave the scraped fragment alone and only change how it is drawn. Nothing
 * here adds, removes or reorders a single node.
 *
 * All three pages share the same two Webflow sections — `.terms_hero-section`
 * and `.terms_section-content` — so one sheet covers them. They were the last
 * pages still rendering on a light ground with a centred display title, which
 * on a dark site reads as a page from a different website. (It also inverted
 * the brand: the navbar blends in `difference`, so the sand accent came out
 * slate blue over the light panel.)
 *
 * Scoped to `[data-mode="frontier"]`, so the Lawenforcement port — which is a
 * verbatim 1:1 copy and carries the same class names — is untouched.
 */

[data-mode="frontier"] .terms_hero-section,
[data-mode="frontier"] .terms_section-content {
  background-color: var(--fr-bg, #0b0b0b);
  color: var(--fr-fg, #ffffff);
}

/* --- The title ------------------------------------------------------------ */

/* Left, at the display scale the rebuilt pages use. Centred at 96px it was the
   loudest thing on the site — on a page nobody reads for pleasure.
   Sentence case and lh 1.02 to match .fr-display; "Allgemeine
   Geschäftsbedingungen" in caps ran the full width of the page. */
[data-mode="frontier"] .terms_hero-section h1 {
  margin: 0;
  color: var(--fr-fg, #ffffff);
  font-size: clamp(2.25rem, 4.2vw, 3.78rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-align: left;
  /* `none`, not absent — dronivo.css uppercases every h1 by element name. */
  text-transform: none;
}

/* The hero was a full screen of empty light. It is a label, not a hero. */
[data-mode="frontier"] .terms_hero-section .padding-section-large {
  padding-top: 9rem;
  padding-bottom: 3rem;
}

[data-mode="frontier"] .terms_section-content .padding-section-large {
  padding-top: 3.5rem;
  padding-bottom: 6rem;
}

/* --- The text ------------------------------------------------------------- */

/* A measure, so the address block and the twelve clauses of the AGB read at
   the same width as body copy everywhere else instead of running the full
   1440px. */
[data-mode="frontier"] .terms_content-wrapper {
  max-width: 74ch;
}

[data-mode="frontier"] .terms_content-wrapper p,
[data-mode="frontier"] .terms_content-wrapper li,
[data-mode="frontier"] .terms_content-wrapper div {
  color: var(--fr-muted, rgba(255, 255, 255, 0.62));
}

[data-mode="frontier"] .terms_content-wrapper h2,
[data-mode="frontier"] .terms_content-wrapper h3,
[data-mode="frontier"] .terms_content-wrapper h4,
[data-mode="frontier"] .terms_content-wrapper .heading-style-h3 {
  color: var(--fr-fg, #ffffff);
  text-align: left;
}

[data-mode="frontier"] .terms_content-wrapper h2 {
  font-size: clamp(1.625rem, 3vw, 2.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
}

/* Die Markenfarbe, nicht Sand.
 *
 * Stand hier als `var(--fr-accent, #c4b798)`. Der Haken: --fr-accent wird auf
 * `.frontier` deklariert, und die Rechtsseiten sind gescrapte Fragmente, die
 * ausserhalb dieses Wrappers liegen. Die Variable ist dort also nicht gesetzt
 * und der Rueckfall griff — auf Lawenforcement hiess das Defence-Sand auf einer
 * blauen Seite, 97 Mal ueber Impressum, AGB und Datenschutz.
 *
 * --site-accent dagegen steht auf dem Wrapper jeder Seite und traegt die Farbe
 * des jeweiligen Auftritts. Die Kette geht deshalb ueber beide. */
[data-mode="frontier"] .terms_content-wrapper .text-style-link,
[data-mode="frontier"] .terms_content-wrapper a {
  color: var(--fr-accent, var(--site-accent, #c4b798));
}

/* The rules between the blocks are the design system's hairline, not the old
   sheet's near-black line on near-white. */
[data-mode="frontier"] .terms_hero-section + .divider-horizontal,
[data-mode="frontier"] .terms_content-wrapper .divider-horizontal {
  background-color: var(--fr-line, rgba(255, 255, 255, 0.14));
}

@media (max-width: 767px) {
  [data-mode="frontier"] .terms_hero-section .padding-section-large {
    padding-top: 7rem;
    padding-bottom: 2rem;
  }
}

/* --- The AGB accordion ---------------------------------------------------- */

/* Nineteen clauses in a Webflow CSS accordion. Its item is a white card with
   dark text, which on the light ground was invisible as a component and on the
   dark ground became a white slab with white text in it — the labels were
   simply not readable. Restyled to the same hairline row the rest of the
   design system uses: no fill, one rule per item, the chevron in the accent. */
[data-mode="frontier"] .accordion-css__item {
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--fr-line, rgba(255, 255, 255, 0.14));
  border-radius: 0;
  box-shadow: none;
}

[data-mode="frontier"] .accordion-css__list > .accordion-css__item:last-child {
  border-bottom: 1px solid var(--fr-line, rgba(255, 255, 255, 0.14));
}

[data-mode="frontier"] .accordion-css__item-top {
  background-color: transparent;
  padding: 1.25rem 0;
}

[data-mode="frontier"] .accordion-css__item-h3 {
  color: var(--fr-fg, #ffffff);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}

[data-mode="frontier"] .accordion-css__item-icon,
[data-mode="frontier"] .accordion-css__item-icon-svg {
  color: var(--fr-accent, var(--site-accent, #c4b798));
  background-color: transparent;
}

[data-mode="frontier"] .accordion-css__item-bottom,
[data-mode="frontier"] .accordion-css__item-bottom-wrap,
[data-mode="frontier"] .accordion-css__item-bottom-content {
  background-color: transparent;
}

[data-mode="frontier"] .accordion-css__item-p,
[data-mode="frontier"] .accordion-css__item-bottom-content p,
[data-mode="frontier"] .accordion-css__item-bottom-content li,
[data-mode="frontier"] .accordion-css__item-bottom-content div {
  color: var(--fr-muted, rgba(255, 255, 255, 0.62));
}

[data-mode="frontier"] .accordion-css__item-bottom-content strong {
  color: var(--fr-fg, #ffffff);
  font-weight: 500;
}