/* Kestavia Lizenzverwaltung — dieselbe Gestaltung wie der Webauftritt:
   IBM Plex, scharfe Kanten, Tinte auf Papier, Petrol als Akzent. */

:root {
  --grund: #f7f8f8;
  --grund-tief: #eef0f1;
  --flaeche: #ffffff;
  --tusche: #16191c;
  --tusche-matt: #4a5257;
  --tusche-leise: #737d82;
  --linie: #c9cfd1;
  --linie-fein: #e2e6e7;
  --petrol: #1c5f70;
  --petrol-lasur: #dfebee;
  --signal: #2e6b5e;
  --warnung: #8a5a12;
  --gefahr: #a33a2a;
  --satz: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --schmal: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #101314;
    --grund-tief: #0a0c0d;
    --flaeche: #171b1d;
    --tusche: #e8eae9;
    --tusche-matt: #a8b1b4;
    --tusche-leise: #798286;
    --linie: #2f373a;
    --linie-fein: #21282a;
    --petrol: #5fa8bd;
    --petrol-lasur: #102630;
    --signal: #6aab9a;
    --warnung: #c99a4a;
    --gefahr: #d98070;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tusche);
  font-family: var(--satz);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

code { font-family: var(--mono); font-size: 0.85em; }

.bahn { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* ------------------------------------------------------------- Kopfzeile - */

.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
  flex-wrap: wrap;
}
.wortmarke {
  font-family: var(--schmal);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.fingerabdruecke {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  font-size: 0.75rem;
  color: var(--tusche-leise);
}

/* ------------------------------------------------------------ Kennzahlen - */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--linie-fein);
  border: 1px solid var(--linie-fein);
  margin-block: 1.75rem;
}
.zahl { background: var(--grund); padding: 0.9rem 1rem; }
.zahl b {
  display: block;
  font-family: var(--schmal);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--petrol);
}
.zahl span { font-size: 0.75rem; color: var(--tusche-leise); }

/* --------------------------------------------------------------- Blöcke -- */

.block {
  border: 1px solid var(--linie-fein);
  background: var(--flaeche);
  padding: 1.25rem;
  margin-bottom: 1.75rem;
}
.block__kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hinweis {
  margin: 0.35rem 0 1rem;
  font-size: 0.85rem;
  color: var(--tusche-leise);
  max-width: 68ch;
}

/* -------------------------------------------------------------- Formular - */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.85rem;
  align-items: end;
  margin-top: 1rem;
}
.raster .weit { grid-column: span 2; }
@media (max-width: 40rem) { .raster .weit { grid-column: auto; } }

label { display: grid; gap: 0.3rem; }
label > span { font-size: 0.75rem; color: var(--tusche-matt); }

input, select, textarea {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--tusche);
  border-radius: 0;
  width: 100%;
}
textarea { font-family: var(--mono); font-size: 0.78rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--petrol);
  outline-offset: -1px;
  border-color: var(--petrol);
}

.tat { display: flex; align-items: end; }

.knopf {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid var(--tusche);
  background: var(--tusche);
  color: var(--grund);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.knopf:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.knopf--leise { background: transparent; color: var(--tusche); border-color: var(--linie); }
.knopf--leise:hover { background: transparent; color: var(--petrol); border-color: var(--petrol); }
.knopf--klein { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.knopf--gefahr { color: var(--gefahr); border-color: var(--linie); background: transparent; }
.knopf--gefahr:hover { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }

.filter { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter input, .filter select { width: auto; }
.schalter { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin-left: auto; }
.schalter input { width: auto; }

/* -------------------------------------------------------------- Tabellen - */

.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie-fein); }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th {
  text-align: left;
  font-family: var(--schmal);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusche-leise);
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--linie-fein);
  white-space: nowrap;
}
td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--grund-tief); }
td.schluessel { font-family: var(--mono); font-size: 0.78rem; white-space: nowrap; }
td.tat-spalte { text-align: right; white-space: nowrap; }
td.tat-spalte button { margin-left: 0.25rem; }

