/* BLAUPAUSE./.OFFLINE FEED — Asservaten-Akte, lo-fi */

@font-face {
  font-family: "VT323";
  src: url("/fonts/vt323.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --schwarz: #0a0a0a;
  --blatt: #111;
  --weiss: #ececec;
  --grau: #8c8c8c;
  --linie: #3a3a3a;
  --punkt: rgba(255, 255, 255, 0.07);
  --holo: #1ec8e6;           /* Filament-Cyan (ANNAHME, am Druck abgleichen) */
  --rot: #ff3b2f;
  --gelb: #ffd400;
  --gruen: #3ddc6a;
  --text: "VT323", ui-monospace, Consolas, monospace;
  --pixel: "Silkscreen", "VT323", monospace;
  --px: 2;                   /* Pixelgröße der Büste in CSS-Pixeln */
}

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

html { background: var(--schwarz); }

body {
  margin: 0;
  min-height: 100vh;
  padding: 1.25rem 1rem 2.5rem;
  color: var(--weiss);
  font: 400 1.2rem/1.25 var(--text);
  background-color: var(--schwarz);
  /* Raster-Punkte wie ein grober Druck */
  background-image: radial-gradient(var(--punkt) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

.blatt {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Kopf */
.kopf {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px dashed var(--linie);
  text-transform: uppercase;
  font-size: 1rem;
}
.kopf-stelle { display: flex; align-items: center; gap: 0.6rem; color: var(--weiss); text-decoration: none; }
.kopf-stelle:hover .siegel { background: var(--weiss); color: var(--schwarz); }
.siegel {
  display: inline-grid;
  place-items: center;
  padding: 0.35rem 0.45rem 0.3rem;
  border: 2px solid var(--weiss);
  font: 700 0.7rem/1 var(--pixel);
  box-shadow: 3px 3px 0 var(--linie);
  flex-shrink: 0;
}
.kopf-zeile { display: flex; justify-content: space-between; gap: 1rem; color: var(--grau); }

/* Werktitel */
.werk {
  position: relative;
  z-index: 2;                /* Titel liegt vor der herausragenden Büste */
  margin: 0;
  font: 700 clamp(1.9rem, 9.6vw, 2.6rem)/1 var(--pixel);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 var(--linie);
}
.werk-trenner { color: var(--grau); }
.werk-serie { display: block; font-weight: 400; color: var(--grau); text-shadow: none; }

.vorspann { margin: 0; color: var(--grau); }

/* Lichttisch mit Hologramm */
.lichttisch {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1.05;
  border: 2px solid var(--linie);
  background: var(--blatt);
}
/* Raster, Scanlines und Scan bleiben in der Box, nur die Büste darf heraus */
.lichttisch > .raster, .lichttisch > .scanlines, .lichttisch > .scan { overflow: hidden; }
.raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 21px 21px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}

/* Büste klein rendern und pixelig hochskalieren */
.holo {
  position: absolute;
  inset: -11% -9% -4%;       /* größer als die Box: die Büste ragt oben und seitlich heraus */
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(30, 200, 230, 0.55));
}
model-viewer {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--px));
  height: calc(100% / var(--px));
  transform: scale(var(--px));
  transform-origin: 0 0;
  image-rendering: pixelated;
  pointer-events: auto;
  /* Scanlines direkt auf der Büste, damit sie auch außerhalb der Box gelten */
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 1px, rgba(0, 0, 0, 0.55) 1px 2px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 1px, rgba(0, 0, 0, 0.55) 1px 2px);
  --poster-color: transparent;
  --progress-bar-color: var(--holo);
  --progress-bar-height: 0px;
}

/* Glitch-Schub: Streifenversatz (SVG-Filter) und Farbversatz, nur kurz aktiv */
.glitch-filter { position: absolute; width: 0; height: 0; }
model-viewer.glitcht {
  filter: url(#glitch) drop-shadow(2px 0 rgba(255, 59, 47, 0.7)) drop-shadow(-2px 0 rgba(30, 200, 230, 0.8));
}

/* Scanlines */
.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.38) 2px 4px);
  pointer-events: none;
}

