/* fit4school Mitarbeitende – Gestaltung
   Blau #015694 und Grün #bccf02 wie in den übrigen Bereichen.
   Der Inhalt läuft auf 1560 px, damit Kopfzeile und Inhalt bündig stehen. */

:root {
  --blau: #015694;
  --blau-dunkel: #01416f;
  --gruen: #bccf02;
  --text: #1d2733;
  --grau: #5f6b7a;
  --linie: #dde3ea;
  --flaeche: #f4f7fa;
  --weiss: #fff;
  --rot: #b3453e;
  --gelb: #e09b2d;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
}

.inhalt { max-width: 1560px; margin: 0 auto; padding: 0 16px; }

/* ---------- Kopfzeile ---------- */

.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf-inhalt { display: flex; align-items: center; gap: 28px; min-height: 62px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blau); }
.logo-app { font-weight: 700; font-size: 17px; letter-spacing: -.2px; white-space: nowrap; }
.hauptnav { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.hauptnav a {
  padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--grau);
  font-weight: 500; white-space: nowrap;
}
.hauptnav a:hover { background: var(--flaeche); color: var(--text); }
.hauptnav a.aktiv { background: var(--blau); color: var(--weiss); }
.nav-benutzer { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--grau); }
.benutzer-name { font-weight: 600; color: var(--text); }
.rolle-badge { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 2px 10px; font-size: 12px; }
.abmelden { color: var(--grau); text-decoration: none; }
.abmelden:hover { color: var(--rot); }

/* Im Cockpit: Logo und Titel weglassen, Navigation links anschlagen */
html.im-cockpit .logo,
html.im-cockpit .logo-app { display: none; }
html.im-cockpit .marke { display: none; }
html.im-cockpit .hauptnav { margin-left: 0; margin-right: auto; }

/* ---------- Seitenkopf ---------- */

main.inhalt { padding-top: 22px; padding-bottom: 60px; }
.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.seitenkopf h1 { margin: 0; font-size: 23px; letter-spacing: -.3px; }
.seitenkopf .unter { margin: 4px 0 0; color: var(--grau); font-size: 13.5px; }
.kopf-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Flächen ---------- */

