@import url("/stil/farben.css");

/* ==========================================================================
   AKTENBLATT — Einzelseiten unter /akten/
   Schlanke Fassung des Papiersystems der Hauptakte.
   ========================================================================== */

@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/u-450q2lgwslOqpF_6gQ8kELawFpWg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/u-4k0q2lgwslOqpF_6gQ8kELY7pMT-Dfqw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:75% 125%;font-display:swap;src:url(../fonts/k3kQo8UDI-1M0wlSfdnoLg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Farben stehen ausschliesslich in stil/farben.css. */
:root{
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --display:"Archivo",system-ui,sans-serif;
  --maschine:"Courier Prime","Courier New",ui-monospace,monospace;
  --rand:clamp(16px,4vw,40px);
  --faser:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.05'/%3E%3C/svg%3E");
  --druck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23b)' opacity='0.035'/%3E%3C/svg%3E");
  --klammer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 124'%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='0.2'%3E%3Cstop offset='0' stop-color='%23676C72'/%3E%3Cstop offset='0.3' stop-color='%23C6CACE'/%3E%3Cstop offset='0.55' stop-color='%238A9096'/%3E%3Cstop offset='0.8' stop-color='%23B7BCC1'/%3E%3Cstop offset='1' stop-color='%235C6167'/%3E%3C/linearGradient%3E%3Cpath d='M32 96 V30 A10 10 0 0 0 12 30 V102 A13 13 0 0 0 38 102 V36 A7 7 0 0 0 24 36 V88' fill='none' stroke='url(%23m)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:radial-gradient(120% 80% at 20% 5%, var(--papier-licht) 0%, rgba(242,237,227,0) 58%), var(--papier);
  color:var(--tinte);font-family:var(--maschine);font-size:16px;line-height:1.6;
  min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--faser);background-size:200px 200px;mix-blend-mode:multiply;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--stempel);outline-offset:3px}

.lauf{
  position:relative;z-index:1;max-width:760px;margin:0 auto;
  padding:14px var(--rand) 12px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  border-bottom:1px solid var(--linie);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.zurueck{color:var(--tinte-schwach);text-decoration:none}
.zurueck:hover{color:var(--stempel)}
.kennung{margin-left:auto;color:var(--tinte);font-weight:600}

.bogen{
  position:relative;z-index:1;max-width:760px;margin:clamp(34px,6vw,64px) auto 0;
  border:1px solid var(--linie);
  background-color:var(--blatt);background-image:var(--druck);background-size:180px 180px;
  padding:clamp(24px,5vw,52px) clamp(20px,4.5vw,48px) clamp(26px,4vw,44px);
  box-shadow:0 1px 0 rgb(var(--ton-licht) / .6) inset,0 2px 3px rgb(var(--ton-schatten) / .06),0 18px 34px -22px rgb(var(--ton-schatten) / .5);
}
.klammer{
  position:absolute;width:30px;height:78px;top:-42px;right:34px;transform:rotate(-7deg);
  background:var(--klammer) no-repeat center/contain;
  filter:drop-shadow(1px 3px 3px rgb(var(--ton-schatten) / .3));pointer-events:none;
}

.kopfzeile{
  display:flex;flex-wrap:wrap;gap:6px 26px;padding-bottom:11px;
  border-bottom:2px solid var(--tinte);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-schwach);
}
.kopfzeile b{color:var(--tinte);font-weight:600}
.kopfzeile b.offen,.kopfzeile b.bilanz-gescheitert{color:var(--stempel)}
.kopfzeile b.bilanz-gelungen{color:var(--tinte)}

.titel{
  font-family:var(--display);font-variation-settings:"wdth" 84,"wght" 900;
  font-size:clamp(24px,4.4vw,44px);line-height:1.02;letter-spacing:-.028em;text-transform:uppercase;
  margin:clamp(20px,3.4vw,32px) 0 12px;
}
.unterzeile{font-size:15px;line-height:1.65;color:var(--tinte-weich);max-width:56ch;margin-bottom:clamp(22px,3.4vw,34px)}

/* Verweis auf den Aktenplan im Verzeichnis. Nur in der deutschen Fassung —
   die Seite ist einsprachig, solange die Begriffe nicht stehen. */