/* Display-Rahmen: Eckwinkel in festen Pixeln, Beschriftung mittig auf den Winkelkanten */
.lichttisch { --e-abstand: 10px; --e-arm: 16px; --e-innen: 10px; }  /* HUD: Beschriftung innen in den Ecken */
.ecken {
  position: absolute;
  inset: var(--e-abstand);
  z-index: 2;
  pointer-events: none;
  --w: linear-gradient(var(--weiss), var(--weiss));
  background:
    var(--w) top left / var(--e-arm) 2px no-repeat,
    var(--w) top left / 2px var(--e-arm) no-repeat,
    var(--w) top right / var(--e-arm) 2px no-repeat,
    var(--w) top right / 2px var(--e-arm) no-repeat,
    var(--w) bottom left / var(--e-arm) 2px no-repeat,
    var(--w) bottom left / 2px var(--e-arm) no-repeat,
    var(--w) bottom right / var(--e-arm) 2px no-repeat,
    var(--w) bottom right / 2px var(--e-arm) no-repeat;
}
.masslinie {
  position: absolute;
  left: calc(var(--e-abstand) + 14px);
  top: 20%;
  bottom: 20%;
  border-left: 2px dashed var(--linie);
  pointer-events: none;
}
.masslinie::before, .masslinie::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 12px;
  height: 2px;
  background: var(--linie);
}
.masslinie::before { top: 0; }
.masslinie::after { bottom: 0; }
.mass-text {
  position: absolute;
  z-index: 2;
  left: calc(var(--e-abstand) + var(--e-innen));
  font-size: 0.95rem;
  line-height: 20px;
  color: var(--grau);
  pointer-events: none;
}
/* Zeilenmitte (10px) auf die Winkelkante (Abstand + 1px) legen */
/* feine Pixelkontur statt Kasten: lesbar, wenn die Büste dahinter liegt */
.mass-text, .statusmeldung-text { text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
.mass-oben { top: calc(var(--e-abstand) + var(--e-innen) - 4px); }   /* -4px: Zeilenhöhe hat oben Luft */
.mass-unten { bottom: calc(var(--e-abstand) + var(--e-innen)); }

.scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: rgba(30, 200, 230, 0.35);
  opacity: 0;
  pointer-events: none;
}

/* Statusmeldung oben rechts: vor der Meldung nur rotes Dreieck, danach Code + Text */
.statusmeldung {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--e-abstand) + var(--e-innen));   /* gleiche Zeile wie .mass-unten */
  right: calc(var(--e-abstand) + var(--e-innen));
  height: 20px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}
.warn { width: 15px; height: 14px; fill: var(--rot); shape-rendering: crispEdges; }
/* in der Box größer: doppeltes Pixelraster (11 x 10), mittig auf der Winkelkante */
.statusmeldung .warn { width: 22px; height: 20px; }

/* Ampel: rot = nicht gemeldet / sichergestellt, grün = im Umlauf, gelb = verwahrt (steht still) */
[data-status="im-umlauf"] .warn, .reg-status[data-status="im-umlauf"] + .warn { fill: var(--gruen); }
[data-status="verwahrt"] .warn, .reg-status[data-status="verwahrt"] + .warn { fill: var(--gelb); animation: none; }
.warn .warn-zeichen { fill: var(--schwarz); }
.statusmeldung-text { font-size: 0.95rem; line-height: 20px; color: var(--grau); }

.ar-knopf {
  /* sitzt im hochskalierten Betrachter: Lage und Größe zurückrechnen */
  position: absolute;
  right: calc(0.75rem / var(--px));
  bottom: calc(2.4rem / var(--px));
  transform: scale(calc(1 / var(--px)));
  transform-origin: 100% 100%;
  padding: 0.4rem 0.6rem 0.3rem;
  border: 2px solid var(--weiss);
  background: var(--schwarz);
  color: var(--weiss);
  font: 400 0.7rem/1 var(--pixel);
  text-transform: uppercase;
  cursor: pointer;
  image-rendering: auto;
}
.ar-knopf:hover { background: var(--weiss); color: var(--schwarz); }

/* Bögen */
.bogen {
  border: 2px solid var(--linie);
  background: var(--blatt);
  padding: 0.8rem 0.9rem 0.9rem;
  box-shadow: 4px 4px 0 #000;
}
.rubrik {
  margin: 0 0 0.5rem;
  font: 700 0.75rem/1 var(--pixel);
  text-transform: uppercase;
  color: var(--weiss);
}
.rubrik::before { content: "// "; color: var(--grau); }
.bogen dl { margin: 0; }
.bogen dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 2px dotted var(--linie);
}
.bogen dl > div:last-child { border-bottom: 0; }
.bogen dt { color: var(--grau); }
.bogen dd { margin: 0; text-align: right; }

/* Aufklappbarer Bogen */
.klapp summary { display: block; margin: 0; cursor: pointer; list-style: none; }
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary::after { content: "[+]"; float: right; color: var(--grau); }
.klapp[open] summary::after { content: "[-]"; }
.klapp[open] summary { margin-bottom: 0.6rem; }
.klapp summary:focus-visible { outline: 2px dashed var(--weiss); outline-offset: 3px; }

