:root {
  --grund: #0f1115; --karte: #171a21; --rand: #262b36;
  --text: #e6e9ef; --matt: #8b93a7;
  --gut: #3ddc84; --warm: #ffb454; --aus: #4a5163; --ruf: #5b9dff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; background: var(--grund); z-index: 5;
}
h1 { font-size: 16px; margin: 0; letter-spacing: .3px; }
h2 { font-size: 13px; margin: 0 0 10px; color: var(--matt); font-weight: 600;
     text-transform: uppercase; letter-spacing: .6px; }
.last { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: var(--matt); }
.last b { color: var(--text); font-variant-numeric: tabular-nums; }
main { padding: 20px; max-width: 1180px; margin: 0 auto; }

.umgebung {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; padding: 18px; margin-bottom: 20px;
}
.kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.kopf h3 { margin: 0; font-size: 17px; }
.tenant { color: var(--matt); font-size: 12px; }
.ns { margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px; color: var(--matt); }

.dienste { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.dienst {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  background: #11141a; border: 1px solid var(--rand);
  border-radius: 999px; padding: 4px 11px;
}
.dienst .hinweis { color: var(--matt); font-size: 11px; }

.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--aus); flex: none; }
.p-laeuft { background: var(--gut); box-shadow: 0 0 7px rgba(61,220,132,.6); }
.p-startet { background: var(--warm); animation: pulsen 1s infinite; }
.p-pausiert, .p-aus { background: var(--aus); }
@keyframes pulsen { 50% { opacity: .3; } }

.leute { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.person { background: #12151b; border: 1px solid var(--rand); border-radius: 10px; padding: 14px; }
.person .name { font-size: 15px; font-weight: 600; }
.person .zustand { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--matt); margin: 2px 0 12px; }

.knoepfe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
button {
  font: inherit; font-size: 13px; cursor: pointer; border-radius: 7px;
  border: 1px solid var(--rand); background: #1b1f28; color: var(--text);
  padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 7px;
}
button:hover:not(:disabled) { border-color: var(--ruf); }
button:disabled { opacity: .45; cursor: default; }
button.an { border-color: var(--gut); color: var(--gut); }
button.still { background: transparent; }
a.knopf { text-decoration: none; }

.leistung { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--matt); }
.leistung select {
  font: inherit; background: #1b1f28; color: var(--text);
  border: 1px solid var(--rand); border-radius: 6px; padding: 4px 7px;
}
.zugang { margin-top: 10px; }
.gedaempft { color: var(--matt); font-size: 12px; }

.zugangsliste { display: flex; flex-direction: column; gap: 8px; }
.zugangseintrag {
  background: #0b0d11; border: 1px solid var(--rand);
  border-radius: 8px; padding: 9px 11px;
}
.zkopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.zkopf .was { font-weight: 600; font-size: 12.5px; }
.zkopf a { color: var(--ruf); text-decoration: none; font-size: 11.5px; word-break: break-all; }
.zkopf a:hover { text-decoration: underline; }
.zkopf code { font-size: 11.5px; color: var(--matt); }

.zzeile { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 3px 0; }
.zzeile > span:first-child { color: var(--matt); min-width: 62px; }
.zzeile code {
  background: #171a21; border: 1px solid var(--rand); border-radius: 5px;
  padding: 2px 7px; font-family: ui-monospace, monospace; font-size: 12px;
  /* Passwoerter sind lang und die Karte ist schmal - umbrechen statt
     ueberlaufen, sonst steht die Haelfte ausserhalb des Kastens. */
  word-break: break-all;
}
.zhinweis { color: var(--matt); font-size: 11px; line-height: 1.45; margin-top: 6px; }

button.mini {
  font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  background: transparent; color: var(--matt); flex: none;
}
button.mini:hover { color: var(--text); border-color: var(--ruf); }

