/* =====================================================================
   Zentrale Design-Tokens — Lichtschmiede Büro-Tool (BAUSTEIN 8)

   EINE Quelle der Wahrheit für Farben, Abstände, Radien. Übernommen aus
   buero-prototyp.html, damit die echte Oberfläche exakt so aussieht wie der
   Prototyp. Farben/Logo hier ändern -> überall geändert. Nichts hart in
   einzelne Seiten schreiben.
   ===================================================================== */

:root {
  /* ===== Lichtschmiede Dunkeldesign — mitteltöniges Anthrazit ===== */
  --bg: #191c21;          /* App-Hintergrund */
  --bg-2: #15181c;        /* tiefere Flächen / Kopfzeile */
  --panel: #242a32;       /* Karten & Tabellenflächen */
  --panel-2: #2d343d;     /* erhöhte Flächen / Eingaben / Hover */
  --line: #3a424d;        /* Rahmen */
  --line-soft: #2b333d;   /* feine Trennlinien */
  --text: #e9ecf1;        /* Haupttext */
  --muted: #a6afbb;       /* Sekundärtext */
  --brand: #1c7d8e;       /* Sekundär: kühles Teal/Cyan */
  --brand-dark: #16697a;
  --accent: #f2861c;      /* Primär: Logo-Orange */
  --accent-dark: #d16f0c;
  --green: #46c78a;
  --green-bg: rgba(70, 199, 138, .15);
  --red: #f0787a;
  --red-bg: rgba(240, 120, 122, .16);
  --amber: #e6b45a;
  --amber-bg: rgba(230, 180, 90, .15);
  --grey-bg: #2c323b;
  --radius: 8px;

  /* Cyber-Akzente */
  --cyan: #3fd0e0;
  --cyan-soft: rgba(63, 208, 224, .45);
  --glow-o: 0 0 18px rgba(242, 134, 28, .40);
  --glow-c: 0 0 16px rgba(63, 208, 224, .32);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);

  /* Typografie & Raster */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs: 15px;
  --sp: 16px;

  /* Logo als AUSTAUSCHBARE Datei — hier den Pfad ändern, um das Logo zu
     tauschen. Keine eingebetteten Bilddaten in Seiten/Code. */
  --logo-url: url("logo.svg");
}

/* Grund-Reset & Basis, damit die Blaupause ohne Zusatz-CSS anständig aussieht. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

.logo {
  width: 40px; height: 40px;
  background: var(--logo-url) center/contain no-repeat;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.knopf {
  font: inherit;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-dark);
  background: var(--accent);
  color: #1a1204;
  font-weight: 600;
  cursor: pointer;
}
.knopf:hover { background: var(--accent-dark); color: #fff; }
.knopf.sekundaer {
  background: transparent; color: var(--text); border-color: var(--line);
}
.knopf:disabled { opacity: .5; cursor: not-allowed; }

label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: 13px; }
input, select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
}
input:focus, select:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow-c); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font-weight: 600; font-size: 13px; }

.hinweis { color: var(--amber); background: var(--amber-bg); }
.fehler  { color: var(--red);   background: var(--red-bg); }
.ok      { color: var(--green); background: var(--green-bg); }
.meldung { padding: 10px 12px; border-radius: var(--radius); margin: 10px 0; }

.marke { color: var(--accent); }
.gedämpft { color: var(--muted); }