/* peil — ausgelagert aus index.html (19.08.2026).
   Grund: Die Content-Security-Policy erlaubt nur `style-src 'self'`;
   ein <style>-Block IM Dokument gilt als inline und wird verworfen —
   die Seite kam seit dem CSP-Scharfstellen komplett ohne Gestaltung.
   Nicht zurück ins HTML holen. */
:root {
  color-scheme: light dark;
  /* Neutrale mit leichtem Warm-/Rot-Bias (bewusst gewählt, kein reines Grau) */
  --ground: #f6f3f2;
  --panel:  #fbf9f8;
  --ink:    #1b1618;
  --muted:  #6d6467;
  --hair:   #e0d9d8;
  --accent: #c0141b;   /* peil-Rot */
  --grid:   rgba(27,22,24,0.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #131013;
    --panel:  #191518;
    --ink:    #f2ecee;
    --muted:  #9a9094;
    --hair:   #2c2529;
    --accent: #ec4b4f;
    --grid:   rgba(242,236,238,0.06);
  }
}
:root[data-theme="light"] {
  --ground:#f6f3f2; --panel:#fbf9f8; --ink:#1b1618; --muted:#6d6467;
  --hair:#e0d9d8; --accent:#c0141b; --grid:rgba(27,22,24,0.06);
}
:root[data-theme="dark"] {
  --ground:#131013; --panel:#191518; --ink:#f2ecee; --muted:#9a9094;
  --hair:#2c2529; --accent:#ec4b4f; --grid:rgba(242,236,238,0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
/* Feines Raster im Hintergrund — Anspielung auf den Rasterplan, sehr zurückhaltend */
.stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 30%, transparent 78%);
  pointer-events: none;
}

.hero {
  position: relative;
  align-self: center;
  width: min(680px, 100% - 48px);
  margin: 0 auto;
  padding: 72px 0 40px;
}

/* --- Marke: Zeichen + Wortmarke --- */
.brand { display: flex; align-items: center; gap: 18px; }
.mark { width: 68px; height: 68px; flex: none; }
.mark .frame  { stroke: var(--ink); }
.mark .rings  { stroke: var(--ink); opacity: .34; }
.mark .reticle{ stroke: var(--accent); }
.mark .cell   { fill: var(--accent); opacity: .13; }
.mark .dot    { fill: var(--accent); }
.mark .halo   { fill: var(--ground); }

.wordmark {
  font-weight: 800;
  font-size: clamp(46px, 12vw, 76px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--ink);
  display: inline-flex;
  align-items: flex-end;
}
/* dotless i + eigener „i-Punkt" = angepeilter Punkt */
.wordmark .iwrap { position: relative; display: inline-block; }
.wordmark .tittle {
  position: absolute;
  left: 50%;
  top: -0.30em;
  width: 0.30em; height: 0.30em;
  transform: translateX(-50%);
}

.tagline {
  margin: 34px 0 0;
  font-size: clamp(30px, 6.4vw, 50px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}
.tagline .em { color: var(--accent); }
.sub {
  margin: 18px 0 0;
  max-width: 33ch;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.5;
  color: var(--muted);
}

.meta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  font-size: 13.5px; font-weight: 600;
  color: var(--muted);
}
.pill .lock { width: 13px; height: 13px; display: inline-block; }
.pill .lock svg { display: block; }

footer {
  position: relative;
  width: min(680px, 100% - 48px);
  margin: 0 auto;
  padding: 22px 0 26px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  border-top: 1px solid var(--hair);
  font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
footer .dom { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hair); }
footer a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Einmaliger „Punkt gefunden"-Puls beim Laden */
@keyframes lock-in {
  0%   { transform: scale(2.2); opacity: 0; }
  55%  { opacity: .55; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes ping {
  0%   { transform: scale(0.6); opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}
.mark .dot   { transform-box: fill-box; transform-origin: center; animation: lock-in .7s cubic-bezier(.2,.8,.2,1) both; }
.mark .ping  { transform-box: fill-box; transform-origin: center; animation: ping 1.1s ease-out .35s 1 both; }
@media (prefers-reduced-motion: reduce) {
  .mark .dot, .mark .ping { animation: none; }
  .mark .ping { display: none; }
}