.protokoll { margin-top: 28px; }
.terminal {
  background: #080a0d; border: 1px solid var(--rand); border-radius: 10px;
  padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.7; max-height: 260px; overflow-y: auto;
}
.terminal .zeit { color: var(--matt); margin-right: 10px; }
.leer { color: var(--matt); font-size: 13px; padding: 10px 0; }

@media (max-width: 560px) {
  main { padding: 14px; }
  .leute { grid-template-columns: 1fr; }
  .last { width: 100%; margin-left: 0; }
}

/* --- Overlay fuer die Zugaenge ---------------------------------------- */
#overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 8, 11, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
/* Diese Zeile ist nicht optional.
 *
 * Das Attribut "hidden" versteckt ein Element nur ueber die eingebaute
 * Regel [hidden] { display: none }. Eine eigene Regel mit einer
 * ID-Auswahl ist spezifischer und gewinnt - das display:flex oben
 * ueberstimmt sie also. Das Overlay lag dann unsichtbar ueber der
 * ganzen Seite und fing jeden Klick ab.
 *
 * Wer display an einer ID setzt, muss den hidden-Fall mitschreiben. */
#overlay[hidden] { display: none; }
#overlay .fenster {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 14px; padding: 20px;
  width: 100%; max-width: 640px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.fkopf { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.fkopf h3 { margin: 0 0 2px; font-size: 17px; }
.fkopf button { margin-left: auto; }
.ffuss { margin-top: 16px; font-size: 12px; line-height: 1.5; }

/* Im Overlay ist Platz - hier duerfen Bezeichnung und Wert nebeneinander. */
#overlay .zugangseintrag { padding: 12px 14px; }
#overlay .zzeile > span:first-child { min-width: 78px; }
#overlay .zkopf a { font-size: 12.5px; }

@media (max-width: 560px) {
  #overlay { padding: 16px 10px; }
  #overlay .fenster { padding: 14px; }
}

/* --- KI-Anmeldung ------------------------------------------------------ */
.ki {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--rand);
  font-size: 12px;
}
.ki .was { font-weight: 600; }
.ki .gedaempft { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki button { flex: none; }
button.mini.an { color: var(--gut); border-color: rgba(61, 220, 132, .45); }

.schritte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 18px; }
.schritte li { line-height: 1.6; }
.schritte b { font-weight: 600; display: block; margin-bottom: 8px; }

