/*
  Gestaltung des Regiodocs Hub. Nur var(--rd-…) aus tokens.css – hier steht kein Farbwert.
  Variante B: dunkle Seitenleiste, helle Arbeitsfläche; unter 768 px untere Tab-Leiste.
*/

html, body {
  margin: 0;
  background: var(--rd-flaeche-hell);
  color: var(--rd-text);
  font-family: var(--rd-schrift);
  font-size: var(--rd-schrift-groesse);
  line-height: var(--rd-zeilenhoehe);
  font-feature-settings: "tnum" 1, "cv11" 1;
}

a { color: var(--rd-blau); }
a:hover { color: var(--rd-blau-hover); }
h1, h2, h3 { color: var(--rd-text); }
code { font-size: 0.92em; }

:focus-visible { outline: none; box-shadow: var(--rd-fokus); border-radius: var(--rd-rundung-klein); }

.hub-nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hub-sprunglink {
  position: absolute; left: -9999px; top: var(--rd-abstand-2);
  background: var(--rd-flaeche); color: var(--rd-text); padding: var(--rd-abstand-2) var(--rd-abstand-3);
  border-radius: var(--rd-rundung-klein); z-index: 2000;
}
.hub-sprunglink:focus { left: var(--rd-abstand-2); }

/* ---------- Rahmen ---------- */
.hub-rahmen { display: flex; min-height: 100vh; }
.hub-hauptbereich { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hub-inhalt {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  padding: var(--rd-abstand-6) var(--rd-abstand-6) var(--rd-abstand-8);
  display: flex; flex-direction: column; gap: var(--rd-abstand-4);
  max-width: 1440px; width: 100%;
}
.hub-inhalt:focus { box-shadow: none; }

/* ---------- Seitenleiste (dunkel) ---------- */
.hub-seitenleiste {
  flex: 0 0 var(--rd-seitenleiste-breite); width: var(--rd-seitenleiste-breite);
  background: var(--rd-dunkel); color: var(--rd-dunkel-text);
  display: flex; flex-direction: column; gap: var(--rd-abstand-1);
  padding: var(--rd-abstand-5) var(--rd-abstand-3); box-sizing: border-box;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.hub-marke {
  display: flex; align-items: center; gap: var(--rd-abstand-3);
  padding: var(--rd-abstand-1) var(--rd-abstand-2) var(--rd-abstand-5);
  text-decoration: none; color: var(--rd-text-hell);
}
.hub-marke:hover { color: var(--rd-text-hell); }
.hub-signet {
  width: 40px; height: 40px; border-radius: var(--rd-rundung-gross); background: var(--rd-weiss);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.hub-signet img { width: 30px; height: 30px; object-fit: contain; }
.hub-marke-text { font-weight: var(--rd-gewicht-fett); font-size: 16px; line-height: 1.15; }
.hub-marke-akzent { color: var(--rd-gruen-haus); }
.hub-marke-text small { display: block; font-weight: var(--rd-gewicht-mittel); font-size: var(--rd-schrift-klein); color: var(--rd-dunkel-text-gedaempft); }

.hub-menue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rd-abstand-1); }
.hub-menuepunkt {
  display: flex; align-items: center; gap: var(--rd-abstand-3);
  padding: 10px var(--rd-abstand-3); border-radius: var(--rd-rundung);
  color: var(--rd-dunkel-text); text-decoration: none; font-weight: var(--rd-gewicht-mittel);
}
.hub-menuepunkt:hover { background: var(--rd-dunkel-hover); color: var(--rd-text-hell); }
.hub-menuepunkt.aktiv { background: var(--rd-gruen-ui); color: var(--rd-text-hell); font-weight: var(--rd-gewicht-halbfett); }
.hub-menuepunkt-titel { flex: 1 1 auto; }
.hub-vorbereitung-marke {
  font-size: 10px; font-weight: var(--rd-gewicht-halbfett); letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: var(--rd-rundung-voll);
  background: var(--rd-dunkel-chip); color: var(--rd-dunkel-text-gedaempft); white-space: nowrap;
}
.hub-menuepunkt-vorbereitung { color: var(--rd-dunkel-text-gedaempft); }
.hub-menuepunkt.aktiv .hub-vorbereitung-marke { color: var(--rd-text-hell); }

.hub-benutzerblock {
  margin-top: auto; display: flex; align-items: center; gap: var(--rd-abstand-2);
  padding: var(--rd-abstand-3) var(--rd-abstand-2) 0; border-top: 1px solid var(--rd-dunkel-trenner); color: var(--rd-text-hell);
}
.hub-benutzer-text { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.hub-benutzer-name { font-weight: var(--rd-gewicht-halbfett); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-benutzer-rolle { font-size: var(--rd-schrift-klein); color: var(--rd-dunkel-text-gedaempft); }
.hub-abmelden-form { margin: 0; }
.hub-abmelden {
  background: transparent; border: 0; color: var(--rd-dunkel-text); cursor: pointer;
  padding: var(--rd-abstand-2); border-radius: var(--rd-rundung-klein); display: flex;
}
.hub-abmelden:hover { background: var(--rd-dunkel-hover); color: var(--rd-text-hell); }

.hub-avatar {
  width: 34px; height: 34px; border-radius: var(--rd-rundung-voll); flex: none;
  background: var(--rd-gruen-ui); color: var(--rd-text-hell);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--rd-gewicht-fett); font-size: 13px; text-decoration: none;
}
.hub-avatar:hover { color: var(--rd-text-hell); }
.hub-avatar-hell { background: var(--rd-gruen-hell); color: var(--rd-gruen-text); }
.hub-avatar-hell:hover { color: var(--rd-gruen-text); }
.hub-avatar-gross { width: 48px; height: 48px; font-size: 16px; }

/* ---------- Kopf und untere Leiste am Handy ---------- */
.hub-kopf-handy {
  display: none; align-items: center; gap: var(--rd-abstand-3);
  padding: var(--rd-abstand-3) var(--rd-abstand-4); background: var(--rd-flaeche); border-bottom: 1px solid var(--rd-rahmen);
}
.hub-kopf-signet { width: 32px; height: 32px; object-fit: contain; }
.hub-kopf-text { flex: 1 1 auto; min-width: 0; }
.hub-kopf-name { font-weight: var(--rd-gewicht-fett); font-size: 17px; line-height: 1.1; }

.hub-untere-leiste {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  height: var(--rd-untere-leiste-hoehe); background: var(--rd-flaeche); border-top: 1px solid var(--rd-rahmen);
  padding-bottom: env(safe-area-inset-bottom);
}
.hub-tab {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--rd-text-gedaempft); text-decoration: none; font-size: 11px; font-weight: var(--rd-gewicht-mittel);
}
.hub-tab:hover { color: var(--rd-text); }
.hub-tab.aktiv { color: var(--rd-gruen-text); font-weight: var(--rd-gewicht-fett); }
/* „Mehr“ ist ein Knopf in der Leiste: wie die Tabs aussehen (Funktionstest Runde 1, F-MA-2/F-AD-4). */
button.hub-tab { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

/* Blatt „Mehr“: vollständige Menüliste der Rolle, von unten über der Leiste; nur am Handy sichtbar. */
.hub-mehr-hintergrund, .hub-mehr-blatt { display: none; }
.hub-mehr-hintergrund { position: fixed; inset: 0; z-index: 1300; background: var(--rd-ueberlagerung); }
.hub-mehr-blatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1310; max-height: 85vh; overflow-y: auto;
  background: var(--rd-flaeche); color: var(--rd-text); border-top-left-radius: var(--rd-rundung-gross); border-top-right-radius: var(--rd-rundung-gross);
  box-shadow: var(--rd-schatten-2); padding: var(--rd-abstand-2) 0 calc(var(--rd-abstand-4) + env(safe-area-inset-bottom));
}
.hub-mehr-kopf { display: flex; align-items: center; gap: var(--rd-abstand-3); padding: var(--rd-abstand-2) var(--rd-abstand-4); border-bottom: 1px solid var(--rd-rahmen-leicht); }
.hub-mehr-zurueck {
  display: inline-flex; align-items: center; gap: var(--rd-abstand-1); min-height: 44px; padding: 0 var(--rd-abstand-2);
  background: none; border: 0; border-radius: var(--rd-rundung-klein); color: var(--rd-text); font: inherit; font-weight: var(--rd-gewicht-halbfett); cursor: pointer;
}
.hub-mehr-zurueck:hover { background: var(--rd-flaeche-hover); }
.hub-mehr-titel { margin: 0; font-size: var(--rd-schrift-ueberschrift); font-weight: var(--rd-gewicht-fett); }
.hub-mehr-liste { list-style: none; margin: 0; padding: var(--rd-abstand-1) 0; }
.hub-mehr-punkt {
  display: flex; align-items: center; gap: var(--rd-abstand-3); min-height: 48px; padding: 0 var(--rd-abstand-4);
  color: var(--rd-text); text-decoration: none; font-size: var(--rd-schrift-mittel);
}
.hub-mehr-punkt:hover { background: var(--rd-flaeche-hover); color: var(--rd-text); }
.hub-mehr-punkt.aktiv { background: var(--rd-flaeche-auswahl); color: var(--rd-gruen-text); font-weight: var(--rd-gewicht-halbfett); box-shadow: inset 4px 0 0 var(--rd-gruen-haus); }
.hub-mehr-punkt-titel { flex: 1 1 auto; }
.hub-mehr-marke { font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); }

