/* hatemesh VPN - vollständiges Stylesheet.
   Keine Fremdbibliothek, keine ausgelieferten Schriften: die Oberfläche nimmt,
   was das System hat. Das hält das Projekt klein und ist auf einem Supernode
   mit schmaler Anbindung schneller da. */

/* --- Farben und Maße ------------------------------------------------------ */

:root {
  color-scheme: light dark;

  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;

  --rund-1: 4px;
  --rund-2: 8px;
  --rund-3: 14px;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-fest: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --breite: 76rem;
  --zug: 180ms cubic-bezier(0.2, 0, 0.2, 1);

  /* Helles Grundthema. Der dunkle Satz steht weiter unten und überschreibt nur
     diese Werte - keine Farbe wird ausschließlich in einer Media-Query
     definiert, sonst fehlt sie im jeweils anderen Modus. */
  --grund: #f4f6f8;
  --flaeche: #ffffff;
  --flaeche-2: #eef1f5;
  --vertieft: #e7ebf0;
  --linie: #d3dae2;
  --linie-stark: #b6c0cc;
  --text: #16202b;
  --text-leise: #55636f;
  --text-schwach: #7d8994;

  --signal: #1d6fd6;
  --signal-text: #ffffff;
  --signal-leise: rgba(29, 111, 214, 0.12);
  --gut: #1c7a4a;
  --gut-leise: rgba(28, 122, 74, 0.12);
  --warn: #9a6206;
  --warn-leise: rgba(154, 98, 6, 0.14);
  --schlecht: #b3261e;
  --schlecht-leise: rgba(179, 38, 30, 0.12);

  --schatten-1: 0 1px 2px rgba(16, 24, 32, 0.08);
  --schatten-2: 0 8px 24px rgba(16, 24, 32, 0.14);
  --schleier: rgba(12, 18, 24, 0.55);
}

:root[data-thema="dunkel"],
:root:not([data-thema="hell"]) {
  /* leer - der eigentliche Dunkelsatz kommt aus den beiden Blöcken unten.
     Diese Regel hält nur die Kaskade übersichtlich. */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #10151b;
    --flaeche: #171e26;
    --flaeche-2: #1e2731;
    --vertieft: #0c1116;
    --linie: #2b3742;
    --linie-stark: #3d4c5a;
    --text: #e8edf2;
    --text-leise: #a3b0bd;
    --text-schwach: #7d8b99;

    --signal: #56a2f5;
    --signal-text: #06121f;
    --signal-leise: rgba(86, 162, 245, 0.16);
    --gut: #58cf94;
    --gut-leise: rgba(88, 207, 148, 0.14);
    --warn: #e0aa50;
    --warn-leise: rgba(224, 170, 80, 0.16);
    --schlecht: #f2837c;
    --schlecht-leise: rgba(242, 131, 124, 0.16);

    --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --schatten-2: 0 10px 30px rgba(0, 0, 0, 0.55);
    --schleier: rgba(4, 8, 12, 0.68);
  }
}

:root[data-thema="dunkel"] {
  --grund: #10151b;
  --flaeche: #171e26;
  --flaeche-2: #1e2731;
  --vertieft: #0c1116;
  --linie: #2b3742;
  --linie-stark: #3d4c5a;
  --text: #e8edf2;
  --text-leise: #a3b0bd;
  --text-schwach: #7d8b99;

  --signal: #56a2f5;
  --signal-text: #06121f;
  --signal-leise: rgba(86, 162, 245, 0.16);
  --gut: #58cf94;
  --gut-leise: rgba(88, 207, 148, 0.14);
  --warn: #e0aa50;
  --warn-leise: rgba(224, 170, 80, 0.16);
  --schlecht: #f2837c;
  --schlecht-leise: rgba(242, 131, 124, 0.16);

  --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --schatten-2: 0 10px 30px rgba(0, 0, 0, 0.55);
  --schleier: rgba(4, 8, 12, 0.68);
}

