/* =====================================================================
   Elvyon Alarmierung - Oberflaeche
   =====================================================================
   Von Hand geschrieben, kein Bauschritt, kein Framework.

   WARUM KEIN CSS-FRAMEWORK: Ein Framework waere eine Abhaengigkeit, die
   gepflegt, beobachtet und irgendwann ersetzt werden muss - fuer sieben
   Seiten. Diese Datei ist kleiner als jede Framework-Datei, und jede
   Zeile darin ist erklaerbar.

   DER WICHTIGSTE FALL IST DAS TELEFON: Der haeufigste Aufruf ist der
   Deeplink aus einer Mitteilung - also nachts, mit einer Hand, auf einem
   kleinen Bildschirm. Ein Umbruchpunkt bei 600 Bildpunkten genuegt.

   JEDE STUFE TRAEGT IHRE FORM, NICHT NUR IHRE FARBE:
   Dreieck = rot, Raute = gelb, Kreis = gruen. Rot-Gruen-Sehschwaeche
   betrifft etwa acht von hundert Maennern; ein Zustand, der allein ueber
   die Farbe erkennbar ist, ist fuer sie kein Zustand, sondern ein
   farbiger Fleck. Dieselbe Ueberlegung wie bei den Push-Symbolen.
   ===================================================================== */