.hub-entwicklungsbanner {
  display: flex; align-items: center; gap: var(--rd-abstand-2);
  padding: var(--rd-abstand-2) var(--rd-abstand-6); background: var(--rd-amber-hell); color: var(--rd-amber-text);
  border-bottom: 2px solid var(--rd-amber); font-size: 13px;
}

@media (max-width: 767.98px) {
  .hub-seitenleiste { display: none; }
  .hub-kopf-handy { display: flex; }
  .hub-untere-leiste { display: flex; }
  .hub-mehr-hintergrund, .hub-mehr-blatt { display: block; }
  .hub-inhalt { padding: var(--rd-abstand-4) var(--rd-abstand-4) calc(var(--rd-untere-leiste-hoehe) + var(--rd-abstand-6)); }
  .hub-entwicklungsbanner { padding: var(--rd-abstand-2) var(--rd-abstand-4); }
}

/* ---------- Seitenkopf, Karten, Raster ---------- */
.hub-seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-abstand-3); }
.hub-seitenkopf h1 { margin: 0; font-size: var(--rd-schrift-titel); font-weight: var(--rd-gewicht-fett); line-height: 1.2; }
.hub-seitenkopf-text { flex: 1 1 260px; min-width: 0; }
.hub-seitenkopf-aktionen { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; }

