/* Codex Body - gemeinsamer Stil. Keine externen Schriften oder Skripte (Datenschutz). */
:root {
  --grund: #000;
  --text: #e9eaee;
  --leise: rgba(233, 234, 238, 0.6);
  --kante: rgba(255, 255, 255, 0.16);
  --glas: rgba(255, 255, 255, 0.04);
}
* { box-sizing: border-box; }
html { background: var(--grund); }
body {
  margin: 0; color: var(--text); background: var(--grund);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: #fff; }
.rahmen { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header.oben { padding: 22px 0; }
header.oben .rahmen { display: flex; align-items: center; justify-content: space-between; }
.marke { font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 13px; text-decoration: none; }
footer { border-top: 1px solid var(--kante); margin-top: 72px; padding: 28px 0 40px; color: var(--leise); font-size: 14px; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--leise); }

/* Startseite */
.held { min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0 20px; }
.kugel {
  width: 168px; height: 168px; border-radius: 50%; margin-bottom: 40px;
  background:
    radial-gradient(circle at 34% 28%, #fff 0, rgba(255,255,255,0.85) 6%, rgba(220,224,232,0.5) 18%, transparent 42%),
    radial-gradient(circle at 70% 78%, rgba(160,170,190,0.55) 0, transparent 45%),
    radial-gradient(circle at 50% 50%, #8e95a3 0, #3a3e47 55%, #0d0e11 100%);
  box-shadow: 0 0 80px rgba(200, 210, 230, 0.18), inset -18px -24px 50px rgba(0,0,0,0.6);
  animation: atmen 6s ease-in-out infinite;
}
@keyframes atmen { 50% { transform: scale(1.04); box-shadow: 0 0 110px rgba(200,210,230,0.26), inset -18px -24px 50px rgba(0,0,0,0.6); } }
@media (prefers-reduced-motion: reduce) { .kugel { animation: none; } }
h1 { font-size: clamp(34px, 7vw, 56px); line-height: 1.08; margin: 0 0 16px; font-weight: 650; letter-spacing: -0.02em; }
.unter { color: var(--leise); font-size: 18px; max-width: 520px; margin: 0 auto 32px; }
.knopf {
  display: inline-block; padding: 13px 26px; border-radius: 999px; border: 1px solid var(--kante);
  background: var(--glas); text-decoration: none; font-weight: 550;
}
.bald { color: var(--leise); font-size: 14px; margin-top: 14px; }
.punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 24px; }
.punkt { border: 1px solid var(--kante); background: var(--glas); border-radius: 18px; padding: 20px; }
.punkt h3 { margin: 0 0 6px; font-size: 16px; }
.punkt p { margin: 0; color: var(--leise); font-size: 15px; }

/* Rechtstexte */
.recht h1 { font-size: 34px; margin: 24px 0 8px; }
.recht h2 { font-size: 20px; margin: 40px 0 8px; }
.recht h3 { font-size: 16px; margin: 24px 0 4px; }
.recht p, .recht li { color: rgba(233,234,238,0.86); }
.recht .stand { color: var(--leise); font-size: 14px; }
.platzhalter { background: rgba(255, 200, 80, 0.16); border-radius: 4px; padding: 0 4px; }