/* ============================================================
   AKTE — gemeinsames Blatt für die Unterseiten von 4402-T
   (akte-5809-*.html und impressum.html)

   ⚠ Die Startseite index.html hat ihr CSS inline und bleibt so — sie bringt
     Animation und Aufbauten mit, die hier nichts zu suchen haben. Dieses Blatt
     gilt nur für die stillen Seiten: eine Akte liest man, sie flackert nicht.

   ⚠ SELBSTTRAGEND: keine Fremdquelle, keine Schrift von aussen. Die Schriften
     liegen in schriften/ — Herkunft und Lizenz in schriften/LIZENZ.txt.
   ============================================================ */

@font-face{font-family:'Oswald';src:url('schriften/oswald-var.woff2')format('woff2');
           font-weight:300 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('schriften/playfair-var.woff2')format('woff2');
           font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('schriften/playfair-var-italic.woff2')format('woff2');
           font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('schriften/plexmono-300.woff2')format('woff2');
           font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('schriften/plexmono-400.woff2')format('woff2');
           font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('schriften/plexmono-500.woff2')format('woff2');
           font-weight:500;font-style:normal;font-display:swap;}

:root{
  --paper:#d9cfb4; --paper-dim:#cfc4a6; --paper-deep:#b8ad8c;
  --ink:#23201a; --ink-soft:#4a4536; --ink-faint:#736b54;
  --graphite:#211f1c; --graphite-2:#2a2723; --graphite-3:#35312a;
  --signal-red:#c23b2e; --signal-red-dk:#8f2a20;
  --radium:#d7b24a; --teal:#4c8079; --teal-dim:#365853;
  --rule:#8a8266; --rule-dim:#6b644d;
  --font-display:'Oswald','Arial Narrow',sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
  --step--1:clamp(.72rem,.68rem + .18vw,.82rem);
  --step-0:clamp(.92rem,.86rem + .28vw,1rem);
  --step-1:clamp(1.05rem,.98rem + .34vw,1.2rem);
  --step-2:clamp(1.3rem,1.12rem + .8vw,1.7rem);
  --step-3:clamp(1.7rem,1.42rem + 1.3vw,2.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--graphite); color:var(--ink);
  font-family:var(--font-mono); font-size:var(--step-0); line-height:1.7;
  -webkit-text-size-adjust:100%;
}

/* — Klassifikationsleiste, wie auf der Akte — */
.classbar{
  background:var(--graphite-2); border-bottom:1px solid var(--rule-dim);
  padding:.5rem 1rem; font-size:var(--step--1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.classbar .red{color:var(--signal-red);font-weight:500}
/* ⚠ Das Quadrat ist GEZEICHNET. Keine der drei Schriften enthaelt U+25A0 —
   am Browser gemessen 2026-09-06. Wer hier ein Zeichen einsetzt, bekommt
   keinen Fehler, nur ein anderes Bild. */
.classbar .punkt::before{content:'';display:inline-block;width:.55em;height:.55em;
  margin-right:.45em;background:currentColor;vertical-align:.02em}
.classbar .sep{color:var(--rule-dim)}
.classbar .right{margin-left:auto;color:var(--ink-faint)}
.classbar a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--rule-dim)}
.classbar a:hover,.classbar a:focus-visible{color:var(--radium)}