.hub-karte {
  background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-gross);
  box-shadow: var(--rd-schatten-1); min-width: 0;
}
.hub-karte-innen { padding: var(--rd-abstand-4) var(--rd-abstand-5); }
.hub-karte-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-abstand-3);
  padding: var(--rd-abstand-3) var(--rd-abstand-4); border-bottom: 1px solid var(--rd-rahmen);
}
.hub-karte-kopf h2 { margin: 0; font-size: var(--rd-schrift-mittel); font-weight: var(--rd-gewicht-halbfett); }
.hub-karte-kopf-gross h2 { font-size: 18px; font-weight: var(--rd-gewicht-fett); }
.hub-karte-fuss {
  display: flex; flex-wrap: wrap; gap: var(--rd-abstand-4);
  padding: var(--rd-abstand-3) var(--rd-abstand-5); border-top: 1px solid var(--rd-rahmen-leicht);
  color: var(--rd-text-gedaempft); font-size: var(--rd-schrift-klein);
}
.hub-abstandhalter { flex: 1 1 auto; }

.hub-zweispaltig { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-5); align-items: flex-start; }
.hub-spalte-schmal { flex: 1 1 440px; min-width: 0; overflow: hidden; }
.hub-spalte-breit { flex: 2 1 560px; min-width: 0; }
.hub-stufe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--rd-abstand-2); align-items: center; }
.hub-stapel { display: flex; flex-direction: column; gap: var(--rd-abstand-4); }
.hub-raster-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--rd-abstand-5); }

.hub-abschnitt { margin: 0 0 var(--rd-abstand-2); font-size: var(--rd-schrift-mittel); font-weight: var(--rd-gewicht-halbfett); }
.hub-gedaempft { color: var(--rd-text-gedaempft); }
.hub-klein { font-size: var(--rd-schrift-klein); }
.hub-fett { font-weight: var(--rd-gewicht-halbfett); }
.hub-rechts { text-align: right; }
.hub-zeile { display: flex; align-items: center; gap: var(--rd-abstand-3); margin-bottom: var(--rd-abstand-4); }
.hub-liste { margin: 0 0 var(--rd-abstand-3); padding-left: 1.2em; }
.hub-liste li { margin: var(--rd-abstand-1) 0; }
.hub-link { font-weight: var(--rd-gewicht-halbfett); text-decoration: none; }
.hub-laden { color: var(--rd-text-gedaempft); }
.hub-flaeche-hell {
  background: var(--rd-flaeche-hell); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-gross);
  padding: var(--rd-abstand-3) var(--rd-abstand-4);
}
.hub-volle-breite { flex: 1 1 100%; }

