/* EPR-Verpackung - gemeinsames Gestaltungssystem.
   Ab 12.09.2026 auf Basis des vom Nutzer freigegebenen Entwurfs
   (software/design_vorschlag/entwurf_stil.css) - siehe LIESMICH.md dort fuer die
   urspruengliche Vorschau. Bestehende Klassennamen (.karte, .status-pille, .aktionsleiste
   usw.) bleiben erhalten, damit nicht jede Vorlage einzeln umgeschrieben werden musste -
   nur ihre Definition wurde auf das neue Erscheinungsbild gehoben. */

:root {
  --flaeche-hintergrund: #f4f5f7;
  --flaeche-erhoben: #ffffff;
  --flaeche-sidebar: #1a2436;
  --flaeche-sidebar-aktiv: #26334a;

  --rand: #dde1e7;
  --rand-stark: #c3c9d3;

  --text-haupt: #1a2130;
  --text-schwach: #5b6472;
  --text-auf-dunkel: #e8ebf1;
  --text-auf-dunkel-schwach: #93a0b5;

  --akzent: #2954a3;
  --akzent-dunkel: #1e3f80;
  --akzent-flaeche: #eaf0fb;

  --status-kritisch: #b3261e;
  --status-kritisch-flaeche: #fbeae9;
  --status-warnung: #8a5a00;
  --status-warnung-flaeche: #fdf1dc;
  --status-ok: #1e7a42;
  --status-ok-flaeche: #e7f5ec;
  --status-neutral: #565f6d;
  --status-neutral-flaeche: #eceef1;

  --radius-klein: 6px;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(20, 26, 40, 0.06), 0 1px 1px rgba(20, 26, 40, 0.04);

  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;

  /* Rueckwaertskompatible Alias-Namen (aeltere Vorlagen nutzen diese Variablen direkt) */
  --farbe-bg: var(--flaeche-hintergrund);
  --farbe-text: var(--text-haupt);
  --farbe-rand: var(--rand);
  --farbe-primaer: var(--akzent);
  --farbe-erfolg: var(--status-ok);
  --farbe-fehler: var(--status-kritisch);
  --farbe-hinweis: var(--status-warnung);
  --farbe-karte: var(--flaeche-erhoben);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--flaeche-hintergrund);
  color: var(--text-haupt);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 700; margin-top: 28px; margin-bottom: 10px; }

/* ---------- Layout: Seitenleiste + Hauptbereich ---------- */
.app-rahmen { display: flex; min-height: 100vh; align-items: stretch; }

.seitenleiste {
  width: 236px;
  flex-shrink: 0;
  background: var(--flaeche-sidebar);
  color: var(--text-auf-dunkel);
  display: flex;
  flex-direction: column;
  padding: var(--abstand-5) 0 var(--abstand-4);
}
.marke {
  padding: 0 var(--abstand-5) var(--abstand-5);
  display: flex;
  align-items: center;
  gap: 10px;
}
.marke-symbol {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--akzent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff;
  flex-shrink: 0;
}
.marke-text { font-weight: 600; font-size: 15px; line-height: 1.2; }
.marke-text span { display: block; font-size: 11px; font-weight: 400; color: var(--text-auf-dunkel-schwach); margin-top: 1px; }

.nav-gruppe { margin-bottom: var(--abstand-5); }
.nav-gruppe-titel {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-auf-dunkel-schwach); padding: 0 var(--abstand-5);
  margin-bottom: var(--abstand-2); font-weight: 600;
}
.nav-eintrag {
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--abstand-5);
  color: var(--text-auf-dunkel-schwach);
  text-decoration: none;
  font-size: 14.5px;
  border-left: 3px solid transparent;
}
.nav-eintrag svg { flex-shrink: 0; opacity: 0.85; }
.nav-eintrag:hover { background: rgba(255,255,255,0.05); color: var(--text-auf-dunkel); }
.nav-eintrag.aktiv {
  background: var(--flaeche-sidebar-aktiv);
  color: #ffffff;
  border-left-color: var(--akzent);
  font-weight: 600;
}
.nav-eintrag .zaehler {
  margin-left: auto;
  background: rgba(255,255,255,0.12);
  color: var(--text-auf-dunkel);
  font-size: 11.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
}
.nav-eintrag.aktiv .zaehler { background: var(--akzent); color: #fff; }
.nav-eintrag .warnpunkt {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--status-kritisch);
}

