/* Gemeinsame Farbtabelle und Kopfleiste aller Dashboard-Seiten.
   Angelegt am 24.08.2026. Vorher baute jede Seite ihren Kopf selbst, mit zwei
   verschiedenen Namensschemata und zwei verschiedenen Themes; die Bauakte und
   die Nachunternehmerliste waren hell, die uebrigen dunkel.

   Die alten Namen beider Schemata stehen hier als Aliase auf denselben Werten.
   Dadurch laeuft das vorhandene Seiten-CSS unveraendert weiter - eine Seite
   muss nur ihren eigenen :root-Block loeschen und diese Datei einbinden. */

:root {
  /* Grundtoene - Schema der Startseite ist die Vorlage */
  --grund:#0d1437;   --bg:#0d1437;
  --kachel:#141d44;  --card:#141d44;
  --zwischen:#1b2550;
  --rand:#222f63;    --line:#222f63;
  --line2:#2f3f7d;
  --text:#e9edf8;    --ink:#e9edf8;
  --dim:#8e9ac4;     --ink2:#8e9ac4;
  /* #6b7d74 stand hier bis zum 24.08.2026 - ein gruenstichiger Ton, der
     zwischen lauter Marinetoenen wie ein Versehen wirkt und auf der Kachel
     nur 3,73:1 erreichte. #8590b0 haelt 4,6:1 auf jeder Flaeche und bleibt
     deutlich gedaempfter als --dim. */
  --stumm:#8590b0;   --ink3:#8590b0;
  --signal:#5c9dff;  --akzent:#5c9dff;

  /* Bedeutungsfarben */
  --rot:#ff6b7a; --gruen:#5ddba4; --gelb:#e0a038; --lila:#a98cff;

  /* Flaechen, die vorher fest verdrahtet waren */
  --hover:#243066;          /* Knopf unter dem Zeiger */
  --zeile-hover:#182148;    /* Tabellenzeile unter dem Zeiger */
  --zeile-aktiv:#24305e;    /* ausgewaehlte Tabellenzeile */
  --warn-flaeche:#3a2c12; --warn-rand:#6b5220; --warn-text:#f0cf94;
  --rot-flaeche:#3a2028;  --rot-rand:#6b3340;  --rot-text:#ffb3bb;
  --schleier:rgba(6,10,28,.62);
}

/* Alle Klassen dieser Datei tragen das Praefix kl-. Ohne das kollidierte
   .marke der Leiste am 24.08.2026 mit der gleichnamigen Zaehlmarke der
   Startseite: deren blauer Hintergrund schlug durch, und der Firmenname
   stand hell auf Blau. Seiten-CSS und Leisten-CSS teilen sich einen
   Namensraum - Praefix statt Verlassen auf Spezifitaet. */

/* --- Kopfleiste ------------------------------------------------------------
   Steht auf jeder Seite ganz oben und sieht ueberall gleich aus. Die
   seiteneigenen Werkzeuge bleiben im Kopf der Seite darunter. */
.kopfleiste {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:0 14px; background:var(--grund);
  border-bottom:1px solid var(--rand);
  position:sticky; top:0; z-index:60;
  font:14px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
}
.kopfleiste .kl-firma {
  font-size:13px; font-weight:600; color:var(--text);
  padding:11px 14px 11px 4px; margin-right:6px; letter-spacing:.2px;
  white-space:nowrap;
}
.kopfleiste .kl-firma span { font-weight:400; color:var(--stumm); }
.kopfleiste a {
  color:var(--dim); text-decoration:none; font-size:13px;
  padding:12px 13px; border-bottom:2px solid transparent; white-space:nowrap;
}
.kopfleiste a:hover { color:var(--text); background:var(--zwischen); }
.kopfleiste a[aria-current="page"] {
  color:var(--text); border-bottom-color:var(--signal);
}
.kopfleiste .kl-zahl {
  display:inline-block; margin-left:6px; min-width:17px; padding:1px 5px;
  border-radius:9px; background:var(--signal); color:var(--grund);
  font-size:11px; font-weight:600; text-align:center;
}
.kopfleiste .kl-rechts {
  margin-left:auto; padding-right:4px;
  display:flex; align-items:center; gap:2px;
}
/* Wer angemeldet ist. Steht gedaempft da - die Angabe soll auffindbar sein,
   aber nicht mit den Bereichen um Aufmerksamkeit ringen. */
.kopfleiste .kl-wer {
  font-size:12.5px; color:var(--stumm); white-space:nowrap; padding:0 6px;
}

@media (max-width:820px) {
  /* Sechs Punkte passen nicht in eine Handybreite. Umbrechen machte die
     klebende Leiste 77 px hoch und nahm dem Inhalt ein Zehntel des Schirms;
     seitlich schiebbar bleibt sie einzeilig. Die Leiste scrollt nur, wenn
     sie muss - auf dem Tablet steht weiter alles nebeneinander. */
  .kopfleiste { padding:0 8px; flex-wrap:nowrap; overflow-x:auto;
                scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .kopfleiste::-webkit-scrollbar { display:none; }
  .kopfleiste .kl-firma { display:none; }
  /* Der Name des Angemeldeten weicht auf dem Handy ebenfalls - der Knopf zum
     Abmelden bleibt. */
  .kopfleiste .kl-wer { display:none; }
  .kopfleiste .kl-rechts { margin-left:0; }
  /* 12,5 px Schrift plus 2x16 px = 44,5 px hoch - die uebliche Mindestgroesse
     fuer einen Fingertipp. Vorher waren es 36 px. */
  .kopfleiste a { padding:16px 11px; font-size:12.5px; }
}