/* MBloch.net — immer dunkel. Keine externen Schriften, keine Skripte von Dritten. */
:root {
  color-scheme: dark;
  --bg: #05070a;
  --bg-2: #0a0e14;
  --line: rgba(120, 160, 200, .10);
  --fg: #e6edf5;
  --fg-mid: #8a9bb0;
  --fg-dim: #4d5b6b;
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --ok: #34d399;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--bg); }

/* Hintergrund: feines Raster, das zur Mitte hin aufleuchtet, plus zwei langsam driftende Lichtflecken */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg::before {
  content: ""; position: absolute; inset: -1px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}
.glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .22; }
.glow.a { background: var(--accent); top: -25vmax; left: -15vmax; animation: drift 26s ease-in-out infinite alternate; }
.glow.b { background: var(--accent-2); bottom: -30vmax; right: -20vmax; opacity: .16; animation: drift 32s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(12vmax, 8vmax) scale(1.1); } }
.scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}

/* Startseite */
.page { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.top, .bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem clamp(1.25rem, 4vw, 3rem); font-family: var(--mono); font-size: .78rem; color: var(--fg-dim); letter-spacing: .04em; }
.status { display: inline-flex; align-items: center; gap: .55rem; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

.hero { align-self: center; justify-self: center; text-align: center; padding: 2rem 1.25rem; }
.prompt { font-family: var(--mono); font-size: clamp(.8rem, 1.6vw, .95rem); color: var(--fg-mid); margin: 0 0 1.4rem; }
.prompt b { color: var(--accent); font-weight: 500; }
.prompt .cur { display: inline-block; width: .55em; height: 1.05em; vertical-align: -0.15em; background: var(--accent); margin-left: .2em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

h1 {
  margin: 0; font-weight: 700; letter-spacing: -.045em; line-height: .95;
  font-size: clamp(3.2rem, 13vw, 8.5rem);
  background: linear-gradient(180deg, #ffffff 0%, #cfe3f5 55%, #6b8299 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px rgba(34, 211, 238, .18));
}
h1 .dot { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.tag {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.8rem;
  font-family: var(--mono); font-size: clamp(.8rem, 1.9vw, 1rem); letter-spacing: .32em; text-transform: uppercase; color: var(--fg-mid);
}
.tag::before, .tag::after { content: ""; width: clamp(1.5rem, 5vw, 3.5rem); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.tag::after { background: linear-gradient(90deg, var(--accent), transparent); }

nav { display: flex; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
nav a { position: relative; color: var(--fg-mid); transition: color .2s; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
nav a:hover, nav a:focus-visible { color: var(--fg); outline: none; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }

/* Einblenden */
.in { opacity: 0; transform: translateY(14px); animation: in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .25s; } .d3 { animation-delay: .5s; } .d4 { animation-delay: .7s; }
@keyframes in { to { opacity: 1; transform: none; } }

/* Unterseiten */
.doc { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) 1.25rem 4rem; line-height: 1.75; color: var(--fg-mid); }
.doc .back { font-family: var(--mono); font-size: .8rem; color: var(--fg-dim); letter-spacing: .04em; }
.doc .back:hover { color: var(--accent); }
.doc h2 { color: var(--fg); font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.03em; margin: 1.6rem 0 1.6rem; }
.doc h2::before { content: "# "; color: var(--accent); font-family: var(--mono); font-weight: 400; }
.doc h3 { color: var(--fg); font-family: var(--mono); font-size: .85rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 2.2rem 0 .6rem; }
.doc p { margin: 0 0 1rem; }
.doc a:not(.back) { color: var(--accent); border-bottom: 1px solid rgba(34,211,238,.3); }
.doc a:not(.back):hover { border-color: var(--accent); }
.card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); border-radius: 14px; padding: 1.2rem 1.4rem; margin: 0 0 1rem; color: var(--fg); }

@media (max-width: 560px) { .top .hide-s { display: none; } .bottom { flex-direction: column-reverse; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .in { opacity: 1; transform: none; } }