/* ---------- Formulare ---------- */
.hub-formular-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--rd-abstand-3); align-items: start; }
.hub-formular-zeile { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; }
.hub-formular-zeile > .mud-input-control { flex: 1 1 160px; min-width: 0; }
.hub-knopfzeile { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; margin-top: var(--rd-abstand-3); }
.hub-feldname { display: block; font-size: var(--rd-schrift-klein); font-weight: var(--rd-gewicht-halbfett); color: var(--rd-text-gedaempft); margin-bottom: var(--rd-abstand-1); }
.hub-scope { border: 1px solid var(--rd-rahmen-leicht); border-radius: var(--rd-rundung); padding: var(--rd-abstand-2) var(--rd-abstand-3); margin: var(--rd-abstand-3) 0 0; }
.hub-alert { margin: var(--rd-abstand-2) 0; }

/* Knöpfe für Links und statische Seiten (interaktive Seiten nutzen MudButton). */
.hub-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rd-abstand-2);
  min-height: 40px; padding: 0 var(--rd-abstand-4); border-radius: var(--rd-rundung);
  border: 1px solid var(--rd-rahmen); background: var(--rd-flaeche); color: var(--rd-text);
  font: inherit; font-weight: var(--rd-gewicht-halbfett); text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.hub-knopf:hover { background: var(--rd-flaeche-hell); color: var(--rd-text); }
.hub-knopf-primaer { background: var(--rd-gruen-ui); border-color: var(--rd-gruen-ui); color: var(--rd-text-hell); }
.hub-knopf-primaer:hover { background: var(--rd-gruen-ui-dunkel); color: var(--rd-text-hell); }
.hub-knopf-klein { min-height: 34px; padding: 0 var(--rd-abstand-3); font-size: 13px; border-radius: var(--rd-rundung-klein); }
.hub-knopf-breit { width: 100%; margin-top: var(--rd-abstand-3); }
.hub-auswahl {
  width: 100%; min-height: 44px; font: inherit; color: var(--rd-text); background: var(--rd-flaeche);
  border: 1px solid var(--rd-rahmen-eingabe); border-radius: var(--rd-rundung); padding: 0 var(--rd-abstand-3); box-sizing: border-box;
}

.hub-meldung {
  border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: var(--rd-abstand-3) var(--rd-abstand-4);
  background: var(--rd-flaeche-hell); color: var(--rd-text); margin: var(--rd-abstand-3) 0;
}
.hub-meldung-fehler { background: var(--rd-ampel-rot-hell); border-color: var(--rd-ampel-rot); color: var(--rd-ampel-rot-text); }

/* ---------- Chips und Kennungen (nie nur Farbe: immer Text/Symbol) ---------- */
.hub-chip {
  display: inline-flex; align-items: center; gap: var(--rd-abstand-1);
  padding: 2px 10px; border-radius: var(--rd-rundung-voll);
  font-size: var(--rd-schrift-klein); font-weight: var(--rd-gewicht-halbfett); white-space: nowrap; line-height: 1.5;
  border: 1px solid transparent;
}
.hub-chip-gruen { background: var(--rd-gruen-hell); color: var(--rd-gruen-text); }
.hub-chip-grau { background: var(--rd-rahmen-leicht); color: var(--rd-text-gedaempft); }
.hub-chip-amber { background: var(--rd-amber-hell); color: var(--rd-amber-text); border-color: var(--rd-amber); }
.hub-chip-heute { background: var(--rd-gruen-ui); color: var(--rd-text-hell); }
.hub-chip-knopf { cursor: pointer; font-family: inherit; }
.hub-chip-knopf:hover { border-color: var(--rd-gruen-text); }
.hub-gedaempft-auf-chip { font-weight: var(--rd-gewicht-normal); }
.hub-chipzeile { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; }
.hub-fremd .mud-icon-root { font-size: 16px; }

.hub-gruppe { min-width: 2.6em; justify-content: center; }
.hub-gruppe-arzt { background: var(--rd-gruppe-arzt); color: var(--rd-gruppe-arzt-text); }
.hub-gruppe-pa { background: var(--rd-gruppe-pa); color: var(--rd-gruppe-pa-text); }
.hub-gruppe-mfa { background: var(--rd-gruppe-mfa); color: var(--rd-gruppe-mfa-text); }
.hub-gruppe-azubi { background: var(--rd-gruppe-azubi); color: var(--rd-gruppe-azubi-text); border: 1px dashed var(--rd-amber); }
.hub-gruppe-verwaltung { background: var(--rd-gruppe-verwaltung); color: var(--rd-gruppe-verwaltung-text); }