/* --- Grundgerüst ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--raum-3); font-weight: 650; }
h1 { font-size: 1.75rem; letter-spacing: -0.015em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--raum-3); }
code, pre, .fest { font-family: var(--schrift-fest); font-size: 0.9em; }

a { color: var(--signal); }
a:hover { text-decoration-thickness: 2px; }

/* Jedes bedienbare Element braucht einen sichtbaren Fokus - ohne Ausnahme. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--rund-1);
}

.bereich { max-width: var(--breite); margin-inline: auto; padding: 0 var(--raum-4); }
.stapel > * + * { margin-block-start: var(--raum-4); }
.stapel-eng > * + * { margin-block-start: var(--raum-2); }
.reihe { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.rechts { margin-inline-start: auto; }
.nowrap { white-space: nowrap; }
.leise { color: var(--text-leise); }
.klein { font-size: 0.875rem; }
.versteckt { display: none !important; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; inset-inline-start: -100vw; top: var(--raum-2);
  background: var(--flaeche); color: var(--text);
  padding: var(--raum-2) var(--raum-4);
  border-radius: var(--rund-2); z-index: 100;
}
.sprung:focus { inset-inline-start: var(--raum-4); }

/* --- Kopf ----------------------------------------------------------------- */

.kopf {
  background: var(--flaeche);
  border-block-end: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 20;
}
.kopf > .bereich {
  display: flex; align-items: center; gap: var(--raum-4);
  min-height: 3.5rem; flex-wrap: wrap;
}

.marke {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  font-weight: 700; color: var(--text); text-decoration: none;
  letter-spacing: -0.01em;
}
.marke svg { width: 1.5rem; height: 1.5rem; color: var(--signal); }

.menue { display: flex; gap: var(--raum-1); }
.menue a {
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-2);
  color: var(--text-leise); text-decoration: none; font-weight: 550;
}
.menue a:hover { background: var(--flaeche-2); color: var(--text); }
.menue a[aria-current] { background: var(--signal-leise); color: var(--signal); }

/* --- Knöpfe --------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-4);
  min-height: 2.25rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  background: var(--flaeche);
  color: var(--text);
  font: inherit; font-weight: 550; font-size: 0.9375rem;
  cursor: pointer;
  transition: background var(--zug), border-color var(--zug);
}
.knopf:hover:not(:disabled) { background: var(--flaeche-2); border-color: var(--linie-stark); }
.knopf:disabled { opacity: 0.5; cursor: not-allowed; }

.knopf--wichtig {
  background: var(--signal); border-color: var(--signal); color: var(--signal-text);
}
.knopf--wichtig:hover:not(:disabled) { filter: brightness(1.08); background: var(--signal); }

.knopf--still { border-color: transparent; background: transparent; color: var(--text-leise); }
.knopf--still:hover:not(:disabled) { background: var(--flaeche-2); color: var(--text); }

.knopf--gefahr { color: var(--schlecht); border-color: var(--linie); }
.knopf--gefahr:hover:not(:disabled) { background: var(--schlecht-leise); border-color: var(--schlecht); }

.knopf--klein { min-height: 1.875rem; padding: var(--raum-1) var(--raum-2); font-size: 0.8125rem; }
.knopf--breit { width: 100%; }
.knopfreihe { display: flex; gap: var(--raum-2); flex-wrap: wrap; }

/* --- Flächen -------------------------------------------------------------- */

