/* Page layouts for the site designs (onlinevergleich24.de, rueruprente24.de).
   Built on Aurum: ds/aurum/tokens.css, then ds/aurum/components/bundle.css, then this file.
   Mobile first; the steps are 768px and 1024px. Radius 0, structure from rules and spacing, no shadows on cards. */

.pg { font-family: var(--font-sans); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 24px; }
.pg-main { padding-bottom: var(--space-8); }
@media (min-width: 1024px) { .pg-main { padding-bottom: var(--space-9); } }

/* Rhythm */
.pg-section { margin-top: var(--space-7); }
@media (min-width: 1024px) { .pg-section { margin-top: var(--space-8); } }
.pg-gap { height: var(--space-6); }

/* Header: the CTA group leaves the bar below 1024px; the drawer carries it */
@media (max-width: 1023px) { .au-nav__cta { display: none; } }
.pg-drawer { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-overlay); border-left: 0; border-right: 0; box-shadow: var(--shadow-overlay); max-height: 680px; overflow-y: auto; }
.pg-drawer__cta { padding: var(--space-4); border-bottom: var(--border-hairline) solid var(--line); }
.pg-drawer__panel a .au-nav__count { float: right; margin-top: 2px; }
@media (min-width: 1024px) { .pg-drawer { display: none; } }

/* Headings that step down on phones */
@media (max-width: 767px) {
  .au-pagehead__title { font-size: 32px; line-height: 40px; }
  .au-sectionhead { flex-wrap: wrap; }
  .au-sectionhead__title, .au-section__title { font-size: 26px; line-height: 32px; }
  .au-pagehead__lead { font-size: 18px; line-height: 28px; }
}

/* Phone and desktop variants of the same content */
@media (min-width: 768px) { .pg-only-mobile { display: none !important; } }
@media (max-width: 767px) { .pg-only-desktop { display: none !important; } }

/* Tables: amounts never break; on phones secondary columns step out */
.au-table td.is-num { white-space: nowrap; }
@media (max-width: 767px) { .au-table .pg-hide-sm { display: none; } }

/* Comparison on phones: filter buttons and a card list instead of the wide table */
.pg-mfilter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-3) 0; }
.pg-mfilter .au-btn { padding: 0 var(--space-3); }
.pg-mcards { list-style: none; margin: 0; padding: 0; border-top: var(--border-rule) solid var(--rule); }
.pg-mcard { padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--line); }
.pg-mcard.is-featured { margin: 0 calc(-1 * var(--container-pad-sm)); padding-left: var(--container-pad-sm); padding-right: var(--container-pad-sm); background: var(--brand-tint); }
.pg-mcard__head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
.pg-mcard__name { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; }
.pg-mcard__name a { color: var(--ink); text-decoration: none; }
.pg-mcard .au-badge { margin-top: 6px; }
.pg-mcard .au-facts { margin: var(--space-3) 0; }
.pg-mcard .au-facts dd { font-size: 17px; line-height: 22px; }
.pg-mcard__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }

