/* Grundgestaltung des Testthemes – bewusst schlicht. Nur Tokens, keine festen Werte. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

.container { width: min(100% - 2 * var(--space-3), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--space-3), var(--container-narrow)); }

.skip-link { position: absolute; left: var(--space-3); top: -10rem; padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-text); z-index: 10; }
.skip-link:focus { top: var(--space-3); }

.site-header { border-bottom: var(--line) solid var(--color-border); }
.site-header__inner { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding-block: var(--space-3); }
.site-header__brand { color: var(--color-text); text-decoration: none; font-weight: 700; }
.site-nav ul, .site-footer ul, .breadcrumbs ol, .post-list { list-style: none; margin: 0; padding: 0; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-nav a { color: var(--color-text); text-decoration: none; padding-block: var(--space-1); }
.site-nav a[aria-current="page"], .site-nav a.is-active { border-bottom: 2px solid var(--color-accent); }

.logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo--light { display: none; }
  :root:not([data-theme="light"]) .logo--dark { display: block; }
}
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: block; }

.breadcrumbs { padding-top: var(--space-3); font-size: 0.875rem; color: var(--color-text-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); }

main > section { padding-block: var(--space-6); }
main > section + section { border-top: var(--line) solid var(--color-border); }

.tag-label { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.hero__inner { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 60rem) { .hero--split .hero__inner { grid-template-columns: 1fr 1fr; } }
.hero__text { font-size: 1.2rem; max-width: 40rem; }

.button {
  display: inline-block; min-height: 2.75rem; padding: var(--space-2) var(--space-4);
  background: var(--color-accent); color: var(--color-accent-contrast);
  border-radius: var(--radius); text-decoration: none; font-weight: 600; line-height: 1.75rem;
  transition: opacity var(--duration);
}
.button:hover { opacity: 0.9; }

.facts { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-5) 0 0; }
.facts dt { font-family: var(--font-mono); font-size: 1.75rem; }
.facts dd { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; }

.faq__item { border-bottom: var(--line) solid var(--color-border); padding-block: var(--space-3); }
.faq__item summary { cursor: pointer; font-weight: 600; min-height: 1.5rem; }

.post-list { display: grid; gap: var(--space-5); }
@media (min-width: 50rem) { .post-list { grid-template-columns: repeat(3, 1fr); } }
.post-card__meta, .post__meta { color: var(--color-text-muted); font-size: 0.875rem; }
.post { padding-block: var(--space-5); max-width: var(--container-narrow); }
.post__summary { font-size: 1.2rem; }
.post__nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }

.cta { background: var(--color-surface); }
.site-footer { border-top: var(--line) solid var(--color-border); padding-block: var(--space-5); font-size: 0.9375rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: start; }
.theme-toggle {
  font: inherit; min-height: 2.75rem; padding: var(--space-2) var(--space-3);
  background: transparent; color: var(--color-text); border: var(--line) solid var(--color-border); border-radius: var(--radius); cursor: pointer;
}
.theme-toggle[aria-pressed="true"] { border-color: var(--color-accent); }
.ews-error { padding-block: var(--space-6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
.steps__list { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-3); }