.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.karte h2 { margin: 0 0 12px; font-size: 16px; }
.karte h3 { margin: 18px 0 8px; font-size: 14.5px; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 18px; }
.kennzahl { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.kennzahl .wert { font-size: 28px; font-weight: 700; color: var(--blau); line-height: 1.1; }
.kennzahl .titel { color: var(--grau); font-size: 13px; margin-top: 2px; }
.mut, .muted { color: var(--grau); }
.klein { font-size: 13px; }

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

table.liste { width: 100%; border-collapse: collapse; background: var(--weiss); }
table.liste th, table.liste td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.liste th { background: var(--flaeche); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); font-weight: 600; }
table.liste tbody tr:hover { background: #fbfcfd; }
table.liste td a { color: var(--blau); text-decoration: none; font-weight: 500; }
table.liste td a:hover { text-decoration: underline; }
.tabellenrahmen { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.scroll-x { overflow-x: auto; }
.rechts { text-align: right; }
.zentriert { text-align: center; }

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

label { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 4px; }
label.zeile { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.zeile input { margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px;
  font: inherit; color: inherit; background: var(--weiss);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(1, 86, 148, .25); border-color: var(--blau); }
textarea { resize: vertical; }
.feldgruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.hinweis { color: var(--grau); font-size: 12.5px; margin-top: 4px; }

.knopf {
  display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--linie);
  background: var(--weiss); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--flaeche); }
.knopf-primaer { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.knopf-primaer:hover { background: var(--blau-dunkel); }
.knopf-gefahr { color: var(--rot); }
.knopf-gefahr:hover { background: #fdf2f1; }
.knopf-klein { padding: 4px 9px; font-size: 13px; }

/* ---------- Meldungen und Zustände ---------- */

.meldung { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.meldung-ok { background: #eef6ed; border: 1px solid #cfe4cb; color: #2b5d2b; }
.meldung-fehler { background: #fdf2f1; border: 1px solid #f0cdc9; color: #8f332d; }
.meldung-info { background: #eef4f9; border: 1px solid #cddfee; color: #14507f; }

.status { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-geplant { background: #eef4f9; color: #14507f; }
.status-durchgefuehrt { background: #eef6ed; color: #2b5d2b; }
.status-abgesagt { background: var(--flaeche); color: var(--grau); }
.status-entwurf { background: #fdf6e9; color: #8a5d12; }
.status-freigegeben { background: #eef6ed; color: #2b5d2b; }
.status-inaktiv { background: var(--flaeche); color: var(--grau); }

/* ---------- Scorecard ---------- */

table.scorecard { border-collapse: collapse; width: 100%; background: var(--weiss); font-size: 13.5px; }
table.scorecard th, table.scorecard td { border: 1px solid var(--linie); padding: 5px 6px; text-align: center; }
table.scorecard thead th { background: var(--flaeche); font-size: 11.5px; font-weight: 600; color: var(--grau);
  vertical-align: bottom; line-height: 1.25; min-width: 62px; }
table.scorecard th.standort, table.scorecard td.standort { text-align: left; white-space: nowrap; position: sticky; left: 0;
  background: var(--weiss); z-index: 1; }
table.scorecard thead th.standort { background: var(--flaeche); z-index: 2; }
table.scorecard td.score { font-weight: 700; background: var(--flaeche); }
/* Score und Vergleich bleiben beim Blättern nach rechts stehen */
table.scorecard td.score, table.scorecard th.score-kopf { position: sticky; right: 0; z-index: 1; }
table.scorecard.mit-delta td.score, table.scorecard.mit-delta th.score-kopf { right: 54px; }
table.scorecard td.delta, table.scorecard th.delta-kopf { position: sticky; right: 0; z-index: 1;
  width: 54px; min-width: 54px; background: var(--weiss); }
table.scorecard thead th.score-kopf, table.scorecard thead th.delta-kopf { background: var(--flaeche); z-index: 2; }
table.scorecard tfoot td { background: var(--flaeche); font-weight: 600; }
table.scorecard select { padding: 3px 4px; border-radius: 6px; min-width: 52px; text-align: center; }
.w1 { background: #fdeceb !important; }
.w2 { background: #fdf6e9 !important; }
.w3 { background: #eef6ed !important; }
.delta-plus { color: #2b5d2b; font-weight: 600; }
.delta-minus { color: var(--rot); font-weight: 600; }

/* ---------- Anmeldung ---------- */

body.anmeldung { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.anmeldebox { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 30px; width: 100%; max-width: 380px; }
.anmeldebox h1 { margin: 0 0 4px; font-size: 20px; color: var(--blau); }
.anmeldebox .unter { margin: 0 0 18px; color: var(--grau); font-size: 13.5px; }
.anmeldebox .knopf { width: 100%; margin-top: 18px; text-align: center; }
.anmeldebox .links { margin-top: 14px; font-size: 13px; text-align: center; }
.anmeldebox .links a { color: var(--grau); }

/* ---------- Beurteilung ---------- */

.note-skala { display: flex; gap: 6px; flex-wrap: wrap; }
.note-skala label { margin: 0; }
.kriterium-zeile { display: grid; grid-template-columns: 1fr 260px 1fr; gap: 12px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--linie); }
.kriterium-zeile:last-child { border-bottom: 0; }
.kriterium-zeile .name { font-weight: 600; }
.kriterium-zeile .beschreibung { color: var(--grau); font-size: 12.5px; }

/* ---------- Druck ---------- */

.druckseite { max-width: 820px; margin: 30px auto; background: var(--weiss); padding: 48px 56px;
  border: 1px solid var(--linie); border-radius: var(--radius); white-space: pre-wrap;
  font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.7; }
@media print {
  .kopf, .seitenkopf, .kopf-aktionen, .nicht-drucken { display: none !important; }
  body { background: #fff; }
  .druckseite { border: 0; margin: 0; padding: 0; max-width: none; }
}

@media (max-width: 720px) {
  .kopf-inhalt { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .nav-benutzer { margin-left: 0; }
  .kriterium-zeile { grid-template-columns: 1fr; }
}