/* Home hero */
.pg-hero { display: grid; gap: var(--space-6); padding: var(--space-5) 0 var(--space-7); }
.pg-hero__main, .pg-hero__aside { min-width: 0; }
@media (min-width: 1024px) {
  .pg-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--space-8) 0; align-items: start; }
  .pg-hero__main { grid-column: 1 / span 7; }
  .pg-hero__aside { grid-column: 9 / span 4; }
}
.pg-display { margin: var(--space-3) 0 0; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.015em; }
@media (min-width: 768px) { .pg-display { font-size: 48px; line-height: 56px; } }
.pg-lead { margin: var(--space-4) 0 0; font-size: 19px; line-height: 29px; max-width: 640px; }
@media (min-width: 768px) { .pg-lead { font-size: 21px; line-height: 32px; } }
.pg-search { display: flex; margin-top: var(--space-5); max-width: 620px; }
.pg-search .au-input { flex: 1; min-width: 0; height: 52px; font-size: 17px; }
.pg-search .au-btn { flex: none; min-height: 52px; }
@media (min-width: 768px) { .pg-search .au-input { height: 56px; } .pg-search .au-btn { min-height: 56px; } }
.pg-quick { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.pg-quick > li:first-child { color: var(--ink-muted); }
.pg-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Columns */
.pg-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
@media (min-width: 768px) {
  .pg-cols--2, .pg-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .pg-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-blockhead { margin: 0 0 var(--space-3); padding-top: var(--space-3); border-top: var(--border-rule) solid var(--rule); font-size: 19px; line-height: 26px; font-weight: 700; }
.pg-blockhead a { color: var(--ink); text-decoration: none; }
.pg-blockhead a:hover { text-decoration: underline; }
.pg-meta { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pg-text { margin: var(--space-2) 0 0; font-size: 16px; line-height: 25px; }
.pg-note { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); max-width: 900px; }
.pg-count { margin-left: auto; padding: 0 var(--space-2) 0 var(--space-3); font-size: 14px; font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Directory of comparisons */
.pg-dir { list-style: none; margin: 0; padding: 0; }
.pg-dir > li { padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--line); }
.pg-dir__name { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pg-dir__name:hover { text-decoration: underline; }
.pg-dir__filters { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }

/* Numbered method steps */
.pg-steps { display: grid; gap: var(--space-5) var(--gutter); margin: 0; padding: 0; list-style: none; counter-reset: pg-step; }
@media (min-width: 768px) { .pg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-steps > li { counter-increment: pg-step; padding-top: var(--space-4); border-top: var(--border-rule) solid var(--rule); }
.pg-steps > li::before { content: counter(pg-step, decimal-leading-zero); display: block; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.pg-steps h3 { margin: var(--space-2) 0 0; font-size: 19px; line-height: 26px; font-weight: 700; }
.pg-steps p { margin: var(--space-2) 0 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); }

/* A to Z */
.pg-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pg-az a, .pg-az span { display: inline-grid; place-items: center; width: 40px; height: 40px; border: var(--border-hairline) solid var(--line-control); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pg-az a:hover { border-color: var(--ink); }
.pg-az span { border-color: var(--line); color: var(--line-strong); }
.pg-az a[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); }
.pg-letter { margin: var(--space-7) 0 0; padding-top: var(--space-3); border-top: var(--border-heavy) solid var(--rule); font-size: 30px; line-height: 38px; font-weight: 700; }
.pg-glossary { margin: 0; }
.pg-glossary > div { padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--line); }
.pg-glossary dt { font-size: 19px; line-height: 26px; font-weight: 700; }
.pg-glossary dd { margin: var(--space-2) 0 0; font-size: 17px; line-height: 27px; max-width: var(--measure); }
.pg-glossary dd a { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* Search results */
.pg-results { list-style: none; margin: 0; padding: 0; }
.pg-results > li { padding: var(--space-5) 0; border-bottom: var(--border-hairline) solid var(--line); }
.pg-results__title { margin: 4px 0 0; font-size: 21px; line-height: 28px; font-weight: 700; }
.pg-results__title a { color: var(--ink); text-decoration: none; }
.pg-results__title a:hover { text-decoration: underline; }
.pg-results__url { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-subtle); }
.pg-results__text { margin: var(--space-2) 0 0; font-size: 16px; line-height: 25px; max-width: var(--measure); }
.pg-results mark { background: var(--notice-tint); color: inherit; padding: 0 2px; }
.pg-pager { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.pg-pager a, .pg-pager span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--space-3); border: var(--border-hairline) solid var(--line-control); color: var(--ink); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-pager [aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); }

/* Error page */
.pg-error { padding: var(--space-7) 0 var(--space-6); max-width: 760px; }
@media (min-width: 1024px) { .pg-error { padding-top: var(--space-9); } }
.pg-error__code { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* People */
@media (max-width: 767px) { .au-team .au-portrait { aspect-ratio: 1 / 1; max-width: 112px; } }
@media (max-width: 767px) { .au-person .au-portrait--lg { width: 72px; height: 72px; } }
.au-person__creds .au-badge { white-space: normal; }
.pg-author { display: grid; gap: var(--space-5); padding: var(--space-5) 0 var(--space-7); }
@media (min-width: 768px) { .pg-author { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); align-items: start; } }
.pg-author .au-portrait { width: 160px; height: 200px; }
@media (min-width: 768px) { .pg-author .au-portrait { width: 200px; height: 250px; } }
.pg-author h1 { 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 h1 { font-size: 40px; line-height: 48px; } }
.pg-author__role { margin: 4px 0 0; font-size: 17px; line-height: 24px; color: var(--ink-muted); }
.pg-author__bio { margin: var(--space-4) 0 0; font-size: 18px; line-height: 30px; max-width: var(--measure); }
.pg-author .au-person__creds, .pg-author .au-person__links { margin-top: var(--space-4); }

/* Forms (lead page) */
.pg-stepper { display: flex; margin: 0 0 var(--space-5); padding: 0; list-style: none; counter-reset: pg-st; font-size: 14px; line-height: 20px; }
.pg-stepper li { flex: 1; counter-increment: pg-st; padding: var(--space-2) var(--space-2) 0 0; border-top: var(--border-heavy) solid var(--line); color: var(--ink-muted); }
.pg-stepper li::before { content: counter(pg-st) ". "; font-weight: 700; }
.pg-stepper li[aria-current="step"] { border-top-color: var(--brand); color: var(--ink); font-weight: 600; }
.pg-form { display: grid; gap: var(--space-5); padding: var(--space-5); border: var(--border-hairline) solid var(--line); border-top: var(--border-heavy) solid var(--brand); }
.pg-form__row { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .pg-form { padding: var(--space-6); } .pg-form__row { grid-template-columns: 1fr 1fr; } }
.pg-checks { display: grid; gap: var(--space-3); }
.pg-rail { display: grid; gap: var(--space-6); align-content: start; }

/* Figures in result panels */
.pg-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: var(--border-rule) solid var(--rule); }
@media (min-width: 768px) { .pg-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-figs > div { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--line); }
.pg-figs dt { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pg-figs dd { margin: 4px 0 0; font-size: 26px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-figs dd small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }

/* Key facts list (label left, value right) */
.pg-kv { margin: 0; }
.pg-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--line); font-size: 16px; line-height: 22px; }
.pg-kv dt { color: var(--ink-muted); }
.pg-kv dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pg-box { padding: var(--space-5); background: var(--surface-sunken); border-top: var(--border-heavy) solid var(--rule); }
.pg-box__title { margin: 0 0 var(--space-3); font-size: 19px; line-height: 26px; font-weight: 700; }