.tafel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  box-shadow: var(--schatten-1);
  overflow: hidden;
}
.tafel__kopf {
  display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap;
  padding: var(--raum-3) var(--raum-4);
  border-block-end: 1px solid var(--linie);
  background: var(--flaeche-2);
}
.tafel__kopf h2 { margin: 0; }
.tafel__werkzeuge { margin-inline-start: auto; display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.tafel__inhalt { padding: var(--raum-4); }
.tafel__fuss {
  padding: var(--raum-3) var(--raum-4);
  border-block-start: 1px solid var(--linie);
  background: var(--flaeche-2);
  display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  padding: var(--raum-4);
}

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

.zahlen {
  display: grid; gap: var(--raum-3);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.zahl {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-3); padding: var(--raum-4);
}
.zahl__name {
  display: block; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-schwach); font-weight: 650;
}
.zahl__wert {
  display: block; font-size: 1.875rem; font-weight: 700;
  line-height: 1.15; margin-block: var(--raum-1);
  font-variant-numeric: tabular-nums;
}
.zahl__wert--text { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.zahl__notiz { display: block; font-size: 0.8125rem; color: var(--text-leise); }

/* --- Formulare ------------------------------------------------------------ */

.feld { display: block; }
.feld + .feld { margin-block-start: var(--raum-4); }
.feldgitter {
  display: grid; gap: var(--raum-4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.feldgitter .feld + .feld { margin-block-start: 0; }

.beschriftung { display: block; font-weight: 600; font-size: 0.875rem; margin-block-end: var(--raum-1); }
.beschriftung__zusatz { font-weight: 400; color: var(--text-schwach); }

.eingabe, .auswahl, .textfeld {
  width: 100%;
  padding: var(--raum-2) var(--raum-3);
  min-height: 2.25rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  background: var(--flaeche);
  color: var(--text);
  font: inherit; font-size: 0.9375rem;
}
.eingabe::placeholder, .textfeld::placeholder { color: var(--text-schwach); }
.eingabe:disabled, .eingabe[readonly] { background: var(--vertieft); color: var(--text-leise); }
.textfeld { min-height: 4rem; resize: vertical; }

.hinweis { display: block; font-size: 0.8125rem; color: var(--text-leise); margin-block-start: var(--raum-1); }

.haken { display: flex; align-items: flex-start; gap: var(--raum-2); font-size: 0.9375rem; }
.haken input { margin-block-start: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--signal); }

.leiste {
  display: flex; gap: var(--raum-2); flex-wrap: wrap; align-items: center;
  padding: var(--raum-3);
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
}
.leiste__suche { flex: 1 1 14rem; min-width: 0; }

/* --- Reiter --------------------------------------------------------------- */

.reiter {
  display: flex; gap: var(--raum-1);
  border-block-end: 1px solid var(--linie);
  overflow-x: auto;
  scrollbar-width: thin;
}
.reiter a {
  padding: var(--raum-3) var(--raum-4);
  color: var(--text-leise); text-decoration: none; font-weight: 550;
  border-block-end: 2px solid transparent;
  white-space: nowrap;
}
.reiter a:hover { color: var(--text); }
.reiter a[aria-current] { color: var(--signal); border-block-end-color: var(--signal); }
.reiter__zahl {
  display: inline-block; margin-inline-start: var(--raum-1);
  padding: 0 var(--raum-1); min-width: 1.25rem;
  border-radius: var(--rund-3); background: var(--flaeche-2);
  font-size: 0.75rem; text-align: center; color: var(--text-leise);
}

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

/* Breite Inhalte scrollen in ihrem eigenen Kasten, die Seite selbst nie. */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
}
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabelle th, .tabelle td {
  text-align: start; padding: var(--raum-3);
  border-block-end: 1px solid var(--linie);
  vertical-align: top;
}
.tabelle th {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-schwach); background: var(--flaeche-2);
  position: sticky; top: 0;
}
.tabelle tbody tr:last-child td { border-block-end: none; }
.tabelle tbody tr:hover { background: var(--flaeche-2); }

/* --- Abzeichen und Meldungen ---------------------------------------------- */

.zeichen {
  display: inline-block; padding: 0.1rem var(--raum-2);
  border-radius: var(--rund-3);
  font-size: 0.75rem; font-weight: 650; white-space: nowrap;
  background: var(--flaeche-2); color: var(--text-leise);
  border: 1px solid var(--linie);
}
.zeichen--gut { background: var(--gut-leise); color: var(--gut); border-color: transparent; }
.zeichen--warn { background: var(--warn-leise); color: var(--warn); border-color: transparent; }
.zeichen--schlecht { background: var(--schlecht-leise); color: var(--schlecht); border-color: transparent; }

.notiz {
  display: flex; gap: var(--raum-3); align-items: flex-start;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
  border-inline-start: 3px solid var(--text-schwach);
  border-radius: var(--rund-2);
  background: var(--flaeche);
  font-size: 0.9375rem;
}
.notiz svg { flex: none; margin-block-start: 0.15rem; }
.notiz--info { border-inline-start-color: var(--signal); }
.notiz--info svg { color: var(--signal); }
.notiz--gut { border-inline-start-color: var(--gut); }
.notiz--gut svg { color: var(--gut); }
.notiz--warn { border-inline-start-color: var(--warn); }
.notiz--warn svg { color: var(--warn); }
.notiz--schlecht { border-inline-start-color: var(--schlecht); }
.notiz--schlecht svg { color: var(--schlecht); }

.leer {
  padding: var(--raum-6) var(--raum-4);
  text-align: center; color: var(--text-leise);
  border: 1px dashed var(--linie);
  border-radius: var(--rund-2);
}
.leer__titel { font-weight: 650; color: var(--text); margin-block-end: var(--raum-1); }

/* --- Symbole -------------------------------------------------------------- */

