/*
 * base.css — the ground rules that hold on every page.
 *
 * Sets the typographic base of the legacy site, the link colour and the corrections the fixed
 * header brings with it. Deliberately narrow: Divi ships a normalisation of its own, and only
 * what the legacy site does DIFFERENTLY from Divi belongs here.
 */

html {
  /* Base 14px. The legacy site counts from there; body copy sets 20px explicitly. */
  font-size: var(--wi-font-size-root);

  /* The header is fixed (E4 takes over the header only, not the footer). Without this offset
   * every anchor target lands underneath the header and looks like a fault. Global instead of
   * per case, because the anchors come out of the importer and are not known in advance.
   * See the risk table of the plan. */
  scroll-padding-top: var(--wi-scroll-offset);
}

body {
  font-family: var(--wi-font-sans), sans-serif;
  font-size: var(--wi-font-size-body);
  font-weight: var(--wi-font-weight-light);
  line-height: var(--wi-line-height-body);
  color: var(--wi-color-ink);
  background-color: var(--wi-color-surface);
}

/* For a signed-in editor the header sits below the admin bar (header.css, `body.admin-bar
 * .wi-header`), so its lower edge is 32px further down, 46px below 782px. The offset follows,
 * at the same three steps; below 600px the bar scrolls away and the header is back at the top.
 * `:has()` because the class sits on body and the scroll padding has to sit on the root. */
html:has(body.admin-bar) {
  scroll-padding-top: calc(var(--wi-scroll-offset) + 32px);
}

@media only screen and (max-width: 782px) {
  html:has(body.admin-bar) {
    scroll-padding-top: calc(var(--wi-scroll-offset) + 46px);
  }
}

@media only screen and (max-width: 600px) {
  html:has(body.admin-bar) {
    scroll-padding-top: var(--wi-scroll-offset);
  }
}

/* No `scroll-margin-top` on `:target` as well. The browser ADDS the target's scroll margin to
 * the scroller's scroll padding, and with both set every jump target landed 240px below the
 * top edge instead of 120 — measured on 2026-10-08 with bin/check-anchors.sh, the first time
 * the site had jump targets in the middle of a page (NA5 in AI/plans/done/nacharbeiten.md).
 * The padding on the root is the one that stays: it also keeps an element scrolled into view
 * by keyboard focus out from under the header, which a rule on `:target` does not. */

/*
 * `padding-bottom: 0` for the same reason as on the paragraph below: Divi sets
 * `h1,h2,h3,h4,h5,h6 { color:#333; padding-bottom:10px; line-height:1em; font-weight:500 }`.
 * Colour, line height and weight are taken back by this rule anyway — the padding slipped
 * through, because there was nothing here to answer it. It added itself silently to every
 * measured heading gap: below the H1 of an article stood 60 instead of the 50px that were set.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wi-font-sans), sans-serif;
  font-weight: var(--wi-font-weight-semibold);
  line-height: var(--wi-line-height-heading);
  padding-bottom: 0;
  /*
   * `color: inherit` was added with T9 — the comment above claimed the reset had been in place
   * since work package 1, the rule did not deliver it. It only showed when M12 became the first
   * unit to bring a heading in markup of its OWN: it stood in Divi's `#333` on the `#707070` of
   * the dark section, while its parent node had long been white.
   *
   * The reason the inherited colour from sections.css did not help is not a specificity
   * problem: Divi sets the colour DIRECTLY on the heading element, and a direct declaration
   * beats any inheritance, however specific the coloured ancestor is. The footer had solved
   * that already by colouring its headings itself — every further unit would have needed the
   * same line.
   *
   * Divi heading modules stay untouched: their presets set the colour explicitly and with two
   * classes in the selector. See E21 of the plan.
   */
  color: inherit;
}

/*
 * Size, line height and spacing of the headings stand HERE, on the bare type selector, and not
 * with the mode classes in sections.css. The reason is the finding of E11 in
 * AI/plans/done/sektions-bibliothek-divi.md: the legacy site tells dark and light mode apart
 * for headings by COLOUR alone. Carrying everything else twice would mean keeping two lists in
 * step that must never drift. sections.css therefore only sets the colour.
 *
 * That a type selector is enough has been checked and is not a gamble: Divi's own defaults are
 * bare type selectors as well (`h1 { font-size: 30px }`), and base.css loads after Divi's
 * inline block. Divi keeps one exception with `.et_pb_column_1_3 h2 { font-size: 23px }` and
 * its siblings — it only bites in thirds, quarters, fifths and sixths. Per E2 of the plan the
 * library knows whole and half columns only; should a third ever join them, this is the place
 * where it will show.
 *
 * Inside a Divi module the preset wins instead (`.preset--module--… h2`, two classes in the
 * selector). Size, weight and colour come from bin/lib/global-presets.php there — with the same
 * values. The spacing is in no preset, because Divi has no spacing option for a heading inside
 * a text module; for spacing this rule is the governing one inside Divi content too.
 */
