/* The guide collection shares the site's palette; only its reading rhythm differs. */
:root {
  --guide-rule: var(--line);
  --guide-surface: var(--white);
  --guide-ink: var(--ink);
  --guide-muted: var(--muted);
  --guide-accent: var(--blue);
  --guide-gap: var(--space-lg);
  --guide-card-padding: 20px;
  --guide-section-gap: clamp(48px, 6vw, 80px);
  --guide-heading: clamp(1.55rem, 2.25vw, 2rem);
  --guide-card-heading: 1.2rem;
  --guide-body: 1.0625rem;
  --guide-leading: 1.8;
  --guide-label: .72rem;
  --guide-small: .875rem;
  --guide-rule-width: 1px;
  --guide-cover-ratio: 40 / 21;
}

.ratgeber-index { background: var(--paper); }
.ratgeber-index-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.ratgeber-index-intro .section-label { margin: 0 0 var(--space-md); }
.ratgeber-index-intro h2 {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.ratgeber-index-intro > p { margin: 0; max-width: 58ch; color: var(--guide-muted); }
.ratgeber-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  padding-bottom: var(--space-xl);
  border-bottom: var(--guide-rule-width) solid var(--guide-rule);
}
.ratgeber-topics a {
  display: inline-flex;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: var(--guide-rule-width) solid var(--guide-rule);
  border-radius: var(--radius);
  color: var(--guide-accent);
  background: var(--guide-surface);
  font-size: var(--guide-small);
  font-weight: 750;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.ratgeber-topics a:hover, .ratgeber-topics a:active { color: var(--white); background: var(--guide-accent); }
.ratgeber-topics a:focus-visible, .ratgeber-card > a:focus-visible,
.guide-contents summary:focus-visible, .guide-contents a:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.ratgeber-group { margin-top: var(--guide-section-gap); }
.ratgeber-group-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}
.ratgeber-group-heading > div { display: flex; align-items: baseline; gap: var(--space-md); }
.ratgeber-group-number { flex-shrink: 0; white-space: nowrap; color: var(--guide-accent); font-size: var(--guide-small); font-weight: 850; font-variant-numeric: tabular-nums; }
.ratgeber-group-heading h2 { margin: 0; font-size: var(--guide-heading); line-height: 1.15; letter-spacing: -.025em; }
.ratgeber-group-heading > p { margin: 0; color: var(--guide-muted); font-size: .9375rem; line-height: 1.6; }
.ratgeber-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.ratgeber-card {
  min-width: 0;
  border: var(--guide-rule-width) solid var(--guide-rule);
  border-radius: var(--radius);
  background: var(--guide-surface);
  transition: border-color var(--motion-fast);
}
.ratgeber-card:hover, .ratgeber-card:focus-within { border-color: var(--guide-accent); }
.ratgeber-card > a { display: flex; height: 100%; flex-direction: column; color: var(--guide-ink); border-radius: inherit; }
.ratgeber-card-image { aspect-ratio: var(--guide-cover-ratio); overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--white); }
.ratgeber-card-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ratgeber-card-copy { display: flex; flex: 1; flex-direction: column; padding: var(--guide-card-padding); }
.ratgeber-card-topic { color: var(--guide-accent); font-size: var(--guide-label); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.ratgeber-card h3 { margin: var(--space-sm) 0 var(--space-md); font-size: var(--guide-card-heading); line-height: 1.2; letter-spacing: -.02em; }
.ratgeber-card p { margin: 0 0 var(--space-lg); color: var(--guide-muted); font-size: .9375rem; line-height: 1.65; }
.ratgeber-card-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-md); border-top: var(--guide-rule-width) solid var(--guide-rule); font-size: .75rem; }
.ratgeber-card-footer strong { color: var(--guide-accent); }
.ratgeber-card-footer > span { color: var(--guide-muted); white-space: nowrap; }
.ratgeber-card > a:active .ratgeber-card-footer strong { color: var(--blue-dark); }

.article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-header { padding-bottom: var(--space-xl); }
.article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-kicker { color: var(--guide-accent); }
.article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--guide-cover-ratio);
  object-fit: contain;
  object-position: center;
  background: var(--white);
}
.article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-prose { border-top-color: var(--gold); }
.article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-side-latest { box-shadow: none; }
.article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-side-latest li > div { grid-template-columns: minmax(0, 1fr); }
.article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-header h1 { text-transform: none; text-wrap: pretty; }
.guide-contents {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: var(--guide-rule-width) solid var(--guide-rule);
  border-radius: var(--radius);
  background: var(--guide-surface);
}
.guide-contents summary { cursor: pointer; min-height: 28px; color: var(--guide-accent); font-weight: 800; }
.guide-contents summary:hover { color: var(--blue-dark); }
.guide-contents ul { margin: var(--space-md) 0 0; padding-left: var(--space-lg); }
.guide-contents li { margin-top: var(--space-sm); }
.guide-contents a { display: inline-block; padding-block: 3px; color: var(--guide-accent); font-size: var(--guide-small); text-decoration: underline; text-underline-offset: .18em; }
.article-page[data-section="ratgeber"] .guide-editorial { font-size: var(--guide-body); line-height: var(--guide-leading); }
.guide-editorial > p:first-child { font-size: 1.2rem; line-height: 1.65; font-weight: 650; color: var(--guide-ink); }
.guide-editorial > h2 { max-width: 28ch; margin-top: 2.25em; margin-bottom: .85em; padding-top: var(--space-lg); border-top: var(--guide-rule-width) solid var(--guide-rule); font-size: var(--guide-heading); font-weight: 850; line-height: 1.22; letter-spacing: -.025em; text-transform: none; text-wrap: pretty; }
.guide-editorial > p { margin-block: 0 1.2em; }
.guide-editorial > h2:first-of-type { margin-top: 1.5em; }
.guide-editorial > ul:last-child { font-size: var(--guide-small); line-height: 1.65; }
.guide-editorial > ul:last-child li { margin-top: var(--space-md); }

@media (max-width: 1050px) {
  .ratgeber-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratgeber-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratgeber-group-heading { grid-template-columns: 1fr; gap: var(--space-md); }
  .ratgeber-group-heading > p { max-width: 66ch; }
}
@media (max-width: 768px) {
  .ratgeber-index-intro { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 640px) {
  /* Whole German compounds must also fit wider system-font fallbacks. */
  .article-page:is([data-section="ratgeber"], [data-section="sportler"]) .article-header h1 { font-size: min(clamp(1.65rem, 6.8vw, 2.2rem), 7vw); }
  .article-page[data-section="ratgeber"] .guide-editorial > h2 { font-size: min(1.5rem, 5.85vw) !important; }
}
@media (max-width: 620px) {
  .ratgeber-card-grid { grid-template-columns: minmax(0, 1fr); }
  .ratgeber-topics { display: grid; grid-template-columns: 1fr; }
  .ratgeber-card h3 { font-size: 1.3rem; }
  .guide-contents { padding: var(--space-md); }
  .guide-editorial > p:first-child { font-size: 1.125rem; }
}