/* hedi.app — main stylesheet
   Entry point only. All rules live in imported partials.
   Build: npm run build
   Watch: npm run watch                                    */

/* Tokens — must come first so all partials can reference them */

/* hedi color tokens
   Source: paletti.scss + Figma design system, stand 21.03.2022
   Scale steps: 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

   Per-scale primaries (from SCSS):
     blue    → 60  (#2a84c6)
     green   → 70  (#007362)
     orange  → 60  (#c94e1b)
     purple  → 80  (#574e90)
     pink    → 50  (#e35c8d)
     brown   → 70  (#a35844)

   Gray scale sourced from Figma.
*/

:root {

  /* --- Blue --- */
  --color-blue-5:   #f5f7ff;
  --color-blue-10:  #ecf0ff;
  --color-blue-20:  #ced8f7;
  --color-blue-30:  #aec1ea;
  --color-blue-40:  #8bacde;
  --color-blue-50:  #6397d1;
  --color-blue-60:  #2a84c6;
  --color-blue-70:  #0070ab;
  --color-blue-80:  #005d90;
  --color-blue-90:  #004b76;
  --color-blue-100: #00395d;

  /* --- Green --- */
  --color-green-5:   #ecfafa;
  --color-green-10:  #d9f6f6;
  --color-green-20:  #b5dfdd;
  --color-green-30:  #91c8c4;
  --color-green-40:  #6db2aa;
  --color-green-50:  #489c90;
  --color-green-60:  #1c8879;
  --color-green-70:  #007362;
  --color-green-80:  #005f4c;
  --color-green-90:  #004b37;
  --color-green-100: #003824;

  /* --- Orange --- */
  --color-orange-5:   #fef6ef;
  --color-orange-10:  #ffeddf;
  --color-orange-20:  #f7ceb2;
  --color-orange-30:  #edaf88;
  --color-orange-40:  #e18f60;
  --color-orange-50:  #d36e3c;
  --color-orange-60:  #c94e1b;
  --color-orange-70:  #aa3e1d;
  --color-orange-80:  #8b301c;
  --color-orange-90:  #6c2418;
  --color-orange-100: #4e1913;

  /* --- Purple --- */
  --color-purple-5:   #fdf5fd;
  --color-purple-10:  #fbecfc;
  --color-purple-20:  #ead0ef;
  --color-purple-30:  #d6b6e3;
  --color-purple-40:  #c09cd8;
  --color-purple-50:  #a784ce;
  --color-purple-60:  #8e6ec6;
  --color-purple-70:  #715eab;
  --color-purple-80:  #574e90;
  --color-purple-90:  #3f3e75;
  --color-purple-100: #292e5b;

  /* --- Pink --- */
  --color-pink-5:   #fff4f6;
  --color-pink-10:  #ffeaec;
  --color-pink-20:  #ffc8d0;
  --color-pink-30:  #f9a5b7;
  --color-pink-40:  #ef82a0;
  --color-pink-50:  #e35c8d;
  --color-pink-60:  #db2f73;
  --color-pink-70:  #b7295b;
  --color-pink-80:  #942345;
  --color-pink-90:  #731d32;
  --color-pink-100: #521621;

  /* --- Brown --- */
  --color-brown-5:   #fff9fa;
  --color-brown-10:  #ffede0;
  --color-brown-20:  #f4d3c0;
  --color-brown-30:  #e6b9a1;
  --color-brown-40:  #d89f84;
  --color-brown-50:  #ca8569;
  --color-brown-60:  #bc6b51;
  --color-brown-70:  #a35844;
  --color-brown-80:  #8b4537;
  --color-brown-90:  #72332b;
  --color-brown-100: #5b221f;

  /* --- Gray --- */
  /* Carbon gray scale */
  --color-gray-5:   #f5f5f5;
  --color-gray-10:  #f4f4f4;
  --color-gray-20:  #e0e0e0;
  --color-gray-30:  #c6c6c6;
  --color-gray-40:  #a8a8a8;
  --color-gray-50:  #8d8d8d;
  --color-gray-60:  #6f6f6f;
  --color-gray-70:  #525252;
  --color-gray-80:  #393939;
  --color-gray-90:  #262626;
  --color-gray-100: #161616;

  /* --- White, offwhite --- */
  --color-white:    #ffffff;
  --color-offwhite: #fffaf6;   /* text on blue areas; the old site had no offwhite page background */

  /* --- Semantic aliases ---
     Always use these in components — never raw scale values.
     Swap the scale reference here to retheme globally.
  */
  --color-background:     var(--color-white);
  --color-text-primary:   var(--color-gray-100);
  --color-text-secondary: var(--color-gray-70);
  --color-text-muted:     var(--color-gray-50);
  --color-border:         var(--color-gray-20);
  --color-link:           var(--color-blue-60);
  --color-link-visited:   var(--color-blue-80);
  --color-focus:          var(--color-blue-60);
}

/* hedi typography tokens
   Source: typography.scss + fonts.scss + Figma type tokens, stand 16.08.2022

   Font families:
     sans  → Roboto (UI, body, h3–h6), Noto Arabic (RTL fallback)
     serif → Roboto Slab (h1, h2), Noto Arabic (RTL fallback)
     mono  → Roboto Mono

   Carbon heading scale is inverted: heading-06 = h1, heading-01 = h6.
   Tokens here use semantic names (--text-h1 etc.) with Carbon role noted.  */