.hub-kuerzel {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em; padding: 1px 6px;
  border-radius: var(--rd-rundung-klein); background: var(--rd-gruen-hell); color: var(--rd-gruen-text);
  font-weight: var(--rd-gewicht-fett); font-size: var(--rd-schrift-klein);
}

/* ---------- Tabellen ---------- */
/* Breite Tabellen scrollen in ihrem Rahmen, nie die ganze Seite (Funktionstest Runde 1, F-AD-3): position: relative macht den Rahmen
   zum Bezugsrahmen für absolut positionierte Inhalte (z. B. .hub-nur-vorlesen in Spaltenköpfen), sonst ragen sie über die Seite hinaus. */
.hub-tabelle-rahmen { overflow-x: auto; position: relative; }
.hub-tabelle { width: 100%; border-collapse: collapse; }
.hub-tabelle th {
  font-size: var(--rd-schrift-klein); text-transform: uppercase; letter-spacing: 0.04em; color: var(--rd-text-gedaempft);
  text-align: left; padding: 10px var(--rd-abstand-3); border-bottom: 1px solid var(--rd-rahmen); font-weight: var(--rd-gewicht-halbfett);
  background: var(--rd-flaeche);
}
.hub-tabelle td { padding: 10px var(--rd-abstand-3); border-bottom: 1px solid var(--rd-rahmen-leicht); vertical-align: middle; }
.hub-tabelle tbody tr:hover { background: var(--rd-flaeche-hover); }
.hub-tabelle tr.hub-gewaehlt { background: var(--rd-flaeche-auswahl); box-shadow: inset 4px 0 0 var(--rd-gruen-haus); }
.hub-tabelle-kompakt th, .hub-tabelle-kompakt td { padding: 8px var(--rd-abstand-2); }
.hub-tabelle-kompakt th { letter-spacing: 0; }
.hub-tabellenlink { font-weight: var(--rd-gewicht-halbfett); text-decoration: none; }
/* Admin-Tabellen (Rückmeldung Simon 03.11.): Namensspalte breit genug (höchstens zwei Zeilen); ab Desktop-Breite (1440 px Fenster,
   dort passt die Schichtvorlagen-Tabelle ohne seitliches Scrollen) kurze Werte ohne Umbruch und Aktionsknöpfe nebeneinander. Darunter
   umbrechen wie bisher; am Handy stapeln die Tabellen (.hub-tabelle-stapel) bzw. scrollen im Rahmen. */
.hub-tabelle .hub-spalte-name { min-width: var(--rd-tabelle-name-min); }
@media (min-width: 1440px) {
  .hub-tabelle .hub-ohne-umbruch { white-space: nowrap; }
  .hub-tabelle .hub-spalte-aktionen { white-space: nowrap; width: 1%; }
  .hub-tabelle .hub-spalte-aktionen .hub-entscheidung { flex-wrap: nowrap; }
}

/* ---------- Personenliste (Berechtigungen) ---------- */
.hub-personenliste { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.hub-person {
  display: flex; flex-direction: column; gap: 2px; padding: 10px var(--rd-abstand-4);
  border-bottom: 1px solid var(--rd-rahmen-leicht); color: var(--rd-text); text-decoration: none;
  border-left: 4px solid transparent;
}
.hub-person:hover { background: var(--rd-flaeche-hover); color: var(--rd-text); }
.hub-person.hub-gewaehlt { background: var(--rd-flaeche-auswahl); border-left-color: var(--rd-gruen-haus); }
.hub-rechteliste { list-style: none; margin: 0; padding: 0; }
.hub-recht { padding: 10px 0; border-bottom: 1px solid var(--rd-rahmen-leicht); display: flex; flex-direction: column; gap: 2px; }
.hub-recht-text { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; }
.hub-recht-aktion { display: flex; gap: var(--rd-abstand-2); align-items: center; }
.hub-recht-abgelaufen .hub-recht-text { color: var(--rd-text-gedaempft); text-decoration: line-through; }

/* ---------- Kacheln (Startseite Administration) ---------- */
.hub-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--rd-abstand-3); }
.hub-kachel {
  display: flex; flex-direction: column; gap: var(--rd-abstand-1);
  background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-gross);
  padding: var(--rd-abstand-4) var(--rd-abstand-5); text-decoration: none; color: var(--rd-text);
}
.hub-kachel:hover { border-color: var(--rd-gruen-ui); color: var(--rd-text); box-shadow: var(--rd-schatten-2); }
.hub-kachel-zahl { font-size: 28px; font-weight: var(--rd-gewicht-fett); line-height: 1.1; }
.hub-kachel-text { color: var(--rd-text-gedaempft); font-size: 13px; }
.hub-kachel-warnung { border-color: var(--rd-amber); background: var(--rd-amber-hell); }
.hub-kachel-warnung .hub-kachel-zahl, .hub-kachel-warnung .hub-kachel-text { color: var(--rd-amber-text); }

