/* AES-Portal – gemeinsames, bewusst schlichtes Styling für alle vier Bereiche. */
:root {
  --tinte: #1c2430;
  --flaeche: #f4f6f8;
  --karte: #ffffff;
  --linie: #d4dae1;
  --akzent: #14538c;
  --alarm: #b3261e;
  --wartung: #8a6d00;
  --normal: #1f6b3a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, "Segoe UI", sans-serif;
  color: var(--tinte);
  background: var(--flaeche);
}
header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--akzent);
  color: #fff;
  flex-wrap: wrap;
}
header .marke { font-weight: 700; letter-spacing: 0.04em; }
header nav { display: flex; gap: 0.2rem; flex-wrap: wrap; }
header a { color: #fff; text-decoration: none; padding: 0.25rem 0.7rem; border-radius: 4px; }
header a.aktiv, header a:hover { background: rgba(255, 255, 255, 0.18); }
header .benutzer { margin-left: auto; font-size: 0.85rem; }
main { padding: 1rem 1.2rem 3rem; }
h1 { font-size: 1.4rem; }
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}
.karte h2 { margin-top: 0; font-size: 1.05rem; }
/* Schmale, zentrierte Karte für die Anmeldeschritte: begrenzte Breite statt
   voller Seitenbreite, Eingabefelder füllen die Karte. */
.karte-schmal { max-width: 26rem; margin-left: auto; margin-right: auto; }
.karte-schmal label { margin: 0.5rem 0; }
.karte-schmal input { width: 100%; }
.karte-schmal button { width: 100%; margin-top: 0.4rem; }
.karte-schmal .nebenaktion button { width: auto; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 1rem 0; }
.kopfzeile { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
.kopfzeile h2 { margin: 0; }
.filter { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.filter-rollen { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.filter-rollen button {
  background: var(--karte);
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}
.filter-rollen button:hover { filter: none; background: var(--flaeche); }
.filter-rollen button.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.filter-rollen button.aktiv:hover { filter: brightness(1.1); }
table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
th, td { border: 1px solid var(--linie); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
th { background: var(--flaeche); }
tr.alarm td { background: #fbe9e7; }
tr.wartung td { background: #fdf6dd; }
tr.normal td { background: #eef7f0; }
.alarm { color: var(--alarm); }
.wartung { color: var(--wartung); }
.normal { color: var(--normal); }
form.zeile, .zeile { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; margin: 0.6rem 0; }
td .zeile { margin: 0; align-items: center; }
label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
label small { color: #5a6672; font-weight: normal; }
label.kontroll { flex-direction: row; align-items: center; }
label.breit { flex: 1 1 16rem; }
/* Mittelbreites Formularfeld (z. B. Auswahllisten mit sprechenden Namen):
   wächst mit, faellt aber nie unter eine lesbare Mindestbreite. */
label.mittel { flex: 1 1 12rem; min-width: 12rem; }
label.mittel select, label.mittel input { width: 100%; }
input, select, textarea {
  font: inherit;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: #fff;
}
textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
button, a.knopf {
  font: inherit;
  padding: 0.35rem 0.9rem;
  border: 0;
  border-radius: 4px;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, a.knopf:hover { filter: brightness(1.1); }
/* Untergeordnete Aktion neben dem eigentlichen Absenden (z. B. "Abbrechen"
   im zweiten Schritt der Anmeldung) – gleiche Größe, aber zurückhaltend. */
.nebenaktion { margin-top: 0.6rem; }
.nebenaktion button {
  background: transparent;
  color: var(--text-schwach, inherit);
  border: 1px solid var(--linie);
  padding: 0.3rem 0.8rem;
}
.nebenaktion button:hover { filter: none; background: var(--flaeche); }
p.fehler { background: #fbe9e7; border-left: 4px solid var(--alarm); padding: 0.5rem 0.8rem; }
dialog#hinweis-dialog, dialog#fehler-dialog {
  max-width: 26rem;
  background: var(--karte);
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
dialog#hinweis-dialog::backdrop, dialog#fehler-dialog::backdrop { background: rgba(28, 36, 48, 0.5); }
dialog#hinweis-dialog p, dialog#fehler-dialog p { margin: 0 0 1rem; padding-left: 0.7rem; }
dialog#hinweis-dialog p { border-left: 4px solid var(--normal); }
dialog#fehler-dialog p { border-left: 4px solid var(--alarm); }
dialog#hinweis-dialog form, dialog#fehler-dialog form { margin: 0; text-align: right; }
code { background: var(--flaeche); padding: 0.1rem 0.3rem; border-radius: 3px; }
.qr-code { margin: 0.8rem 0; max-width: 220px; }
.qr-code svg { width: 100%; height: auto; }
.reiter-leiste { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 1rem 0 0; border-bottom: 1px solid var(--linie); }
.reiter-leiste button {
  font: inherit;
  padding: 0.5rem 1rem;
  border: 1px solid var(--linie);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--flaeche);
  color: var(--tinte);
  cursor: pointer;
}
.reiter-leiste button.aktiv { background: var(--karte); font-weight: 600; }
.reiter-leiste button:hover { background: var(--karte); }
.reiter-panel { margin-top: 0; border-radius: 0 8px 8px 8px; }
footer { text-align: center; font-size: 0.75rem; color: #5a6672; padding: 1rem; }