/* — Das Blatt — */
.blatt{
  max-width:60rem; margin:0 auto; padding:2.4rem 1.5rem 3rem;
  background:var(--paper);
  border-left:1px solid var(--rule-dim); border-right:1px solid var(--rule-dim);
  min-height:60vh;
}
.kopf{border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:1.6rem}
.kopf__nr{
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.2em;
  text-transform:uppercase; color:var(--signal-red-dk); font-weight:500;
}
.kopf h1{
  font-family:var(--font-display); font-weight:600; font-size:var(--step-3);
  letter-spacing:.02em; text-transform:uppercase; margin:.3rem 0 .2rem; color:var(--ink);
}
.kopf__unter{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* — Kopfdaten als Feldliste — */
.felder{
  display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1.2rem;
  margin:0 0 1.8rem; padding:.9rem 1rem;
  border:1px solid var(--rule); background:var(--paper-dim);
  font-size:var(--step--1); letter-spacing:.08em;
}
.felder dt{text-transform:uppercase;color:var(--ink-faint);letter-spacing:.14em}
.felder dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

.cls{display:inline-block;border:1px solid var(--rule);padding:.05rem .45rem;
  font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase}
.cls.top{color:var(--signal-red-dk);border-color:var(--signal-red-dk)}
.cls.secret{color:var(--ink-soft)}
.cls.open{color:var(--teal-dim);border-color:var(--teal-dim)}

/* — Fliesstext der Akte — */
.text{font-family:var(--font-serif);font-size:var(--step-1);line-height:1.75;max-width:42rem}
.text p{margin:0 0 1.1rem}
.text h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--step-1);
  letter-spacing:.18em;text-transform:uppercase;color:var(--signal-red-dk);
  margin:2rem 0 .8rem;
}
/* Schwaerzung: ein Balken, kein Text darunter — er ist wirklich nicht da. */
.redact{
  display:inline-block;background:var(--ink);color:transparent;
  border-radius:1px;padding:0 .3em;user-select:none;
}
.redact::selection{background:var(--ink);color:transparent}

/* — Randvermerk: die einzige Stelle, an der die Akte in die Gegenwart zeigt — */
.vermerk{
  margin:2.4rem 0 0; padding:1rem 1.2rem;
  border:1px dashed var(--rule); background:var(--paper-dim);
  font-family:var(--font-mono); font-size:var(--step--1); line-height:1.8;
  color:var(--ink-soft);
}
.vermerk__k{
  display:block;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.5rem;
}
.vermerk a{color:var(--signal-red-dk);border-bottom:1px solid rgba(143,42,32,.35);
  text-decoration:none;overflow-wrap:anywhere}
.vermerk a:hover,.vermerk a:focus-visible{color:var(--ink);border-bottom-color:currentColor}
.vermerk em{font-style:italic;color:var(--ink)}

/* — Zurueck-Zeile — */
.zurueck{margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--rule);
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase}
.zurueck a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule-dim)}
.zurueck a:hover,.zurueck a:focus-visible{color:var(--signal-red-dk)}

/* — Fuss — */
.fuss{
  padding:1.4rem 1.5rem 2.2rem; text-align:center;
  font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.fuss a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-dim)}
.fuss a:hover,.fuss a:focus-visible{color:var(--radium)}

/* — Impressum: Abschnitte — */
.imp h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--step-1);
  letter-spacing:.18em;text-transform:uppercase;color:var(--signal-red-dk);
  margin:2rem 0 .7rem;padding-bottom:.3rem;border-bottom:1px solid var(--rule);
}
.imp p{margin:0 0 1rem;max-width:44rem}
.imp .anschrift{font-family:var(--font-mono);line-height:1.9}
.imp a{color:var(--signal-red-dk);text-decoration:none;border-bottom:1px solid rgba(143,42,32,.35)}
.imp a:hover,.imp a:focus-visible{color:var(--ink)}
.imp .haus{
  display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.2rem;
  font-family:var(--font-mono);font-size:var(--step--1);margin:0 0 1rem;
}
.imp .haus dt{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.14em}
.imp .haus dd{margin:0;overflow-wrap:anywhere}

a:focus-visible{outline:2px solid var(--signal-red);outline-offset:2px}

@media (max-width:560px){
  .blatt{padding:1.6rem 1rem 2rem;border-left:none;border-right:none}
  .felder,.imp .haus{grid-template-columns:1fr;gap:.15rem}
  .felder dt,.imp .haus dt{margin-top:.5rem}
  .classbar .right{width:100%;margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}