/* ---------- Plan ---------- */
.hub-schnellaktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rd-abstand-3); margin-top: var(--rd-abstand-3); max-width: 560px; }
.hub-schnellaktion { min-height: 52px; border-radius: var(--rd-rundung-gross); }
.hub-wochenwahl { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); }

.hub-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--rd-abstand-2); }
.hub-tag {
  background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-gross);
  padding: var(--rd-abstand-2); min-width: 0; display: flex; flex-direction: column; gap: var(--rd-abstand-2);
}
.hub-tag-wochenende { background: var(--rd-flaeche-hell); }
.hub-tag-heute { border: 2px solid var(--rd-gruen-ui); }
.hub-tag-kopf { display: flex; align-items: baseline; gap: var(--rd-abstand-2); flex-wrap: wrap; }
.hub-tag-kopf b { font-size: 18px; }
.hub-tag-kopf span:not(.hub-chip) { color: var(--rd-text-gedaempft); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.hub-tag-inhalt { display: flex; flex-direction: column; gap: var(--rd-abstand-2); min-width: 0; flex: 1 1 auto; }

.hub-einsatz {
  border-radius: var(--rd-rundung); padding: var(--rd-abstand-2) var(--rd-abstand-3);
  border-left: 4px solid var(--rd-gruen-haus); background: var(--rd-flaeche-auswahl); min-width: 0; overflow-wrap: anywhere;
}
.hub-einsatz-zeile { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; }
.hub-einsatz-detail { font-size: 13px; color: var(--rd-text-gedaempft); }
.hub-einsatz-heute { background: var(--rd-gruen-ui); color: var(--rd-text-hell); border-left-color: var(--rd-gruen-ui-dunkel); }
.hub-einsatz-heute .hub-einsatz-detail { color: var(--rd-text-hell); }
.hub-einsatz-heute .hub-chip-heute { background: var(--rd-flaeche); color: var(--rd-gruen-text); }
.hub-einsatz-fremd { border-left-color: var(--rd-amber); }
.hub-einsatz .hub-chip { white-space: normal; max-width: 100%; }
.hub-abwesend {
  background: repeating-linear-gradient(135deg, var(--rd-schraffur-1) 0 6px, var(--rd-schraffur-2) 6px 12px);
  border-left-color: var(--rd-schraffur-rand); color: var(--rd-text);
}
.hub-frei { background: transparent; border-left-color: var(--rd-rahmen); color: var(--rd-text-gedaempft); }

@media (max-width: 1023.98px) {
  .hub-woche { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-gross); }
  .hub-tag { flex-direction: row; border: 0; border-bottom: 1px solid var(--rd-rahmen-leicht); border-radius: 0; padding: var(--rd-abstand-3); }
  .hub-tag:last-child { border-bottom: 0; }
  .hub-tag-heute { box-shadow: inset 4px 0 0 var(--rd-gruen-ui); border-bottom: 1px solid var(--rd-rahmen-leicht); }
  .hub-tag-kopf { flex-direction: column; align-items: center; width: 48px; flex: none; gap: 0; }
}
@media (max-width: 479.98px) {
  .hub-schnellaktionen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hinweisseiten ---------- */
.hub-hinweisseite { max-width: 640px; padding: var(--rd-abstand-8) var(--rd-abstand-6); }
.hub-hinweisseite h1 { margin-top: var(--rd-abstand-2); font-size: var(--rd-schrift-titel); }
.hub-hinweisseite-symbol { font-size: 40px !important; color: var(--rd-text-gedaempft); }

/* ---------- Anmeldung ---------- */
.hub-anmelde-rahmen { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: var(--rd-abstand-8) var(--rd-abstand-4); box-sizing: border-box; }
.hub-anmeldung { width: 100%; max-width: 440px; }
.hub-anmelde-karte { padding: var(--rd-abstand-8) var(--rd-abstand-6); text-align: center; }
.hub-anmelde-karte h1 { margin: var(--rd-abstand-3) 0 var(--rd-abstand-1); font-size: var(--rd-schrift-titel); }
.hub-anmelde-signet { width: 64px; height: 64px; object-fit: contain; }
.hub-entwicklung {
  margin-top: var(--rd-abstand-6); padding: var(--rd-abstand-4); text-align: left;
  border: 2px dashed var(--rd-amber); border-radius: var(--rd-rundung-gross); background: var(--rd-amber-hell); color: var(--rd-amber-text);
}
.hub-entwicklung h2 { margin: 0 0 var(--rd-abstand-2); font-size: var(--rd-schrift-mittel); color: var(--rd-amber-text); }
.hub-entwicklung p { margin: 0 0 var(--rd-abstand-3); font-size: 13px; }
.hub-entwicklung .hub-feldname { color: var(--rd-amber-text); }

/* Abstands-Hilfsklassen (wie MudBlazor, auch für statische Seiten) */
.mt-1 { margin-top: var(--rd-abstand-1); }
.mt-2 { margin-top: var(--rd-abstand-2); }
.mt-4 { margin-top: var(--rd-abstand-4); }
.mt-6 { margin-top: var(--rd-abstand-6); }
.mb-4 { margin-bottom: var(--rd-abstand-4); }

/* ======================================================================
   Schritt 4: Krankmeldung, Ausfälle, Schicht-Rückmeldung, Synchronisation
   ====================================================================== */

/* Hinweiskästen: immer Text, Farbe nur unterstützend */
.hub-hinweis {
  border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: var(--rd-abstand-3) var(--rd-abstand-4);
  background: var(--rd-flaeche-hell); color: var(--rd-text); display: flex; gap: var(--rd-abstand-2); align-items: flex-start;
}
.hub-hinweis p { margin: 0; }
.hub-hinweis-amber { background: var(--rd-amber-hell); border-color: var(--rd-amber); color: var(--rd-amber-text); }
.hub-hinweis-gruen { background: var(--rd-gruen-hell); border-color: var(--rd-gruen-haus); color: var(--rd-gruen-text); }
.hub-hinweis-rot { background: var(--rd-ampel-rot-hell); border-color: var(--rd-ampel-rot); color: var(--rd-ampel-rot-text); }

/* Formular am Handy */
.hub-formular-schmal { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: var(--rd-abstand-4); }
.hub-feld { display: flex; flex-direction: column; gap: var(--rd-abstand-1); min-width: 0; }
.hub-feld-zusatz { font-weight: var(--rd-gewicht-normal); color: var(--rd-text-gedaempft); }
.hub-eingabe, .hub-textfeld {
  width: 100%; min-height: 44px; font: inherit; color: var(--rd-text); background: var(--rd-flaeche);
  border: 1px solid var(--rd-rahmen-eingabe); border-radius: var(--rd-rundung); padding: 0 var(--rd-abstand-3); box-sizing: border-box;
}
.hub-textfeld { padding: var(--rd-abstand-2) var(--rd-abstand-3); min-height: 88px; resize: vertical; }
.hub-feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--rd-abstand-3); }
.hub-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rd-abstand-2); }
.hub-wahlknopf {
  min-height: 52px; border-radius: var(--rd-rundung-gross); border: 1px solid var(--rd-rahmen-eingabe);
  background: var(--rd-flaeche); color: var(--rd-text); font: inherit; font-weight: var(--rd-gewicht-halbfett); cursor: pointer;
}
.hub-wahlknopf:hover { background: var(--rd-flaeche-hover); }
.hub-wahlknopf[aria-pressed="true"] { background: var(--rd-gruen-ui); border-color: var(--rd-gruen-ui); color: var(--rd-text-hell); }
.hub-knopf-gross { min-height: 52px; font-size: var(--rd-schrift-mittel); width: 100%; }
.hub-knopf-gefahr { border-color: var(--rd-ampel-rot); color: var(--rd-ampel-rot-text); }
.hub-knopf-gefahr:hover { background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); }
.hub-knopf:disabled { cursor: not-allowed; color: var(--rd-text-gedaempft); background: var(--rd-flaeche-hell); border-color: var(--rd-rahmen); }

