/* ==========================================================================
   AS213330.net · Phosphor-Design
   Ein Stylesheet für alle Seiten. Keine externen Abhängigkeiten.
   ========================================================================== */

@font-face {
  font-family: "VT323";
  src: url("fonts/vt323-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design-Tokens ------------------------------------------------------ */
:root {
  --tube:      #070B08;   /* Hintergrund / Röhre          */
  --panel:     #0D1A10;   /* Kästen                       */
  --line:      #2E6B3E;   /* Rahmen, Trennlinien          */
  --phosphor:  #4DFF7A;   /* Logo, Cursor, Highlights     */
  --text:      #8FF0A4;   /* Fließtext                    */
  --bright:    #B6FFC4;   /* Überschriften                */
  --dim:       #6FBF82;   /* Nebentext                    */
  --amber:     #FFB547;   /* Links, Befehle               */
  --amber-hi:  #FFD28A;   /* Link-Hover                   */
  --glow:      0 0 8px rgba(80, 255, 120, .55);

  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --display: "VT323", var(--mono);

  --max: 1040px;
  color-scheme: dark;
}

/* --- Basis --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tube);
  color: var(--text);
  font: 15px/1.65 var(--mono);
  min-height: 100vh;
}

/* Scanlines über der ganzen Seite */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .25) 3px);
  z-index: 10;
}

a { color: var(--amber); text-decoration: none; }
a:hover, a:focus-visible { color: var(--amber-hi); text-decoration: underline; }
a:focus-visible { outline: 1px dashed var(--amber); outline-offset: 3px; }

::selection { background: var(--phosphor); color: var(--tube); }

pre, code { font-family: var(--mono); }
pre { margin: 0; white-space: pre; overflow-x: auto; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-height: 100vh;
}
@media (min-width: 720px) { .wrap { padding: 40px 40px 48px; } }

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--amber); color: var(--tube); padding: 6px 12px;
}
.skip:focus { left: 8px; z-index: 20; }

/* --- Kopfzeile ---------------------------------------------------------- */
.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 14px;
}
.prompt {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.1;
  color: var(--bright);
}
.prompt a { color: inherit; text-decoration: none; }
.prompt .path { color: var(--amber); }

.cursor {
  color: var(--phosphor);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nav a { padding: 6px 0; }
.nav a[aria-current="page"] { color: var(--phosphor); text-shadow: var(--glow); }

/* --- Hero ---------------------------------------------------------------- */
.hero { display: flex; flex-direction: column; gap: 18px; }
.logo {
  color: var(--phosphor);
  text-shadow: var(--glow);
  line-height: 1.05;
  /* 61 Zeichen breit – skaliert bis aufs Handy mit */
  font-size: min(17px, calc((100vw - 32px) / 37.5));
  overflow: visible;
}
.tagline {
  font-family: var(--display);
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.15;
  color: var(--bright);
  margin: 0;
}
.sub { color: var(--dim); margin: 0; }

/* --- Überschriften & Abschnitte ---------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--bright); margin: 0; line-height: 1.1; }
h1 { font-size: clamp(34px, 6vw, 48px); }
h2 { font-size: 30px; }
h2::before { content: "## "; color: var(--line); }
h3 { font-size: 24px; }
h3::before { content: "### "; color: var(--line); }

section { display: flex; flex-direction: column; gap: 16px; }
p { margin: 0; max-width: 72ch; }

.cmd { color: var(--amber); }
.cmd::before { content: "$ "; color: var(--dim); }

.muted { color: var(--dim); }

/* --- Kästen & Raster ---------------------------------------------------- */
.grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.box {
  border: 1px solid var(--line);
  background: rgba(13, 26, 16, .7);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.box pre { font-size: 14px; }

a.card { color: var(--text); text-decoration: none; }
a.card:hover, a.card:focus-visible { border-color: var(--amber); text-decoration: none; }
a.card .cmd { font-weight: 700; }

/* Schlüssel/Wert-Listen im whois-Stil */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 18px; margin: 0; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ASCII-Tabellen-Look für echte Tabellen */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 14px; border: 1px solid var(--line); vertical-align: top; }
th { color: var(--bright); font-weight: 400; background: rgba(46, 107, 62, .18); }

ul.dash, ol.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
ul.dash li::before { content: "- "; color: var(--phosphor); }
ol.steps { counter-reset: s; }
ol.steps li { counter-increment: s; }
ol.steps li::before { content: "[" counter(s) "] "; color: var(--phosphor); }

.ls { display: flex; flex-direction: column; gap: 4px; }
.ls a::before { content: "drwxr-xr-x  "; color: var(--dim); }

.ok   { color: var(--phosphor); }
.warn { color: var(--amber); }

/* Platzhalter – leicht zu finden, vor dem Livegang ersetzen */
.ph { color: var(--amber); border-bottom: 1px dashed var(--amber); }

.btn {
  display: inline-block;
  border: 1px solid var(--amber);
  padding: 10px 18px;
  min-height: 44px;
}
.btn:hover, .btn:focus-visible { background: var(--amber); color: var(--tube); text-decoration: none; }

/* --- Fußzeile ------------------------------------------------------------ */
.foot {
  margin-top: auto;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--dim);
  font-size: 13px;
}
.foot nav { display: flex; gap: 16px; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--amber-hi); }

/* --- Druck --------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  body::after { display: none; }
  a { color: #000; text-decoration: underline; }
  .logo, .prompt, h1, h2, h3, .tagline { color: #000; text-shadow: none; }
  .box { background: none; }
}
main { display: contents; }

/* --- Sprachumschalter ---------------------------------------------------- */
.lang { display: inline-flex; gap: 6px; align-items: center; color: var(--line); margin-left: 6px; }
.lang a { padding: 6px 2px; }
.lang a[aria-current="page"] { color: var(--phosphor); text-shadow: var(--glow); }

/* --- Vorlagenfelder (bleiben stehen) ------------------------------------ */
.field { color: var(--dim); }

/* --- Under-Construction-Variante ---------------------------------------- */
.wip { color: var(--amber); }
.wip::before { content: "» "; color: var(--dim); }

.uc {
  border: 1px solid var(--amber);
  background: repeating-linear-gradient(-45deg, rgba(255, 181, 71, .07) 0 14px, transparent 14px 28px);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uc-art {
  color: var(--amber);
  font-family: var(--display);
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 181, 71, .45);
  white-space: pre-wrap;
}
.uc p { color: var(--bright); }
.uc-bar { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; }

/* Animierter ASCII-Fortschrittsbalken – reines CSS, kein JavaScript */
.uc-track { display: inline-block; width: 20ch; vertical-align: bottom; }
.uc-fill {
  display: inline-flex;
  justify-content: flex-end;   /* Pfeilspitze ">" bleibt immer sichtbar */
  overflow: hidden;
  width: 1ch;
  color: var(--phosphor);
  text-shadow: var(--glow);
  animation: uc-fill 5s infinite;
}
@keyframes uc-fill {
  0%   { width: 1ch;  animation-timing-function: steps(19, end); }
  80%  { width: 20ch; }
  100% { width: 20ch; }
}
.uc-dots {
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: uc-dots 1.2s steps(4, end) infinite;
}
@keyframes uc-dots { to { width: 4ch; } }

@media (prefers-reduced-motion: reduce) {
  .uc-fill { animation: none; width: 11ch; }
  .uc-dots { animation: none; width: 3ch; }
}