/* nexie.org - Platzhalter (02.10.2026). Ein Wort, ein Zeichen, eine Zeile; zwei langsam wandernde Lichtfelder.
   Nur CSS, keine Inline-Styles, keine externen Dateien (CSP default-src 'self'). */
:root {
  --bg: #f4f3ef;
  --fg: #2a2926;
  --muted: #8a877f;
  --light-a: rgba(112, 160, 142, 0.34);   /* kuehles Gruen - Weite */
  --light-b: rgba(214, 186, 140, 0.30);   /* warmes Licht - Waerme */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121412;
    --fg: #dcd9d1;
    --muted: #7d7b74;
    --light-a: rgba(74, 128, 108, 0.30);
    --light-b: rgba(142, 118, 80, 0.22);
  }
}
html, body { height: 100%; margin: 0; overflow: clip; }   /* clip: kein Scrollbereich durch die Lichtfelder */
body {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  display: grid;
  place-items: center;
  font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
/* Zwei weiche Lichtfelder, die sehr langsam aneinander vorbeiziehen - ruhig, nie springend. */
body::before, body::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background-repeat: no-repeat;
  will-change: transform;
}
body::before {
  background-image: radial-gradient(42% 42% at 38% 42%, var(--light-a) 0%, rgba(0,0,0,0) 70%);
  animation: drift-a 52s ease-in-out infinite alternate;
}
body::after {
  background-image: radial-gradient(38% 38% at 64% 60%, var(--light-b) 0%, rgba(0,0,0,0) 70%);
  animation: drift-b 67s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate3d(4%, 3%, 0) scale(1.06); }
  to   { transform: translate3d(-5%, -4%, 0) scale(1); }
}
.mark {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 1rem;
}
.sign { color: var(--fg); opacity: 0.55; }
.sign .ring { transform-origin: 24px 24px; animation: turn 90s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.name {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  opacity: 0.78;
}
.line {
  margin: 0;
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--muted);
  font-style: italic;
}
.faint .name { opacity: 0.32; }
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .sign .ring { animation: none; }
}