/* Stylesheet nur fuer die Gate- und die Fehlerseite, erzeugt aus
   style.css. Das vollstaendige Stylesheet ging bisher an jeden
   Besucher ohne Key und verriet ueber seine Klassennamen, welche
   Bereiche es hinter dem Key gibt. Hier steht nur das Noetige. */
:root{--void:#0A0708; --ink:rgba(14,10,11,.86); --glass:rgba(22,15,17,.72);
  --moon:#D91616; --ember:#FF4A3D; --fog:#EDE6E7; --muted:#8E7F82; --snow:#B9C6D0;
  --ok:#5FBF6A; --line:rgba(217,22,22,.20); --line2:rgba(237,230,231,.09); --sidebar:224px;
  --sans:"Zen Kaku Gothic New",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;font-family:var(--sans);color:var(--fog);background:var(--void);display:flex;flex-direction:column;line-height:1.5}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url("/static/bg.jpg") center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(10,7,8,.94) 0%,rgba(10,7,8,.88) 45%,rgba(10,7,8,.62) 100%)}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.24em;font-size:13px;color:var(--fog);text-decoration:none}
.seal{width:23px;height:23px;background:var(--moon);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1;box-shadow:0 0 18px rgba(217,22,22,.55)}
.sysbox{margin:0 16px;padding:12px 0;border-top:1px solid var(--line2);font-size:11px;color:var(--muted)}
h1{font-size:27px;font-weight:900;letter-spacing:.05em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;background:var(--glass);border:1px solid var(--line2);color:var(--fog);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--moon)}
.btn.solid{background:var(--moon);border-color:var(--moon);color:#fff}
.btn.solid:hover{background:var(--ember);border-color:var(--ember)}
.btn:disabled{opacity:.4;cursor:default}
input:not([type=checkbox]),select{padding:9px 12px;background:var(--glass);color:var(--fog);border:1px solid var(--line2);font-family:inherit;font-size:13px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--moon)}
label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form-error{color:var(--ember);font-size:12.5px;font-family:var(--mono)}
.page-gate{display:grid;place-items:center;padding:24px}
.gate{width:100%;max-width:440px;padding:36px 34px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px)}
.gate .brand{margin-bottom:22px}
.gate h1{font-size:24px;margin-bottom:6px}
.gate .note{margin:0 0 22px;font-size:12.5px}
.gate-form{display:grid;gap:12px}
.key-input{padding:14px 12px;font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.16em;text-align:center;text-transform:uppercase;border-color:var(--line)}
.key-input::placeholder{color:rgba(142,127,130,.45);letter-spacing:.16em}
.key-input[aria-invalid="true"]{border-color:var(--moon)}
.gate-hint{margin-top:22px;font-size:11.5px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
th{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700}
td a{color:var(--ember);text-decoration:none}
td a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.92em}
@media (max-width:720px){.gate{padding:28px 22px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.langs{display:flex;gap:4px;margin-left:14px}
.langs a{font-family:var(--mono);font-size:10px;padding:4px 7px;color:var(--muted);text-decoration:none;border:1px solid transparent}
.langs a:hover{color:var(--fog)}
.langs a[aria-current="true"]{color:#fff;background:var(--moon)}
.mt-8{margin-top:8px}
.mt-18{margin-top:18px}

/* --- Handy ---------------------------------------------------------------
   iOS zoomt die ganze Seite, sobald ein angetipptes Feld kleiner als 16px
   ist. Darum sind hier alle Felder 16px - das ist keine Geschmacksfrage,
   sondern die Grenze, ab der die Seite beim Tippen ruhig bleibt.
   -------------------------------------------------------------------------*/
@media (max-width:720px){
  input:not([type=checkbox]),select,textarea{font-size:16px}

  /* Der Key ist 28 Zeichen plus 6 Bindestriche. Bei 19px mit Sperrsatz lief
     er um mehr als 170px ueber den Feldrand hinaus - man sah beim Tippen
     nie den Anfang. Linksbuendig statt mittig, damit der Ausschnitt beim
     Tippen mitwandert statt zu springen. */
  .key-input{font-size:16px;letter-spacing:0;padding:13px 8px;text-align:left}
  .key-input::placeholder{letter-spacing:0}

  /* Fingerkuppe ~9mm. Alles darunter trifft daneben. */
  .btn{padding:12px 18px;font-size:14px;min-height:44px}
  .langs a{padding:8px 11px;font-size:12px}

  .gate{padding:24px 14px;max-width:none}
  .gate h1{font-size:21px}
  .gate .note,.gate-hint{font-size:13px}
}

/* iOS rechnet 100vh samt Adressleiste - der untere Seitenrand liegt dadurch
   ausserhalb des Sichtbaren. dvh ist die tatsaechlich sichtbare Hoehe. */
@supports (min-height:100dvh){body{min-height:100dvh}}