/* Legal pages */
.pg-legal dl { margin: 0; }
.pg-legal dl > div { display: grid; gap: 2px; padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--line); font-size: 17px; line-height: 26px; }
@media (min-width: 768px) { .pg-legal dl > div { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); } }
.pg-legal dt { font-weight: 600; }
.pg-legal dd { margin: 0; }
.pg-ph { color: var(--ink-muted); }

/* Provider and filter blocks */
.pg-provhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-3) 0 var(--space-5); }
.pg-provhead .au-logo-ph { min-width: 160px; height: 64px; font-size: 15px; }
.pg-provhead h1 { margin: 0; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 768px) { .pg-provhead h1 { font-size: 40px; line-height: 48px; } }
.pg-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pg-tags a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: var(--border-hairline) solid var(--line-control); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pg-tags a:hover { border-color: var(--ink); }
.pg-tags a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); }

/* ---------- Additions for small guide sites (rueruprente24.de) ---------- */

/* Header search panel, opened by the search button */
.pg-searchpanel .au-container { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.pg-searchpanel .pg-search { margin-top: 0; }
.au-iconbtn[aria-expanded="true"] { border-color: var(--ink); }

/* Facts box in the hero: the figures of the year */
.pg-factsbox { padding: var(--space-5); background: var(--surface-sunken); border-top: var(--border-heavy) solid var(--brand); }
.pg-factsbox .pg-kv > div:last-child { border-bottom: 0; }
.pg-factsbox .pg-kv dd { font-size: 18px; white-space: nowrap; }

/* Calculator form */
.pg-calcrow { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.pg-calcrow > .au-fieldset { flex: 1 1 260px; }
.pg-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pg-seg > button { padding: 0 var(--space-2); white-space: nowrap; }
.pg-calcgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 768px) { .pg-calcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-assume { margin-top: var(--space-5); border-top: var(--border-hairline) solid var(--line-strong); }
.pg-assume > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); padding-top: var(--space-3); font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; list-style: none; }
.pg-assume > summary::-webkit-details-marker { display: none; }
.pg-assume > summary::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--au-i-chevron-right) center / contain no-repeat; mask: var(--au-i-chevron-right) center / contain no-repeat; transition: transform 120ms ease-out; }
.pg-assume[open] > summary::before { transform: rotate(90deg); }
.pg-assume > summary span { font-weight: 400; color: var(--ink-muted); }
.pg-assume .pg-calcgrid { margin-top: var(--space-3); }
.pg-calcnote { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; color: var(--notice); }
.pg-calcnote .au-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* Lead form: choices as ruled rows */
.pg-choices { margin: 0; padding: 0; list-style: none; border-top: var(--border-hairline) solid var(--line); }
.pg-choices > li { border-bottom: var(--border-hairline) solid var(--line); }
.pg-choices .au-radio, .pg-choices .au-check { display: flex; padding: var(--space-3) 0; }
.pg-choices small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pg-formfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-hairline) solid var(--line); }
.pg-consent { padding: var(--space-4); background: var(--surface-sunken); font-size: 15px; line-height: 22px; }
.pg-consent .au-check { font-size: 15px; line-height: 22px; }

.pg-stepper li.is-done { border-top-color: var(--brand); }
.pg-numlist { margin: 0; padding: 0; list-style: none; counter-reset: pg-n; }
.pg-numlist > li { position: relative; padding: var(--space-3) 0 var(--space-3) 40px; border-top: var(--border-hairline) solid var(--line); counter-increment: pg-n; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.pg-numlist > li::before { content: counter(pg-n); position: absolute; left: 0; top: var(--space-3); width: 26px; height: 26px; display: grid; place-items: center; background: var(--brand); color: var(--ink-inverse); font-size: 14px; line-height: 1; font-weight: 700; }
.pg-numlist strong { display: block; color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; }

/* Topic directory of a guide site */
.pg-topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); }
@media (min-width: 768px) { .pg-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pg-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-topics p.pg-text { margin: 0 0 var(--space-3); color: var(--ink-muted); }

/* Target-group comparison rows */
.pg-groups { margin: 0; padding: 0; list-style: none; border-top: var(--border-rule) solid var(--rule); }
.pg-groups > li { display: grid; gap: var(--space-2) var(--gutter); padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--line); }
@media (min-width: 768px) { .pg-groups > li { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 5fr); align-items: baseline; } }
.pg-groups__name { margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; }
.pg-groups__name a { color: var(--ink); text-decoration: none; }
.pg-groups__name a:hover { text-decoration: underline; }
.pg-groups__room { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-groups__room small { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.pg-groups__note { margin: 0; font-size: 16px; line-height: 25px; }