:root {

  /* --- Font families --- */
  --font-sans:  "Roboto", "Noto Arabic", sans-serif;
  --font-serif: "Roboto Slab", "Noto Arabic", serif;
  --font-mono:  "Roboto Mono", monospace;

  /* --- Headings --- */
  /* Mobile-first, like the old site (hedi.app, Carbon): below md (42rem)
     the smaller values here, from md on the larger ones (media query at
     the end of this file). Measured on the archived site, see
     docs/golive.md, report 14. */

  /* h1 — productive-heading-06 (mobile: heading-04 size in Slab) */
  --text-h1-family:  var(--font-serif);
  --text-h1-size:    1.5rem;
  --text-h1-weight:  300;
  --text-h1-leading: 1.25;
  --text-h1-tracking: -0.32px;

  /* h2 — productive-heading-05 (mobile: expressive-heading-03) */
  --text-h2-family:  var(--font-serif);
  --text-h2-size:    1.25rem;
  --text-h2-weight:  400;
  --text-h2-leading: 1.333;
  --text-h2-tracking: 0;

  /* h3 — productive-heading-04 (mobile: heading-03 in 500) */
  --text-h3-family:  var(--font-sans);
  --text-h3-size:    1.125rem;
  --text-h3-weight:  500;
  --text-h3-leading: 1.375;
  --text-h3-tracking: 0;

  /* h4 — productive-heading-03 (mobile: 16px in 500) */
  --text-h4-family:  var(--font-sans);
  --text-h4-size:    1rem;
  --text-h4-weight:  500;
  --text-h4-leading: 1.3;
  --text-h4-tracking: 0;

  /* h5 — productive-heading-02 */
  --text-h5-family:  var(--font-sans);
  --text-h5-size:    1rem;
  --text-h5-weight:  500;
  --text-h5-leading: 1.375;
  --text-h5-tracking: 0;

  /* h6 — productive-heading-01 */
  --text-h6-family:  var(--font-sans);
  --text-h6-size:    0.875rem;
  --text-h6-weight:  500;
  --text-h6-leading: 1.3;
  --text-h6-tracking: 0.16px;

  /* --- Body --- */
  /* body-long-02: long-form article content */
  --text-body-family:  var(--font-sans);
  --text-body-size:    1rem;
  --text-body-weight:  400;
  --text-body-leading: 1.5;
  --text-body-tracking: 0;

  /* body-long-lg: reading text of articles and the home page, 16px on
     mobile, 20px from md on (old site: article paragraphs, home texts) */
  --text-body-lg-size:    1rem;
  --text-body-lg-leading: 1.5;

  /* body-short-01: compact UI labels, short text */
  --text-body-sm-size:    0.875rem;
  --text-body-sm-weight:  400;
  --text-body-sm-leading: 1.286;
  --text-body-sm-tracking: 0.16px;

  /* --- Glossary (old site): A–Z navigation and letter headings in Slab,
     the same size at every width --- */
  --text-glossary-nav-size:      1.5rem;   /* 24px */
  --text-glossary-nav-leading:   1.666;    /* 40px */
  --text-glossary-letter-size:   4rem;     /* 64px */
  --text-glossary-letter-weight: 500;
  --text-glossary-letter-leading: 1;

  /* --- Helper / caption --- */
  --text-helper-size:    0.75rem;
  --text-helper-weight:  400;
  --text-helper-leading: 1rem;
  --text-helper-tracking: 0.32px;

  /* --- Display --- */
  /* display-01: hero/page title, responsive */
  --text-display-size:    1.875rem;
  --text-display-weight:  400;
  --text-display-leading: 1.2;
  --text-display-tracking: 0;
}

/* Desktop values from md on */

@media (min-width: 42rem) {
  :root {
    --text-h1-size:     2.5rem;
    --text-h1-leading:  1.2;

    --text-h2-size:     2rem;
    --text-h2-weight:   300;
    --text-h2-leading:  1.25;
    --text-h2-tracking: -0.16px;

    --text-h3-size:     1.5rem;
    --text-h3-weight:   400;
    --text-h3-leading:  1.25;
    --text-h3-tracking: -0.16px;

    --text-h4-size:     1.25rem;
    --text-h4-weight:   400;

    --text-body-lg-size: 1.25rem;

    /* display-01 */
    --text-display-size:   3.375rem;
    --text-display-weight: 300;
    --text-display-leading: 1.185;
  }
}

/* hedi spacing tokens
   Source: Carbon design system defaults, confirmed against live site

   Spacing scale: base-8, named by size (not by number)
   Breakpoints: Carbon's standard rem-based scale
   Content widths: derived from Carbon 16-column grid at lg breakpoint  */

:root {

  /* --- Spacing scale --- */
  --space-1:   0.125rem;  /*  2px — hairline */
  --space-2:   0.25rem;   /*  4px — tight */
  --space-3:   0.5rem;    /*  8px — small */
  --space-4:   0.75rem;   /* 12px — small-mid */
  --space-5:   1rem;      /* 16px — base */
  --space-6:   1.5rem;    /* 24px — mid */
  --space-7:   2rem;      /* 32px — large */
  --space-8:   2.5rem;    /* 40px — large-mid */
  --space-9:   3rem;      /* 48px — xl */
  --space-10:  4rem;      /* 64px — 2xl */
  --space-11:  5rem;      /* 80px — 3xl */
  --space-12:  6rem;      /* 96px — 4xl */

  /* --- Layout / content widths --- */
  --width-page:    99rem;   /* 1584px — outer grid max-width */
  --width-content: 66rem;   /* 1056px — main content area (lg breakpoint) */
  --width-reading: 38rem;   /* 608px  — article text column, ~70 characters at 1rem */
  --width-narrow:  26rem;   /* 416px  — narrow panels, sidebars */

  /* Text column of articles and text pages, share of the page container
     like on the old site (Carbon grid): full width below md, 6 of 8 columns
     from md, 10 of 16 from lg (about 820px at 1440px) */
  --width-article: 100%;

  /* --- Page container ---
     One max-width and one side gutter for every page type and the footer:
     .content-container and the inner wrappers of footer and home page
     blocks use these two tokens. The header bar is full width on purpose. */
  --container-max:    var(--width-page);
  --container-gutter: var(--space-5);   /* 16px mobile, 40px from md, 64px from xlg */

  /* --- Grid --- */
  --grid-gutter:   var(--space-5);   /* 16px column gutters */

  /* --- Breakpoints (for use in @media queries) ---
     These cannot be CSS custom properties (not valid inside @media).
     Kept here as reference — use the raw values in media queries.
       sm:  320px  / 20rem   (not used by Carbon, mobile baseline)
       md:  672px  / 42rem
       lg:  1056px / 66rem
       xlg: 1312px / 82rem
       max: 1584px / 99rem                                            */
}

/* Wider side gutter from md on (40px) and xlg on (64px) */

@media (min-width: 42rem) {
  :root {
    --container-gutter: var(--space-8);
    --width-article: 75%;
  }
}

@media (min-width: 66rem) {
  :root {
    --width-article: 62.5%;
  }
}

@media (min-width: 82rem) {
  :root {
    --container-gutter: var(--space-10);
  }
}