.marke {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  border: 1px solid var(--linie);
  color: var(--tusche-leise);
}
.marke--ok { color: var(--signal); border-color: var(--signal); }
.marke--warn { color: var(--warnung); border-color: var(--warnung); }
.marke--gefahr { color: var(--gefahr); border-color: var(--gefahr); }

.leer { padding: 2.5rem; text-align: center; color: var(--tusche-leise); font-size: 0.85rem; }

/* ------------------------------------------------------------- Ergebnis -- */

.ergebnis {
  margin-top: 1rem;
  border-left: 3px solid var(--petrol);
  background: var(--petrol-lasur);
  padding: 0.85rem 1rem;
}
.ergebnis ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.ergebnis li { font-family: var(--mono); font-size: 0.82rem; }
.ergebnis textarea { margin-top: 0.5rem; background: var(--flaeche); }

.meldung {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-width: 28rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: 0.85rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
}
.meldung--ok { border-left: 3px solid var(--signal); }
.meldung--fehler { border-left: 3px solid var(--gefahr); }

/* ---------------------------------------------------------- Vorschaltseite */

.vorschaltseite {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: var(--grund-tief);
}

.schleuse {
  width: min(100%, 30rem);
  padding: clamp(1rem, 5vw, 2rem);
}

.schleuse__kopf { margin-bottom: 1.25rem; }
.schleuse__unterzeile {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--tusche-leise);
}

.schleuse__karte {
  border: 1px solid var(--linie-fein);
  background: var(--flaeche);
  padding: 1.5rem;
}
.schleuse__karte h1 {
  font-family: var(--schmal);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.schleuse__karte form { display: grid; gap: 0.85rem; }
.schleuse__karte .hinweis { margin-bottom: 1rem; }

/* Die Einrichtung braucht mehr Platz als die reine Anmeldung. */
.schleuse:has(.schleuse__karte--breit:not([hidden]))  { width: min(100%, 44rem); }

.schleuse__knopf { width: 100%; text-align: center; margin-top: 0.25rem; }
.schleuse__zeile {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.schleuse__zeile .knopf { flex: 1; text-align: center; }

.schleuse__fuss {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--tusche-leise);
  text-align: center;
}

/* Sechsstellige Codes stehen mittig und weit — das liest sich beim
   Abtippen vom Telefon deutlich besser. */
.ziffernfeld {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 0.6rem;
}

.verweisknopf {
  font: inherit;
  font-size: 0.78rem;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--petrol);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------ Einrichtung des Faktors */

.einrichtung {
  display: grid;
  /* Breit genug, dass auch ein Code der Version 10 (57 Module) mit rund
     vier Bildpunkten je Modul dargestellt wird - darunter tun sich
     Telefonkameras schwer. */
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
@media (max-width: 34rem) {
  .einrichtung { grid-template-columns: 1fr; }
}

/* Der QR-Code braucht auch im dunklen Erscheinungsbild seinen weissen
   Grund, sonst kehrt sich der Kontrast um und keine App liest ihn. */
.einrichtung__qr {
  background: #fff;
  padding: 0.5rem;
  border: 1px solid var(--linie);
}
.einrichtung__qr svg { display: block; width: 100%; height: auto; }

.geheimnis {
  margin: 0.35rem 0 0.9rem;
  padding: 0.5rem 0.6rem;
  background: var(--grund-tief);
  border: 1px solid var(--linie-fein);
  word-break: break-all;
}
.geheimnis code { font-size: 0.9rem; letter-spacing: 0.05em; }

.codeliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.codeliste li {
  font-family: var(--mono);
  font-size: 0.95rem;
  padding: 0.5rem;
  text-align: center;
  background: var(--grund-tief);
  border: 1px solid var(--linie-fein);
}

/* ---------------------------------------------------------------- Zugang - */

.angemeldet {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--tusche-matt);
}
.zugang__zeile { margin-top: 1.5rem; }
.zugang__zeile .hinweis { margin: 0; flex: 1; min-width: 14rem; }
#faktor-einrichtung { margin-top: 1.25rem; }
#konto-codes { margin-top: 1.25rem; }