/* SPDX-License-Identifier: AGPL-3.0-or-later · Copyright (C) 2026 Christin Löhner */
:root {
  --bg: #050806;
  --bg2: #080e0a;
  --panel: #09110c;
  --line: #153322;
  --line2: #1d4a31;
  --fg: #c6ecd3;
  --dim: #5f8570;
  --dim2: #3d5c4a;
  --accent: #3dff8a;
  --amber: #ffb454;
  --red: #ff5470;
  --cyan: #4de1ff;
  --violet: #c58bff;
  --orange: #ff7a45;
  --blue: #8fa5ff;
  --glow: 0 0 0.625rem color-mix(in srgb, var(--accent) 45%, transparent);
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}
html[data-theme="amber"] { --accent: #ffb454; --fg: #f1dcb8; --dim: #8c7650; --dim2: #5c4c30; --line: #3a2c14; --line2: #5a4421; --bg: #0a0804; --bg2: #100c06; --panel: #120e07; }
html[data-theme="ice"] { --accent: #4de1ff; --fg: #cdeefa; --dim: #5f8a99; --dim2: #3d5e6b; --line: #12313c; --line2: #1d4c5c; --bg: #04080a; --bg2: #060d10; --panel: #081217; }

/* Skalierung: alle Größen sind rem. Unter 1600 px Breite 100 %, ab 3840 px (4K) 150 %, dazwischen proportional. */
html { font-size: 16px; }
@media (min-width: 1600px) { html { font-size: calc(16px + (100vw - 1600px) * 0.003571); } }
@media (min-width: 3840px) { html { font-size: 24px; } }

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; padding: 0 0 4rem; color: var(--fg); font: 0.875rem/1.5 var(--mono);
  background:
    radial-gradient(75rem 37.5rem at 12% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(56.25rem 31.25rem at 100% 0%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 60%),
    var(--bg);
  min-height: 100vh;
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--dim); }
a:hover { border-bottom-style: solid; }
code { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 0 .3em; border-radius: 3px; }
b { font-weight: 600; }
.dim { color: var(--dim); }

/* CRT-Effekt: feine Scanlines und Vignette, abschaltbar */
.crt { pointer-events: none; position: fixed; inset: 0; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.14) 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%); }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; align-items: center;
  padding: .7rem clamp(.8rem, 3vw, 2rem); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(0.5rem); border-bottom: 1px solid var(--line); }