/* Topic colours — one set per topic, chosen via `data-topic` on <body>
   (topic, topic area and article pages) or on a single card.
   The keys come from site/plugins/hedi/src/Topic.php (field `color` → key).
   No `data-topic` → pregnancy values (:root).

   PROVISIONAL values from the existing colour scales; the final table from
   design is still to come. --topic-card matches the former banner colours.

   --topic-main   accent colour (later: links, active navigation)
   --topic-hover  hover state of --topic-main
   --topic-tint   light background, e.g. the band behind the header illustration
   --topic-card   background of the topic tiles on the topics overview
   --topic-text   coloured text; falls back to --topic-main               */

/* Fallback for topics without their own text colour. Must come first: the
   topic blocks below override it with the same specificity. */

:root,
[data-topic] {
  --topic-text: var(--topic-main);
}

:root,
[data-topic="pregnancy"] {
  --topic-main:  var(--color-blue-60);
  --topic-hover: var(--color-blue-70);
  --topic-tint:  var(--color-blue-10);
  --topic-card:  var(--color-blue-60);
  --topic-text:  var(--color-blue-80);
}

[data-topic="birth"] {
  --topic-main:  var(--color-pink-60);
  --topic-hover: var(--color-pink-70);
  --topic-tint:  var(--color-pink-10);
  --topic-card:  var(--color-pink-40);
  --topic-text:  var(--color-pink-80);
}

[data-topic="after-birth"] {
  --topic-main:  var(--color-purple-60);
  --topic-hover: var(--color-purple-70);
  --topic-tint:  var(--color-purple-10);
  --topic-card:  var(--color-purple-40);
  --topic-text:  var(--color-purple-80);
}

[data-topic="advice"] {
  --topic-main:  var(--color-green-70);
  --topic-hover: var(--color-green-80);
  --topic-tint:  var(--color-green-10);
  --topic-card:  var(--color-green-70);
  /* no --topic-text: uses --topic-main */
}

[data-topic="finances"] {
  --topic-main:  var(--color-orange-60);
  --topic-hover: var(--color-orange-70);
  --topic-tint:  var(--color-orange-10);
  --topic-card:  var(--color-orange-50);
  --topic-text:  var(--color-orange-80);
}

/* Illustrations — how the same image file is shown in different places.
   The files keep their original format (topic 2:1, topic area 4:3); these
   values decide the visible frame. See CLAUDE.md "Illustrations". */

:root {
  /* Page header band (snippets/page_illustration.php), two kinds:
     - hero: the topic's 2:1 image fills the band (cover), cropped from the
       bottom only, so heads are never cut. 192px mobile … 416px max.
     - spot: the topic area's 4:3 image on a tinted band of fixed height,
       --spot-scale × band height (overflows and is cut at the band edges),
       moved --spot-shift from the centre towards the inline end.
     Keep the spot maximum (22rem × 1.1) in sync with page_illustration.php
     (used for `sizes`). */
  --hero-height: clamp(12rem, 28vw, 26rem);
  --spot-band-height: clamp(12.5rem, 24.5vw, 22rem);
  --spot-scale: 1.1;
  --spot-shift: 10%;

  /* How far the title card (breadcrumbs + h1) reaches up into the header
     band, from lg on (below lg it sits under the band): enough for the
     breadcrumbs and most of a one-line h1 */
  --title-card-overlap: calc(var(--space-12) + var(--space-6));

  /* Topic tiles on the topics overview (cover crop) */
  --illustration-ratio-tile: 2.2 / 1;

  /* Cards of topic areas: image area (the 4:3 spot is contained in it, never
     upscaled) and its maximum height, smaller below md */
  --illustration-ratio-card: 5 / 3;
  --illustration-card-max-height: 10rem;

  /* Home page blocks: maximum width of the section illustrations and of the
     audience images (old site: about 470px / 320px at 1440px) */
  --home-visual-width: clamp(16rem, 34vw, 30rem);
  --audience-image-width: clamp(10rem, 22vw, 20rem);
}

@media (min-width: 42rem) {
  :root {
    --illustration-card-max-height: 12rem;
  }
}

/* Breakpoint reference (cannot be used as custom properties in @media):
   md:  42rem / 672px
   lg:  66rem / 1056px
   xlg: 82rem / 1312px
   max: 99rem / 1584px                                                  */

/* Base */

/* hedi web fonts
   Font files live at assets/fonts/{family}/
   Weights loaded: 300 (light), 400 (regular), 500 (medium), 600 (bold)
   Noto Arabic covers RTL (Farsi) content as fallback in font stacks.  */

/* --- Roboto (sans) --- */

@font-face {
  font-family: "Roboto";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2"),
       url("../fonts/roboto/Roboto-Light.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
       url("../fonts/roboto/Roboto-Regular.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
       url("../fonts/roboto/Roboto-Medium.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
       url("../fonts/roboto/Roboto-Bold.woff") format("woff");
}

/* --- Roboto Slab (serif, h1+h2 only) --- */

@font-face {
  font-family: "Roboto Slab";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/robotoslab/RobotoSlab-Light.woff2") format("woff2"),
       url("../fonts/robotoslab/RobotoSlab-Light.woff") format("woff");
}

@font-face {
  font-family: "Roboto Slab";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/robotoslab/RobotoSlab-Regular.woff2") format("woff2"),
       url("../fonts/robotoslab/RobotoSlab-Regular.woff") format("woff");
}

/* --- Roboto Mono (code/mono) --- */

@font-face {
  font-family: "Roboto Mono";
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/robotomono/RobotoMono-VariableFont_wght.woff2") format("woff2"),
       url("../fonts/robotomono/RobotoMono-VariableFont_wght.woff") format("woff");
}

/* --- Noto Arabic (RTL fallback for Farsi content) --- */

@font-face {
  font-family: "Noto Arabic";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/noto/NotoSansArabic-Light.woff2") format("woff2"),
       url("../fonts/noto/NotoSansArabic-Light.woff") format("woff");
}

@font-face {
  font-family: "Noto Arabic";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto/NotoSansArabic-Regular.woff2") format("woff2"),
       url("../fonts/noto/NotoSansArabic-Regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Arabic";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto/NotoSansArabic-Medium.woff2") format("woff2"),
       url("../fonts/noto/NotoSansArabic-Medium.woff") format("woff");
}

/* hedi base reset
   Minimal reset — corrects browser inconsistencies without
   over-normalising. Builds on the box-sizing and margin reset
   pattern, then sets sensible defaults from design tokens.    */

/* --- Box model --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Document --- */

html {
  font-size: 100%; /* Respect user browser font size setting */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-leading);
  letter-spacing: var(--text-body-tracking);
  -webkit-font-smoothing: antialiased; /* greyscale AA on WebKit/Blink — visually lighter strokes */
  -moz-osx-font-smoothing: grayscale;  /* same effect on Firefox/macOS */
}

/* --- Margins --- */

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, figure, blockquote, pre {
  margin: 0;
}

/* --- Headings --- */

h1 {
  font-family: var(--text-h1-family);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
}

h2 {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
}

h3 {
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
}

h4 {
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-leading);
  letter-spacing: var(--text-h4-tracking);
}

h5 {
  font-family: var(--text-h5-family);
  font-size: var(--text-h5-size);
  font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-leading);
  letter-spacing: var(--text-h5-tracking);
}

h6 {
  font-family: var(--text-h6-family);
  font-size: var(--text-h6-size);
  font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-leading);
  letter-spacing: var(--text-h6-tracking);
}