/* Chips mit Ampelfarbe (immer mit Symbol/Text) */
.hub-chip-rot { background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); border-color: var(--rd-ampel-rot); }
.hub-chip-gelb { background: var(--rd-ampel-gelb-hell); color: var(--rd-ampel-gelb-text); }
.hub-chip-blau { background: var(--rd-flaeche); color: var(--rd-blau); border-color: var(--rd-blau); }

/* Schichtliste in der Krankmeldung */
.hub-schichtliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rd-abstand-2); }
.hub-schichtliste li {
  display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; padding: var(--rd-abstand-2) var(--rd-abstand-3);
  border: 1px solid var(--rd-rahmen); border-left: 4px solid var(--rd-amber); border-radius: var(--rd-rundung); background: var(--rd-flaeche);
}
.hub-faktenliste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--rd-abstand-1) var(--rd-abstand-4); margin: 0; }
.hub-faktenliste dt { color: var(--rd-text-gedaempft); }
.hub-faktenliste dd { margin: 0; font-weight: var(--rd-gewicht-halbfett); }

/* Ausfälle: Vorgangsliste und Detail */
.hub-vorgangsliste { list-style: none; margin: 0; padding: 0; max-height: 75vh; overflow-y: auto; }
.hub-vorgang {
  display: flex; flex-direction: column; gap: 2px; padding: var(--rd-abstand-3) var(--rd-abstand-4);
  border-bottom: 1px solid var(--rd-rahmen-leicht); border-left: 4px solid transparent; color: var(--rd-text); text-decoration: none;
}
.hub-vorgang:hover { background: var(--rd-flaeche-hover); color: var(--rd-text); }
.hub-vorgang.hub-gewaehlt { background: var(--rd-flaeche-auswahl); border-left-color: var(--rd-gruen-haus); }
.hub-vorgang-kopf { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; }
.hub-vorschlag { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-vorschlag-weitere { margin-top: var(--rd-abstand-1); padding-top: var(--rd-abstand-1); border-top: 1px dashed var(--rd-rahmen); }
.hub-entscheidung { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-1); align-items: center; }
.hub-checkliste { list-style: none; margin: 0; padding: 0; }
.hub-checkliste li { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; padding: var(--rd-abstand-2) 0; border-bottom: 1px solid var(--rd-rahmen-leicht); }
.hub-checkliste-symbol { width: 1.6em; text-align: center; font-weight: var(--rd-gewicht-fett); }
.hub-checkliste-text { flex: 1 1 200px; min-width: 0; }
.hub-auswirkung { display: flex; flex-direction: column; gap: var(--rd-abstand-1); padding: var(--rd-abstand-2) 0; border-bottom: 1px solid var(--rd-rahmen-leicht); }
.hub-kachel-zahl-klein { font-size: 20px; }
.hub-mailvorschau { white-space: pre-wrap; font-family: var(--rd-schrift); background: var(--rd-flaeche-hell); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: var(--rd-abstand-3); margin: var(--rd-abstand-2) 0; }
.hub-kandidaten { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.hub-kandidaten li { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; padding: var(--rd-abstand-2) 0; border-bottom: 1px solid var(--rd-rahmen-leicht); }
.hub-kandidat-ausgeschlossen { color: var(--rd-text-gedaempft); }

@media (max-width: 767.98px) {
  .hub-tabelle-stapel thead { display: none; }
  .hub-tabelle-stapel tr { display: block; border-bottom: 1px solid var(--rd-rahmen); padding: var(--rd-abstand-2) 0; }
  .hub-tabelle-stapel td { display: block; border: 0; padding: var(--rd-abstand-1) var(--rd-abstand-3); }
}
.hub-block { display: block; }
.hub-ohne-unten { padding-bottom: 0; }

/* ======================================================================
   Schritt 5: Urlaub, Stichtagsrunden, Fortbildungen, Kalender
   ====================================================================== */
.hub-wahl-drei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.hub-wochenliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--rd-abstand-2); }
.hub-wochenliste li {
  display: flex; flex-wrap: wrap; gap: var(--rd-abstand-1) var(--rd-abstand-2); align-items: center;
  padding: var(--rd-abstand-2) var(--rd-abstand-3); border: 1px solid var(--rd-rahmen); border-left: 4px solid var(--rd-gruen-haus);
  border-radius: var(--rd-rundung); background: var(--rd-flaeche);
}
.hub-wochenliste li.hub-woche-voll { border-left-color: var(--rd-ampel-rot); background: var(--rd-flaeche-hell); }
.hub-auswahl-schmal { width: auto; min-height: 34px; }
.hub-tabelle tr.hub-zeile-warnung { box-shadow: inset 4px 0 0 var(--rd-ampel-rot); }
.hub-eingabe-zahl { max-width: 6em; min-height: 36px; }