:root {
  --grund:         #f6f7f9;
  --flaeche:       #ffffff;
  --flaeche-2:     #eef0f4;
  --rand:          #d5d9e0;
  --text:          #1b1f27;
  --text-leise:    #626b7a;
  --akzent:        #1f5fa8;
  --akzent-text:   #ffffff;

  /* Dieselben Farben wie die Symbole - eine Quelle, zwei Anzeigeorte. */
  --rot:           #c62828;
  --rot-grund:     #fbeaea;
  --gelb:          #8a5a05;
  --gelb-grund:    #fdf3e0;
  --gruen:         #2e7d32;
  --gruen-grund:   #e8f5e9;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --einfarbig: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:       #14171c;
    --flaeche:     #1b1f26;
    --flaeche-2:   #232833;
    --rand:        #333a47;
    --text:        #e6e9ef;
    --text-leise:  #9aa3b2;
    --akzent:      #5a9bea;
    --akzent-text: #0d1015;
    --rot:         #ef7b7b;
    --rot-grund:   #351818;
    --gelb:        #e0b361;
    --gelb-grund:  #33280f;
    --gruen:       #5fcf90;
    --gruen-grund: #16301f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .einfarbig { font-family: var(--einfarbig); font-size: 0.9em; }
pre { overflow-x: auto; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; }

/* --- Die Anmeldeseite: NACKT -------------------------------------------
   Ausdrueckliche Ansage des Betreibers: nur das Formular. Keine
   Fusszeile, kein Hinweistext, keine Versionsangabe, kein Hostname.
   Deshalb hat sie hier auch nur die wenigen Regeln, die sie braucht. */

body.nackt { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.anmeldung {
  width: 100%;
  max-width: 22rem;
  padding: 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.anmeldung label { display: block; margin-top: 0.8rem; font-size: 0.9rem; color: var(--text-leise); }
.anmeldung input {
  width: 100%; padding: 0.6rem; margin-top: 0.2rem;
  font-size: 1rem; color: var(--text);
  background: var(--grund); border: 1px solid var(--rand); border-radius: var(--radius);
}
.anmeldung button {
  width: 100%; margin-top: 1.2rem; padding: 0.7rem;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  color: var(--akzent-text); background: var(--akzent);
  border: none; border-radius: var(--radius);
}
.anmeldung-fehler {
  margin: 0 0 0.8rem; padding: 0.6rem;
  color: var(--rot); background: var(--rot-grund);
  border-radius: var(--radius); text-align: center;
}

/* --- Kopf, Balken, Fuss ------------------------------------------------ */

.kopf {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 0.6rem 1.2rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.marke { font-weight: 700; color: var(--text); }
.hauptnav { display: flex; gap: 1rem; flex-wrap: wrap; }
.hauptnav a { color: var(--text-leise); padding: 0.2rem 0; }
.hauptnav a.aktiv { color: var(--text); border-bottom: 2px solid var(--akzent); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.benutzername { color: var(--text-leise); font-size: 0.9rem; }

/* Der rote Balken. Er steht ueber ALLEN Seiten, sobald ein roter Alarm
   nicht quittiert ist - die eine Sache, die man immer sehen muss. */
.balken {
  padding: 0.7rem 1.2rem; font-weight: 600;
  display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;
}
.balken-rot { color: var(--akzent-text); background: var(--rot); }
.balken-rot a { color: var(--akzent-text); text-decoration: underline; }
.balken-fehler { color: var(--akzent-text); background: #6d2b2b; }
.balken-fehler a { color: var(--akzent-text); text-decoration: underline; }

.inhalt { max-width: 62rem; margin: 0 auto; padding: 1.2rem; }

.fuss {
  max-width: 62rem; margin: 2rem auto 1rem; padding: 1rem 1.2rem;
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  color: var(--text-leise); font-size: 0.85rem;
  border-top: 1px solid var(--rand);
}

/* --- Kacheln der Uebersicht -------------------------------------------- */

.kacheln { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kachel {
  flex: 1 1 8rem; padding: 0.9rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.kachel .zahl { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.kachel .beschriftung { color: var(--text-leise); font-size: 0.85rem; }
.kachel-rot { border-color: var(--rot); background: var(--rot-grund); }
.kachel-rot .zahl { color: var(--rot); }
.kachel-gelb { border-color: var(--gelb); background: var(--gelb-grund); }
.kachel-gelb .zahl { color: var(--gelb); }

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

table { width: 100%; border-collapse: collapse; background: var(--flaeche); }
.liste, .zustand, .paare {
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
}
th, td { padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rand); }
thead th { background: var(--flaeche-2); font-size: 0.85rem; color: var(--text-leise); border-top: none; }
.paare th, .zustand th { width: 12rem; color: var(--text-leise); font-weight: 600; }

tr.inaktiv { opacity: 0.55; }
tr.ist-test td { font-style: italic; }

.ordnung-gut td, .ordnung-gut th { border-left: 3px solid var(--gruen); }
.ordnung-warnung td:first-child, .ordnung-warnung th { border-left: 3px solid var(--gelb); }
.ordnung-fehler td:first-child, .ordnung-fehler th { border-left: 3px solid var(--rot); }

/* Die Form steht VOR der Farbe - sie ist das erste, was das Auge aufnimmt. */
.form { font-size: 1.1rem; }
.form.gross { font-size: 1.8rem; }
.stufe-rot   .form, th.stufe-rot   { color: var(--rot); }
.stufe-gelb  .form, th.stufe-gelb  { color: var(--gelb); }
.stufe-gruen .form, th.stufe-gruen { color: var(--gruen); }

tr.zustand-fehlgeschlagen { background: var(--rot-grund); }
tr.zustand-zurueckgestellt { background: var(--gelb-grund); }

.marke {
  display: inline-block; padding: 0 0.35rem; border-radius: 3px;
  background: var(--flaeche-2); color: var(--text-leise);
  font-size: 0.75rem; font-weight: 600;
}
.leer { color: var(--text-leise); font-style: italic; }
.klein { font-size: 0.85rem; color: var(--text-leise); }
.gross { font-size: 1.1rem; }
.fehlertext { color: var(--rot); }

/* --- Hinweise ---------------------------------------------------------- */

.hinweis {
  padding: 0.7rem 0.9rem; margin: 0.8rem 0;
  border-radius: var(--radius); border: 1px solid var(--rand);
  background: var(--flaeche);
}
.hinweis.gut { border-color: var(--gruen); background: var(--gruen-grund); }
.hinweis.warnung { border-color: var(--gelb); background: var(--gelb-grund); }
.hinweis.fehler { border-color: var(--rot); background: var(--rot-grund); }

/* --- Detailseite eines Alarms ------------------------------------------
   Eine Spalte, grosse Schrift, das Wichtigste oben. Sie muss nachts auf
   einem Telefon mit einer Hand lesbar sein. */

.detail {
  padding: 1rem; margin-bottom: 1rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 6px solid var(--rand); border-radius: var(--radius);
}
.detail.stufe-rot   { border-left-color: var(--rot); }
.detail.stufe-gelb  { border-left-color: var(--gelb); }
.detail.stufe-gruen { border-left-color: var(--gruen); }
.detail .kopfzeile { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.detail h1 { font-size: 1.5rem; }
.detail .untertitel { color: var(--text-leise); margin: 0 0 0.8rem; }
.alarmtext { white-space: pre-wrap; font-family: var(--schrift); font-size: 1.05rem; }
.zustand { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--flaeche-2); font-size: 0.85rem; }
.zustand-fehlgeschlagen { background: var(--rot); color: var(--akzent-text); }
.zustand-zurueckgestellt { background: var(--gelb-grund); color: var(--gelb); }
.json {
  padding: 0.7rem; background: var(--flaeche-2);
  border: 1px solid var(--rand); border-radius: var(--radius);
  white-space: pre-wrap; word-break: break-word;
}

/* --- Formulare und Knoepfe --------------------------------------------- */

.formular { margin: 0.8rem 0; padding: 0.9rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius); }
.formular.breit { padding: 1.2rem; }
.formular label { display: block; margin: 0.5rem 0; font-size: 0.9rem; }
.formular fieldset { margin: 0.6rem 0; border: 1px solid var(--rand); border-radius: var(--radius); }
.formular fieldset label { display: inline-block; margin-right: 1rem; }
.reihe { display: flex; gap: 1rem; flex-wrap: wrap; }
.reihe label { flex: 1 1 10rem; }
.reihe label.lang { flex: 1 1 24rem; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--grund);
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.4rem;
  max-width: 100%;
}
input[type="checkbox"] { width: auto; }

.knopf, button {
  display: inline-block; padding: 0.5rem 0.9rem; cursor: pointer;
  font: inherit; color: var(--text); background: var(--flaeche-2);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.knopf:hover, button:hover { border-color: var(--akzent); text-decoration: none; }
.knopf.haupt, button.haupt { color: var(--akzent-text); background: var(--akzent); border-color: var(--akzent); }
.knopf.klein, button.klein { padding: 0.25rem 0.55rem; font-size: 0.85rem; }
.knopf.gefaehrlich, button.gefaehrlich { color: var(--rot); border-color: var(--rot); }
.inline { display: inline; }
.filter { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap;
  padding: 0.8rem; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); margin-bottom: 1rem; }
.filter label { font-size: 0.85rem; color: var(--text-leise); }

/* --- Testseite ---------------------------------------------------------
   Der Unterschied zwischen "zugestellt" und "zurueckgestellt" muss auf den
   ersten Blick erkennbar sein: andere Farbe, andere Form, anderes Wort.
   Ein Test, bei dem man raetselt, ob etwas passiert ist, ist kein Test. */

.testknoepfe { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
.testknoepfe form { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 0.8rem; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); }
.knopf-test { font-size: 1.1rem; font-weight: 700; padding: 0.8rem 1.2rem; min-width: 12rem; }
.knopf-rot   { color: var(--akzent-text); background: var(--rot); border-color: var(--rot); }
.knopf-gelb  { color: #2a2000; background: #e8a33d; border-color: #e8a33d; }
.knopf-gruen { color: var(--akzent-text); background: var(--gruen); border-color: var(--gruen); }
.erlaeuterung { flex: 1 1 16rem; color: var(--text-leise); font-size: 0.9rem; }

.ergebnis { padding: 1rem; margin: 1rem 0; border-radius: var(--radius);
  border: 2px solid var(--rand); background: var(--flaeche); }
.ergebnis h2 { margin-top: 0; }
.ergebnis-zugestellt { border-color: var(--gruen); background: var(--gruen-grund); }
.ergebnis-zurueckgestellt { border-color: var(--gelb); background: var(--gelb-grund); }
.ergebnis-fehlgeschlagen { border-color: var(--rot); background: var(--rot-grund); }
.ergebnis-unterdrueckt { border-color: var(--rand); }
.hinweiszeile { margin: 0.3rem 0; }

/* --- Schluesselanzeige (genau einmal) ---------------------------------- */

.schluesselkasten { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 1rem; background: var(--flaeche-2); border: 2px dashed var(--akzent);
  border-radius: var(--radius); }
.schluessel { font-size: 1.1rem; font-weight: 700; word-break: break-all; }
.code { padding: 0.8rem; background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: var(--radius); white-space: pre-wrap; word-break: break-word; }

/* --- Symbolvorschau ---------------------------------------------------- */

.symbolvorschau { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.symbolvorschau figure { margin: 0; text-align: center; }
.symbolvorschau figcaption { font-size: 0.8rem; color: var(--text-leise); }

.anleitung li { margin-bottom: 0.5rem; }

/* --- Telefon ----------------------------------------------------------- */

@media (max-width: 600px) {
  .kopf { gap: 0.6rem; }
  .hauptnav { gap: 0.7rem; font-size: 0.9rem; order: 3; width: 100%; }
  .kopf-rechts { margin-left: auto; }
  .inhalt { padding: 0.8rem; }
  /* Auf dem Telefon zaehlt die Detailseite. In den Listen weichen die
     Spalten, die man dort ohnehin nicht liest. */
  .liste th:nth-child(4), .liste td:nth-child(4),
  .liste th:nth-child(5), .liste td:nth-child(5) { display: none; }
  .detail h1 { font-size: 1.3rem; }
  .knopf-test { width: 100%; }
}