/* --- Inline text --- */

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-helper-size);
  line-height: var(--text-helper-leading);
  letter-spacing: var(--text-helper-tracking);
}

/* --- Links --- */

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:visited {
    color: var(--color-link-visited);
  }

a:hover {
    text-decoration: none;
  }

a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

/* --- Lists --- */

ul, ol {
  padding-inline-start: var(--space-7);
}

li + li {
  margin-block-start: var(--space-3);
}

/* --- Media --- */

img, video, svg {
  display: block;
  max-width: 100%;
}

/* --- Forms (base only) --- */

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* --- RTL support --- */

[dir="rtl"] {
  font-family: var(--font-sans); /* Noto Arabic is already in the stack */
}

/* hedi base typography
   Prose rhythm and spacing for article/content contexts.
   All rules are scoped to .prose to avoid affecting UI components.
   Apply class="prose" to the container wrapping rendered article text. */

/* --- Vertical rhythm --- */

.prose p,
  .prose ul,
  .prose ol,
  .prose dl,
  .prose figure,
  .prose blockquote,
  .prose pre {
    margin-block-end: var(--space-6); /* 24px between blocks */
  }

/* Tighten spacing before headings that follow body text */

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-block-start: var(--space-10); /* 64px — clear visual break */
    margin-block-end: var(--space-5);    /* 16px — close to following text */
  }

/* First heading needs no top margin */

.prose :is(h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

/* Heading directly after heading — tighten gap */

.prose :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
    margin-block-start: var(--space-5);
  }

/* --- Lists --- */

.prose ul, .prose ol {
    padding-inline-start: var(--space-7); /* 32px indent */
  }

.prose li {
    margin-block-end: var(--space-3); /* 8px between items */
  }

.prose li:last-child {
    margin-block-end: 0;
  }

/* Nested lists */

.prose li > ul,
  .prose li > ol {
    margin-block-start: var(--space-3);
    margin-block-end: 0;
  }

/* --- Blockquote --- */

.prose blockquote {
    border-inline-start: 4px solid var(--color-border);
    padding-inline-start: var(--space-6);
    color: var(--color-text-secondary);
    font-style: italic;
  }

/* --- Inline code / pre --- */

.prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background-color: var(--color-gray-10);
    padding: 0.1em 0.3em;
    border-radius: 2px;
  }

.prose pre {
    font-family: var(--font-mono);
    font-size: var(--text-body-sm-size);
    background-color: var(--color-gray-10);
    padding: var(--space-6);
    overflow-x: auto;
  }

.prose pre code {
      background: none;
      padding: 0;
      font-size: inherit;
    }

/* --- Horizontal rule --- */

.prose hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-9);
  }

/* --- Images in prose --- */

.prose figure {
    margin-inline: 0;
  }

.prose figure img {
      border-radius: 4px;
    }

.prose figure figcaption {
      margin-block-start: var(--space-3);
      font-size: var(--text-helper-size);
      line-height: var(--text-helper-leading);
      letter-spacing: var(--text-helper-tracking);
      color: var(--color-text-secondary);
    }

/* Components — extend as new components are built */

/* layout component
   Page shell between header and footer.
   content-container is the outer page grid: --container-max wide with
   --container-gutter at the sides, like footer and home blocks.
   Individual components (article, error-page, etc.) narrow themselves
   as needed via their own max-width rules.               */

.site-main {
  min-height: 60vh; /* Prevent short pages collapsing footer up */
}

.content-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--space-10);
  padding-inline: var(--container-gutter);
}

/* Reading layout (articles, text pages): every direct child sits in one
   centred text column of --width-article. */

.content-container--reading > * {
  max-width: var(--width-article);
  margin-inline: auto;
}

/* Below a header illustration the title card comes first (overlapping the
   band from md on, see title-card.css), so less space above it */

.page-illustration + .content-container {
  padding-block-start: var(--space-7);
}

/* breadcrumbs component
   Horizontal trail showing the current page's position in the hierarchy. */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  gap: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  font-size: var(--text-body-sm-size);
  color: var(--color-text-muted);

  /* Separator before every item except the first */
}

.breadcrumbs li:not(:first-child)::before {
    content: '›';
    padding-inline: var(--space-3);
    color: var(--color-text-muted);
  }

.breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

.breadcrumbs a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

/* Active (current page) crumb */

.breadcrumbs li[aria-current] a {
  color: var(--color-text-primary);
  font-weight: var(--text-h5-weight);
}

/* page illustration — header band with the page's illustration
   (topic, topic area, article; snippets/page_illustration.php).
   Two kinds, chosen by where the image comes from (tokens in
   tokens/illustrations.css):
   - hero: topic image (2:1), fills the band, cropped from the bottom only
   - spot: topic area image (4:3), larger than the tinted band and cut at its
     edges, slightly towards the inline end (mirrored in RTL) */

.page-illustration {
  background-color: var(--topic-tint);
}

.page-illustration--hero {
  height: var(--hero-height);

  /* Direct child of .page-illustration (snippets/image.php outputs a bare <img>) */
}

.page-illustration--hero .page-illustration__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

.page-illustration--spot {
  position: relative;
  height: var(--spot-band-height);
  overflow: hidden;
}

.page-illustration--spot .page-illustration__image {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(50% + var(--spot-shift));
    width: auto;
    max-width: none;
    height: calc(100% * var(--spot-scale));
    translate: -50% -50%;
  }

/* translate is physical: centre on the mirrored inset-inline-start */

[dir="rtl"] .page-illustration--spot .page-illustration__image {
  translate: 50% -50%;
}

