/* ─────────────────────────────────────────────────────────────────────
   benogs.de — gemeinsames Stylesheet
   Farbschema: Phosphor-Gruen auf Schwarz, bewusst nur ein Modus.
   ───────────────────────────────────────────────────────────────────── */

/* Schrift lokal eingebunden: NICHT von Google Fonts laden, sonst geht
   bei jedem Aufruf die IP des Besuchers an Google (in DE abmahnfaehig). */
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  color-scheme: dark;
  --bg:#000000;
  --bg-win:#000000;
  --chrome:#060b09;
  --rule:#152720;
  --rule-soft:#0c1511;
  --gutter:#0a110e;

  --fg:#86cba2;
  --fg-dim:#4e7b64;
  --fg-faint:#2f4c3e;
  --fg-bright:#4dffa0;
  --fg-max:#d6ffe9;
  --param:#4fd6c0;
  --string:#e8b84b;
  --glow:rgba(77,255,160,.3);

  --maxw:54rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;
  font-size:.9rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
::selection{background:var(--fg-bright);color:#02120a}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.26) 3px, rgba(0,0,0,.26) 4px);
  opacity:.6;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:8;
  background:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 52%, rgba(0,0,0,.6) 100%);
}

/* ── Fenster ──────────────────────────────────────────────────────── */
.shell{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:16px;
  padding-block:clamp(.9rem,4vw,2.4rem);
}
.window{
  background:var(--bg-win);
  border:1px solid var(--rule);
  box-shadow:0 0 44px -10px rgba(77,255,160,.07), 0 26px 70px -24px #000;
}
.titlebar{
  display:flex;align-items:center;gap:.6rem;
  background:var(--chrome);
  border-bottom:1px solid var(--rule);
  padding:.5rem .8rem;
  font-size:.7rem;color:var(--fg-dim);
}
.titlebar .bullet{
  width:8px;height:8px;border-radius:50%;
  background:var(--fg-bright);box-shadow:0 0 8px var(--glow);flex:none;
}
.titlebar .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titlebar .ctrl{margin-left:auto;letter-spacing:.3em;opacity:.45;flex:none}

.editor{display:flex;align-items:stretch}
.gutter{
  flex:none;width:2.9rem;
  background:var(--gutter);
  border-right:1px solid var(--rule-soft);
  color:var(--fg-faint);
  font-size:.68rem;line-height:1.9;text-align:right;
  padding:clamp(.9rem,3.5vw,1.7rem) .55rem 2rem 0;
  user-select:none;overflow:hidden;
}
.gutter span{display:block}
.screen{
  flex:1 1 auto;min-width:0;
  padding:clamp(.9rem,3.5vw,1.7rem) clamp(.85rem,3vw,1.7rem) clamp(1.4rem,4vw,2.2rem);
}

.statusbar{
  display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;
  background:var(--chrome);
  border-top:1px solid var(--rule);
  padding:.35rem .8rem;
  font-size:.66rem;color:var(--fg-dim);
}
.statusbar .ok{color:var(--fg-bright)}
.statusbar span{white-space:nowrap}

/* ── Banner / Kopf ────────────────────────────────────────────────── */
.banner{
  color:var(--fg-bright);
  text-shadow:0 0 14px var(--glow);
  font-size:clamp(.5rem,2.4vw,.95rem);
  line-height:1.16;font-weight:700;
  margin:0 0 1rem;
  overflow-x:auto;white-space:pre;
}
.tagline{color:var(--fg);margin:0 0 .25rem;max-width:54ch;font-size:1em;font-weight:400}
.sysinfo{color:var(--fg-dim);font-size:.76rem;margin:0 0 1.7rem}

/* ── Syntax ───────────────────────────────────────────────────────── */
.comment{color:var(--fg-faint);margin:0 0 .55rem;overflow-wrap:anywhere}
.cmd{margin:0 0 .8rem;min-height:1.75em;overflow-wrap:anywhere}
.cmd .ps{color:var(--fg-dim)}
.cmd .verb{color:var(--fg-bright);font-weight:500;text-shadow:0 0 10px var(--glow)}
.cmd .param{color:var(--param)}
.cmd .var{color:var(--fg-max)}
.cmd.typing::after{
  content:"";display:inline-block;width:.55em;height:1em;
  background:var(--fg-bright);box-shadow:0 0 8px var(--glow);
  vertical-align:-.16em;margin-left:.05em;
}

.block{margin:0 0 2.1rem}
.block:last-child{margin-bottom:0}
.out{margin:0 0 .95rem;max-width:66ch}
.out:last-child{margin-bottom:0}
.out strong{color:var(--fg-max);font-weight:500}

