:root {
  --bg: #050807;
  --fg: #b6f5c8;
  --dim: #5f8a6c;
  --hi: #e8fff0;
  --acc: #39ff88;
  --warn: #ffb454;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 40%, #0b1a12 0%, var(--bg) 70%);
  color: var(--fg); font: 15px/1.65 var(--mono);
  display: flex; flex-direction: column; min-height: 100vh;
  text-shadow: 0 0 6px color-mix(in srgb, var(--acc) 35%, transparent);
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px);
}

.shell { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 8vh 20px 24px; cursor: text; }
#out > div { white-space: pre-wrap; word-break: break-word; }
.ps { color: var(--acc); margin-right: .6em; white-space: nowrap; }
.dim { color: var(--dim); }
.hi { color: var(--hi); }
.warn { color: var(--warn); }
.logo { color: var(--acc); font-weight: 700; font-size: clamp(44px, 11vw, 96px); line-height: 1; letter-spacing: -.04em; margin: 0 0 18px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 55%, transparent); }
.quote { color: var(--hi); font-style: italic; }

.line { display: flex; align-items: baseline; margin-top: 2px; }
#cmd {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--hi); font: inherit; caret-color: var(--acc); padding: 0;
  text-shadow: inherit;
}

.chips {
  width: 100%; max-width: 820px; margin: 0 auto; padding: 0 20px 18px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chips button {
  font: 13px var(--mono); color: var(--fg); background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); border-radius: 6px; padding: 6px 12px;
}
.chips button:hover, .chips button:focus-visible { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--hi); outline: none; }

.foot {
  width: 100%; max-width: 820px; margin: 0 auto; padding: 14px 20px 22px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between;
  font-size: 12px; color: var(--dim); border-top: 1px dashed color-mix(in srgb, var(--acc) 20%, transparent);
}
.foot a { color: var(--dim); }
.foot a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) { .scan { display: none; } }

/* Unterseiten im Terminal-Stil */
.page { padding-top: 6vh; }
.cmdline { margin: 0 0 18px; }
.cmdline .ps { text-decoration: none; }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -0.2em; margin-left: 2px; background: var(--acc); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.legal { margin: 0 0 28px; padding-left: 14px; border-left: 1px dashed color-mix(in srgb, var(--acc) 25%, transparent); max-width: 70ch; }
.legal h1 { color: var(--acc); font-size: clamp(26px, 5vw, 38px); line-height: 1.1; margin: 0 0 4px; letter-spacing: -.02em; }
.legal h2 { color: var(--hi); font-size: 14px; font-weight: 600; margin: 24px 0 6px; }
.legal h2::before { content: "# "; color: var(--dim); }
.legal p, .legal address { margin: 0 0 10px; font-style: normal; }
.legal .muted { color: var(--dim); }

.auth { margin: 0 0 28px; max-width: 460px; padding: 22px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); border-radius: 8px; background: rgb(0 0 0 / .35); }
.auth h1 { color: var(--acc); font-size: 22px; margin: 0 0 18px; }
.field { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px dashed color-mix(in srgb, var(--acc) 25%, transparent); }
.field label { color: var(--dim); min-width: 9ch; }
.field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--hi); font: inherit; caret-color: var(--acc); text-shadow: inherit; padding: 0; }
.field:focus-within { border-bottom-color: var(--acc); }
.field:focus-within label { color: var(--acc); }
.auth-error { color: var(--warn); margin: 6px 0 12px; }
.auth-btn {
  margin-top: 6px; font: 600 14px var(--mono); color: var(--bg); background: var(--acc); border: 0; border-radius: 6px;
  padding: 10px 18px; cursor: pointer; text-shadow: none; box-shadow: 0 0 18px color-mix(in srgb, var(--acc) 40%, transparent);
}
.auth-btn:hover { filter: brightness(1.08); }
.auth-btn:disabled { opacity: .6; cursor: progress; }

/* iOS zoomt bei Eingabefeldern unter 16px */
@media (max-width: 640px) { #cmd, .field input { font-size: 16px; } }