/* Design-Tokens: dunkler Premium-Look, ein einziger Orange-Akzent nur für Kauf-Buttons */
:root {
  --ink: #0d1117;
  --panel: #161b22;
  --line: #2a313c;
  --fg: #e6edf3;
  --fg-2: #9aa4b2;
  --brand: #7ee0c3;
  --accent: #e8792b;
  --radius: 14px;
  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #faf9f6;
    --panel: #ffffff;
    --line: #e4e1da;
    --fg: #1d2330;
    --fg-2: #5b6372;
    --brand: #2f7f66;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0.6em 0 0.4em; }
h2 { font-size: 1.6rem; margin-top: 2.2em; }
a { color: var(--brand); }
img { max-width: 100%; height: auto; border-radius: var(--radius); }

.site-header { border-bottom: 1px solid var(--line); padding: 16px 0; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--fg-2); }
.brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--fg) !important; display: inline-flex; }
.brand img { display: block; height: 44px; width: auto; max-width: 70vw; }

.hero { padding: 72px 0 40px; }
.eyebrow { color: var(--brand); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; }
.lead { color: var(--fg-2); font-size: 1.15rem; max-width: 60ch; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.card:hover { border-color: var(--brand); }
.card h3 { margin: 6px 0; font-size: 1.25rem; }
.card p { margin: 0; color: var(--fg-2); font-size: 0.95rem; }
.card-kicker { color: var(--brand); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }

.facts { width: 100%; border-collapse: collapse; margin: 20px 0; }
.facts th, .facts td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
.facts th { color: var(--fg-2); width: 35%; font-weight: 500; }

.disclosure { background: var(--panel); border-left: 3px solid var(--brand); padding: 10px 14px; border-radius: 8px; color: var(--fg-2); font-size: 0.92rem; }
.pc { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 24px 0; }
@media (max-width: 640px) { .pc { grid-template-columns: 1fr; } }

.btn { display: inline-block; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.btn-accent { background: var(--accent); color: #1a1000; }

details { border-bottom: 1px solid var(--line); padding: 10px 0; }
summary { cursor: pointer; font-weight: 600; }

.evidence { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.meta { color: var(--fg-2); font-size: 0.9rem; }
.portrait { width: 160px; border-radius: 50%; }

.site-footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 24px 0 40px; color: var(--fg-2); font-size: 0.9rem; }

/* Wartungsseite */
.maintenance { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 64px 0; }
.maintenance-art { width: min(440px, 90%); height: auto; border-radius: 0; margin-bottom: 24px; }
.maintenance h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.maintenance-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn-outline { border: 1px solid var(--line); color: var(--fg); background: transparent; }
.btn-outline:hover { border-color: var(--brand); }