/* title card — breadcrumbs + h1 of topic, topic area and article pages
   (header of the page's <article>).
   On topic and topic area pages it overlaps the header band's lower
   inline-start corner from lg on (mirrored in RTL; below lg the band is too
   low for it). Its padding is pulled out to the inline start, so its text
   stays on the content edge. Articles (reading layout) keep the old site's
   title: breadcrumbs and h1 plainly below the band, no card. Below lg, and
   on pages without illustration, it is a plain header everywhere. */

.title-card .breadcrumbs {
  margin-block-end: var(--space-5);
}

.title-card > :last-child {
  margin-block-end: 0;
}

@media (min-width: 66rem) {
  .page-illustration + .content-container:not(.content-container--reading) {
    padding-block-start: 0;
  }

  .page-illustration + .content-container:not(.content-container--reading) .title-card {
    position: relative; /* above the band */
    width: fit-content;
    max-width: calc(var(--width-reading) + 2 * var(--space-7));
    margin-block-start: calc(-1 * var(--title-card-overlap));
    margin-inline-start: calc(-1 * var(--space-7));
    padding: var(--space-7);
    background-color: var(--color-background);
  }
}

/* site-header component
   Top bar: logo → main nav (topics dropdown, glossary) → language dropdown
   (far end). Below md, a menu button opens a panel with the same nav and
   languages. Opening/closing: assets/js/site-header.js, which sets
   `data-js` on .site-header — without it everything is shown expanded.
   Follows Carbon bx--header layout conventions.
   Logical properties only, so the bar mirrors itself in RTL.
*/

.site-header {
  background-color: var(--color-blue-60);
  color: var(--color-offwhite);
  position: sticky;
  top: 0;
  z-index: 100;
  border-block-end: 1px solid var(--color-blue-70);
}

.site-header__inner {
  position: relative; /* anchor for the mobile menu panel */
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* children fill the full bar height */
  min-height: 3rem;
  /* Full width, no side padding – independent of the page container:
     the logo and the language toggle bring --space-5 padding of their own */
}

/* Shared look of everything clickable in the bar */

.site-header__logo,
.site-header__toggle,
.site-nav__link,
.lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding-inline: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size); /* 0.875rem / 14px */
  font-weight: var(--text-body-sm-weight);
  line-height: var(--text-body-sm-leading);
  color: var(--color-offwhite);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.11s, border-color 0.11s;
}

.site-header__logo:visited, .site-header__toggle:visited, .site-nav__link:visited, .lang-switcher__toggle:visited {
    color: var(--color-offwhite);
  }

.site-header__logo:hover, .site-header__toggle:hover, .site-nav__link:hover, .lang-switcher__toggle:hover {
    color: var(--color-offwhite);
    background-color: var(--color-blue-50);
  }

.site-header__logo:focus-visible, .site-header__toggle:focus-visible, .site-nav__link:focus-visible, .lang-switcher__toggle:focus-visible {
    border-color: var(--color-offwhite);
    outline: none;
  }

/* --- Logo --- */

.site-header__logo {
  padding-inline: var(--space-5) var(--space-7);
  flex-shrink: 0;
}

/* The figure fills only part of its square viewBox, so it gets the full bar height */

.site-header__logo-image {
  display: block;
  height: 3rem;
  width: auto;
}

/* --- Menu button (mobile only) --- */

.site-header__toggle {
  display: none;
  margin-inline-start: auto;
}

/* --- Menu panel: nav + languages --- */

.site-header__menu {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

/* --- Main navigation --- */

.site-nav__list {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  margin: 0;
}

/* --- Language switcher — pushed to the far end --- */

.lang-switcher {
  margin-inline-start: auto;
  border-inline-start: 1px solid var(--color-blue-50);
}

/* --- Dropdowns (topics, languages) --- */

.dropdown {
  position: relative;
}

/* Physical borders on purpose: the chevron points down in every writing
   direction (logical borders would turn it sideways in RTL). */

.dropdown__chevron {
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.11s;
}

.dropdown__toggle[aria-expanded="true"] .dropdown__chevron {
  transform: translateY(25%) rotate(-135deg);
}

.dropdown__menu {
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
  background-color: var(--color-blue-70);
  min-inline-size: 14rem;
}

.dropdown__menu li {
    margin: 0;
  }

.dropdown__menu[hidden] {
    display: none;
  }

.dropdown__link {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body-sm-size);
  color: var(--color-offwhite);
  text-decoration: none;
  border: 2px solid transparent;
}

.dropdown__link:visited {
    color: var(--color-offwhite);
  }

.dropdown__link:hover {
    background-color: var(--color-blue-60);
  }

.dropdown__link:focus-visible {
    border-color: var(--color-offwhite);
    outline: none;
  }

.dropdown__link[aria-current] {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

.dropdown__item--all {
  margin-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-blue-60);
  padding-block-start: var(--space-3);
}

/* Wide screens: dropdowns float below their button */

@media (min-width: 42rem) {
  /* Buttons and links fill the full bar height (the search form makes it
     taller than 3rem): hover covers it, the text sits in the middle */
  .site-nav__item,
  .lang-switcher {
    display: flex;
  }

  .dropdown__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
  }

  .dropdown__menu--end {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

/* --- Small screens with JavaScript: menu button + panel --- */

@media (max-width: 41.99rem) {

    .site-header[data-js] .site-header__toggle {
      display: flex;
    }

    .site-header[data-js] .site-header__menu {
      position: absolute;
      inset-block-start: 100%;
      inset-inline: 0;
      flex-direction: column;
      max-block-size: calc(100vh - 3rem);
      overflow-y: auto;
      background-color: var(--color-blue-60);
      border-block-start: 1px solid var(--color-blue-70);
    }

      .site-header[data-js] .site-header__menu[hidden] {
        display: none;
      }

    .site-header[data-js] .site-nav__list {
      flex-direction: column;
    }

    .site-header[data-js] .lang-switcher {
      margin-inline-start: 0;
      border-inline-start: none;
      border-block-start: 1px solid var(--color-blue-50);
    }

    .site-header[data-js] .site-nav__link,
    .site-header[data-js] .lang-switcher__toggle {
      inline-size: 100%;
    }
}

/* Small screens without JavaScript: everything stacked, always visible */

@media (max-width: 41.99rem) {
  .site-header:not([data-js]) .site-header__menu {
    flex-direction: column;
    flex-basis: 100%;
  }
}

/* site-footer component
   Simple footer — nav links and copyright.
   Mirrors header background for visual bookending.  */

.site-footer {
  background-color: var(--color-blue-60);
  color: var(--color-offwhite);
  margin-block-start: var(--space-12);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--space-7);
  padding-inline: var(--container-gutter);
}

