/* Landau Media Dashboard – Grundgestaltung (dunkel).
   Markenfarbe ist das Rot aus dem Logo des Kunden (#f00004). Für Flächen mit weißer
   Schrift wird es leicht abgedunkelt, damit der Kontrast ausreicht. */
:root {
  --grund:        #12141a;
  --flaeche:      #1a1d25;
  --flaeche-hell: #242832;
  --linie:        #333846;
  --text:         #eceef2;
  --text-leise:   #9aa1b0;
  --marke:        #d40008;   /* Logo-Rot, abgedunkelt für Flächen */
  --marke-hell:   #ff4046;   /* Akzent für Links und Hover        */
  --marke-rein:   #f00004;   /* Originalton des Logos             */
  --blau:         #4ca3ff;   /* zweite Datenreihe in Diagrammen   */
  --gruen:        #34c759;
  --rot:          #ff6b6b;   /* Fehlermeldungen – heller als die Marke */
  --gelb:         #e0a72e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--marke-hell); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 600; }
code { background: var(--flaeche-hell); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ─── Grundgerüst: Seitenleiste links, Inhalt rechts ─────────────────────── */
.rahmen { display: flex; min-height: 100vh; align-items: stretch; }

.seitenleiste {
  display: flex; flex-direction: column; gap: 6px;
  width: 232px; flex: 0 0 232px; padding: 18px 12px;
  background: var(--flaeche); border-right: 1px solid var(--linie);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marke { display: block; padding: 4px 8px 16px; }
.marke:hover { text-decoration: none; }
.marke-logo { height: 40px; width: auto; display: block; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px; color: var(--text-leise); font-size: 14px;
}
.nav a:hover { background: var(--flaeche-hell); color: var(--text); text-decoration: none; }
.nav a.aktiv { background: var(--marke); color: #fff; }
.nav-icon { width: 20px; display: inline-flex; justify-content: center; font-size: 15px; }
.nav-icon img { width: 18px; height: 18px; }
.nav-gruppe {
  margin: 14px 0 4px; padding: 0 10px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-leise); opacity: .7;
}

.nav-abstand { flex: 1 1 auto; min-height: 12px; }
.nav-verwaltung { border-top: 1px solid var(--linie); padding-top: 8px; }

.seitenleiste-fuss {
  padding: 12px 10px 4px; border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 4px;
}
.benutzer { display: flex; flex-direction: column; }
.benutzer-name { font-size: 13px; color: var(--text); }
.abmelden { font-size: 13px; }

.hauptbereich { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.banner {
  background: rgba(210, 153, 34, .15); border-bottom: 1px solid var(--gelb);
  color: var(--gelb); padding: 8px 24px; font-size: 13px;
}

.inhalt { flex: 1; width: 100%; max-width: 1280px; padding: 24px 24px 48px; }
.fuss { text-align: center; color: var(--text-leise); font-size: 12px; padding: 16px; }

/* ─── Kacheln ────────────────────────────────────────────────────────────── */
.kacheln { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 20px; }
.kachel {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  padding: 18px; color: var(--text); transition: border-color .15s, transform .15s;
}
.kachel:hover { border-color: var(--marke); transform: translateY(-2px); text-decoration: none; }
.kachel-icon img { width: 40px; height: 40px; }
.kachel-icon span { font-size: 32px; }
.kachel-text h2 { margin: 0 0 6px; font-size: 17px; }
.kachel-text p { margin: 0; color: var(--text-leise); font-size: 13px; }

/* ─── Karten, Formulare, Knöpfe ──────────────────────────────────────────── */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  padding: 20px; margin: 20px 0;
}
.feld-gitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
label { display: block; font-size: 13px; color: var(--text-leise); }
label em { color: var(--gruen); font-style: normal; }
/* Alle Texteingaben gleich behandeln – auch email, search und tel. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  background: var(--grund); color: var(--text);
  border: 1px solid var(--linie); border-radius: 6px; font-size: 14px;
}
input:focus, select:focus { outline: 2px solid var(--marke); border-color: var(--marke); }

.knopf {
  display: inline-block; padding: 9px 16px; border: 0; border-radius: 6px;
  background: var(--marke); color: #fff; font-size: 14px; cursor: pointer;
}
.knopf:hover { background: var(--marke-hell); text-decoration: none; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf-zweit { background: var(--flaeche-hell); color: var(--text); border: 1px solid var(--linie); }
.knopf-zweit:hover { background: var(--linie); }
.knopf-zweit.aktiv { background: var(--marke); color: #fff; }
.knopf-klein { padding: 5px 10px; font-size: 13px; background: var(--flaeche-hell);
               color: var(--text); border: 1px solid var(--linie); }
.knopf-klein:hover { background: var(--linie); }
.knopf-reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.such-form { display: flex; gap: 8px; }
.filter-reihe { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filter-reihe label { min-width: 150px; }
.schnellwahl { margin-top: 14px; }

/* ─── Meldungen ──────────────────────────────────────────────────────────── */
.erfolg, .fehler {
  padding: 10px 14px; border-radius: 6px; font-size: 14px; margin: 12px 0;
}
.erfolg { background: rgba(52, 199, 89, .13); border: 1px solid var(--gruen); color: #8ce6a4; }
.fehler { background: rgba(255, 107, 107, .13); border: 1px solid var(--rot); color: #ffb3b3; }
.erfolg::before { content: "✓ "; font-weight: 700; }
.fehler::before { content: "⚠ "; font-weight: 700; }
.hinweis-text { color: var(--text-leise); font-size: 14px; margin: 6px 0 0; }
.status-zeile { color: var(--text-leise); font-size: 13px; }
.klein { color: var(--text-leise); font-size: 12px; }
.leer { color: var(--text-leise); text-align: center; padding: 24px; }

/* ─── Tabellen ───────────────────────────────────────────────────────────── */
.tabelle { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.tabelle th, .tabelle td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie);
}
.tabelle th { color: var(--text-leise); font-weight: 600; font-size: 13px; }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; }
.tabelle th.recht, .tabelle td.recht { text-align: center; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover { background: var(--flaeche-hell); }
.tabelle tr.inaktiv { opacity: .5; }
.detail-zeile > td { background: var(--grund); padding: 0 10px 12px; }
.tabelle-innen { margin: 0; font-size: 13px; }
.marker { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.marker-info { background: var(--flaeche-hell); color: var(--text-leise); }
.marker-warning { background: rgba(210, 153, 34, .2); color: var(--gelb); }
.marker-error { background: rgba(248, 81, 73, .2); color: var(--rot); }

/* ─── Kennzahlen und Verlauf ─────────────────────────────────────────────── */
.kennzahlen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 20px; }
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.kennzahl-wert { font-size: 22px; font-weight: 600; }
.kennzahl-wert small { font-size: 12px; font-weight: 500; color: var(--text-leise); }
.kennzahl-text { font-size: 12px; color: var(--text-leise); }
.kennzahl-text em { display: block; font-style: normal; font-size: 11px; opacity: .8; margin-top: 2px; }

.verlauf { display: flex; align-items: flex-end; gap: 3px; height: 180px; overflow-x: auto; padding-top: 8px; }
.balken { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 22px; height: 100%; }
.balken-saeule { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; justify-content: center; }
.balken-ein { width: 8px; background: var(--marke-hell); border-radius: 2px 2px 0 0; min-height: 2px; }
.balken-aus { width: 8px; background: var(--blau); border-radius: 2px 2px 0 0; min-height: 2px; }
.balken-text { font-size: 10px; color: var(--text-leise); }
.balken-art { width: 7px; border-radius: 2px 2px 0 0; min-height: 2px; }
.balken-art.art-pstn_in  { background: var(--marke); }
.balken-art.art-pstn_out { background: var(--blau); }
.balken-art.art-teams    { background: #8b5cf6; }
.balken-art.art-meeting  { background: var(--gruen); }
.legende-punkt.art-pstn_in  { background: var(--marke); }
.legende-punkt.art-pstn_out { background: var(--blau); }
.legende-punkt.art-teams    { background: #8b5cf6; }
.legende-punkt.art-meeting  { background: var(--gruen); }
.titel-icon { height: 26px; vertical-align: -4px; }
/* Ohne Kosten-Daten (Direct Routing) bleiben die Kosten-Spalten ausgeblendet. */
.ohne-kosten .spalte-kosten { display: none; }
.legende { display: flex; align-items: center; gap: 8px; color: var(--text-leise);
           font-size: 13px; margin: -4px 0 8px; }
.legende-punkt { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.punkt-ein { background: var(--marke-hell); }
.punkt-aus { background: var(--blau); }

/* ─── Anmeldeseite ───────────────────────────────────────────────────────── */
.login-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  padding: 32px; width: min(400px, 92vw); text-align: center;
}
.login-logo { height: 52px; margin-bottom: 16px; }
.login-form { display: grid; gap: 12px; text-align: left; margin-top: 16px; }
.knopf-m365 { display: block; margin: 16px 0; }
.fallback { margin-top: 20px; color: var(--text-leise); font-size: 13px; text-align: left; }
.fallback summary { cursor: pointer; }

@media (max-width: 900px) {
  /* Schmale Fenster: Seitenleiste wird zur waagerechten Leiste oben. */
  .rahmen { flex-direction: column; }
  .seitenleiste {
    width: auto; flex: none; height: auto; position: static;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
    border-right: 0; border-bottom: 1px solid var(--linie); padding: 10px 14px;
  }
  .marke { padding: 0; }
  .marke-logo { height: 30px; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .nav a { padding: 6px 10px; }
  .nav-gruppe, .nav-abstand { display: none; }
  .nav-verwaltung { border-top: 0; padding-top: 0; }
  .seitenleiste-fuss { margin: 0 0 0 auto; border-top: 0; padding: 0;
                       flex-direction: row; align-items: center; gap: 12px; }
  .benutzer .klein { display: none; }
  .inhalt { padding: 16px 12px 40px; }
}

/* Kennzahlen mit Bewertung */
.kennzahl.gut  { border-color: var(--gruen); }
.kennzahl.gut .kennzahl-wert  { color: #8ce6a4; }
.kennzahl.warn { border-color: var(--gelb); }
.kennzahl.warn .kennzahl-wert { color: var(--gelb); }

/* Wärmebild Wochentag × Stunde */
.waermebild { overflow-x: auto; }
.waerme-tabelle { min-width: 640px; }
.waerme-tabelle th { font-size: 12px; white-space: nowrap; }
.waerme-tabelle tbody th { text-align: left; color: var(--text-leise); font-weight: 600; }
.waerme-feld {
  text-align: center; font-size: 12px; min-width: 34px;
  border: 1px solid var(--grund); border-radius: 3px;
}

/* Anteilsbalken in Verteilungstabellen */
.anteil-balken { background: var(--flaeche-hell); border-radius: 4px; height: 10px;
                 min-width: 120px; overflow: hidden; }
.anteil-balken span { display: block; height: 100%; background: var(--marke-hell); }

.legende-punkt.punkt-warn { background: var(--gelb); }

/* ─── Zeitraumleiste: bleibt beim Scrollen sichtbar ──────────────────────── */
.zeitleiste { position: sticky; top: 0; z-index: 20; margin-top: 16px; }
.zeitleiste .filter-reihe { align-items: center; }
.zeitleiste-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.zeitraum-anzeige { font-size: 13px; color: var(--text-leise); }
.zeitraum-anzeige strong { color: var(--text); }
.knopf-klein.aktiv { background: var(--marke); color: #fff; border-color: var(--marke); }
.zeitleiste .status-zeile { margin-top: 8px; }

/* ─── Aufklappbare Blöcke ────────────────────────────────────────────────── */
.block {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  margin: 14px 0; overflow: hidden;
}
.block-kopf {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; background: transparent; border: 0; cursor: pointer;
  color: var(--text); font-size: 16px; font-weight: 600; text-align: left;
}
.block-kopf:hover { background: var(--flaeche-hell); }
.block-pfeil { color: var(--text-leise); transition: transform .15s; display: inline-block; }
.block.offen .block-pfeil { transform: rotate(90deg); }
.block-titel { flex: 0 0 auto; }
.block-kurz { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--text-leise); }
.block-beschreibung {
  display: none; margin: -4px 18px 14px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  color: var(--text-leise); background: var(--grund); border-left: 3px solid var(--marke); border-radius: 0 8px 8px 0;
}
.block.offen .block-beschreibung { display: block; }
.block-inhalt { display: none; padding: 0 18px 18px; }
.block.offen .block-inhalt { display: block; }
.block-ueberschrift {
  font-size: 13px; font-weight: 600; color: var(--text-leise); margin: 20px 0 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.block-inhalt .kennzahlen { margin-top: 4px; }
.spalten-zwei { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ─── Rangliste (waagerechte Balken) ─────────────────────────────────────── */
/* Ein gemeinsames Raster für alle Zeilen: nur so beginnen die Balken überall an
   derselben Stelle. Die Zeilen selbst reichen ihre Zellen per „contents" durch. */
.rangliste { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(60px, 2fr) minmax(0, auto);
             gap: 10px 14px; align-items: center; min-width: 0; }
.rang { display: contents; }
.rang-text { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-balken { background: var(--flaeche-hell); border-radius: 4px; height: 12px; overflow: hidden; }
.rang-balken span { display: block; height: 100%; background: var(--marke); border-radius: 4px; }
.rang-wert { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.rang-wert { min-width: 0; }
.rang-wert em { display: block; font-style: normal; font-size: 12px; color: var(--text-leise);
                max-width: 240px; white-space: normal; line-height: 1.3; }
/* Nebeneinanderliegende Spalten dürfen ihre Ranglisten nicht in die Nachbarspalte drücken. */
.spalten-zwei > div { min-width: 0; }

/* ─── Ringdiagramm ───────────────────────────────────────────────────────── */
.ring-block { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.ring-grafik { width: 170px; height: 170px; flex: 0 0 auto; }
.ring-zahl { fill: var(--text); font-size: 22px; font-weight: 600; text-anchor: middle; }
.ring-text { fill: var(--text-leise); font-size: 10px; text-anchor: middle; }
.ring-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ring-legende li { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ring-legende em { font-style: normal; color: var(--text-leise); font-size: 13px; }
.ring-punkt { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ─── Quotenbalken ───────────────────────────────────────────────────────── */
.quote-block { margin: 6px 0 4px; }
.quote-balken { position: relative; background: var(--flaeche-hell); border-radius: 6px; height: 16px; }
.quote-balken span { display: block; height: 100%; border-radius: 6px; background: var(--marke); }
.quote-balken.gut span { background: var(--gruen); }
.quote-balken.mittel span { background: var(--gelb); }
.quote-balken.schlecht span { background: var(--rot); }
.quote-ziel { position: absolute; top: -3px; width: 2px; height: 22px; background: var(--text-leise); }
.quote-text { font-size: 14px; color: var(--text-leise); margin-top: 6px; }
.quote-text strong { color: var(--text); font-size: 18px; }

/* ─── Dienst-Karten ──────────────────────────────────────────────────────── */
.karte-reihe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dienst-karte { background: var(--grund); border: 1px solid var(--linie); border-radius: 9px; padding: 14px; }
.dienst-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dienst-kopf span { font-size: 12px; color: var(--text-leise); }
.dienst-nummer { font-size: 13px; color: var(--marke-hell); margin: 4px 0 10px; }
.dienst-fuss { font-size: 12px; color: var(--text-leise); margin-top: 8px; }

/* ─── Overlay für vollständige Listen ────────────────────────────────────── */
#overlay {
  width: min(1000px, 92vw); max-height: 86vh; padding: 0; border: 1px solid var(--linie);
  border-radius: 12px; background: var(--flaeche); color: var(--text);
}
#overlay::backdrop { background: rgba(0, 0, 0, .6); }
.overlay-kopf {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--flaeche);
}
.overlay-kopf h2 { margin: 0; }
.overlay-werkzeuge { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.overlay-werkzeuge input { width: 220px; margin: 0; padding: 7px 10px; background: var(--grund);
  color: var(--text); border: 1px solid var(--linie); border-radius: 6px; font-size: 14px; }
.overlay-inhalt { padding: 0 20px 20px; overflow-y: auto; max-height: calc(86vh - 70px); }
.mehr-zeile { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .rang { grid-template-columns: 1fr auto; }
  .rang-balken { display: none; }
  .zeitleiste { position: static; }
}

/* ─── Tagesband: eine Zelle je Stunde ────────────────────────────────────── */
.stundenband { display: flex; gap: 3px; margin: 4px 0 6px; overflow-x: auto; }
.stunde-zelle { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column;
                align-items: center; gap: 3px; }
.stunde-feld {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 34px; border-radius: 4px; border: 1px solid var(--linie);
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text);
}
.stunde-label { font-size: 10px; color: var(--text-leise); }

/* ─── Sortierbare Tabellenköpfe ──────────────────────────────────────────── */
.tabelle th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.tabelle th.sortierbar:hover { color: var(--text); }
.tabelle th.sortiert { color: var(--marke-hell); }
.sort-pfeil { font-size: 10px; }
.tabelle-block + .mehr-zeile { margin-top: 8px; }

/* ─── Filter nach Anrufart ───────────────────────────────────────────────── */
.arten-filter { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.arten-titel { font-size: 13px; color: var(--text-leise); }
.arten-filter .art { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
                     color: var(--text); padding: 4px 10px; border-radius: 6px;
                     border: 1px solid var(--linie); cursor: pointer; }
.arten-filter .art input { margin: 0; accent-color: var(--marke); }
.arten-filter .art::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
/* Jede Anrufart hat eine feste Farbe – dieselbe in Filter, Tabellen und Diagrammen. */
.art-pstn_in::before,  .art-marke.art-pstn_in  { background: var(--marke); }
.art-pstn_out::before, .art-marke.art-pstn_out { background: var(--blau); }
.art-teams::before,    .art-marke.art-teams    { background: #8b5cf6; }
.art-meeting::before,  .art-marke.art-meeting  { background: var(--gruen); }
.art-marke { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px;
             font-weight: 600; color: #fff; white-space: nowrap; }
.art-marke.art-pstn_out { color: #0b1c33; }
.art-marke.art-meeting  { color: #06210e; }
/* Ist nur eine Art gewählt, braucht die Spalte „Art" niemand. */
.nur-eine-art .spalte-art { display: none; }

/* ─── Abteilungsfilter (aufklappbares Auswahlfeld) ───────────────────────── */
.abt-filter { position: relative; margin-left: auto; }
.abt-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, 90vw);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 10px;
}
.abt-panel-kopf { display: flex; gap: 6px; align-items: center; }
.abt-panel-kopf input { flex: 1; margin: 0; padding: 7px 10px; }
.abt-liste { max-height: 320px; overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.abt-eintrag { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px;
               font-size: 14px; color: var(--text); cursor: pointer; }
.abt-eintrag:hover { background: var(--flaeche-hell); }
.abt-eintrag input { margin: 0; accent-color: var(--marke); }
.abt-eintrag span { flex: 1; }
.abt-eintrag em { font-style: normal; font-size: 12px; color: var(--text-leise); }
.abt-panel-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                  border-top: 1px solid var(--linie); padding-top: 10px; }
#abt-knopf.aktiv { background: var(--marke); color: #fff; border-color: var(--marke); }

/* ─── Mouseover-Hinweis für Grafiken ─────────────────────────────────────── */
.tip {
  position: fixed; z-index: 50; pointer-events: none; max-width: 320px;
  background: var(--flaeche-hell); color: var(--text); border: 1px solid var(--linie);
  border-radius: 8px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.tip strong { display: block; margin-bottom: 3px; font-size: 13px; }
.tip b { font-weight: 600; color: var(--marke-hell); }
.balken, .stunde-zelle, .waerme-feld, .rang-balken, .ring-bogen, .quote-balken { cursor: help; }
.balken:hover .balken-saeule > div, .stunde-zelle:hover .stunde-feld { filter: brightness(1.25); }

/* ─── Warteschlangen ─────────────────────────────────────────────────────── */
.queue { border: 1px solid var(--linie); border-radius: 10px; padding: 16px; margin: 14px 0; background: var(--grund); }
.queue-titel { margin: 0 0 4px; font-size: 16px; }
.queue-weg { font-size: 13px; color: var(--text-leise); line-height: 1.5; }
.queue-weg strong { color: var(--text); }
.queue .kennzahlen { margin-top: 10px; }

/* ─── Anonymisierungsschalter ────────────────────────────────────────────── */
.anonym-schalter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
                   color: var(--text); padding: 4px 10px; border-radius: 6px;
                   border: 1px solid var(--linie); cursor: pointer; margin-left: auto; }
.anonym-schalter input { margin: 0; accent-color: var(--marke); }
body.anonym .anonym-schalter { background: var(--marke); border-color: var(--marke); color: #fff; }
.abt-filter { margin-left: 0; }


/* ─── Vorschau als Benutzer ────────────────────────────────────────────── */
.vorschau-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0; padding: 10px 24px; background: #fff3cd; color: #5c4400;
  border-bottom: 2px solid #f0c000; font-size: 0.95rem;
}
.vorschau-banner .knopf-hell { background: #5c4400; border-color: #5c4400; color: #fff; padding: 6px 14px; }
.vorschau-knopf { font-size: 0.8rem; padding: 3px 8px; margin-top: 4px; }
.als-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Matrix Abteilung × Warteschlange (Administration) */
.tabelle-scroll { max-height: 420px; overflow: auto; margin-bottom: 12px; border: 1px solid var(--linie); border-radius: 8px; }
.matrix thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.matrix .matrix-kopf { min-width: 200px; }
.matrix .matrix-kopf .klein { display: block; font-weight: normal; }
.matrix td.recht, .matrix th.matrix-kopf { text-align: center; }
.anonym-schalter[hidden] { display: none !important; }

/* Login: Trenner zwischen Microsoft-365-Knopf und Administrator-Formular */
.login-trenner { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--text-leise); font-size: 12px; }
.login-trenner::before, .login-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.admin-toggle { display: inline-block; color: var(--text-leise); font-size: 13px; text-decoration: underline; cursor: pointer; }
.admin-toggle:hover { color: var(--text); }

/* hidden-Attribut gewinnt immer – auch gegen display:grid/flex einzelner Bausteine */
[hidden] { display: none !important; }