.prompt { white-space: nowrap; }
.prompt .u { color: var(--accent); } .prompt .at { color: var(--dim); } .prompt .h { color: var(--cyan); } .prompt .p { color: var(--dim); margin-right: .2rem; }
.cmd { color: var(--fg); }
.cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .65rem; border: 1px solid var(--line2); border-radius: 62.4375rem; font-size: 0.75rem; color: var(--fg); background: var(--bg2); }
.chip.dim { color: var(--dim); }
.chip .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.5rem var(--accent); animation: pulse 1.8s ease-in-out infinite; }
.chip.off .dot { background: var(--red); box-shadow: 0 0 0.5rem var(--red); animation: none; }
.chip.off b { color: var(--red); } .chip:not(.off) b { color: var(--accent); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

main { max-width: 80rem; margin: 0 auto; padding: 1.2rem clamp(.8rem, 3vw, 2rem) 0; display: grid; gap: 1.2rem; }

.hero { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 2rem; align-items: center; padding: .6rem 0 .2rem; }
.ascii { margin: 0; color: var(--accent); text-shadow: var(--glow); font-size: clamp(0.5rem, 1.7vw, 0.8125rem); line-height: 1.15; overflow: hidden; }
.hero-text h1 { margin: 0 0 .4rem; font-size: clamp(1.2rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; color: #eafff1; }
.hero-text p { margin: 0; color: var(--fg); max-width: 75ch; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile { position: relative; display: flex; flex-direction: column; padding: .9rem 1rem; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg2)); border-radius: 0.625rem; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .7; }
.tile .k { color: var(--dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .12em; }
.tile .v { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; color: var(--accent); text-shadow: var(--glow); font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .s { color: var(--dim); font-size: 0.75rem; min-height: 1.4em; }

.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.grid2 .panel:first-child { grid-column: 1 / -1; }
.panel { border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg2)); border-radius: 0.625rem; padding: 1rem 1.1rem; min-width: 0; }
.panel h2 { margin: 0 0 .8rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--fg); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.panel h2 small { color: var(--dim); text-transform: none; letter-spacing: 0; font-weight: 400; }
.hash { color: var(--accent); }

.hist { display: flex; align-items: stretch; gap: 2px; height: 7.5rem; padding-bottom: 1px; border-bottom: 1px solid var(--line2); }
.hist .bar { flex: 1 1 0; min-width: 2px; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; background: transparent; cursor: default; }
.hist .bar i { display: block; width: 100%; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); border-radius: 2px 2px 0 0; min-height: 0; transition: height .5s ease; }
.hist .bar i.ban { background: linear-gradient(180deg, var(--red), color-mix(in srgb, var(--red) 35%, transparent)); }
.hist .bar:hover i { filter: brightness(1.4); }
.hist .bar .tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #000; border: 1px solid var(--line2); padding: .15rem .45rem; border-radius: 0.25rem; font-size: 0.6875rem; display: none; z-index: 5; }
.hist .bar:hover .tip { display: block; }
.axis { display: flex; justify-content: space-between; color: var(--dim); font-size: 0.6875rem; padding-top: .3rem; }

.bars { display: grid; gap: .35rem; }
.brow { display: grid; grid-template-columns: minmax(0, 14rem) 1fr 3.2rem; gap: .6rem; align-items: center; font-size: 0.8125rem; cursor: pointer; }
.brow:hover .bl { color: var(--accent); }
.brow .bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .bt { height: .75rem; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 2px; overflow: hidden; }
.brow .bt i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 0.375rem, color-mix(in srgb, var(--accent) 60%, transparent) 0.375rem 0.5rem); box-shadow: var(--glow); }
.brow .bn { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

.cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.cat { cursor: pointer; font: inherit; color: var(--fg); background: var(--bg2); border: 1px solid var(--line2); border-radius: 0.375rem; padding: .25rem .7rem; display: inline-flex; gap: .5rem; align-items: center; }
.cat:hover { border-color: var(--accent); }
.cat[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: #fff; box-shadow: var(--glow); }
.cat .sw { width: .55rem; height: .55rem; border-radius: 2px; background: var(--c, var(--accent)); }
.cat .cn { color: var(--dim); font-variant-numeric: tabular-nums; }
.controls { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: end; }
.controls label { display: grid; gap: .2rem; font-size: 0.75rem; color: var(--dim); }
.controls label.grow { flex: 1 1 18rem; }
.controls label.check { display: inline-flex; align-items: center; gap: .4rem; color: var(--fg); padding-bottom: .45rem; }
input[type="search"], input[type="text"], select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line2); border-radius: 0.375rem; padding: .4rem .6rem; min-width: 0; }
input:focus, select:focus, button:focus-visible, .cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="checkbox"] { accent-color: var(--accent); width: 1rem; height: 1rem; }
.btn { font: inherit; cursor: pointer; color: var(--fg); background: var(--bg2); border: 1px solid var(--line2); border-radius: 0.375rem; padding: .4rem .8rem; }
.btn:hover { border-color: var(--accent); color: #fff; }
.btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Alarmliste */
.thead, .row { display: grid; grid-template-columns: 6.2rem 4.6rem minmax(0, 2.4fr) 10.5rem 9rem minmax(0, 1.6fr) 2.5rem 5.5rem; gap: .6rem; align-items: center; }
.thead { color: var(--dim); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .12em; padding: 0 .6rem .4rem; border-bottom: 1px solid var(--line2); }
.thead .n, .row .n { text-align: right; }
.rows { display: grid; }
.item { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.row { padding: .45rem .6rem; cursor: pointer; font-size: 0.8125rem; }
.row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t { color: var(--dim); font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 0 .45rem; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em; border: 1px solid currentColor; }
.badge.ban { color: var(--red); } .badge.alert { color: var(--amber); } .badge.sim { color: var(--dim); }
.scen { color: var(--c, var(--fg)); }
.scen::before { content: "▌"; margin-right: .35rem; }
.ip { color: #fff; font-variant-numeric: tabular-nums; }
.act { color: var(--red); } .act.none { color: var(--dim); }
.item.new { animation: flash 2.2s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--accent) 30%, transparent); } 100% { background: transparent; } }
.item.hl { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.detail { display: none; margin: 0 .6rem .8rem; padding: .8rem 1rem; border: 1px dashed var(--line2); border-radius: 0.5rem; background: var(--bg); }
.item.open .detail { display: block; }
.item.open .row { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.detail pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.7812rem; color: var(--fg); }
.detail .k { color: var(--dim); }
.detail .hd { color: var(--accent); }
.detail .acts { margin-top: .6rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.empty { padding: 1.2rem .6rem; color: var(--fg); }
.more { margin: .9rem auto 0; display: block; }

.out { max-height: 14rem; overflow: auto; font-size: 0.8125rem; padding: .2rem 0 .6rem; white-space: pre-wrap; word-break: break-word; }
.out .ln { color: var(--fg); } .out .cm { color: var(--dim); } .out .er { color: var(--red); } .out .ok { color: var(--accent); }
.cmdline { display: flex; gap: .6rem; align-items: center; border-top: 1px solid var(--line); padding-top: .6rem; }
.cmdline input { flex: 1; background: transparent; border: 0; padding: .2rem 0; color: #fff; caret-color: var(--accent); }
.cmdline input:focus { outline: none; }

.sub p { margin: 0 0 .8rem; color: var(--fg); max-width: 85ch; }
.subgrid { display: grid; gap: .5rem; }
.sub-item { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .8rem; align-items: center; }
.sub-item .k { color: var(--dim); }
.sub-item code { overflow-x: auto; white-space: nowrap; padding: .35rem .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 0.375rem; }

footer { max-width: 80rem; margin: 2rem auto 0; padding: 1rem clamp(.8rem, 3vw, 2rem) 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: var(--dim); font-size: 0.75rem; border-top: 1px solid var(--line); }

.boot-line { color: var(--dim); }

@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .grid2 { grid-template-columns: 1fr; }
  .thead { display: none; }
  .row { grid-template-columns: 5.4rem 4.2rem 1fr auto; grid-template-areas: "t b s a" "t i c n"; row-gap: .1rem; }
  .row .t { grid-area: t; } .row .b { grid-area: b; } .row .s { grid-area: s; } .row .a { grid-area: a; }
  .row .i { grid-area: i; } .row .c { grid-area: c; } .row .as, .row .n { display: none; }
  .row .i, .row .c { font-size: 0.75rem; }
  .row .s { white-space: normal; overflow: visible; word-break: break-word; line-height: 1.3; }
  .hero { grid-template-columns: 1fr; }
  .ascii { display: none; }
  .brow { grid-template-columns: minmax(0, 9rem) 1fr 2.6rem; }
  .sub-item { grid-template-columns: 1fr auto; } .sub-item .k { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr 1fr; gap: .6rem; } .tile { padding: .7rem .8rem; } .chips { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .crt, .topbar, .term, .sub, .filters { display: none; } body { background: #fff; color: #000; } }

/* Rechtliche Seiten (Impressum, Datenschutz) */
.noscript { margin: 0; padding: .8rem 1rem; text-align: center; color: var(--amber); border-bottom: 1px solid var(--line); }
main.legal { max-width: 56rem; display: grid; gap: 1.1rem; }
.legal h1 { margin: .4rem 0 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; color: #eafff1; }
.legal .panel p, .legal .panel li { max-width: 80ch; }
.legal .panel p { margin: 0 0 .7rem; } .legal .panel p:last-child { margin-bottom: 0; }
.legal .panel ul { margin: 0 0 .7rem; padding-left: 1.3rem; }
.legal address { font-style: normal; line-height: 1.7; }
.legal .dim a { color: var(--accent); }
a.chip { color: var(--fg); border-bottom: 1px solid var(--line2); }
a.chip:hover { border-color: var(--accent); color: #fff; }