/* Mein Retroarchiv · RETRO / GRID · 80s, 90s & Tron */
@font-face{font-family:Orbitron;src:url("fonts/Orbitron.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
:root{
  color-scheme:dark;
  --ink:#eaf5ff;--muted:#a9b9d4;--nav:#080e22;--red:#71fff0;
  --line:#263759;--paper:#101b34;--bg:#060b1b;--focus:#71fff0;--radius:3px;
  --cyan:#71fff0;--pink:#ff79df;--violet:#9587ff;
}
body{
  isolation:isolate;
  background-color:var(--bg);
  background-image:radial-gradient(ellipse at 88% 8%,#b32cbd18,transparent 47%),radial-gradient(ellipse at 5% 28%,#146d9b20,transparent 45%);
  color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;
  line-height:1.65;
}
body::before{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  inset:40% -35% -65%;opacity:.24;
  background-image:linear-gradient(#4dfbea48 1px,transparent 1px),linear-gradient(90deg,#4dfbea48 1px,transparent 1px);
  background-size:76px 76px;
  transform:perspective(650px) rotateX(57deg);transform-origin:center top;
  mask-image:linear-gradient(transparent,#000 35%,#000 75%,transparent);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,#51255415 100%);
}
a{color:var(--cyan)}a:hover{color:#c3fff8;text-decoration:none}
button,.button{
  font-family:"Space Grotesk",system-ui,sans-serif;background:#0c1830;
  color:var(--cyan);border:1px solid #55dcdd73;border-radius:2px;
  padding:.64rem 1rem;letter-spacing:.015em;
  box-shadow:inset 0 0 18px #53f9ed05;
  transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;
}
button:hover,.button:hover{
  background:#122742;color:#b9fff7;border-color:var(--cyan);
  box-shadow:0 0 18px #4dfff321,inset 0 0 16px #4dfff30a;
}
.primary{
  background:var(--cyan);border-color:var(--cyan);color:#071422;
  box-shadow:0 0 22px #71fff02b;font-weight:700;
}
.primary:hover{background:#b6fff5;color:#051321;border-color:#b6fff5;box-shadow:0 0 26px #71fff04d}
.quiet{background:transparent;border-color:transparent;color:var(--pink);box-shadow:none}
.quiet:hover{background:#ff79df0a;border-color:#ff79df55;color:#ffb4ed}
.danger{background:#260e28;color:#ffadd9;border-color:#ff79b780}
input,select,textarea{
  background:#070e20;color:#eef7ff;border-color:#344564;border-radius:2px;
  box-shadow:inset 0 2px 9px #0003;
}
input::placeholder,textarea::placeholder{color:#899bb7;opacity:1}
input:hover,select:hover,textarea:hover{border-color:#4c7a8b}
input:focus,textarea:focus,select:focus{border-color:var(--cyan);outline:2px solid #71fff08c;outline-offset:2px;box-shadow:0 0 15px #71fff018}
button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
input[type=file]{background:#0c1730;border:1px solid #385a76}
input[type=file]::file-selector-button{font:inherit;background:#19334a;color:var(--cyan);border:1px solid #3c9d9e;border-radius:2px;padding:.45rem .7rem;margin-right:.8rem;cursor:pointer}
h1,h2,h3{color:#f0f7ff}
h1{
  font-family:Orbitron,system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.65rem,3.25vw,2.8rem);line-height:1.35;letter-spacing:.015em;
  text-shadow:0 0 25px #7fddff20;
}
.pagehead h1{max-width:100%;overflow-wrap:anywhere}
.pagehead .eyebrow{color:var(--pink)}
.eyebrow{font-size:.78rem;letter-spacing:.16em;color:var(--cyan)}
.muted,.helptext{color:var(--muted)}
.topbar{
  position:relative;background:linear-gradient(110deg,#081225f5,#111129f5);
  border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--cyan),#6c8fff 55%,var(--pink)) 1;
  box-shadow:0 1px 0 #69fff55c,0 10px 30px #0004;
  padding-top:1.3rem;padding-bottom:1.3rem;min-height:93px;
}
.topbar::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.19;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,#688fd114 3px,#688fd114 4px);
}
.brand,.topbar nav{position:relative;z-index:1}
.brand{font-family:Orbitron,system-ui,sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:.045em;color:#eefcff;white-space:normal}
.brand:hover{color:#fff;text-shadow:0 0 15px #71fff033}
.brandmark{
  width:40px;height:43px;flex-shrink:0;background:linear-gradient(135deg,#1b4354,#0a122a);
  border:1px solid var(--cyan);border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);
  border-radius:2px;color:var(--cyan);text-shadow:0 0 12px #71fff060;
  box-shadow:0 0 13px #71fff018;transform:skewY(-5deg);font-size:1.45rem;
}
.topbar nav{gap:1.15rem}
.topbar nav a{color:#cbd7ef;font-size:.9rem;letter-spacing:.035em}
.topbar nav a:hover{color:var(--cyan);text-shadow:0 0 12px #71fff040}
.shell{padding-top:2.7rem;min-height:calc(100vh - 180px)}
.pagehead{margin-bottom:2rem}
.panel{
  position:relative;background:linear-gradient(125deg,#111d36f5,#0e152cf5);
  border:1px solid #35465f;border-radius:3px;box-shadow:0 14px 40px #0002,inset 0 1px 0 #acd9ff05;
}
.panel::before,.panel::after{content:"";position:absolute;pointer-events:none;width:25px;height:11px}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);filter:drop-shadow(0 0 4px #71fff045)}
.panel::after{bottom:-1px;right:-1px;border-bottom:2px solid #ff79dfaa;border-right:2px solid #ff79dfaa}
.filters{background:linear-gradient(110deg,#12213bf5,#12182df5);padding:1.2rem 1.35rem}
.filters label{color:#c9d7ec;font-size:.9rem}
.filters .reset{color:var(--pink)}
.resultcount{display:flex;align-items:center;gap:.65rem;color:#aabbda;font-family:"Space Grotesk",monospace;font-size:.9rem;letter-spacing:.055em}
.resultcount::before{content:"";display:inline-block;width:21px;height:2px;background:var(--pink);box-shadow:0 0 7px #ff79df77}
.archivegrid{gap:1.5rem}
.archivecard{
  position:relative;border:1px solid #33496b;border-radius:3px;
  background:linear-gradient(140deg,#101d36,#0d142c);color:var(--ink);
  box-shadow:0 10px 22px #0002;
}
.archivecard::after{content:"";position:absolute;right:0;bottom:0;width:29px;height:3px;background:var(--pink);opacity:.75}
.archivecard:hover{border-color:#70fff0ba;box-shadow:0 0 0 1px #71fff018,0 0 28px #39d6d51c,0 13px 24px #0004;transform:translateY(-4px);color:var(--ink)}
.cover{
  background:radial-gradient(ellipse at 65% 20%,#713a7520,transparent 70%),#080f20;
  border-bottom:1px solid #31415f;padding:16px;
}
.cover img{box-shadow:0 5px 24px #0007,0 0 0 1px #bddeff18}
.coverplaceholder{background:linear-gradient(145deg,#132645,#080f24);border:1px solid #365370;color:#9cb5d5}
.documentmark{color:var(--cyan);text-shadow:0 0 22px #71fff040}
.cardbody{padding:1.2rem}
.cardbody .eyebrow{color:var(--pink);font-size:.75rem;letter-spacing:.12em}
.cardbody h2{font-weight:700;font-size:1.14rem;line-height:1.45}
.filecount{background:#0a1c2d;border-color:#315e6d;color:#9af4ed;letter-spacing:.015em}
.empty{
  padding:3.7rem 1.5rem;background:radial-gradient(ellipse at 50% 0%,#31648d1c,transparent 72%),linear-gradient(125deg,#111d36f5,#0e152cf5);
  border-color:#34516b;
}
.empty .documentmark{font-size:3.8rem;margin-bottom:1.3rem}
.empty h2{font-family:Orbitron,system-ui,sans-serif;font-size:1.2rem;font-weight:600;line-height:1.5;letter-spacing:.02em}
.empty p{max-width:550px;color:#adbed9}
.footer{border-color:#355273;color:#82a3bc;position:relative;letter-spacing:.025em;font-size:.85rem}
.footer::before{content:"";position:absolute;top:-1px;left:1.25rem;width:90px;height:1px;background:var(--cyan);box-shadow:0 0 8px #71fff066}
.footer span{color:#a69ebf}
.notice{background:#0e293a;border-color:#346579;color:#b7fff6;box-shadow:inset 3px 0 var(--cyan)}
.notice.error,.errorlist{background:#31152c;border-color:#875172;color:#ffbedf}
.errorlist{border:1px solid #875172}
.login{margin-top:3rem;background:radial-gradient(ellipse at 100% 0%,#ff79df0e,transparent 65%),linear-gradient(125deg,#111d36f5,#0e152cf5)}
.login h1{font-size:1.6rem;line-height:1.45;letter-spacing:.025em}
.login .eyebrow{color:var(--pink)}
.editor form>p>label{color:#dceafa}
.dropzone{background:#07172b99;border-color:#44818a;border-radius:3px;box-shadow:inset 0 0 30px #71fff005}
.dropzone:hover{border-color:var(--cyan)}
.assethead h2{color:#e7f5ff}
.backlink{color:#9df4ed;letter-spacing:.025em}
.pdfembed{border-color:#416273;border-radius:2px;background:#080f20}
.imagepreview{background:#070f20;border-color:#354965;border-radius:2px}
.imagepreview:hover{background:#0c1a2d}
.imagepreview span{color:var(--cyan)}
video{background:#020612;border:1px solid #2e4965;border-radius:2px}
audio{color-scheme:dark}
.prose{color:#dbe7f7}
.prose h1,.prose h2,.prose h3{color:#b4fff5;text-shadow:none}
.prose h1{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:0}
.prose pre{background:#060d1d;border:1px solid #304664;border-radius:2px;color:#c5fbee}
.prose code{color:#adf5e9}
.prose th{background:#14283d;color:#aefaf1}
.prose th,.prose td{border-color:#34506b}
.prose blockquote{border-color:var(--pink);color:#b7bddd}
.tags{color:#b5a5d4}
.remove{color:#b5bfd3}
.pagination{color:#b8cae4}
dialog{background:#071022;color:#edf7ff;border:1px solid #55cfd19e;border-radius:3px;box-shadow:0 0 55px #31d5d526,0 25px 80px #0008}
dialog::backdrop{background:#030714ec;backdrop-filter:blur(5px)}
.lightboxbar{border-bottom:1px solid #29465f;padding-bottom:1rem}
.lightboxbar span{color:#c5deee}
/* Der Reader-Rahmen ist dunkel; die Originalseiten bleiben unverändert. */
.readerbody{background:#050a17}
.readerbody::before,.readerbody::after{display:none}
#reader{background:#050a17;color:#dce9fb}
.readertop{background:linear-gradient(90deg,#0a1d30,#161229);border-bottom:1px solid #71fff042}
.readertop a{color:var(--cyan)}
.readername{color:#c2d8e9}
.readertools{background:#101c32;border-color:#35526a;color:#bfd4e8}
.readertools button{font-size:.85rem}
.readersearch{background:#0a1528;border-bottom:1px solid #243b52}
.readersearch input{background:#050d1d}
.readerstatus{background:#0a1528;color:#a3bccf;border-bottom:1px solid #213d50}
#stage{background:radial-gradient(ellipse at 50% 0%,#152742,transparent 70%),#060d1a}
#pdf-canvas{background:#fff;box-shadow:0 8px 30px #0007,0 0 0 1px #8fc8d029}
#thumbnails{background:#09172a;border-right:1px solid #315168}
#thumbnails button{background:#0f1d32;color:#b3f4ee;border-color:#315366;border-radius:2px}
#thumbnails button:hover{background:#18314a;border-color:var(--cyan)}
#thumb-toggle[aria-expanded=true]{border-color:var(--pink);color:#ffadeb;background:#271830}
@media(max-width:1000px){.topbar{gap:1rem;flex-wrap:wrap}.topbar nav{gap:.85rem}.brand{font-size:1rem}}
@media(max-width:760px){
  .topbar{padding:1rem 1.1rem;min-height:0;gap:1rem}.brand{font-size:1rem;letter-spacing:.02em}
  .brandmark{width:34px;height:36px;font-size:1.25rem}.topbar nav a{font-size:.875rem}
  .shell{padding-top:1.7rem}.pagehead{margin-bottom:1.4rem}.pagehead h1{font-size:1.65rem;line-height:1.4}
  .filters{padding:1.1rem}.cardbody{padding:.9rem}.cardbody h2{font-size:1rem}
  .cover{padding:10px}.empty{padding:2.5rem 1.2rem}.empty h2{font-size:1.05rem}
  .readertools button{padding:.4rem}.readersearch button{font-size:.8rem}.login{margin-top:1.5rem}
}
@media(prefers-reduced-motion:reduce){button,.button,.archivecard{transition:none}}
@media print{body{background:#fff;color:#000}body::before,body::after,.topbar,.footer,.actions{display:none}.panel,.archivecard{background:#fff;border:1px solid #aaa;box-shadow:none}.panel::before,.panel::after{display:none}h1,h2,h3,p,.muted,.prose{color:#000;text-shadow:none}}