.seitenleiste-fuss {
  margin-top: auto;
  padding: var(--abstand-4) var(--abstand-5) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nutzer-zeile { display: flex; align-items: center; gap: 10px; padding: var(--abstand-2) 0; }
.nutzer-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--akzent-dunkel); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}
.nutzer-name { font-size: 13.5px; font-weight: 600; color: var(--text-auf-dunkel); }
.nutzer-rolle { font-size: 11.5px; color: var(--text-auf-dunkel-schwach); }
.abmelden-link { display: block; font-size: 13px; color: var(--text-auf-dunkel-schwach); text-decoration: none; padding: 6px 0 2px; }
.abmelden-link:hover { color: var(--text-auf-dunkel); }

.hauptbereich { flex: 1; min-width: 0; }
.inhalt { padding: var(--abstand-6); max-width: 1180px; }

/* Seiten ohne Seitenleiste (Login/Ersteinrichtung) */
body.ohne-seitenleiste .inhalt { max-width: 480px; margin: 60px auto; }

/* ---------- Bausteine ---------- */
.karte {
  background: var(--flaeche-erhoben);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--abstand-4) var(--abstand-5);
  margin-bottom: var(--abstand-5);
}

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--flaeche-erhoben);
}
th, td {
  text-align: left;
  padding: 11px var(--abstand-4);
  border-bottom: 1px solid var(--rand);
  font-size: 14.5px;
}
th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-schwach); font-weight: 600;
  background: #fafbfc;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8f9fb; }

a.button, button, input[type=submit] {
  display: inline-block;
  background: var(--akzent);
  color: white;
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius-klein);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
a.button:hover, button:hover, input[type=submit]:hover { background: var(--akzent-dunkel); }
a.button.sekundaer, button.sekundaer {
  background: var(--flaeche-erhoben); color: var(--text-haupt); border: 1px solid var(--rand-stark);
}
a.button.sekundaer:hover, button.sekundaer:hover { background: #f0f1f4; }
a.button.gefahr, button.gefahr { background: var(--status-kritisch); }
a.button.gefahr:hover { background: #8f1e18; }

form.inline { display: inline; }
label { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-schwach); }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=password], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  font-size: 14.5px;
  margin-top: 4px;
  font-family: inherit;
  color: var(--text-haupt);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
textarea { min-height: 60px; }
.formzeile { max-width: 480px; }