/* Herkunftsnachweis */
.protokoll { margin: 0; }
.protokoll dt { font: 700 0.65rem/1.4 var(--pixel); text-transform: uppercase; color: var(--grau); }
.protokoll dd { margin: 0 0 0.7rem; text-align: left; }
.protokoll dd:last-child { margin-bottom: 0; }
.verfahren { margin: 0.15rem 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.verfahren li { counter-increment: schritt; display: grid; grid-template-columns: 1.4rem 4.2rem 1fr; gap: 0.3rem; }
.verfahren li::before { content: counter(schritt); color: var(--grau); }
.verfahren span { color: var(--weiss); }
.verfahren li { color: var(--grau); }

/* Lageplan */
.lageplan {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: var(--schwarz);
  border: 2px solid var(--linie);
}
.lageplan-klein { margin-top: 0.8rem; }
.lageplan-zeile { margin: 0.5rem 0 0; color: var(--grau); }

/* Fundmeldung */
.fundmeldung { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 2px dotted var(--linie); display: flex; flex-direction: column; gap: 0.6rem; }
.formular-titel { margin: 0; font: 700 0.65rem/1.4 var(--pixel); text-transform: uppercase; }
.fundmeldung label { display: flex; flex-direction: column; gap: 0.2rem; color: var(--grau); }
.hinweis { font-size: 0.9rem; color: #666; }
.fundmeldung input {
  width: 100%;
  padding: 0.45rem 0.55rem 0.35rem;
  border: 2px solid var(--linie);
  border-radius: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font: 400 1.25rem/1 var(--text);
}
.fundmeldung input::placeholder { color: #555; }
.fundmeldung input:focus { outline: none; border-color: var(--weiss); }
.formular-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; }
.knopf, .knopf-leise {
  min-height: 2.6rem;
  padding: 0.45rem 0.75rem 0.35rem;
  border: 2px solid var(--weiss);
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}
.knopf { background: var(--weiss); color: var(--schwarz); }
.knopf:hover { background: var(--holo); border-color: var(--holo); }
.knopf-leise { background: transparent; color: var(--weiss); border-color: var(--linie); }
.knopf-leise:hover { border-color: var(--weiss); }
.knopf:focus-visible, .knopf-leise:focus-visible { outline: 2px dashed var(--weiss); outline-offset: 3px; }
.verwahrung { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.6rem; border-top: 2px dotted var(--linie); }
.verwahrung[hidden] { display: none; }
.formular-meldung { margin: 0; min-height: 1.25em; color: var(--grau); }
.formular-meldung[data-art="fehler"] { color: var(--rot); }
.formular-meldung[data-art="ok"] { color: var(--holo); }

/* Akte */
.akte-knopf {
  --fortschritt: 0%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--weiss);
  background: linear-gradient(90deg, #2a2a2a var(--fortschritt), transparent var(--fortschritt));
  color: var(--weiss);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.akte-knopf + .akte-knopf { margin-top: 0.5rem; }
.akte-knopf:hover { background-color: #1c1c1c; }
.akte-knopf:focus-visible, .ar-knopf:focus-visible, a:focus-visible { outline: 2px dashed var(--weiss); outline-offset: 3px; }
.akte-titel { white-space: nowrap; }
.akte-meta { color: var(--grau); text-align: right; }
.akte-knopf.gesperrt {
  border-style: dashed;
  border-color: var(--linie);
  color: var(--grau);
  cursor: not-allowed;
}

/* Verzeichnis */
.register { list-style: none; margin: 0; padding: 0; }
.register-leer { margin: 0; color: var(--grau); }
.register-leer[hidden] { display: none; }
.register a {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto 15px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 2px dotted var(--linie);
  color: var(--weiss);
  text-decoration: none;
}
.register li:last-child a { border-bottom: 0; }
.register a:hover .reg-az { color: var(--weiss); }
.reg-nr { font: 700 1rem/1 var(--pixel); }
.reg-az { color: var(--grau); }
.reg-status {
  padding: 0.15rem 0.4rem 0.05rem;
  border: 2px solid currentColor;
  font: 400 0.6rem/1.2 var(--pixel);
  color: var(--grau);
}
.reg-status[data-status="sichergestellt"], .reg-status[data-status="im-umlauf"] { color: var(--weiss); }

/* Fuß */
.fuss { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.25rem; }
.urheber-link {
  align-self: flex-start;
  padding: 0.3rem 0.6rem 0.2rem;
  border: 2px solid var(--linie);
  color: var(--grau);
  text-decoration: none;
}
.urheber-link:hover { border-color: var(--weiss); color: var(--weiss); }
.kleingedruckt { margin: 0; font-size: 0.95rem; color: var(--grau); }
.register-link { color: var(--grau); }
.register-link:hover { color: var(--weiss); }

/* Warndreieck blinkt immer: kein Ortswechsel, 1 Hz, weit unter der Blitzgrenze */
.warn { animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }

/* Bewegung: nur ohne Wunsch nach reduzierter Bewegung */
/* Bewegung: Klasse .bewegt setzt akte.js, wenn keine reduzierte Bewegung gewünscht ist
   oder die Adresse ?bewegung=an enthält (zum Vorführen) */
.bewegt .holo { animation: flackern 6s steps(1) infinite; }
.bewegt .scanlines { animation: rollen 0.5s linear infinite; }
.bewegt.geladen .scan, .bewegt .geladen .scan { animation: scan 3.2s linear infinite; }
@keyframes flackern {
  0%, 100% { opacity: 1; transform: none; }
  41% { opacity: 0.55; }
  42% { opacity: 1; transform: translateX(3px); }
  43% { transform: none; }
  77% { opacity: 0.8; transform: translateX(-3px); }
  78% { opacity: 1; transform: none; }
}
@keyframes rollen { to { background-position: 0 4px; } }
@keyframes scan {
  0% { top: -6px; opacity: 1; }
  100% { top: 100%; opacity: 1; }
}