/* --- Nav links --- */

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.site-footer__link {
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-h6-weight);
  color: var(--color-offwhite);
  text-decoration: none;
  letter-spacing: var(--text-h6-tracking);
}

.site-footer__link:visited {
    color: var(--color-offwhite);
  }

.site-footer__link:hover {
    color: var(--color-blue-20);
  }

.site-footer__link:focus-visible {
    outline: 2px solid var(--color-offwhite);
    outline-offset: 4px;
    border-radius: 2px;
  }

/* --- Credit --- */

.site-footer__credit {
  font-size: var(--text-helper-size);
  color: var(--color-blue-20);
}

/* --- Responsive: stack on small screens --- */

@media (max-width: 41.98rem) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* btn component
   Primary and secondary button styles.
   Used across blocks and templates.       */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-4);
  padding-inline: var(--space-7);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-body-sm-weight); /* 400, as on the old site */
  line-height: var(--text-body-sm-leading);
  letter-spacing: var(--text-body-sm-tracking);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0; /* Carbon uses sharp corners */
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

/* Primary — filled */

.btn--primary {
  background-color: var(--color-blue-60);
  color: var(--color-offwhite);
  border-color: var(--color-blue-60);
}

.btn--primary:visited {
    color: var(--color-offwhite);
  }

.btn--primary:hover {
    background-color: var(--color-blue-70);
    border-color: var(--color-blue-70);
  }

/* Secondary — outline */

.btn--secondary {
  background-color: transparent;
  color: var(--color-blue-60);
  border-color: var(--color-blue-60);
}

.btn--secondary:visited {
    color: var(--color-blue-60);
  }

.btn--secondary:hover {
    background-color: var(--color-blue-10);
  }

/* article component
   Full article page layout.
   Prose content scoped to .prose — see base/typography.css   */

.article__header {
  margin-block-end: var(--space-9);
}

/* Long German compounds (e.g. Schwangerschaftskonfliktberatung) must not
   overflow narrow screens: hyphenate by the page language (lang on <html>),
   break as a last resort. */

.article__title,
.article__body :is(h2, h3, h4) {
  hyphens: auto;
  overflow-wrap: break-word;
}

.article__title {
  margin-block-end: var(--space-5);
}

/* Heading hierarchy in the article text: the lower the level, the closer
   it sits to the text before it (h2 keeps the 64px break from .prose). */

.article__body {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-leading);
  overflow-wrap: break-word; /* long URLs in links */
}

.article__body h3 {
    margin-block-start: var(--space-8);
  }

.article__body h4 {
    margin-block-start: var(--space-7);
  }

/* --- Error page --- */

.error-page {
  max-width: var(--width-reading);
  padding-block: var(--space-10);
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.error-page__title {
  margin-block-end: var(--space-7);
}

.error-page__body {
  margin-block-end: var(--space-8);
}

/* --- Template fallback warning --- */

.template-warning {
  padding: var(--space-6);
  background-color: var(--color-orange-10);
  color: var(--color-orange-80);
  border-inline-start: 4px solid var(--color-orange-60);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
}

.template-warning code {
    background-color: var(--color-orange-20);
    color: var(--color-orange-90);
  }

/* block-section component
   Two-column section block: text + optional image.
   Flip modifier swaps column order.
   Background modifier sets white or blue.              */

.block-section {
  padding-block: var(--space-11); /* 80px */
}

.block-section--white {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.block-section--blue {
  background-color: var(--color-blue-10);
  color: var(--color-text-primary);
}

.block-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* Flip: reverse column order */

.block-section--flipped .block-section__inner {
  direction: rtl; /* flips grid order */
}

.block-section--flipped .block-section__inner > * {
    direction: ltr; /* restore text direction within children */
  }

/* --- Text column --- */

.block-section__heading {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  margin-block-end: var(--space-7);
}

/* The page's h1 (option "Hauptüberschrift") */

.block-section__heading--main {
  font-family: var(--text-h1-family);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
}

/* Feature points — definition list */

.block-section__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-block-end: var(--space-8);
}

.block-section__feature-heading {
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-leading);
  color: var(--color-blue-60);
  margin-block-end: var(--space-3);
}

.block-section__feature-text {
  margin: 0;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-leading);
  color: var(--color-text-primary);
}

/* Buttons row */

.block-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-block-start: var(--space-8);
}

/* --- Visual column ---
   The illustration stays beside the text and does not dominate:
   at most --home-visual-width wide (tokens/illustrations.css). */

.block-section__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-section__visual img {
    max-width: min(100%, var(--home-visual-width));
    height: auto;
  }

/* --- Responsive: stack on small screens, image below the text --- */

@media (max-width: 65.98rem) {
  .block-section__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .block-section--flipped .block-section__inner {
    direction: ltr;
  }
}

/* block-audience-grid component
   Heading + three audience cards in a row.              */

.block-audience-grid {
  padding-block: var(--space-11);
}

.block-audience-grid--white {
  background-color: var(--color-background);
}

.block-audience-grid--blue {
  background-color: var(--color-blue-10);
}

.block-audience-grid__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.block-audience-grid__heading {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  margin-block-end: var(--space-9);
}

/* --- Cards --- */

.block-audience-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* As wide as its image, label and description centred below it */

.audience-card {
  margin: 0; /* no li + li spacing (reset.css) in the grid */
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: var(--audience-image-width);
  max-width: 100%;
  text-align: center;
}

.audience-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.audience-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

.audience-card__label {
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  color: var(--color-blue-60);
}

.audience-card__description {
  font-size: var(--text-body-size);
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- Responsive: stack to single column on small screens --- */

@media (max-width: 65.98rem) {
  .block-audience-grid__cards {
    grid-template-columns: 1fr;
  }
}

/* Mobile: the single column of cards is centred */

@media (max-width: 41.98rem) {
  .block-audience-grid__cards {
    justify-items: center;
  }
}

@media (min-width: 42rem) and (max-width: 65.98rem) {
  .block-audience-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* block-faq component
   Accordion of question/answer pairs using native <details>/<summary>.
   No JavaScript required — progressively enhanced.               */

.block-faq {
  padding-block: var(--space-11);
}

.block-faq--white {
  background-color: var(--color-background);
}

.block-faq--blue {
  background-color: var(--color-blue-10);
}

.block-faq__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.block-faq__heading {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  margin-block-end: var(--space-9);
}

/* --- Accordion items --- */

.block-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.faq-item {
  border-block-start: 1px solid var(--color-border);
}

.faq-item:last-child {
    border-block-end: 1px solid var(--color-border);
  }

.faq-item__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lg-leading);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none; /* remove default triangle in Firefox */

  /* Remove default marker in WebKit */
}

