/* Our own additions to the Aurum design system (spec docs/superpowers/specs/2026-10-04-aurum-article-template-design.md
   §5.8), loaded after public/site/aurum/pages.css — which stays a byte-for-byte copy of the package. Token values only.
   Every rule is a request to the design system (differences file §2.10 a/b and §9); once the package has it, the rule goes. */

/* 2.10a — the H1 is the last breadcrumb entry: the crumb's type, one line, cut with an ellipsis. */
.au-crumbs ol { flex-wrap: nowrap; min-width: 0; }
.au-crumbs li { flex: none; }
.au-crumbs li:last-child { display: flex; flex: 0 1 auto; min-width: 0; }
.au-crumbs h1 { min-width: 0; margin: 0; font: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The H1 is never hidden: on a long trail only the ancestor crumbs shrink, each cut with its own ellipsis; the H1 keeps
   its full width and is cut only when it alone is wider than the row. Phones show just Home and the H1 (2.10b below). */
@media (min-width: 768px) {
  .au-crumbs li:not(:last-child) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .au-crumbs li:last-child { flex: none; max-width: 100%; }
}

/* 2.10b — phones show Home and the H1 (first and last entry) instead of the package's „‹ Parent“. */
@media (max-width: 767px) {
  .au-crumbs li:first-child { display: list-item; }
  .au-crumbs li:last-child { display: flex; }
  .au-crumbs li:not(:first-child):not(:last-child) { display: none; }
  .au-crumbs li:nth-last-child(2) a::before { content: none; }
}

/* The design's distance between the content and the footer (pages.css .pg-main: --space-8, --space-9 from 1024 px), on
   EVERY Aurum page in one rule: the last container in main. Not under the home page's last full-width band (`.au-band`
   — the design's sunken band touches the footer), which is no direct `.au-container`. Request to the design system:
   the `.pg-main` distance on the layout's main, with the band exception. */
main#content > .au-container:last-child { padding-bottom: var(--space-8); }
@media (min-width: 1024px) { main#content > .au-container:last-child { padding-bottom: var(--space-9); } }

/* The article column (§5.4/§5.5): the design's spacer divs (24 / 40 / 48 px, inline) as margins between the column's
   blocks — 40 px is no token, so the end-of-article blocks take --space-7.
   The calculator page's tool layout (spec 2026-10-05-aurum-page-types §5.5) takes the same distances between its
   blocks: `.au-tool` / `.au-tool__main` stand beside `.au-guide` / `.au-guide__main`. The overview page prints the
   end-of-page people cards and sources directly in its container (`.au-container > …`) — same distance. An accordion
   right after its own FAQ topic heading (`h2.pg-letter`) keeps no section distance — the `.pg-letter + .au-accordion`
   rule below out-specifies the accordion's distance here. */
.au-guide, .au-container > .au-guide__main { margin-top: var(--space-6); }
.au-guide__main > * + *, .au-tool__main > * + * { margin-top: var(--space-5); }
.au-guide__main > .au-teaser, .au-guide__main > .au-accordion, .au-guide__main > .au-people, .au-guide__main > .au-sources,
.au-tool__main > .au-teaser, .au-tool__main > .au-accordion, .au-tool__main > .au-people, .au-tool__main > .au-sources,
.au-container > .au-people, .au-container > .au-sources { margin-top: var(--space-7); }
/* The FAQ page's topic headings in the article column as in FAQ.html — and in the calculator page's tool column, which
   prints the same page end: `h2.pg-letter` keeps the package's distance above it (pages.css --space-7, which
   `… > * + *` above would override), and its accordion sits directly under it. Request to the design system:
   `.au-guide__main > .pg-letter` / `.au-tool__main > .pg-letter` rules in the package. */
.au-guide__main > .pg-letter, .au-tool__main > .pg-letter { margin-top: var(--space-7); }
.au-guide__main > .pg-letter + .au-accordion, .au-tool__main > .pg-letter + .au-accordion { margin-top: 0; }
/* The Lexikon's letter sections at the design's width (onlinevergleich24 Lexikon.html puts them in a
   `style="max-width: 820px"` div — an inline style in the design, our own class here; lexikon.html.twig). */
.site-lexikon { max-width: 820px; }
/* The Lexikon page's own text sits between the page head and the letter strip (the design has no text there: the strip
   follows the head's bottom space directly) — the strip keeps that distance after the text. */
.au-container > .au-prose + .pg-az { margin-top: var(--space-6); }
/* The calculator page (§5.5, design Rechner.html): the page head is the first block of the tool column, right under the
   crumbs as on the other page-head pages (no gap of its own above `.au-tool`), and its padding is the ONE gap below it —
   the design's inline `padding-bottom: 24px` (--space-5), so the next block adds none. Request to the design system: a
   `.au-tool__main > .au-pagehead` rule in the package. */
.au-tool__main > .au-pagehead { padding-bottom: var(--space-5); }
.au-tool__main > .au-pagehead + * { margin-top: 0; }
/* The calculator page's prose blocks at reading width: the package gives `.au-tool__main > .au-prose-col` this width
   (bundle.css); our prose blocks are `.au-prose` (AurumArticleBody). Request to the design system: cover `.au-prose` too. */
.au-tool__main > .au-prose { max-width: var(--measure); }
/* …and its FAQ too: the design's Rechner.html gives the accordion an inline 680 px (= --measure); without this rule it
   filled the whole tool column (~800 px at 1280), wider than an article's FAQ (Erkan 2026-10-20). */
.au-tool__main > .au-accordion { max-width: var(--measure); }
.au-accordion__tools h2 { margin: 0; }

/* After „Inhalt laden“ (§5.7): bundle.js empties the placeholder and puts the iframe in it — the frame takes the box's
   place; its height comes from data-height (chrome.js). */
.au-embed.is-loaded { display: block; padding: 0; background: none; border: 0; }
.au-embed.is-loaded iframe { display: block; width: 100%; border: 0; }

/* 2.10c — the profile name is an <h2> (the H1 is the last crumb, decision 2.10): the package styles `.pg-author h1`
   only (pages.css:140). Same values — the design system's H1 step (40/48, phones 32/40), which has no variable. */
.pg-author h2 { margin: var(--space-2) 0 0; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 768px) { .pg-author h2 { font-size: 40px; line-height: 48px; } }
/* The person page's topics (knowsAbout) as badges under a label, in one block: the block takes the distance pages.css
   gives `.pg-author .au-person__creds` and `.pg-author .au-person__links` (--space-4); the badges sit close under their
   label. Request to the design system: a topics block in `.pg-author` (the Autor design has none). */
.pg-author__topics { margin-top: var(--space-4); }
.pg-author__topics .au-person__creds { margin-top: var(--space-2); }

/* The home page (spec 2026-10-05-aurum-page-types §5.2): the end-spot teaser and the FAQ accordion stand directly in a
   container (the article's sit in .au-guide__main, which is not matched). Request to the design system: the design gives
   both `pg-section` — its section distance here — and the accordion an inline 880 px: no token, so reading width (--measure)
   for an accordion in a container in general, and the design's 880 px for the home page's FAQ (`.site-home-faq`, Erkan
   2026-10-20: "the design had it wider").
   An accordion right after its own topic heading (several FAQ modules: `h2.pg-letter`, which brings its own distance) sits
   directly under it, as in the design's FAQ.html — no section distance there. */
.au-container > .au-teaser, .au-container > .au-accordion:not(.pg-letter + .au-accordion) { margin-top: var(--space-7); }
@media (min-width: 1024px) { .au-container > .au-teaser, .au-container > .au-accordion:not(.pg-letter + .au-accordion) { margin-top: var(--space-8); } }
.au-container > .au-accordion { max-width: var(--measure); }
.site-home-faq > .au-accordion { max-width: 880px; }

/* The overview page (spec 2026-10-05-aurum-page-types §5.3): its intro's key-facts box keeps the article look at reading
   width. Request to the design system: the design gives the box an inline 880 px (Ratgeber.html) — no token, so --measure. */
.au-pagehead ~ .au-keyfacts { max-width: var(--measure); }
/* The reviewer link in the page head's meta line takes the line's colour, as the design's inline `color: inherit`
   (Ratgeber.html). Request to the design system: style `.au-pagehead__meta a` in the package. */
.au-pagehead__meta a { color: inherit; }

/* The top banner as the dark teaser (spec 2026-10-05-aurum-page-types §5.10): its partner kicker's „Was ist das?“ link
   keeps the package's light-surface colours (`.au-menuad__why`, bundle.css) — about 2:1 on the brand background, the
   hover nearly invisible. Request to the design system: recolour `.au-menuad__why` inside `.au-teaser--dark` as it
   already does `.au-label` and `.au-teaser__fine`. The inverse inks stay the same in dark mode (deep-brand background). */
.au-teaser--dark .au-menuad__why { color: var(--ink-inverse-muted); }
.au-teaser--dark a.au-menuad__why:hover { color: var(--ink-inverse); }

/* Pictures of the media library in the body (templates/site/aurum/_media_figure / _media_gallery.html.twig): the
   design's own classes since package v5 (Figure, FigureInText, Gallery, Screenshot, ScreenshotSteps, Lightbox), so
   only what the design has no rule for lives here. Requests to the design system: a gallery head without a title,
   an embed-code box. */
/* A gallery without a title: the counter takes the title's place, so the arrows stay at the end of the row. */
.au-gallery__head > .au-gallery__count:first-child { margin-right: auto; }
/* The embed box close under its figure; under a floated figure it floats along at the figure's width; under a wide
   figure it sits outside the text column too (AurumArticleBody), at the column's measure. */
.au-prose > .au-figure + .au-embed-code, .au-guide__main > .au-wide + .au-embed-code { margin-top: var(--space-2); }
@media (min-width: 768px) {
  .au-prose > .au-figure--float + .au-embed-code { float: left; clear: left; width: min(42%, 300px); margin: 0 var(--space-5) var(--space-3) 0; }
  .au-prose > .au-figure--end + .au-embed-code { float: right; clear: right; margin: 0 0 var(--space-3) var(--space-5); }
}
/* "Embed this image" (spec §17b): under an embeddable figure, closed by default; the snippet as text, a Copy button. */
.au-embed-code { font-size: 14px; line-height: 20px; }
.au-embed-code summary { cursor: pointer; color: var(--ink-muted); }
.au-embed-code textarea { display: block; width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border-hairline) solid var(--line); background: var(--surface-subtle); color: var(--ink); font-family: var(--font-mono); font-size: 13px; line-height: 20px; resize: vertical; }
.au-embed-code button { margin-top: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border: var(--border-hairline) solid var(--line-control); background: var(--paper); color: var(--ink); font-weight: 600; cursor: pointer; }
/* The calculator's result on phones (design packages 4 + 5): the package's one-column result grid is `1fr` (minimum =
   content), and since package 4 the „Rechenweg“ (`.au-calc__steps`) is `white-space: pre` — so one long Rechenweg line
   would widen the column and the whole page instead of scrolling inside the block (`overflow-x: auto`). `minmax(0, …)`
   as the package's own two-column rule from 768 px. Phones only, so that rule stays untouched. Request to the design
   system. */
@media (max-width: 767px) { .au-calc__result { grid-template-columns: minmax(0, 1fr); } }