.adresse { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adresse a {
  color: var(--grund); background: var(--gut); text-decoration: none;
  padding: 7px 13px; border-radius: 7px; font-weight: 600; font-size: 13px;
}
.adresse a:hover { filter: brightness(1.1); }

.codezeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.codezeile input {
  flex: 1; min-width: 200px;
  font: inherit; font-family: ui-monospace, monospace; font-size: 12.5px;
  background: #0b0d11; color: var(--text);
  border: 1px solid var(--rand); border-radius: 7px; padding: 8px 11px;
}
.codezeile input:focus { outline: none; border-color: var(--ruf); }
.codezeile input:disabled { opacity: .6; }
#kimeldung { margin-top: 8px; font-size: 12px; }
.fehler { color: #ff8080; }
.gut { color: var(--gut); }

/* --- Formularfelder in den Fenstern ------------------------------------ */
.feld { display: block; margin-bottom: 14px; }
.feld > span { display: block; font-size: 12px; color: var(--matt); margin-bottom: 5px; }
.feld input, .feld select {
  width: 100%; font: inherit; font-size: 13px;
  background: #0b0d11; color: var(--text);
  border: 1px solid var(--rand); border-radius: 7px; padding: 8px 11px;
}
.feld input:focus, .feld select:focus { outline: none; border-color: var(--ruf); }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.paar[hidden] { display: none; }
#lmeldung { margin-top: 4px; font-size: 12px; line-height: 1.5; }
#lmeldung code { background: #0b0d11; border: 1px solid var(--rand);
                 border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, monospace; }

/* --- Leistungszeile und Entfernen --------------------------------------- */
.leistung { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; }
.leistung .was { color: var(--matt); }
.leistung > span:nth-child(2) { flex: 1; }
.entfernen { margin-top: 10px; text-align: right; }
button.mini.gefahr { color: #ff8080; border-color: transparent; }
button.mini.gefahr:hover { border-color: #ff8080; }

/* Der Knopf zum Anlegen steht als eigene Kachel im Raster - dadurch ist
   er immer sichtbar, auch wenn noch kein Benutzer angelegt wurde. */
button.neu {
  min-height: 120px; border-style: dashed; border-color: var(--rand);
  background: transparent; color: var(--matt); font-size: 13px;
}
button.neu:hover { color: var(--text); border-color: var(--ruf); }

/* --- Verlauf eines Vorgangs und Protokollansicht ------------------------ */
.verlauf {
  background: #080a0d; border: 1px solid var(--rand); border-radius: 8px;
  padding: 10px 12px; margin-top: 4px; max-height: 220px; overflow-y: auto;
  font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.7;
}
.verlauf .sek { color: var(--matt); margin-right: 10px; display: inline-block; min-width: 40px; }
.verlauf .fertig {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand);
  font-family: inherit;
}
.verlauf .fertig b { color: var(--gut); display: block; margin-bottom: 8px; }
.verlauf .fertig a { color: var(--ruf); text-decoration: none; }

#overlay h4 {
  font-size: 12px; color: var(--matt); margin: 18px 0 8px;
  text-transform: uppercase; letter-spacing: .5px;
}
#overlay h4:first-of-type { margin-top: 14px; }
.terminal.gross { max-height: 300px; }
.terminal .sek { color: var(--matt); }
.reiter { display: flex; gap: 6px; }

.entfernen { display: flex; gap: 6px; justify-content: flex-end; }

/* --- Anmeldeseite ------------------------------------------------------ */
.anmeldeseite {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.anmeldeseite form {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 14px;
  padding: 28px; width: 100%; max-width: 360px;
}
.anmeldeseite h1 { font-size: 20px; margin: 0 0 4px; }
.anmeldeseite p { margin: 0 0 20px; font-size: 12.5px; }
.anmeldeseite button { width: 100%; padding: 10px; margin-top: 6px; }

/* --- Kontingent in der Kopfzeile --------------------------------------- */
.kbereich { display: flex; align-items: center; gap: 6px; }
.balken {
  display: inline-block; width: 64px; height: 6px; border-radius: 3px;
  background: #262b36; overflow: hidden; vertical-align: middle;
}
.balken > span { display: block; height: 100%; background: var(--gut); }
.balken.eng > span  { background: var(--warm); }
.balken.voll > span { background: #ff8080; }
.warnung { color: var(--warm); }
a.knopf {
  text-decoration: none; color: var(--matt); font-size: 13px;
  border: 1px solid var(--rand); border-radius: 7px; padding: 7px 11px;
}
a.knopf:hover { color: var(--text); border-color: var(--ruf); }

/* --- Umgebungsfilter ---------------------------------------------------- */
.filterleiste { padding: 12px 20px 0; max-width: 1180px; margin: 0 auto; }
.filter { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: #12151b; border: 1px solid var(--rand); color: var(--matt);
}
.chip:hover { color: var(--text); }
.chip.an { border-color: var(--gut); color: var(--text); }
.chip.aus { opacity: .6; }
.chip .punkt { width: 6px; height: 6px; }
.mitschalter { font-size: 12px; color: var(--matt); display: flex; align-items: center; gap: 6px; }
.trenner { width: 1px; height: 18px; background: var(--rand); margin: 0 4px; }

.fussabdruck { font-size: 11.5px; color: var(--matt); font-variant-numeric: tabular-nums; }
.kopf .marke-zustand { font-size: 11.5px; }

/* --- Platzdialog -------------------------------------------------------- */
.rechnung {
  background: #0b0d11; border: 1px solid var(--rand); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 4px; font-size: 13px;
}
.rechnung > div { display: flex; justify-content: space-between; padding: 3px 0; }
.rechnung span { color: var(--matt); }
.kandidaten { display: flex; flex-direction: column; gap: 6px; }
.kandidat {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: #0b0d11; border: 1px solid var(--rand); border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px;
}
.kandidat:hover { border-color: var(--ruf); }
.kandidat .kname { font-weight: 600; min-width: 90px; }
.kandidat .kwert { font-variant-numeric: tabular-nums; }
.kandidat .gedaempft { margin-left: auto; }
.vorschlag {
  background: rgba(61,220,132,.16); color: var(--gut);
  border-radius: 999px; padding: 2px 9px; font-size: 10.5px; flex: none;
}
#ksumme { margin-top: 10px; font-size: 12.5px; }

/* --- Auswertungsseite --------------------------------------------------- */
.block {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; padding: 18px; margin-bottom: 18px;
}
.zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .zweispalt { grid-template-columns: 1fr; } }
.diagramm { width: 100%; height: auto; }
.diagramm line { stroke: var(--rand); }
.diagramm .legende { font-size: 11px; fill: var(--matt); font-family: ui-monospace, monospace; }
table.auswertung { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.auswertung th {
  text-align: left; color: var(--matt); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--rand);
}
table.auswertung td { padding: 7px 10px 7px 0; border-bottom: 1px solid #1b1f28; }
table.auswertung tr:last-child td { border-bottom: none; }

/* --- Kostenkacheln ------------------------------------------------------ */
.kacheln { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kachelzahl {
  background: #0b0d11; border: 1px solid var(--rand); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.kachelzahl > span { font-size: 11.5px; color: var(--matt); }
.kachelzahl > b { font-size: 21px; font-variant-numeric: tabular-nums; }
.kachelzahl > small { font-size: 11px; color: var(--matt); }
.kachelzahl.gross > b { font-size: 26px; }
.kachelzahl.gut > b { color: var(--gut); }
.block.gross { padding: 20px; }
#overlay h4, .block h4 { font-size: 12px; color: var(--matt); margin: 18px 0 8px;
                         text-transform: uppercase; letter-spacing: .5px; }

/* --- Vorlagenwahl ------------------------------------------------------- */
.vorlagen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.vorlage {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px;
  align-items: center; cursor: pointer;
  background: #0b0d11; border: 1px solid var(--rand); border-radius: 9px;
  padding: 11px 13px;
}
.vorlage:hover { border-color: var(--ruf); }
.vorlage:has(input:checked) { border-color: var(--gut); }
.vorlage input { grid-row: span 3; }
.vtitel { font-weight: 600; font-size: 13.5px; }
.vbedarf { font-size: 11.5px; color: var(--matt); font-variant-numeric: tabular-nums; }
.vtext { grid-column: 2 / span 2; font-size: 12px; color: var(--matt); line-height: 1.5; }
.vdienste { grid-column: 2 / span 2; display: flex; gap: 5px; flex-wrap: wrap; }
.vdienste code {
  background: #171a21; border: 1px solid var(--rand); border-radius: 5px;
  padding: 1px 7px; font-size: 11px; font-family: ui-monospace, monospace;
}
button.neu.breit { min-height: 54px; width: 100%; margin-top: 4px; }

/* --- Umgebungsfilter als Klappfeld --------------------------------------
   Vorher eine Chip-Reihe. Sie lief bei vielen Umgebungen ueber mehrere
   Zeilen und schob die Seite nach unten; das Klappfeld braucht
   geschlossen immer genau eine Zeile. */
.klappfeld { position: relative; }
.klapper {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; cursor: pointer;
  background: var(--karte); border: 1px solid var(--rand); color: var(--text);
  border-radius: 8px; padding: 7px 12px; min-width: 210px;
}
.klapper:hover { border-color: var(--ruf); }
.klapper .pfeil { margin-left: auto; color: var(--matt); font-size: 10px;
                  transition: transform .12s; }
.klappfeld.offen .klapper { border-color: var(--ruf); }
.klappfeld.offen .pfeil { transform: rotate(180deg); }

.klappliste {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.suchfeld { padding: 10px 10px 8px; border-bottom: 1px solid var(--rand); }
.suchfeld input {
  width: 100%; font: inherit; font-size: 13px;
  background: #0b0d11; border: 1px solid var(--rand); border-radius: 7px;
  color: var(--text); padding: 7px 10px;
}
.suchfeld input:focus { outline: none; border-color: var(--ruf); }
.suchfeld input::placeholder { color: var(--matt); }

.klappzeilen { max-height: 300px; overflow-y: auto; padding: 6px; }
.klappzeile {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.klappzeile:hover { background: #1d222c; }
.klappzeile.an { background: #1a2430; }
.klappzeile input { accent-color: var(--ruf); margin: 0; flex: none; }
.klappzeile .punkt { width: 7px; height: 7px; }
.kzname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
.kzzustand { font-size: 11px; color: var(--matt); flex: none; }
.kzbedarf { font-size: 11px; color: var(--matt); flex: none;
            font-variant-numeric: tabular-nums; min-width: 92px;
            text-align: right; }
.klappzeilen .leer { padding: 12px 9px; color: var(--matt); font-size: 12.5px; }

.klappfuss {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--rand); background: #12151b;
}
.klappfuss .mitschalter { margin-left: auto; }

/* Wie alt der angezeigte Zustand ist. */
.stand { font-size: 11.5px; color: var(--matt); font-variant-numeric: tabular-nums; }
.stand.alt { color: var(--warm); }
#aktualisieren.laedt { opacity: .55; pointer-events: none; }

/* --- Stufenschalter (aktiv/inaktiv/alle, Bausteine, Zeitraum) -----------
   Ein Schalter mit drei Stellungen, kein Haken. Ein Haken kann nur
   "dazu" oder "weg" - nach den INAKTIVEN allein liess sich damit nicht
   suchen, und genau das will man, wenn man aufraeumt. */
.knopfgruppe {
  display: inline-flex; border: 1px solid var(--rand); border-radius: 8px;
  overflow: hidden; background: var(--karte);
}
.knopfgruppe .stufe {
  font: inherit; font-size: 12.5px; padding: 7px 13px; cursor: pointer;
  background: transparent; border: 0; border-right: 1px solid var(--rand);
  color: var(--matt);
}
.knopfgruppe .stufe:last-child { border-right: 0; }
.knopfgruppe .stufe:hover { color: var(--text); background: #1d222c; }
.knopfgruppe .stufe.an { background: #1a2430; color: var(--text); }

.zaehler { font-size: 11.5px; color: var(--matt); font-variant-numeric: tabular-nums; }
.filter .stand { margin-left: auto; }
.leer.breit { padding: 28px; text-align: center; color: var(--matt);
              border: 1px dashed var(--rand); border-radius: 12px;
              margin-bottom: 20px; }

/* --- Verlaufsliste ------------------------------------------------------
   Eine Zeile je Vorgang. Die Spaltenbreiten sind fest, damit die Augen
   beim Ueberfliegen an derselben Stelle bleiben - nur "warum" waechst,
   denn das ist die Spalte, wegen der die Seite existiert. */
.vzeile {
  display: grid; align-items: baseline; gap: 10px;
  grid-template-columns: 80px 8px 150px 100px 78px 92px 130px 1fr;
  padding: 7px 10px; border-bottom: 1px solid #1b1f28; font-size: 12.5px;
}
.vzeile:hover { background: #151922; }
.vzeit { color: var(--matt); font-variant-numeric: tabular-nums; }
.vzeile .punkt { align-self: center; }
.vwas { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vumg { color: var(--matt); overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; }
.vaktion { color: var(--matt); }
.v-an .vaktion { color: var(--gut); }
.vdauer { color: var(--matt); font-variant-numeric: tabular-nums; }
.vwer { color: var(--matt); overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; }
.vwarum { color: var(--text); }
.matt { color: var(--matt); }

@media (max-width: 900px) {
  .vzeile { grid-template-columns: 68px 8px 1fr; }
  .vzeile .vumg, .vzeile .vaktion, .vzeile .vdauer, .vzeile .vwer { display: none; }
  .vwarum { grid-column: 3; color: var(--matt); }
}

/* --- Verbund: Tenants, Cluster, Konten ---------------------------------
   Eine Reihe je Eintrag statt Karten. Die Ebene darueber ist eine
   LISTE - man sucht einen Namen und klickt ihn an, man betrachtet nicht
   sechs Kacheln. */
.reihe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 10px; padding: 13px 16px; margin-bottom: 9px;
}
.reihe .rname { font-size: 15px; font-weight: 600; color: var(--text);
                text-decoration: none; }
a.rname:hover { color: var(--ruf); }
.rmarke {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: #11141a; border: 1px solid var(--rand); color: var(--matt);
}
.rmarke.eigen { border-color: var(--gut); color: var(--gut); }
.rzahl { font-size: 12px; color: var(--matt); font-variant-numeric: tabular-nums; }
.rtext { font-size: 12px; color: var(--matt); flex: 1; min-width: 180px;
         display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.reihe .mini { margin-left: 0; }
.reihe > .mini:first-of-type { margin-left: auto; }
.mini.gefahr { color: #ff7b72; border-color: #47262a; }
.mini.gefahr:hover { border-color: #ff7b72; }
.mini.stark, .knopf.stark { border-color: var(--ruf); color: var(--text); }

.mitglied {
  display: inline-flex; align-items: center; gap: 5px;
  background: #11141a; border: 1px solid var(--rand);
  border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 11.5px;
  color: var(--text);
}
.mitglied em { color: var(--matt); font-style: normal; }
.winzig {
  font: inherit; font-size: 11px; line-height: 1; padding: 3px 6px;
  background: transparent; border: 1px solid var(--rand); border-radius: 6px;
  color: var(--matt); cursor: pointer;
}
.winzig:hover { color: var(--text); border-color: var(--ruf); }

/* Das Ergebnis des Verbindungstests. */
.pruefung { flex-basis: 100%; }
.pruefung:empty { display: none; }
.pkopf { margin: 10px 0 8px; font-size: 13px; display: flex; gap: 8px;
         align-items: baseline; }
.pkopf.gut { color: var(--gut); }
.pkopf.schlecht { color: var(--warm); }
.pschritt {
  display: flex; align-items: baseline; gap: 9px; font-size: 12px;
  padding: 4px 0 4px 6px; color: var(--matt);
}
.pschritt b { color: var(--text); font-weight: 500; min-width: 150px; }

.feld { display: block; margin-bottom: 12px; font-size: 12.5px;
        color: var(--matt); }
.feld input, .feld select, .feld textarea {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 13px;
  background: #0b0d11; border: 1px solid var(--rand); border-radius: 7px;
  color: var(--text); padding: 8px 10px;
}
.feld textarea { font-family: ui-monospace, monospace; font-size: 12px;
                 resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--ruf);
}
.hinweis { font-size: 12px; color: var(--matt); line-height: 1.55;
           margin: 4px 0 0; }
.tenantwahl {
  font: inherit; font-size: 13px; background: var(--karte);
  border: 1px solid var(--rand); border-radius: 8px; color: var(--text);
  padding: 6px 10px;
}
.tenantwahl:focus { outline: none; border-color: var(--ruf); }
main > section { margin-bottom: 32px; }