.planverweis{margin:calc(-1 * clamp(14px,2.2vw,22px)) 0 clamp(22px,3.4vw,34px)}
.planverweis a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie);
}
.planverweis a:hover{color:var(--stempel);border-color:var(--stempel)}

.felder{border-top:1px solid var(--linie-fein)}
.feld{display:grid;grid-template-columns:150px 1fr;gap:8px 24px;padding:14px 0;border-bottom:1px solid var(--linie-fein);align-items:start}
.schluessel{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--tinte-schwach);padding-top:3px}
.wert p{font-size:14.5px;line-height:1.68;color:var(--tinte-weich);max-width:58ch}
.feld.betont{border-left:2px solid var(--stempel);padding-left:15px;background:rgb(var(--ton-abhebung) / .1)}
.feld.betont .schluessel{color:var(--stempel);font-weight:600}
.feld.betont .wert p{color:var(--tinte)}
.leer{display:inline-block;border:1px dashed var(--stempel);color:var(--stempel);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 13px}

.fussnote{margin-top:24px;padding-top:13px;border-top:1px solid var(--linie-fein);
  font-size:12.5px;line-height:1.7;color:var(--bleistift)}

.gruppe{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinte-schwach);margin:clamp(26px,4vw,38px) 0 4px;font-weight:500}
.liste{border-top:1px solid var(--linie)}
.eintrag{display:grid;grid-template-columns:72px 1fr 108px;gap:12px 18px;align-items:baseline;
  padding:13px 2px;border-bottom:1px solid var(--linie-fein);text-decoration:none}
.eintrag:hover{background:rgb(var(--ton-abhebung) / .12)}
.eintrag .nr{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--stempel)}
.eintrag .tt{font-size:15px;line-height:1.4}
.eintrag .rr{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tinte-schwach);text-align:right}

.blaettern{display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin-top:clamp(26px,4vw,38px);padding-top:15px;border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.blaettern a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:3px}
.blaettern a:hover{color:var(--stempel);border-color:var(--stempel)}
.blaettern .mitte{color:var(--tinte-schwach)}

.fuss{position:relative;z-index:1;max-width:760px;margin:clamp(30px,5vw,52px) auto 0;
  padding:16px var(--rand) 46px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:9px 24px;align-items:baseline;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-schwach)}
.fuss a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie)}
.fuss a:hover{color:var(--stempel);border-color:var(--stempel)}
.fuss .satz{flex-basis:100%;color:var(--bleistift);letter-spacing:.03em;text-transform:none;font-size:12px}

@media (max-width:620px){
  .feld{grid-template-columns:1fr;gap:5px}
  .eintrag{grid-template-columns:60px 1fr}
  .eintrag .rr{grid-column:2;text-align:left}
  .klammer{right:14px;top:-36px;width:25px;height:64px}
}

/* Sprachwahl im Blattkopf */
.sprachwahl{margin-left:12px;padding:5px 10px;min-height:32px;display:inline-flex;align-items:center;
  border:1px solid var(--linie);color:var(--tinte-schwach);text-decoration:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em}
