/* =====================================================================
   FACILITY-PORTAL: DESIGN
   Ganz oben stehen die Design-Einstellungen (Farben, Schrift, Formen).
   Wer das Aussehen ändern will, ändert zuerst nur diesen Block.
   Danach: Seite im Browser neu laden (Cmd + Shift + R).
   ===================================================================== */

:root {
  /* ---- Farben ---- */
  --farbe-akzent: #1f4e79;           /* Kopfzeile, Knöpfe, Links */
  --farbe-akzent-text: #ffffff;      /* Schrift auf der Akzentfarbe */
  --farbe-akzent-hell: #e0eaf3;      /* Status-Etiketten */
  --farbe-tabellenkopf: #eaf0f6;     /* Kopfzeile von Tabellen */
  --farbe-hintergrund: #f2f4f7;      /* Seitenhintergrund */
  --farbe-flaeche: #ffffff;          /* Karten, Tabellen, Eingabefelder */
  --farbe-text: #101828;
  --farbe-text-leise: #475467;       /* Hinweise, Beschriftungen */
  --farbe-rand: #d0d5dd;
  --farbe-erfolg: #067647;
  --farbe-erfolg-flaeche: #ecfdf3;
  --farbe-fehler: #b42318;
  --farbe-fehler-flaeche: #fef3f2;
  --farbe-warnung: #b54708;
  --farbe-warnung-flaeche: #fffaeb;

  /* ---- Schrift ----
     Wichtig (Datenschutz): Schriften nie von Google Fonts o. ä. nachladen,
     sondern als Datei im Projekt mitliefern (@font-face), sonst werden
     Besucherdaten an Dritte übertragen. */
  --schrift: -apple-system, system-ui, "Segoe UI", sans-serif;
  --schriftgroesse: 16px;

  /* ---- Formen ---- */
  --radius-karte: 12px;
  --radius-feld: 8px;
  --radius-knopf: 10px;

  /* ---- Breiten ---- */
  --breite-schmal: 720px;            /* Hausmeister-Seiten (Smartphone) */
  --breite-breit: 1100px;            /* Tabellen und Berichte */

  /* ---- Logo ---- */
  --logo-hoehe: 32px;
}

/* =====================================================================
   AB HIER: Aufbau der Seiten. Normalerweise nur mit Wissen ändern.
   ===================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--schriftgroesse);
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
}

/* ---- Kopfzeile ---- */
header {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
header strong { font-size: 17px; }
header form { margin: 0; }
header button {
  background: transparent;
  color: var(--farbe-akzent-text);
  border: 1px solid var(--farbe-akzent-text);
  border-radius: var(--radius-feld);
  padding: 8px 12px;
  font-size: 14px;
}
header nav a { color: var(--farbe-akzent-text); margin-right: 14px; text-decoration: none; }
.kopf-name { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.logo { height: var(--logo-hoehe); width: auto; display: block; }

/* ---- Seitenbereich ---- */
main { padding: 16px; max-width: var(--breite-schmal); margin: 0 auto; }
main.breit { max-width: var(--breite-breit); }
h1 { font-size: 22px; margin: 4px 0 12px; }
a { color: var(--farbe-akzent); }

/* ---- Karten und Hinweise ---- */
.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-karte);
  padding: 14px;
  margin-bottom: 12px;
}
a.karte { display: block; text-decoration: none; color: inherit; }
.klein { font-size: 14px; color: var(--farbe-text-leise); }
.marke {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent);
  font-size: 13px;
}

/* ---- Tabellen ---- */
.tabelle { overflow-x: auto; margin-bottom: 12px; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
}
th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--farbe-rand);
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}
th { background: var(--farbe-tabellenkopf); }
.zahl { text-align: right; white-space: nowrap; }
tr.abweichung td { background: var(--farbe-warnung-flaeche); }
progress { width: 100px; }

/* ---- Formulare ---- */
label { display: block; margin-top: 12px; font-size: 14px; color: var(--farbe-text-leise); }
input, select, textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}
label.haken {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  color: var(--farbe-text);
  padding: 10px 0 0;
}
label.haken input { width: 28px; min-height: 28px; height: 28px; margin: 0; }
.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.fehler { color: var(--farbe-fehler); font-size: 14px; }

.knopf {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--radius-knopf);
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  font-size: 18px;
  font-weight: 600;
}

/* ---- Meldungen ---- */
.meldung { padding: 12px 14px; border-radius: var(--radius-knopf); margin-bottom: 12px; border: 1px solid; }
.meldung.success { background: var(--farbe-erfolg-flaeche); border-color: var(--farbe-erfolg); color: var(--farbe-erfolg); }
.meldung.error { background: var(--farbe-fehler-flaeche); border-color: var(--farbe-fehler); color: var(--farbe-fehler); }
.meldung.warning { background: var(--farbe-warnung-flaeche); border-color: var(--farbe-warnung); color: var(--farbe-warnung); }