/* zerolog Monitoring — Landingpage /monitors (F3).
 * Nur var(--…) aus tokens.css; kein roher Hex-Wert hier. Persuade-Seite (MASTER.md §8.15):
 * gleiche Welt wie /monitoring, mehr Luft, ein grösserer Schein im Heldbereich.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }

html {
  background: var(--bg);
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-base) / var(--lh-body) var(--font-sans);
  letter-spacing: var(--tracking-body);
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

h1, h2, h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
  background: var(--bg-raised); color: var(--text); padding: var(--space-2) var(--space-3);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

a { color: var(--link); text-decoration-color: var(--link-underline); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--text); }

.link { font-weight: var(--fw-medium); }

/* ---------- Kopfzeile ---------- */
.site-header {
  border-bottom: var(--hairline) solid var(--rule);
  padding: var(--space-2) var(--page-pad);
}
.site-header__row {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.wordmark { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text); text-decoration: none; }
.lang-switch { display: flex; gap: var(--space-2); font-size: var(--fs-sm); }
.lang-switch a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 2px; }
.partner-line {
  max-width: var(--page-max); margin: var(--space-1) auto 0;
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* ---------- Layout ---------- */
main { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }
main > section { padding-block: var(--space-6); border-bottom: var(--hairline) solid var(--rule); }
main > section:last-of-type { border-bottom: none; }
main > section > h2 { font-size: var(--fs-lg); line-height: var(--lh-head); letter-spacing: var(--tracking-head);
  margin-bottom: var(--space-3); }
main section p + p { margin-top: var(--space-3); }
main section p { max-width: var(--measure); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  background-image: var(--glow-layer);
}
.hero::before { content: none; } /* Schein ist der einzige Verlauf; --glow-strength * 1.5 nur hier */
.hero { --glow-strength: calc(var(--glow-strength) * 1.5); }
.hero__h1 {
  font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
  max-width: 20ch;
}
.hero__lead { margin-top: var(--space-3); font-size: var(--fs-md); max-width: var(--measure); color: var(--text-muted); }
.hero__cta { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-height); padding-inline: var(--btn-pad-x); border-radius: var(--radius-none);
  font: var(--btn-font); text-decoration: none; border: var(--border-control) solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover { background: transparent; color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn:active { transform: translateY(1px); }
.btn, .lang-switch a { touch-action: manipulation; }

.landing-live {
  margin-top: var(--space-5); padding: var(--space-3) var(--space-3);
  background: var(--bg-raised); border-top: var(--hairline) solid var(--rule); border-bottom: var(--hairline) solid var(--rule);
}
.landing-live__title { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.landing-live__body { color: var(--text); max-width: var(--measure); }
.landing-live__asof { color: var(--text-dim); font-size: var(--fs-sm); }

/* ---------- Was du bekommst ---------- */
.features__list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule); }
.features__row {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--rule);
}
.features__mark {
  width: 0.6em; height: 0.6em; margin-top: 0.5em; border-radius: 50%;
  border: var(--stroke-icon) solid var(--text); flex: none;
}
.features__title { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.features__body { color: var(--text-muted); max-width: var(--measure); }

/* ---------- FAQ ---------- */
.faq__item { border-bottom: var(--hairline) solid var(--rule); padding-block: var(--space-2); }
.faq__q {
  cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fs-base);
  min-height: var(--target-min); display: flex; align-items: center; gap: var(--space-2);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
/* Eigenes Zeichen statt Browserpfeil: Strich, der beim Öffnen zum Kreuz wird (nur Deckkraft/Drehung, §9). */
.faq__q::before {
  content: ""; flex: none; width: 0.75em; height: 0.75em;
  background: linear-gradient(var(--text-dim), var(--text-dim)) center / 100% var(--stroke-icon) no-repeat,
              linear-gradient(var(--text-dim), var(--text-dim)) center / var(--stroke-icon) 100% no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] > .faq__q::before { transform: rotate(45deg); }
.faq__a { margin-top: var(--space-2); color: var(--text-muted); max-width: var(--measure); }

/* ---------- Abschluss ---------- */
.final { text-align: left; }
.final h2 { margin-bottom: var(--space-3); }

/* ---------- Partner ---------- */
.partners__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.partners__item p { max-width: var(--measure-narrow); color: var(--text-muted); margin-bottom: var(--space-2); }

/* ---------- Fusszeile: gemeinsame Komponente aus templates.site_footer (§8.11) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-foot .page { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-pad); }
.site-foot { border-top: var(--hairline) solid var(--rule); margin-top: var(--space-7); padding: var(--space-4) 0 var(--space-5); background: var(--bg); }
.foot-groups { display: grid; gap: var(--space-4); }
.site-foot h2 { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin: 0 0 var(--space-1); }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.foot-desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.disclaimer { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-2); }
.foot-last { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.foot-last .glyph {
  width: var(--glyph-size); height: var(--glyph-size); flex: none; fill: none; stroke: currentColor;
  stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round;
}
.foot-last .c-resolved { color: var(--st-resolved); }
.foot-last .c-stale { color: var(--st-stale); }

@media (min-width: 48em) {
  .partners__grid { grid-template-columns: 1fr 1fr; }
  .foot-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .faq__q::before { transition-duration: 0ms; }
}