.faq-item__question::-webkit-details-marker {
    display: none;
  }

/* Custom indicator */

.faq-item__question::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-inline-end: 2px solid var(--color-blue-60);
    border-block-end: 2px solid var(--color-blue-60);
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-block-start: -0.25rem; /* optical alignment */
  }

.faq-item__question:hover {
    color: var(--color-blue-60);
  }

.faq-item__question:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

/* Rotate indicator when open */

details[open] .faq-item__question::after {
  transform: rotate(-135deg);
  margin-block-start: 0.25rem;
}

.faq-item__answer {
  padding-block-end: var(--space-7);
  padding-inline-end: var(--space-10); /* indent away from the indicator */
  color: var(--color-text-secondary);
}

/* topics page + shared listing components
   topic-list, article-list, article-row        */

/* --- Topics page layout --- */

.topics-page__header {
  margin-block-end: var(--space-10);
}

.topics-page__title {
  margin-block-end: var(--space-6);
}

.topics-page__intro {
  max-width: var(--width-reading);
}

.topics-page__subtopics {
  margin-block-end: var(--space-10);
}

.topics-page__section-heading {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  margin-block-end: var(--space-7);
}

/* --- Topic banner list ---
   Vertical stack of full-width horizontal banner cards.
   Image column alternates left/right via :nth-child(even). */

.topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Topic banner card --- */

.topic-banner {
  /* Colour of the tile's topic (data-topic, src/css/tokens/topics.css) */
  background-color: var(--topic-card);
}

.topic-banner__link {
  display: flex;
  flex-direction: row; /* default: text left, image right */
  min-height: 8.5rem; /* ~136px — matches live site row height; taller when the illustration needs it */
  text-decoration: none;
  overflow: hidden;
  transition: filter 0.15s ease;
}

.topic-banner__link:hover {
    filter: brightness(1.06);
  }

.topic-banner__link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

/* Even items: flip — image left, text right */

.topic-list > .topic-banner:nth-child(even) .topic-banner__link {
  flex-direction: row-reverse;
}

/* Coloured text side — fills remaining space */

.topic-banner__color {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-5);
  padding-inline: var(--space-7);
}

/* Image / illustration side — fixed proportion */

.topic-banner__visual {
  flex: 0 0 30%;
  aspect-ratio: var(--illustration-ratio-tile);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.18); /* placeholder tint until illustrations arrive */
}

/* Cover image, output by snippets/image.php */

.topic-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.topic-banner__title {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-body-weight); /* regular, as on the old site */
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-offwhite);
}

/* ============================================================
   RESERVED FOR LATER USE — Topic card grid (5-column layout)
   Kept here for the curated article card section planned in Phase 2.
   ============================================================

.topic-card-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);

  @media (min-width: 42rem) { grid-template-columns: repeat(3, 1fr); }
  @media (min-width: 66rem) { grid-template-columns: repeat(5, 1fr); }
}

.topic-card__link {
  display: flex;
  flex-direction: column;
  height: 10rem;
  text-decoration: none;
  overflow: hidden;
  transition: filter 0.15s ease;
  &:hover { filter: brightness(1.1); }
  &:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
}

.topic-card__visual {
  flex: 1;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  & img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

.topic-card__footer {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  flex-shrink: 0;
}

.topic-card__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-offwhite);
  @media (min-width: 42rem) { font-size: 1.125rem; }
  @media (min-width: 66rem) { font-size: 1.25rem; }
}

.topic-card--blue   { background-color: #2a84c6; }
.topic-card--pink   { background-color: #ef82a0; }
.topic-card--purple { background-color: #c09cd8; }
.topic-card--green  { background-color: #007362; }
.topic-card--orange { background-color: #d36e3c; }

============================================================ */

/* --- Article list --- */

.article-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- Article row --- */

.article-row {
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.article-row:last-child {
    border-block-end: 1px solid var(--color-border);
  }

.article-row__title {
  display: block;
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  color: var(--color-blue-60);
  text-decoration: none;
  margin-block-end: var(--space-2);
}

.article-row__title:visited {
    color: var(--color-blue-80);
  }

.article-row__title:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

.article-row__title:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

.article-row__breadcrumb {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-leading);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-muted);
  margin: 0;
}

.article-row__breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
  }

.article-row__breadcrumb a:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

/* subtopic page component
   Lists topic-child cards in a grid, followed by a flat article index. */

.subtopic-page__header {
  margin-block-end: var(--space-8);
}

.subtopic-page__title {
  margin-block-end: var(--space-6);
}

.subtopic-page__intro {
  max-width: var(--width-reading);
  margin-block-end: var(--space-10);
}

.subtopic-page__groups {
  margin-block-end: var(--space-11);
}

.subtopic-page__section-heading {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  margin-block-end: var(--space-7);
}

/* --- Subtopic card grid: 1 / 2 / 4 columns --- */

.subtopic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);

  /* minmax(0, …): long German compounds must not widen their column */
}

@media (min-width: 42rem) {

.subtopic-list { grid-template-columns: repeat(2, minmax(0, 1fr));
} }

@media (min-width: 66rem) {

.subtopic-list { grid-template-columns: repeat(4, minmax(0, 1fr));
} }

/* --- Subtopic card --- */

.subtopic-card {
  display: flex;
  flex-direction: column;
  margin: 0; /* no li + li spacing (reset.css) in the grid */
}

.subtopic-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  background-color: var(--color-blue-5);
  border: 1px solid var(--color-blue-20);
  transition: background-color 0.15s, border-color 0.15s;
}

.subtopic-card__link:hover {
    background-color: var(--color-blue-10);
    border-color: var(--color-blue-30);
  }

.subtopic-card__link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

/* --- Image area ---
   Fixed frame (--illustration-ratio-card, at most
   --illustration-card-max-height high); the 4:3 spot is contained in it,
   centred and never upscaled (max-width/max-height, not object-fit). */

.subtopic-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--illustration-ratio-card);
  max-height: var(--illustration-card-max-height);
  overflow: hidden;
  background-color: var(--color-blue-10);
}

/* Cover image, output by snippets/image.php */