/* The H1 brings its own line height since it left the shared 35px behind (2026-09-24, see
 * tokens.css): the 39px of the h1..h6 rule above would set a 44px letter too tight. */
h1 {
  font-size: var(--wi-font-size-h1);
  line-height: var(--wi-line-height-h1);
}

h2 { font-size: var(--wi-font-size-h2); }

h3 {
  font-size: var(--wi-font-size-h3);
  line-height: var(--wi-line-height-h3);
}

h1,
h2 {
  margin-bottom: var(--wi-space-heading);
}

h3 {
  margin-bottom: var(--wi-space-h3);
}

/* The legacy site takes the gap below the H2 back one step earlier than below the H1 — from
 * 1600px instead of from 991px. Measured, not derived; there is no derivation for it.
 *
 * Body copy changes at the SAME boundary, and that was not reproduced until 2026-08-27: size
 * from 20px to 16px, paragraph gap from 22px to 15px (E22 of the plan). Both measured by
 * narrowing in — 1601px shows 20px/22px, 1600px shows 16px/15px. That the H2 step stood here
 * and the copy step did not has a reason: work package 1 captured headings through the probe
 * `ueberschriften`, but never body copy across the widths. */
@media only screen and (max-width: 1600px) {
  h2 {
    margin-bottom: var(--wi-space-heading-narrow);
  }
}

@media only screen and (max-width: 991px) {
  h1,
  h2 {
    font-size: var(--wi-font-size-heading-narrow);
    line-height: var(--wi-line-height-heading-narrow);
    margin-bottom: var(--wi-space-heading-narrow);
  }

  /* The H1 keeps a step of its own here as well. Pulling it back onto the H2 value would undo
   * below 991px exactly the distinction the larger size exists for. */
  h1 {
    font-size: var(--wi-font-size-h1-narrow);
    line-height: var(--wi-line-height-h1-narrow);
  }
}

/* The H3 follows a step of its own: the legacy site takes it back only from 700px. */
@media only screen and (max-width: 700px) {
  h3 {
    font-size: var(--wi-font-size-h3-narrow);
    line-height: var(--wi-line-height-h3-narrow);
  }
}

/*
 * The paragraph gap is a margin, not padding — and the padding has to go explicitly.
 *
 * Finding on Divi 5.11.1, measured 2026-08-26 on the error page (work step 11): Divi sets a
 * global `p { padding-bottom: 1em }` in `divi-style-parent-inline-inline-css`. That is the same
 * kind of default as the bullets on `ul` (E8, which came up three times, in work steps 6, 8 and
 * 10), only quieter: it produces no visible marker, it adds itself silently to the margin. The
 * legacy site keeps 22px between two paragraphs; here stood 42px, and had done since work step
 * 6 on every page with body copy — measured again in the footer, 22 + 20 there as well.
 *
 * The reset needs no scope class, unlike the list reset: Divi's rule is a bare type selector,
 * ours is too, and base.css loads after Divi's inline block. At equal specificity the order
 * decides — verified against the position of the stylesheets in the document.
 */
p {
  margin-bottom: var(--wi-space-paragraph);
  padding-bottom: 0;
}

/*
 * The LIST in running text — F18 of the frontend defect list.
 *
 * Divi's reset zeroes `ul`, `ol` and `li` alike, and until 2026-09-07 nothing put the legacy
 * values back: the items of a bullet list stood glued to each other, and the paragraph after a
 * list stood glued to the list. Measured on the rendered snapshot at six widths on two pages,
 * 44 items in all:
 *
 *   between two items   4px above 1600px, 15px at and below
 *   below the list      22px at EVERY width — the `ul` keeps what the `p` gives up at 1600px
 *
 * The second line is the surprising one and it is measured, not derived. The legacy site carries
 * `ul` and `p` in one Bootstrap rule at 22px, and its 1600px step names only the paragraph
 * (`… .std-content p, … ul li, … ol li, .std-content li, .std-content p`) — the `ul` is not in
 * that list and keeps its 22px. Whoever writes the closing gap as `--wi-space-paragraph-narrow`
 * below 1600px reproduces a value nobody ever saw.
 *
 * **Scoped to the two homes of running text, and deliberately not to `.et-l`.** The size step
 * further down may use `.et-l li`, because a size on the `li` is invisible where the text sits
 * in a link — the navigation, the tab strip, the archive menu. A MARGIN is visible in all three,
 * and all three carry 0 in the legacy site. So the rule names where body copy lives: the text
 * module of a page (`.et_pb_text_inner`) and the content of an article (`.et_pb_post_content`).
 * Two selectors for one thing, as with the quotation of F14 — a page and an article do not share
 * a container.
 *
 * What this does NOT touch, checked rather than assumed: the download list, whose item carries
 * `.wi-downloads .wi-downloads__item` at two classes and its own measured 20px; the tab strip
 * (`.et_pb_tabs_controls`) and the archive menu, neither of which stands inside either home.
 *
 * The closing gap doubles as the spacing of a text module that ENDS in a list. That is the same
 * mechanism E26 relies on for a module ending in a paragraph — the trailing element carries the
 * gap, and the rule in sections.css only steps in where the preceding module is not text.
 * Without this line such a module had no bottom spacing at all.
 */