.symbol {
  width: 1.05em; height: 1.05em;
  vertical-align: -0.15em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* --- Kurzmeldungen -------------------------------------------------------- */

.meldungen {
  position: fixed; inset-block-end: var(--raum-4); inset-inline: var(--raum-4);
  z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: var(--raum-2);
  pointer-events: none;
}
.meldungen .notiz {
  max-width: min(34rem, 100%);
  background: var(--flaeche);
  box-shadow: var(--schatten-2);
  pointer-events: auto;
}

/* --- Dialoge -------------------------------------------------------------- */

dialog.tafel {
  width: min(38rem, calc(100vw - 2 * var(--raum-4)));
  max-height: calc(100vh - 2 * var(--raum-4));
  margin: auto;
  padding: 0;
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-2);
  color: var(--text);
}
dialog.tafel--breit { width: min(52rem, calc(100vw - 2 * var(--raum-4))); }
dialog.tafel::backdrop { background: var(--schleier); }
/* Ein eigenes `display` auf .tafel würde die Regel des Browsers für
   geschlossene Dialoge aushebeln - deshalb hier ausdrücklich. */
dialog.tafel:not([open]) { display: none; }
dialog.tafel .tafel__inhalt { overflow-y: auto; max-height: 70vh; }

/* --- Anmeldeseite --------------------------------------------------------- */

.anmeldung {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--raum-5);
}
.anmeldung__karte { width: min(24rem, 100%); }

/* --- Geräte --------------------------------------------------------------- */

.geraete {
  display: grid; gap: var(--raum-4);
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.geraet__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--raum-3); margin-block-end: var(--raum-2);
}
.geraet__kopf h3 { margin: 0; }
.adressen {
  font-family: var(--schrift-fest); font-size: 0.8125rem;
  color: var(--text-leise); overflow-wrap: anywhere;
  margin-block-end: var(--raum-3);
}
.werte {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--raum-1) var(--raum-3);
  font-size: 0.875rem; margin: 0 0 var(--raum-3);
}
.werte dt { color: var(--text-leise); }
.werte dd { margin: 0; }

/* --- Konfiguration und QR-Code -------------------------------------------- */

.konfig {
  font-family: var(--schrift-fest); font-size: 0.8125rem; line-height: 1.5;
  white-space: pre; overflow-x: auto;
  background: var(--vertieft); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--rund-2);
  padding: var(--raum-3); margin: 0;
}

/* Weißer Grund und Rand gehören zum QR-Code, nicht zur Dekoration: ohne sie
   liest die Kamera schlechter. Deshalb fest, nicht aus dem Farbsatz. */
.qr {
  display: block; width: min(16rem, 100%); height: auto;
  margin-inline: auto; padding: var(--raum-2);
  background: #ffffff; border: 1px solid var(--linie);
  border-radius: var(--rund-2);
}
.qr svg { display: block; width: 100%; height: auto; }

/* --- Lesetext ------------------------------------------------------------- */

.lesetext { max-width: 62ch; }
.lesetext h3 { margin-block: var(--raum-4) var(--raum-2); }
.lesetext h3:first-child { margin-block-start: 0; }
.lesetext code {
  background: var(--vertieft); padding: 0.1em 0.35em; border-radius: var(--rund-1);
}
.lesetext ul { margin: 0 0 var(--raum-3); padding-inline-start: var(--raum-5); }

/* --- Fuß ------------------------------------------------------------------ */

.fuss {
  margin-block-start: var(--raum-7);
  border-block-start: 1px solid var(--linie);
  padding-block: var(--raum-4);
  color: var(--text-schwach); font-size: 0.875rem;
}

/* --- Bewegung ------------------------------------------------------------- */

[data-zeigen] {
  opacity: 0; transform: translateY(var(--raum-2));
  transition: opacity var(--zug), transform var(--zug);
}
[data-zeigen][data-fertig] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  [data-zeigen] { opacity: 1; transform: none; }
}

/* --- Schmale Fenster ------------------------------------------------------ */

@media (max-width: 40rem) {
  h1 { font-size: 1.4rem; }
  .bereich { padding-inline: var(--raum-3); }
  .tafel__inhalt, .tafel__kopf, .tafel__fuss { padding-inline: var(--raum-3); }
  .kopf > .bereich { padding-block: var(--raum-2); }
  .tafel__werkzeuge { margin-inline-start: 0; width: 100%; }
}