/* ── Tabellen ─────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin-bottom:.95rem}
table{border-collapse:collapse;font-size:.8rem;white-space:nowrap;min-width:100%}
th{text-align:left;font-weight:500;color:var(--fg-max);padding:0 1.5rem .1rem 0}
.ruler td{color:var(--fg-faint);padding:0 1.5rem 0 0;letter-spacing:-.05em}
td{padding:.1rem 1.5rem .1rem 0;vertical-align:top}
tbody td:last-child, th:last-child, .ruler td:last-child{padding-right:0}
.st-run{color:var(--fg-bright)}
.st-move{color:var(--string)}
.nm{color:var(--fg-max)}
.val{color:var(--string);user-select:all}
.val a{color:var(--param);text-decoration:none;border-bottom:1px solid var(--rule)}
.val a:hover{color:var(--fg-bright);border-color:var(--fg-bright);text-shadow:0 0 10px var(--glow)}


/* ── Verdeckte Eintraege ──────────────────────────────────────────── */
.redacted{
  color:var(--fg-faint);
  letter-spacing:.04em;
  user-select:none;
}
.entry.is-hidden{border-left-color:var(--rule-soft)}
.entry.is-hidden h3{color:var(--fg-dim)}
.st-hidden{color:var(--fg-faint)}

/* ── Projekt-Details ──────────────────────────────────────────────── */
.entry{border-left:2px solid var(--rule);padding-left:.95rem;margin-bottom:1.5rem}
.entry:last-child{margin-bottom:0}
.entry h3{font-size:.9rem;font-weight:700;color:var(--fg-bright);margin:0 0 .1rem}
.entry .field{color:var(--fg-dim);font-size:.77rem;margin:0 0 .45rem;overflow-wrap:anywhere}
.entry .field b{color:var(--param);font-weight:400}
.entry p{margin:0;max-width:64ch}

/* ── Rechtstexte ──────────────────────────────────────────────────── */
.doc h1{
  font-size:1.05rem;font-weight:700;color:var(--fg-bright);
  margin:0 0 .3rem;text-shadow:0 0 12px var(--glow);
}
.doc h2{
  font-size:.9rem;font-weight:500;color:var(--fg-max);
  margin:2rem 0 .5rem;
}
.doc h2::before{content:"## ";color:var(--fg-faint);font-weight:400}
.doc h3{
  font-size:.85rem;font-weight:500;color:var(--param);
  margin:1.3rem 0 .35rem;
}
.doc h3::before{content:"### ";color:var(--fg-faint);font-weight:400}
.doc p{margin:0 0 .85rem;max-width:68ch}
.doc ul{margin:0 0 .95rem;padding-left:1.15rem;max-width:68ch}
.doc li{margin-bottom:.15rem}
.doc li::marker{color:var(--fg-faint)}
.doc a{color:var(--param);text-decoration:none;border-bottom:1px solid var(--rule)}
.doc a:hover{color:var(--fg-bright);border-color:var(--fg-bright)}
.doc .addr{
  color:var(--fg-max);
  border-left:2px solid var(--rule);
  padding-left:.95rem;
  margin:0 0 1rem;
  font-style:normal;
  white-space:pre-line;
}
.doc .note{color:var(--fg-dim);font-size:.8rem}
.doc .stand{
  color:var(--fg-faint);font-size:.76rem;
  border-top:1px solid var(--rule-soft);
  margin-top:2rem;padding-top:.8rem;
}
.backlink{
  display:inline-block;margin-top:1.6rem;
  color:var(--fg-dim);text-decoration:none;font-size:.8rem;
  border-bottom:1px solid var(--rule);
}
.backlink:hover{color:var(--fg-bright);border-color:var(--fg-bright)}

/* ── Bedienelemente ───────────────────────────────────────────────── */
.copy{
  font:inherit;font-size:.77rem;color:var(--fg);
  background:transparent;border:1px solid var(--rule);
  padding:.32rem .8rem;cursor:pointer;
  transition:color .15s,border-color .15s,box-shadow .15s;
}
.copy:hover{color:var(--fg-bright);border-color:var(--fg-bright)}
.copy[data-done="1"]{color:var(--fg-bright);border-color:var(--fg-bright);box-shadow:0 0 14px -2px var(--glow)}

.tail{margin:2rem 0 0;color:var(--fg-dim)}
.caret{
  display:inline-block;width:.55em;height:1em;
  background:var(--fg-bright);box-shadow:0 0 9px var(--glow);
  vertical-align:-.16em;margin-left:.15em;
  animation:blink 1.15s step-end infinite;
}
@keyframes blink{50%{opacity:0}}

footer{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:16px;
  padding-block:1rem clamp(1.4rem,5vw,2.4rem);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1.4rem;
  font-size:.7rem;color:var(--fg-dim);
}
footer a{color:var(--fg-dim);text-decoration:none;border-bottom:1px solid var(--rule-soft)}
footer a:hover{color:var(--fg)}

a:focus-visible, button:focus-visible{outline:2px solid var(--fg-bright);outline-offset:2px}

@media (max-width:560px){ .gutter{display:none} }
@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  *{transition:none!important}
}