.flash-liste { margin-bottom: var(--abstand-5); }
.flash { padding: 11px 15px; border-radius: var(--radius-klein); margin-bottom: 8px; font-size: 14px; }
.flash-erfolg { background: var(--status-ok-flaeche); color: var(--status-ok); border: 1px solid #b8e0c4; }
.flash-fehler { background: var(--status-kritisch-flaeche); color: var(--status-kritisch); border: 1px solid #f0bcbc; }
.flash-hinweis { background: var(--status-warnung-flaeche); color: var(--status-warnung); border: 1px solid #f0dca6; }

.status-pille {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.status-gruen { background: var(--status-ok-flaeche); color: var(--status-ok); }
.status-gelb { background: var(--status-warnung-flaeche); color: var(--status-warnung); }
.status-rot { background: var(--status-kritisch-flaeche); color: var(--status-kritisch); }
.status-grau { background: var(--status-neutral-flaeche); color: var(--status-neutral); }

.testdaten-markierung { background: #ffe9b8; color: #6b4a00; padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 700; margin-left: 6px; }

/* ---------- 'Auf einen Blick' Checkliste (Kundenakte) ---------- */
.checkliste { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 4px 0 14px; }
.checkliste-zeile { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.checkliste-zeile b { font-weight: 700; }
.aktion-erforderlich {
  background: var(--status-kritisch-flaeche); color: var(--status-kritisch);
  border: 1px solid #f0bcbc; border-radius: var(--radius-klein);
  padding: 10px 15px; font-size: 13.5px; font-weight: 700; margin-bottom: var(--abstand-4);
}
.hinweisbox { background: var(--akzent-flaeche); border: 1px solid #c9d9f0; padding: 11px 15px; border-radius: var(--radius-klein); font-size: 13.5px; margin-bottom: var(--abstand-4); }
.material-zeile { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 12px; margin-bottom: 10px; background: #fbfcfd; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.klein { font-size: 12.5px; color: var(--text-schwach); }
.aktionsleiste { display: flex; gap: var(--abstand-2); margin: var(--abstand-3) 0; flex-wrap: wrap; }

/* ---------- Dashboard-spezifische Bausteine ---------- */
.kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--abstand-5);
  flex-wrap: wrap; gap: var(--abstand-3);
}
.kopfzeile .datum-heute { font-size: 13.5px; color: var(--text-schwach); margin-top: 3px; }
.kopfzeile-aktionen { display: flex; gap: var(--abstand-3); flex-wrap: wrap; }

.warnleiste {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--status-kritisch-flaeche);
  border: 1px solid #f2c6c2;
  color: var(--status-kritisch);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: var(--abstand-5);
  font-size: 14.5px;
}
.warnleiste b { font-weight: 700; }
.warnleiste a { color: var(--status-kritisch); font-weight: 700; text-decoration: underline; }
.warnleiste svg { flex-shrink: 0; margin-top: 1px; }

.kennzahlen {
  display: flex;
  background: var(--flaeche-erhoben);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: var(--abstand-5);
  overflow: hidden;
  flex-wrap: wrap;
}
.kennzahl { flex: 1; min-width: 160px; padding: 18px 22px; border-right: 1px solid var(--rand); }
.kennzahl:last-child { border-right: none; }
.kennzahl-wert { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.kennzahl-wert.ist-kritisch { color: var(--status-kritisch); }
.kennzahl-wert.ist-warnung { color: var(--status-warnung); }
.kennzahl-titel { font-size: 13px; color: var(--text-schwach); margin-top: 6px; font-weight: 500; }

.spalten-2 { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: var(--abstand-5); align-items: start; }
@media (max-width: 860px) { .spalten-2 { grid-template-columns: 1fr; } }

.baustein {
  background: var(--flaeche-erhoben);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: var(--abstand-5);
}
.baustein-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--abstand-4) var(--abstand-5);
  border-bottom: 1px solid var(--rand);
}
.baustein-kopf h2 { font-size: 15.5px; margin: 0; font-weight: 700; }
.baustein-kopf a.alle-anzeigen { font-size: 13px; color: var(--akzent); text-decoration: none; font-weight: 600; }
.baustein table th:first-child, .baustein table td:first-child { padding-left: var(--abstand-5); }
.baustein table th:last-child, .baustein table td:last-child { padding-right: var(--abstand-5); white-space: nowrap; }
.baustein table { box-shadow: none; border: none; }

.zeile-titel { font-weight: 600; }
.zeile-nebentext { font-size: 12.5px; color: var(--text-schwach); margin-top: 2px; }
.kunde-link { color: var(--akzent); text-decoration: none; font-weight: 500; }
.kunde-link:hover { text-decoration: underline; }

.abzeichen {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.abzeichen.kritisch { background: var(--status-kritisch-flaeche); color: var(--status-kritisch); }
.abzeichen.warnung { background: var(--status-warnung-flaeche); color: var(--status-warnung); }
.abzeichen.ok { background: var(--status-ok-flaeche); color: var(--status-ok); }
.abzeichen.neutral { background: var(--status-neutral-flaeche); color: var(--status-neutral); }
.abzeichen .punkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.vorgangs-liste { list-style: none; margin: 0; padding: 0; }
.vorgangs-eintrag {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px var(--abstand-5);
  border-bottom: 1px solid var(--rand);
}
.vorgangs-eintrag:last-child { border-bottom: none; }
.vorgangs-firma { font-weight: 600; font-size: 14.5px; }
.vorgangs-firma a { color: inherit; text-decoration: none; }
.vorgangs-firma a:hover { color: var(--akzent); }
.vorgangs-grund { font-size: 13px; color: var(--text-schwach); margin-top: 3px; }

.sicherungs-leiste { display: flex; gap: var(--abstand-6); flex-wrap: wrap; padding: var(--abstand-4) var(--abstand-5); }
.sicherungs-punkt { display: flex; align-items: flex-start; gap: 10px; min-width: 220px; }
.sicherungs-icon { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sicherungs-icon.ok { background: var(--status-ok-flaeche); color: var(--status-ok); }
.sicherungs-icon.warnung { background: var(--status-warnung-flaeche); color: var(--status-warnung); }
.sicherungs-icon.neutral { background: var(--status-neutral-flaeche); color: var(--status-neutral); }
.sicherungs-titel { font-size: 13.5px; font-weight: 700; }
.sicherungs-text { font-size: 12.5px; color: var(--text-schwach); margin-top: 2px; }