.et_pb_text_inner ul,
.et_pb_text_inner ol,
.et_pb_post_content ul,
.et_pb_post_content ol {
  margin-bottom: var(--wi-space-paragraph);

  /*
   * And the padding has to go explicitly, exactly as on the `p` above — same defect, same
   * cause, and it was measured here rather than assumed: Divi gives the list a
   * `padding-bottom: 20px` along with its bullets (the E8 default that came up three times in
   * work package 2; `download-list.css` names it as "the 23px at the bottom that come with the
   * bullets"). The legacy list has no bottom padding at all.
   *
   * It is not cosmetic, it decides the closing gap twice over. With the padding standing, the
   * last item's own margin cannot collapse into the list's — it is separated from it by the
   * padding — so both count and the 20px come on top: measured 46px above 1600px and 57px
   * below, against 22px on the legacy site. With the padding gone, the two margins collapse to
   * the larger of them and the gap is the 22px of the legacy site at every width. That is why
   * the item gap of 15px below 1600px is invisible at the END of a list and only shows between
   * items — which is precisely what the legacy site does.
   */
  padding-bottom: 0;
}

.et_pb_text_inner li,
.et_pb_post_content li {
  margin-bottom: var(--wi-space-list-item);
}

/*
 * Superscript, and the same for subscript: back to the proportions of the legacy site.
 *
 * Divi's parent stylesheet carries `sub,sup{height:0;line-height:1;position:relative;
 * vertical-align:baseline}` with `sup{bottom:.8em}`, and its reset list — the long one that
 * ends in `sub,sup,tt,u,ul,var` — sets `font-size:100%` along the way. Both together make a
 * superscript that keeps the full size of the copy and is lifted by four fifths of it.
 * Measured on 2026-09-02 at `/news-media/news-events/a-plattform-meeting/`: 20px on 20px copy,
 * `top: -16px` in a 24px line — the "th" of "27th" stood in the line ABOVE its own.
 *
 * The legacy site uses the Bootstrap normalisation, and it is the whole reason it never happens
 * there. Measured on the rendered snapshot of the same article: 15px (75 % of the copy),
 * `line-height: 0`, `top: -7.5px` (half its own size). `line-height: 0` is the load-bearing
 * part — it keeps the raised character from stretching the line box it sits in.
 *
 * `bottom` has to be answered explicitly. Divi sets it, this rule sets `top`, and both together
 * on a relatively positioned element is a case the browser decides for `top` — leaving Divi's
 * declaration standing but inert is exactly the sort of leftover that surprises the next reader.
 *
 * 33 articles and one page (`/wildislands/background/`) carry a `sup`: 36 date suffixes, 8 more
 * of them, and the cubic metre of the background page.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
  bottom: auto;
}

sub {
  top: auto;
  bottom: -0.25em;
}

/*
 * Body copy changes at the same boundary as the gap below the H2 — 1600px, derived above with
 * the headings. Measured by narrowing in: 1601px shows 20px at a 22px gap, 1600px shows 16px at
 * 15px. Until 2026-08-27 the repository carried both as constant (E22).
 *
 * This block stands AFTER the rule above rather than with the H2 block, and that is not a
 * filing mistake: `p` against `p` is the same specificity, so the order decides. Placed in the
 * upper block, the step lost against the base rule here — measured, not assumed: the margin
 * stayed at 22px across all widths.
 *
 * The size sits on the paragraph, not on the `body`. That one carries 14px throughout the
 * legacy site, and the step does NOT apply there — header, footer and navigation stay unchanged
 * across the boundary (measured over all levels, `abstaende`, the lines beginning "Ebene:").
 * And it is not in the text preset, because Divi's breakpoints are at 980 and 767px: a step at
 * 1600px is nothing a preset can express, it needs a media query (E7).
 *
 * On the `p` rather than on `.et_pb_text_inner`, where Divi's preset rule hangs: the size is
 * inherited there, and a direct rule on the element beats any inheritance — no matter how
 * specific the ancestor selector is. That saves the race against
 * `.preset--module--divi-text--…`.
 */
