/* Kleiderkammer Jugendfeuerwehr Badendorf - dunkles Feuerwehr-Design.
   Nur Systemschriften, es wird nichts von aussen nachgeladen. */

:root {
  --grund:        #111820;
  --flaeche:      #19222c;
  --flaeche-hoch: #223040;
  --rand:         #2c3a4a;
  --text:         #e6ecf2;
  --text-leise:   #93a3b4;
  --rot:          #c8102e;
  --rot-hell:     #e01b3d;
  --gelb:         #f2d600;
  --gruen:        #2f9e5b;
  --kopf-hoehe:   3.5rem;
  --nav-hoehe:    3.75rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }

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

label {
  display: block;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: .3rem;
}

input, select {
  width: 100%;
  padding: .7rem .8rem;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: .4rem;
  color: var(--text);
  font: inherit;
}

input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--gelb);
  outline-offset: 1px;
}

.feld { margin-bottom: .9rem; }

button {
  font: inherit;
  font-weight: 600;
  padding: .7rem 1rem;
  border: 1px solid var(--rand);
  border-radius: .4rem;
  background: var(--flaeche-hoch);
  color: var(--text);
  cursor: pointer;
}

button:hover { border-color: var(--gelb); }
button:disabled { opacity: .5; cursor: default; }
button:disabled:hover { border-color: var(--rand); }

/* Signalrot ist verbindlichen Aktionen vorbehalten. */
.knopf-rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf-rot:hover { background: var(--rot-hell); border-color: var(--gelb); }
.knopf-breit { width: 100%; }
.knopf-klein { padding: .45rem .7rem; font-size: .85rem; }

/* --- Meldungen ----------------------------------------------------- */

.meldung {
  padding: .7rem .8rem;
  border-radius: .4rem;
  border-left: 4px solid var(--rand);
  background: var(--flaeche-hoch);
  margin-bottom: .9rem;
  font-size: .95rem;
}
.meldung-fehler { border-left-color: var(--rot); }
.meldung-gut    { border-left-color: var(--gruen); }
.meldung[hidden] { display: none; }

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

.anmeldung {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.anmelde-karte {
  width: 100%;
  max-width: 22rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-top: 4px solid var(--rot);
  border-radius: .6rem;
  padding: 1.6rem 1.4rem;
}

.anmelde-kopf { text-align: center; margin-bottom: 1.4rem; }
.anmelde-kopf .wappen {
  display: block;
  width: 96px; height: 96px;
  margin: 0 auto .8rem;
}
.anmelde-kopf .haus { font-size: .8rem; color: var(--text-leise); letter-spacing: .08em; text-transform: uppercase; }

/* --- Grundgeruest nach dem Login ----------------------------------- */

.kopf {
  position: fixed; top: 0; left: 0; right: 0; height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 .9rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  box-shadow: inset 0 -3px 0 var(--rot);
  z-index: 10;
}
.kopf .wappen { width: 34px; height: 34px; flex: none; }
/* Wappen, Titel und Knopf bleiben in voller Groesse stehen. Wird die Zeile
   eng, schrumpft allein der Benutzername. min-width: 0 ist noetig, sonst
   greift text-overflow im Flex-Kasten nicht und die Zeile laeuft ueber. */
.kopf .titel { flex: none; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf .titel span { color: var(--gelb); }
.kopf .rest { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.kopf .rest button { flex: none; }
.kopf .wer { min-width: 0; max-width: 7rem; font-size: .8rem; color: var(--text-leise); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auf schmalen Handys wird der Benutzername gekuerzt, nicht der Titel. */
@media (max-width: 380px) {
  .kopf { padding: 0 .6rem; gap: .5rem; }
  .kopf .wer { max-width: 4.5rem; }
}

.inhalt {
  padding: calc(var(--kopf-hoehe) + 1rem) .9rem calc(var(--nav-hoehe) + 1.5rem);
  max-width: 46rem;
  margin: 0 auto;
}

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-hoehe);
  display: flex;
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
.nav button {
  flex: 1 1 0;
  border: 0; border-radius: 0;
  background: transparent;
  color: var(--text-leise);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .02em;
  padding: .4rem .1rem;
  border-top: 3px solid transparent;
}
.nav button:hover { border-color: transparent; color: var(--text); }
.nav button[aria-current="page"] { color: var(--gelb); border-top-color: var(--gelb); }

/* --- Karten und Listen --------------------------------------------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: .9rem;
}

.platzhalter { text-align: center; color: var(--text-leise); padding: 2.5rem 1rem; }
.platzhalter .zeichen { font-size: 2rem; color: var(--rand); margin-bottom: .5rem; }

.zeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.zeile-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.leise { color: var(--text-leise); font-size: .85rem; }

.abzeichen {
  display: inline-block;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: .25rem;
  border: 1px solid var(--rand);
  color: var(--text-leise);
}
.abzeichen-admin   { color: var(--gelb);  border-color: var(--gelb); }
.abzeichen-aktiv   { color: var(--gruen); border-color: var(--gruen); }
.abzeichen-gesperrt{ color: var(--rot-hell); border-color: var(--rot-hell); }

.benutzer-karte.gesperrt { opacity: .65; }

/* --- Einmalpasswort ------------------------------------------------- */

.passwort-anzeige {
  border: 1px solid var(--gelb);
  border-left-width: 4px;
  background: var(--flaeche-hoch);
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: .9rem;
}
.passwort-anzeige .wert {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gelb);
  word-break: break-all;
  margin: .5rem 0;
}
.passwort-anzeige .warnung { color: var(--text); font-size: .85rem; }