/* ============================================================
   CHARGE 0714 — Shared stylesheet
   Papierbehördliche Optik: Formulare, Stempel.
   Träger: Root-Gate/Landing (index.php) und Zeugenchat (wenzel/).
   Tokens:
     --paper   #f4f1ea  gegilbtes Papierweiß
     --paper-2 #ece8de  Ablagefläche / Bahn
     --ink     #1a1a1a
     --muted   #555555
     --line    #c9c3b6  Haarlinie
     --green   #2f6b3a  NUR Freigabe-/Download-Stempel
   ============================================================ */

:root {
  --paper: #f4f1ea;
  --paper-2: #ece8de;
  --paper-3: #e3ded1;
  --ink: #1a1a1a;
  --muted: #555555;
  --line: #c9c3b6;
  --line-strong: #9a9384;
  --green: #2f6b3a;

  --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-type: "American Typewriter", "Courier New", Courier, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Schreibtisch-Grau — Papier bleibt Papier, nur unter Lampenlicht */
    --paper: #2a2825;
    --paper-2: #222120;
    --paper-3: #34312c;
    --ink: #e6e2d8;
    --muted: #a8a294;
    --line: #4c483f;
    --line-strong: #6e685c;
    --green: #6fa77a;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
}

a:hover {
  text-decoration-color: var(--ink);
}

a:focus-visible,
button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Typewriter: Chargennummern, Aktenzeichen, Stempel */
.type {
  font-family: var(--font-type);
  letter-spacing: 0.04em;
}

/* ---------- Stempel ---------- */

.stamp {
  display: inline-block;
  font-family: var(--font-type);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border: 2px solid currentColor;
  transform: rotate(-1.5deg);
  color: var(--ink);
}

.stamp--release {
  color: var(--green); /* nur für Freigabe-/Download-Aktionen */
}

/* ---------- Buttons ---------- */

button {
  font-family: var(--font-type);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--paper-3);
}

button:disabled {
  color: var(--muted);
  border-color: var(--line);
  cursor: default;
}

/* ---------- Root-Gate: Passwortfeld ---------- */

/* Die Marke ist immer Papier — Gate und Landing bleiben im hellen
   Papierschema, damit das freigestellte Logo stets lesbar bleibt. */
.gate,
.landing {
  color-scheme: light;
  --paper: #f4f1ea;
  --paper-2: #ece8de;
  --paper-3: #e3ded1;
  --ink: #1a1a1a;
  --muted: #555555;
  --line: #c9c3b6;
  --line-strong: #9a9384;
  --green: #2f6b3a;
}

.gate {
  background: var(--paper);
}

.gate-field {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
}

.gate-logo {
  width: min(38vw, 150px);
  height: auto;
}

.gate-wordmark {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.gate-field form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(90vw, 19rem);
}

.gate-label {
  font-family: var(--font-type);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gate-field input[name="passwort"] {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: var(--space-2);
}

.gate-error {
  margin: 0;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ---------- Landing: Logo-Feld + Download-Stempel ---------- */

.landing {
  background: var(--paper);
}

.landing-field {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-4);
  text-align: center;
}

.landing-logo {
  width: min(60vw, 420px);
  height: auto;
}

.landing-dl {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: none;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
}

.landing-dl:hover {
  background: var(--paper-3);
}

/* ---------- Print ---------- */

@media print {
  body { background: #fff; }
  a { color: #000; }
}