.sprachwahl:hover{background:var(--tinte);color:var(--blatt);border-color:var(--tinte)}
@media (max-width:620px){
  .lauf{gap:10px}
  .kennung{margin-left:auto}
  .sprachwahl{min-width:44px;min-height:44px;justify-content:center;margin-left:0}
  .blaettern a{min-height:44px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   UMBLÄTTERN
   Der Wechsel zwischen zwei Blättern soll aussehen wie das Wenden einer
   Seite: das alte Blatt hebt sich an der Bindung ab und dreht weg, das
   neue liegt schon darunter und rückt nach. Die Richtung steht in
   data-richtung, gesetzt vom Skript im Blatt.

   Kann der Browser keine View-Transitions, passiert schlicht nichts —
   dann bleibt es der gewohnte Seitenwechsel.
   ========================================================================== */

@view-transition{ navigation:auto }

.blaettern .mitte{ text-align:center }

@media (prefers-reduced-motion:no-preference){

  ::view-transition{ perspective:2200px }

  ::view-transition-old(root),
  ::view-transition-new(root){
    mix-blend-mode:normal;
    backface-visibility:hidden;
  }

  /* vorwärts — das Blatt wird nach links gewendet */
  html[data-richtung="vor"]::view-transition-old(root){
    transform-origin:left center;
    animation:blattWendetWeg .46s cubic-bezier(.45,.02,.35,1) both;
  }
  html[data-richtung="vor"]::view-transition-new(root){
    transform-origin:left center;
    animation:blattRuecktNach .46s cubic-bezier(.2,.55,.25,1) both;
  }

  /* rückwärts — dieselbe Bewegung, andere Seite */
  html[data-richtung="zurueck"]::view-transition-old(root){
    transform-origin:right center;
    animation:blattWendetZurueck .46s cubic-bezier(.45,.02,.35,1) both;
  }
  html[data-richtung="zurueck"]::view-transition-new(root){
    transform-origin:right center;
    animation:blattRuecktZurueck .46s cubic-bezier(.2,.55,.25,1) both;
  }

  @keyframes blattWendetWeg{
    from{ transform:rotateY(0) translateZ(0); opacity:1; filter:brightness(1) }
    to  { transform:rotateY(-14deg) translateX(-7%) translateZ(60px);
          opacity:0; filter:brightness(1.06) }
  }
  @keyframes blattRuecktNach{
    from{ transform:translateY(16px) scale(.988); opacity:0 }
    to  { transform:none; opacity:1 }
  }
  @keyframes blattWendetZurueck{
    from{ transform:rotateY(0) translateZ(0); opacity:1; filter:brightness(1) }
    to  { transform:rotateY(14deg) translateX(7%) translateZ(60px);
          opacity:0; filter:brightness(1.06) }
  }
  @keyframes blattRuecktZurueck{
    from{ transform:translateY(16px) scale(.988); opacity:0 }
    to  { transform:none; opacity:1 }
  }
}

@media (max-width:620px){
  .blaettern{ font-size:9.5px; gap:8px }
  .blaettern .mitte{ flex:1 1 auto }
}

/* ==========================================================================
   KLASSIFIZIERUNGSBAND
   Dasselbe Band wie auf dem Aktendeckel: die Einstufung steht am Kopf und
   am Fuß jedes Blattes, die alte durchgestrichen, die neue daneben. Gleiche
   Farben wie die Akte — kraft-hell auf tinte, Streichung in Stempelrot.
   ========================================================================== */

.klassband{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;justify-content:space-between;
  max-width:760px;margin:0 auto;
  background:var(--tinte);color:var(--kraft-hell);
  padding:7px var(--rand);
  font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  position:relative;z-index:2;
}
.klassband .weg{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--stempel);opacity:.6}
.klassband .jetzt{color:var(--blatt)}
.klassband .ex{margin-left:auto;opacity:.62;letter-spacing:.16em}

@media (max-width:620px){
  .klassband{font-size:8px;letter-spacing:.16em;gap:2px 10px}
  .klassband .ex{margin-left:0;flex-basis:100%}
}

/* ---------- Aktenregister im Verzeichnis ---------- */
.eintrag.stumm{cursor:default;color:var(--tinte-weich)}
.eintrag.stumm:hover{background:none}
.leerstand{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--bleistift);
  margin-top:10px}
.sektorraum{
  display:flex;gap:clamp(18px,4vw,36px);align-items:center;flex-wrap:wrap;
  margin-top:clamp(20px,3.4vw,30px);padding-top:clamp(16px,2.6vw,24px);
  border-top:1px solid var(--linie-fein)}
.achteck{width:clamp(120px,22vw,170px);flex:none}
.achteck .keil{fill:none;stroke:var(--linie);stroke-width:1}
.achteck .keil.belegt{fill:rgb(var(--ton-stempel) / .16);stroke:var(--stempel);stroke-width:1.2}
.achteck .acht-rand{fill:none;stroke:var(--tinte);stroke-width:2}
.sektorliste{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));
  gap:5px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinte-schwach)}
.sektorliste b{color:var(--tinte);font-weight:600;margin-left:6px}
.sektorliste li.belegt{color:var(--tinte-weich)}
@media (max-width:560px){.sektorliste{grid-template-columns:1fr 1fr}}