/* ============================================================
   app.css  —  Oberfläche der gemeinsamen App

   Farben aus dem bestehenden CRM, damit es nach einer Anwendung
   aussieht und nicht nach zwei zusammengeklebten Programmen.
   ============================================================ */

:root {
  --bg: #f5f4f1;
  --flaeche: #ffffff;
  --flaeche2: #f0ede8;
  --rand: #ddd9d0;
  --akzent: #304945;
  --akzent2: #89a2ab;
  --akzent-hell: #e4e9eb;
  --text: #1a1a18;
  --text2: #5a5a54;
  --text3: #9a9a92;
  --rot: #c0392b;
  --rot-hell: #fdf0ee;
  --gruen: #1e7e34;
  --gruen-hell: #e6f4ea;
  --gelb: #b8860b;
  --gelb-hell: #fefae8;
  --radius: 8px;
  --schatten: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Anmeldeseite ───────────────────────────────────────────── */
body.anmeldeseite, body.meldungsseite {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--akzent); padding: 20px;
}
body.anmeldeseite main, body.meldungsseite main {
  background: var(--flaeche); border-radius: 12px; padding: 32px;
  width: 100%; max-width: 380px; box-shadow: var(--schatten);
}
body.anmeldeseite h1, body.meldungsseite h1 { font-size: 18px; color: var(--akzent); }
body.anmeldeseite .unter { font-size: 13px; color: var(--text3); margin-bottom: 18px; }
body.anmeldeseite form { margin-bottom: 12px; }
body.anmeldeseite label {
  display: block; font-size: 12px; color: var(--text2); margin: 12px 0 4px;
}
body.anmeldeseite input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rand);
  border-radius: var(--radius); font-size: 14px; font-family: inherit;
}
body.anmeldeseite input:focus { outline: 2px solid var(--akzent2); outline-offset: 1px; }
body.anmeldeseite button, body.meldungsseite button {
  width: 100%; margin-top: 16px; padding: 11px; border: none;
  border-radius: var(--radius); background: var(--akzent); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
body.anmeldeseite button.zweitrangig { background: var(--flaeche2); color: var(--akzent); }
body.anmeldeseite .fuss { margin-top: 14px; text-align: center; font-size: 12px; }
body.anmeldeseite .fuss a, body.meldungsseite a { color: var(--akzent); }
body.anmeldeseite .hinweistext {
  font-size: 13px; color: var(--text2); background: var(--gelb-hell);
  border: 1px solid #e6d9a0; border-radius: var(--radius); padding: 12px;
}
body.anmeldeseite code {
  background: var(--flaeche2); padding: 1px 5px; border-radius: 4px;
  font-family: Consolas, monospace;
}

.meldung {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 7px;
  font-size: 13px; line-height: 1.4;
}
.meldung.gut     { background: var(--gruen-hell); color: var(--gruen); }
.meldung.schlecht{ background: var(--rot-hell);   color: var(--rot); }

/* ── App-Hülle ──────────────────────────────────────────────── */
#app { display: flex; min-height: 100vh; }

#seitenleiste {
  width: 232px; min-width: 232px; background: var(--akzent);
  color: #fff; display: flex; flex-direction: column;
}
#seitenleiste .marke {
  padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12);
}
#seitenleiste .marke strong { display: block; font-size: 14px; }
#seitenleiste .marke span { font-size: 11px; opacity: .65; }

#seitenleiste nav { flex: 1; padding: 10px 0; }
#seitenleiste .gruppe {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  opacity: .5; padding: 14px 18px 6px;
}
#seitenleiste .nav {
  display: block; width: 100%; text-align: left;
  padding: 8px 18px; background: none; border: none;
  border-left: 3px solid transparent;
  color: rgba(255,255,255,.78); font-size: 13px; font-family: inherit;
  cursor: pointer;
}
#seitenleiste .nav:hover { background: rgba(255,255,255,.08); color: #fff; }
#seitenleiste .nav.aktiv {
  background: rgba(255,255,255,.13); color: #fff; border-left-color: #fff;
}
#seitenleiste .nav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

#seitenleiste .jahrwahl { padding: 4px 18px 8px; }
#seitenleiste .jahrwahl label {
  display: block; font-size: 10px; opacity: .6; margin-bottom: 3px;
}
#seitenleiste .jahrwahl select {
  width: 100%; padding: 5px 7px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); color: #fff; font-family: inherit; font-size: 13px;
}

#seitenleiste .abmelden { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.12); }
#seitenleiste .abmelden button {
  width: 100%; padding: 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent; color: rgba(255,255,255,.85);
  font-family: inherit; font-size: 12px;
}
#seitenleiste .abmelden button:hover { background: rgba(255,255,255,.1); color: #fff; }

main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
#kopf h1 { font-size: 16px; font-weight: 600; }
#hinweis { font-size: 12px; color: var(--text2); }
#hinweis.gut { color: var(--gruen); }
#hinweis.schlecht { color: var(--rot); }

#banner {
  margin: 16px 24px 0; padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; background: var(--gelb-hell);
  border: 1px solid #e6d9a0; color: #7a5c00;
}

#inhalt { padding: 20px 24px 40px; }

/* ── Karten und Tabellen ────────────────────────────────────── */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 18px 20px;
  margin-bottom: 16px; max-width: 720px; box-shadow: var(--schatten);
}
.karte h2 { font-size: 14px; margin-bottom: 10px; color: var(--akzent); }
.karte .klein { font-size: 12px; color: var(--text2); margin-bottom: 10px; }
.karte .gross { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.platzhalter { border-style: dashed; background: var(--flaeche2); box-shadow: none; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
table.status th {
  text-align: left; font-weight: 400; color: var(--text2);
  padding: 5px 12px 5px 0; width: 55%;
}
table.status td { padding: 5px 0; }
table.liste th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text3);
  border-bottom: 1px solid var(--rand); padding: 6px 10px 6px 0;
}
table.liste td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--flaeche2); }

.gut      { color: var(--gruen); }
.schlecht { color: var(--rot); }
.laedt    { color: var(--text3); font-size: 13px; }
.zustand  { font-size: 13px; font-weight: 600; margin-bottom: 10px; }

/* ── Formularfelder in Karten ───────────────────────────────── */
.feld { margin-bottom: 10px; }
.feld label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 3px; }
.feld input {
  width: 100%; max-width: 340px; padding: 8px 10px;
  border: 1px solid var(--rand); border-radius: 6px;
  font-size: 14px; font-family: inherit;
}
.feld input:focus { outline: 2px solid var(--akzent2); outline-offset: 1px; }

.karte button {
  margin-top: 6px; padding: 8px 16px; border: none; border-radius: 6px;
  background: var(--akzent); color: #fff; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.karte button:hover { background: #243734; }
.karte button.gefahr { background: var(--rot); }

.geheimnis {
  font-family: Consolas, monospace; font-size: 17px; letter-spacing: .1em;
  background: var(--flaeche2); border: 1px solid var(--rand);
  border-radius: 6px; padding: 12px; margin: 10px 0; word-break: break-all;
}

/* ── Schmale Bildschirme ────────────────────────────────────── */
@media (max-width: 760px) {
  #app { flex-direction: column; }
  #seitenleiste { width: 100%; min-width: 0; }
  #seitenleiste nav { display: flex; flex-wrap: wrap; padding: 6px; }
  #seitenleiste .gruppe { width: 100%; padding: 8px 12px 2px; }
  #seitenleiste .nav { width: auto; border-left: none; border-radius: 6px; }
  #seitenleiste .jahrwahl { width: 100%; }
  #inhalt { padding: 16px; }
}