@media only screen and (max-width: 1600px) {
  p {
    margin-bottom: var(--wi-space-paragraph-narrow);
  }

  /* The item gap goes to the paragraph's value here — measured, and the legacy site says it in
   * one breath with the size. The gap BELOW the list stays at 22px and therefore has no line in
   * this block; see the list rules above. */
  .et_pb_text_inner li,
  .et_pb_post_content li {
    margin-bottom: var(--wi-space-paragraph-narrow);
  }

  .et-l p,
  .et-l li {
    font-size: var(--wi-font-size-body-medium);
  }
}

/*
 * The quotation, with F14 of the frontend defect list.
 *
 * It stands here on the bare type selector for the same reason as the paragraph above: Divi's
 * own defaults are bare type selectors too (`blockquote { margin: 20px 0 30px; border-left: 5px
 * solid; padding-left: 20px }` and `.et-search-form, blockquote { border-color: #2ea3f2 }`), and
 * base.css loads after Divi's inline block. At equal specificity the order decides. Scoping it
 * would take a class the quotation does not have: it comes out of the importer as plain markup
 * inside a text module, and on an article it additionally sits inside `.et_pb_post_content` —
 * two homes for one thing, which is what the post.css version had to say twice.
 *
 * Measured on the rendered snapshot at 1920px, article and page alike: 17.5px, italic, a 5px
 * rule in #eeeeee at the left edge, 10px/20px padding and 20px below. Divi delivers the blue
 * #2ea3f2 of its own theme instead, without italics and without vertical padding — which is
 * what the three quotations of /wildislands/wildislandrri/ would have shown once the importer
 * kept them.
 */
blockquote {
  font-style: italic;
  font-size: var(--wi-quote-size);
  padding: var(--wi-quote-padding);
  margin: 0 0 var(--wi-quote-space);
  border-left: 5px solid var(--wi-quote-rule);
}

/*
 * The 17.5px above are the size of the quotation ELEMENT, and no reader ever sees them: all 26
 * quotations in the stock carry their text in a `p` or an `h2`, never loose in the quotation.
 * The legacy site sizes that paragraph at 20px like any other, because it holds a direct rule
 * for `p`; here the size is inherited from the text module, and without this line the paragraph
 * would shrink to the 17.5px of its parent — measured on the instance, 17.5px on a page and
 * 20px in an article, which is the same content in two sizes.
 *
 * Below 1600px `.et-l p` takes over with the smaller step (one class beats two type selectors),
 * so this rule stays out of that boundary's way.
 */
blockquote > p {
  font-size: var(--wi-font-size-body);
}

/*
 * The content table (`ce-table`), NA11 of the follow-up list. The stock has exactly one page
 * with tables, /our-actions/current-progress/, and the importer keeps the class.
 *
 * Measured on the rendered snapshot at 1920px: the first row is the header and bold — TYPO3
 * marks it with `.ce-table tr:first-child { font-weight: bold }`, not with a `th` — and the
 * table has no border at the sides, only the line above each row. Divi draws a 1px #eee frame
 * around every table instead (`.entry-content table:not(.variations)`, 0,2,1) and leaves the
 * header at the 300 of the body copy. Three classes so that this wins whatever the order of
 * the stylesheets.
 */
.entry-content .et_pb_text_inner table.ce-table {
  border-left-color: transparent;
  border-right-color: transparent;
}

.entry-content .et_pb_text_inner table.ce-table tr:first-child td {
  font-weight: var(--wi-font-weight-bold);
}

a {
  color: var(--wi-color-accent);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--wi-color-accent);
  text-decoration: underline;
}

/* A visible focus ring. The legacy site has none — that is not a trait to reproduce: without
 * one the site cannot be operated from the keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wi-color-accent);
  outline-offset: 2px;
}

/* The content column for everything that stands OUTSIDE a Divi row (archive, 404, article,
 * island page, footer). Divi sets line lengths through its own row settings; this class holds
 * the same geometry so that the two edges line up on every page.
 *
 * Since NA9 (AI/plans/done/nacharbeiten.md, client decision of 2026-10-08) that geometry is
 * Divi's standard row — a share of the window, capped at the section width — and no longer the
 * legacy text column with its two steps (1170px centred, 180px per side from 1366px, 85% from
 * 900px). Measured before the change: a plain Divi row and this column stood at the same edge
 * below 1366px already and 183px apart at 1920px; now they meet at every width, which also
 * closes the second step of F2 (bin/check-footer.sh). The hero keeps the legacy column for its
 * panel (sections.css), nothing else reads it any more. */
.wi-text-column {
  width: var(--wi-width-text-ratio);
  max-width: var(--wi-width-max);
  margin-inline: auto;
}

.wi-container {
  max-width: var(--wi-width-max);
  margin-inline: auto;
}

/* Screen readers only — the "skip to content" link, labels without visible text. */
.wi-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}