/* 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.
   Design v24 (30.10.2026) answered most of them (bundle.css section `== requests ==`, table in docs/design/aurum/CHANGES.md);
   those rules are gone from here. What stays: 2.10a/b (the H1 in the crumb — the package keeps it in the page head, on
   purpose, until Erkan confirms the decision for every Aurum site), page styles of the canvases and site-specific rules. */

/* 2.10a — the H1 is the last breadcrumb entry: the crumb's type, one line, cut with an ellipsis. The tool page's last
   crumb is plain text (its H1 is in the page head, tool.html.twig) and is cut the same way. */
.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, .au-crumbs li:last-child > span { 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 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); }

/* 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; } }

/* "Powered by" credit line under a widget that carries link= (WidgetEmbeds: the calculators read its anchor as a domain lock). */
.site-widget-credit { font-size: .8em; text-align: right; margin-top: .25rem; }

/* A pasted calculator snippet (CalculatorSnippet, `[snippet]`): it brings its own look, as on WordPress. It sits outside
   `.au-prose`, so the prose styles do not reach it; light only, because the calculators have no dark look and the site's
   dark mode would otherwise turn their native selects and radio buttons dark (seen 2026-10-30 on the Firmenwagenrechner). */
.site-snippet { color-scheme: light; margin-block: var(--space-6); }
/* Full main-column width, as wide tables get: the calculators lay out form and result side by side and were built for
   WordPress's ~920 px; in the 680 px text column their number fields shrank to 12 px (Zinsrechner, seen 2026-10-31). */
.au-guide__main > .site-snippet { max-width: none; }

/* Layout „Wide top“ (page.html.twig; onlinevergleich24 design „Kreditkarten-Vergleich“): the lead sits in the page head
   (`.au-article-head__lead`, which may hold paragraphs here), the first box or calculator spans the whole container under
   the head, the contents and the text start beneath it. Request to the design system: a comparison page type. */
.au-article-head__lead .au-prose { margin: 0; font: inherit; color: inherit; }
/* The head on test.onlinevergleich24.de/depot/ (Erkan 2026-10-31): the lead at the design's 760 px (the package: the
   680 px text measure), the advertising notice without the package's 900 px cap — the head neither hugs the left side
   nor grows taller above the fold. */
.au-article-head__lead { max-width: 760px; }
.au-disclosure-line { max-width: none; }
.au-article-head__lead p { margin: 0; }
.au-article-head__lead p + p { margin-top: var(--space-3); }
/* The distance to the text below is the guide's own margin-top (rule at the top of this file). */
.site-wide-top > .site-snippet { margin-block: 0; }

/* The brand pictogram left of the wordmark (SiteLook::pictogram(), Erkan 2026-10-31; Wordmark README: a separate asset to
   the left), a little taller than the name's capitals and centred on them; decorative (alt="") — the name is the link text.
   Request to the design system: the pictogram slot in the Wordmark component. */
.site-wordmark-pictogram { flex: none; align-self: center; width: auto; height: 1.15em; margin-right: 0.35em; }
/* On the footer's brand fill the pictogram goes white like the wordmark beside it: a thin red or blue mark is weak there. */
.au-wordmark--inverse .site-wordmark-pictogram { filter: brightness(0) invert(1); }

/* What design v24's answered rules leave open for our pages. The home page's FAQ at the design's 880 px (`.site-home-faq`,
   Erkan 2026-10-20: "the design had it wider"; home.html.twig) — the package's `--measure-wide`. An accordion right after
   its own FAQ topic heading (several FAQ modules: `h2.pg-letter`, which brings its own distance) sits directly under it,
   as in the design's FAQ.html — the package's `.au-container > .au-accordion` section distance does not apply there. */
.site-home-faq > .au-accordion { max-width: var(--measure-wide); }
.au-container > .pg-letter + .au-accordion { margin-top: 0; }
/* The note where a tool page's calculator is still missing (tool.html.twig) keeps the calculator's distance to the grid. */
.site-tool-missing { margin: var(--space-5) 0; }
/* The tool page's H1 with the label „Rechner“ gone: 16 px above it (the package's 8 px followed the label). */
.au-toolhead .au-pagehead__title { margin: var(--space-4) 0 0; }
/* The tool page's trust block (tool.html.twig, card TemplatePercent v23.2) on desktop: no 2 px rule above it and its top
   near the H1's (Erkan 2026-10-30: 32 px above it, the H1 16 px) — the package draws the rule and sets it to the lead's
   bottom. Request to the design system: this as the card's look. */
@media (min-width: 1024px) {
  .au-toolhead > .au-toolhead__trust { align-self: start; margin-top: var(--space-6); padding-top: 0; border-top: 0; }
  .au-toolhead__trust > .au-trustline:first-child { padding-top: 0; }
}
/* The AskCalculator's task chips on phones wrap onto a second row instead of scrolling sideways (Erkan 2026-10-30): when
   the first chips fill the width exactly, nothing showed that „Zunahme“, „Abnahme“ … follow. Request to the design system:
   this as the phone rule (bundle.css `== ask ==`, max-width 767px). */
@media (max-width: 767px) {
  .au-tasks { flex-wrap: wrap; overflow-x: visible; }
}
/* A filled AdSlot (_ad_slot.html.twig, plan slice S4): the AdSense unit takes exactly the box bundle.css reserves per
   screen width (728×90 / 300×250 / 300×600 …), so the ad never moves the page; the box drops the empty-slot dashes. */
.au-ad__box.site-ad-filled { border: 0; }
.au-ad__box > ins.site-ad { display: block; width: 100%; height: 100%; }
/* Design system 05-monetisation: no ad within 150 px of any button. The answer's buttons (.au-toolactions) end ~100 px above
   the first AdSlot; 48 px more above the tool grid keeps the box 150 px clear (the rail moves along, its alignment stays). */
.au-calc--ask + .au-tool { margin-top: var(--space-7); }