.subtopic-card__img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.subtopic-card__image--placeholder {
  background-color: var(--color-blue-10);
}

/* --- Title --- */

.subtopic-card__title {
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-leading);
  color: var(--color-blue-80);
  padding: var(--space-5) var(--space-6);
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}

.subtopic-card__link:hover .subtopic-card__title {
    color: var(--color-blue-90);
  }

/* topic page component
   Article listing within a topic grouping. */

.topic-page__header {
  margin-block-end: var(--space-8);
}

.topic-page__title {
  margin-block-end: var(--space-6);
}

.topic-page__intro {
  max-width: var(--width-reading);
  margin-block-end: var(--space-10);
}

/* glossary component
   Alphabetical list of terms and definitions, laid out like the old site
   (hedi.app/de/glossar): centred A–Z navigation and large letter headings
   in Roboto Slab, blue; terms in two columns from md on, no dividers
   between the entries.
   Prose content scoped to .prose — see base/typography.css   */

.glossary__header {
  margin-block-end: var(--space-10);
}

.glossary__title {
  margin-block-end: var(--space-6);
}

.glossary__intro {
  max-width: var(--width-reading);
}

/* --- Alpha navigation --- */

.glossary__alpha-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-5);
  margin-block-end: var(--space-3);
}

.glossary__alpha-letter {
  font-family: var(--font-serif);
  font-size: var(--text-glossary-nav-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-glossary-nav-leading);
  text-transform: uppercase;
  text-decoration: none;
}

.glossary__alpha-letter--active {
  color: var(--color-link);
}

.glossary__alpha-letter--active:visited {
    color: var(--color-link);
  }

.glossary__alpha-letter--active:hover {
    color: var(--color-blue-70);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

.glossary__alpha-letter--active:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

.glossary__alpha-letter--empty {
  color: var(--color-gray-40);
  cursor: default;
}

/* --- Letter sections ---
   From lg on indented by one of 16 grid columns, like the old site */

.glossary__section {
  margin-block-end: var(--space-8);
}

@media (min-width: 66rem) {

.glossary__section {
    padding-inline: calc(100% / 16);
}
  }

.glossary__section-letter {
  font-family: var(--font-serif);
  font-size: var(--text-glossary-letter-size);
  font-weight: var(--text-glossary-letter-weight);
  line-height: var(--text-glossary-letter-leading);
  color: var(--color-link);
  padding-block-end: var(--space-3);
  margin-block: 0;
  border-block-end: 1px solid var(--color-border);
  scroll-margin-top: calc(3rem + var(--space-6));
}

/* --- Term list: 1 column, 2 from md on --- */

.glossary__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-7);
  row-gap: var(--space-8);
  margin: var(--space-6) 0 0;
  padding: 0;
}

@media (min-width: 42rem) {

.glossary__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
  }

@media (min-width: 66rem) {

.glossary__list {
    column-gap: var(--space-12);
}
  }

/* Target of glossary links (#slug, templates/term.php): keep the term
   clear of the sticky header */

.glossary__entry {
  scroll-margin-top: calc(3rem + var(--space-6));
}

.glossary__term {
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  color: var(--color-text-primary);
  margin-block-end: var(--space-3);
}

/* Long German compounds must not overflow narrow screens (as in
   article.css): hyphenate by page language, break as a last resort. */

.glossary__definition {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-text-primary);
  hyphens: auto;
  overflow-wrap: break-word;

  /* the entry spacing comes from the grid, not from the last paragraph */
}

.glossary__definition > :last-child {
    margin-block-end: 0;
  }

/* back-to-top component
   Floating anchor link that scrolls the page back to the top.
   Uses inset-inline-end so it respects RTL layouts automatically.
   smooth scroll-behavior is set here as it pairs with this feature. */

html {
  scroll-behavior: smooth;
}

.back-to-top {
  position: fixed;
  inset-block-end: var(--space-7);
  inset-inline-end: var(--space-7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-blue-60);
  color: var(--color-offwhite);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
  z-index: 50;
  transition: background-color 0.15s ease;
}

.back-to-top:hover {
    background-color: var(--color-blue-70);
  }

.back-to-top:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

/* notice component
   Highlighted box for a short editorial notice, e.g. the optional notice
   on the home page (field `notice`, blueprints/pages/home.yml). */

.content-container--notice {
  padding-block-end: 0;
}

.notice {
  max-width: var(--width-reading);
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-blue-10);
  border-inline-start: 4px solid var(--color-blue-60);
}

.notice > :last-child {
    margin-block-end: 0;
  }

/* search component
   Search form (header and search page) and the search results page.
   Results reuse .article-row (components/topics.css). */

.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.search-form__input {
  flex: 1;
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-sm-size);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.search-form__input:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
  }

.search-form__button {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body-sm-size);
  color: var(--color-offwhite);
  background-color: var(--color-blue-60);
  border: 2px solid transparent;
  border-radius: 2px;
}

.search-form__button:hover {
    background-color: var(--color-blue-70);
  }

.search-form__button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

/* In the header bar: compact, on the blue background */

.search-form--header {
  padding: var(--space-2) var(--space-5); /* fits the 3rem bar */
}

.search-form--header .search-form__input {
    inline-size: 10rem;
    border-color: var(--color-blue-70);
  }

.search-form--header .search-form__button {
    background-color: var(--color-blue-70);
    border-color: var(--color-blue-50);
  }

.search-form--header .search-form__button:hover {
      background-color: var(--color-blue-80);
    }

.search-form--header .search-form__button:focus-visible {
      outline: none;
      border-color: var(--color-offwhite);
    }

@media (min-width: 42rem) {
  .search-form--header {
    margin-inline-start: auto;
  }

  /* Search field takes the far end's spot, languages follow it */
  .search-form--header + .lang-switcher {
    margin-inline-start: 0;
  }
}

/* --- Search page --- */

.search-page__header {
  margin-block-end: var(--space-7);
}

.search-page__title {
  margin-block-end: var(--space-5);
}

.search-form--page {
  margin-block-end: var(--space-9);
}

.search-form--page .search-form__input {
    font-size: var(--text-body-size);
  }

.search-page__count {
  font-size: var(--text-h4-size);
  margin-block-end: var(--space-6);
}

.search-page__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-7);
}

.article-row__excerpt {
  margin-block-start: var(--space-3);
  font-size: var(--text-body-sm-size);
  color: var(--color-text-secondary);
}

/* Visible for screen readers only */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}