:root{
  --nacht:#07090c;
  --feld:#0d140b;
  --tafel:#141c14;
  --linie:#4b5d3b;
  --olive:#8ba24f;
  --amber:#ffb43f;
  --papier:#dfe6d8;
  --leise:#aebd99;
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--nacht)}
body{
  min-height:100vh;margin:0;padding:clamp(14px,4vw,42px);
  color:var(--papier);background:
    linear-gradient(rgba(7,9,12,.84),rgba(7,9,12,.96)),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(139,162,79,.08) 3px 4px),
    radial-gradient(circle at 50% 0,#26331f 0,var(--nacht) 58%);
  font-family:"Courier New",Courier,monospace;line-height:1.65;
}
a{color:var(--amber);text-underline-offset:3px}
a:hover{color:#ffd28a}
a:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.akte{width:min(100%,860px);margin:0 auto;border:2px solid var(--linie);
  background:rgba(9,14,8,.94);box-shadow:0 0 34px rgba(107,127,58,.2)}
.kopf{display:flex;align-items:center;gap:16px;padding:18px clamp(18px,4vw,34px);
  border-bottom:2px solid var(--linie);background:linear-gradient(180deg,#1a2417,#0b110a)}
.marke{flex:0 0 auto;width:54px;height:54px;filter:drop-shadow(0 0 7px rgba(255,180,63,.3))}
.name{margin:0;color:var(--amber);font-size:clamp(18px,4vw,27px);font-weight:700;
  letter-spacing:.18em;line-height:1.1}
.status{margin:5px 0 0;color:var(--olive);font-size:11px;letter-spacing:.08em}
main{padding:clamp(22px,5vw,48px) clamp(18px,6vw,60px)}
h1{margin:0 0 28px;color:var(--amber);font-size:clamp(25px,6vw,42px);
  line-height:1.08;letter-spacing:.08em;text-shadow:0 0 13px rgba(255,180,63,.28)}
h2{margin:32px 0 10px;padding-bottom:5px;border-bottom:1px solid #2c3a2c;
  color:#cbd7bd;font-size:17px;line-height:1.25}
p,li,address{max-width:74ch}
p{margin:0 0 15px}
ul{margin:0 0 18px;padding-left:22px}
li+li{margin-top:7px}
address{font-style:normal}
.kennung{display:inline-block;margin:0 0 28px;padding:5px 8px;border:1px solid var(--olive);
  color:var(--olive);font-size:10px;font-weight:700;letter-spacing:.09em}
.hinweis{margin:28px 0;padding:13px 15px;border-left:4px solid var(--amber);
  background:#11180f;color:#cbd7bd}
.fehlercode{margin:4px 0 22px;color:var(--olive);font-size:clamp(72px,21vw,164px);
  font-weight:700;letter-spacing:-.08em;line-height:.72;text-shadow:5px 0 0 #26331f}
.fehlerseite h1{margin-bottom:18px}
.fehlerseite>p:not(.fehlercode){max-width:56ch}
.wege{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px;padding-top:18px;
  border-top:1px solid #2c3a2c}
/* 44 Pixel Fingerflaeche gelten immer. Frueher hingen sie an einer
   Fensterbreite von 560 Pixeln - quer gehaltene Handys sind breiter, dort
   waren die Rueckwege nur 36 Pixel hoch. */
.wege a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:7px 12px;border:1px solid var(--linie);
  color:var(--papier);text-decoration:none;font-size:12px;font-weight:700}
.wege a:first-child{border-color:var(--amber);color:var(--amber)}
.fuss{padding:13px clamp(18px,4vw,34px);border-top:1px solid #2c3a2c;
  color:#87947f;font-size:10px;letter-spacing:.05em}
@media(max-width:560px){
  body{padding:0}.akte{min-height:100vh;border-width:0}.kopf{padding:14px 16px}
  .marke{width:43px;height:43px}.name{letter-spacing:.1em}
  main{padding:24px 18px 34px}.wege{flex-direction:column}.wege a{text-align:center;min-height:44px}
}
/* Eine echte Fingerflaeche haengt am Eingabegeraet, nicht an der
   Fensterbreite. Quer gehalten ist ein Handy breiter als 560 Pixel - die
   Rueckwege waren dort nur 36 Pixel hoch und damit zu klein zum Treffen. */
@media(pointer:coarse){
  .wege a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}