/* hms-stil.css: gemeinsame Stilvorlage fuer alle Seiten auf hms-daten (07.11.2026).
   Vorbild: Blatt "Anlage Risk-Audit" in 260803 IDR_Vers Calc I03.xlsx, Werte aus den Zellen gelesen.
   HMS 07.11.2026: "das meine ich mit clean und professionell", "so durchdacht und einheitlich", "auch unter Hetzner".
   Master liegt in Server/hms-daten/stil/, jede App bekommt beim Einrichten eine Kopie nach web/.
   Ein Kunde mit eigenen Farben ueberschreibt nur die Variablen in :root (eigene kleine Datei danach laden).

   Bausteine:
     .hs-titel / .hs-unter      Titel 14 pt fett, Untertitel mit · und Stand
     table.hs                   Vollgitter duenn BFBFBF, Daten 9 pt, Koepfe 8 pt fett auf F2F2F2
     th.hs-wahl + th.hs-pfeil   Spaltenkopf mit Auswahl: der Pfeil sitzt in einer eigenen schmalen Spalte,
                                darunter bleibt die schmale Spalte frei (td.hs-auslauf), wie C7:D7 in der Mappe
     .hs-band                   Gruppenband D9D9D9 ueber mehreren Spalten
     .hs-stell                  Stellschraube FDF0D0 (hier aendern / hier ist gefiltert)
     .hs-schalter               Schalterzelle E6F0E6
     tr.hs-aus                  abgewaehlte Zeile, Schrift A6A6A6
     tr.hs-gruppe               Gruppenkopf: Rahmen oben und unten medium 404040, ohne Seitenraender
     tr.hs-summe                Summe: wie Gruppenkopf, Zahl fett dunkelblau
     .hs-kenn                   Kennzahlen-Kasten wie "Gesamt je Objekt"
*/
:root {
  --hs-schrift: Aptos, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Aptos ist keine Webschrift: am Tablet greift Roboto */
  --hs-tinte: #171717;     /* Titel und Koepfe (Design 2, Ton -90 %) */
  --hs-text: #2c2c2a;      /* Daten */
  --hs-kopf: #3a4750;      /* Spaltenkoepfe */
  --hs-summe: #1f3864;     /* Gruppen- und Summenzahlen */
  --hs-gitter: #bfbfbf;    /* jede duenne Linie, nie schwarz */
  --hs-stark: #404040;     /* Gruppen- und Summenlinie medium */
  --hs-band: #d9d9d9;      /* Gruppenband im Kopf */
  --hs-flaeche: #f2f2f2;   /* Spaltenkopf, Summenspalten */
  --hs-stell: #fdf0d0;     /* Stellschraube */
  --hs-schalter: #e6f0e6;  /* Schalterzelle, "ja" */
  --hs-rot: #fbe1e1;       /* Ampel rot, nur Flaeche */
  --hs-grau: #a6a6a6;      /* abgewaehlt */
  --hs-weiss: #fff;
  --hs-gr-daten: 12px;     /* 9 pt */
  --hs-gr-kopf: 11px;      /* 8 pt */
  --hs-gr-summe: 13px;     /* 10 pt */
  --hs-gr-titel: 19px;     /* 14 pt */
  --hs-gr-unter: 13px;     /* 10 pt */
  --hs-zeile: 19px;        /* 14,1 pt */
  --hs-pfeilbreite: 16px;  /* schmale Pfeilspalte, in der Mappe 2,12 */
}
/* Stift und Finger: am Tablet alles eine Stufe groesser, die 9 pt aus Excel sind dort zu klein */
@media (pointer: coarse) {
  :root { --hs-gr-daten: 14px; --hs-gr-kopf: 12.5px; --hs-gr-summe: 15px; --hs-zeile: 30px; --hs-pfeilbreite: 26px; }
}

.hs { font-family: var(--hs-schrift); color: var(--hs-text); }
.hs-titel { font: 700 var(--hs-gr-titel)/1.2 var(--hs-schrift); color: var(--hs-tinte); margin: 0; }
.hs-unter { font: 400 var(--hs-gr-unter)/1.3 var(--hs-schrift); color: var(--hs-tinte); margin: 2px 0 0; }
.hs-abstand { height: 8px; } /* Abstandszeile Hoehe 6 vor dem Kopf */

/* Tabelle */
table.hs { border-collapse: collapse; font: 400 var(--hs-gr-daten)/1.2 var(--hs-schrift); color: var(--hs-text); font-variant-numeric: tabular-nums; }
table.hs th, table.hs td { border: 1px solid var(--hs-gitter); padding: 0 5px; height: var(--hs-zeile); vertical-align: middle; text-align: center; white-space: nowrap; }
table.hs th { background: var(--hs-flaeche); color: var(--hs-kopf); font-size: var(--hs-gr-kopf); font-weight: 700; padding-top: 2px; padding-bottom: 2px; }
table.hs .hs-l { text-align: left; }
table.hs .hs-r { text-align: right; }
table.hs .hs-f { font-weight: 700; }
table.hs .hs-z { text-align: center; } /* Zahlen stehen in der Mappe mittig */
table.hs td.hs-sp { background: var(--hs-flaeche); font-weight: 700; } /* Summenspalte je Zeile */

/* Auswahl im Kopf: Kopfzelle plus schmale Pfeilspalte wirken als ein Kasten, ohne Trennlinie dazwischen */
table.hs th.hs-wahl { border-right: 0; padding-right: 2px; cursor: pointer; }
table.hs th.hs-pfeil { border-left: 0; width: var(--hs-pfeilbreite); min-width: var(--hs-pfeilbreite); padding: 0; cursor: pointer; font-size: 9px; color: var(--hs-kopf); }
table.hs td.hs-auslauf { width: var(--hs-pfeilbreite); min-width: var(--hs-pfeilbreite); padding: 0; border-left: 0; }
table.hs td.hs-vor-auslauf { border-right: 0; }
table.hs th.hs-wahl.hs-gefiltert, table.hs th.hs-wahl.hs-gefiltert + th.hs-pfeil { background: var(--hs-stell); color: var(--hs-tinte); }
table.hs th.hs-wahl:hover, table.hs th.hs-wahl:hover + th.hs-pfeil, table.hs th.hs-pfeil:hover { box-shadow: inset 0 -2px 0 var(--hs-kopf); }

/* hs-fix: Kopf klebt beim Scrollen. Klebende Zellen verlieren bei zusammenfallenden Rahmen ihre Linien,
   deshalb hier getrennte Rahmen, jede Zelle zeichnet nur rechts und unten */
table.hs.hs-fix { border-collapse: separate; border-spacing: 0; }
table.hs.hs-fix th, table.hs.hs-fix td { border-width: 0 1px 1px 0; }
table.hs.hs-fix tr > :first-child { border-left-width: 1px; }
table.hs.hs-fix thead tr:first-child th { border-top-width: 1px; }
table.hs.hs-fix thead th { position: sticky; top: 0; z-index: 2; }
table.hs.hs-fix th.hs-wahl, table.hs.hs-fix td.hs-vor-auslauf { border-right-width: 0; }
table.hs.hs-fix tfoot td { position: sticky; bottom: 0; z-index: 2; }
table.hs.hs-fix tr.hs-gruppe td, table.hs.hs-fix tr.hs-summe td { border-width: 2px 0; }
table.hs.hs-fix tr.hs-leer td { border-width: 0; }

/* Bänder, Farben am Wert */
table.hs .hs-band, .hs-band { background: var(--hs-band); color: var(--hs-tinte); font-size: var(--hs-gr-daten); font-weight: 700; }
.hs-stell { background: var(--hs-stell) !important; }
.hs-schalter { background: var(--hs-schalter) !important; font-weight: 700; }
.hs-ampel-rot { background: var(--hs-rot) !important; }
table.hs tr.hs-aus td { color: var(--hs-grau); }
table.hs tr.hs-aus td.hs-schalter { color: var(--hs-grau); } /* Flaeche bleibt, wie "nein" in der Mappe */

/* Gruppenkopf und Summe: medium 404040 oben und unten, keine Seitenränder */
table.hs tr.hs-gruppe td, table.hs tr.hs-summe td { border-left: 0; border-right: 0; border-top: 2px solid var(--hs-stark); border-bottom: 2px solid var(--hs-stark); height: calc(var(--hs-zeile) + 4px); }
table.hs tr.hs-gruppe td { color: var(--hs-summe); font-size: var(--hs-gr-summe); font-weight: 700; }
table.hs tr.hs-summe td { color: var(--hs-stark); font-size: var(--hs-gr-summe); font-weight: 700; background: var(--hs-weiss); }
table.hs tr.hs-summe td.hs-zahl-summe { color: var(--hs-summe); background: var(--hs-flaeche); }
table.hs tr.hs-leer td { border-left: 0; border-right: 0; height: 10px; background: transparent; }

/* Kennzahlen-Kasten wie "Gesamt je Objekt": Beschriftung oben 8 pt fett, Zahl darunter 10 pt fett dunkelblau */
.hs-kenn { display: inline-flex; flex-wrap: wrap; border-collapse: collapse; font-family: var(--hs-schrift); }
.hs-kenn > div { border: 1px solid var(--hs-gitter); margin: 0 -1px -1px 0; background: var(--hs-flaeche); min-width: 128px; text-align: center; }
.hs-kenn b { display: block; padding: 4px 8px 2px; font-size: var(--hs-gr-kopf); color: var(--hs-kopf); }
.hs-kenn span { display: block; padding: 2px 8px 5px; font-size: var(--hs-gr-summe); font-weight: 700; color: var(--hs-summe); font-variant-numeric: tabular-nums; background: var(--hs-weiss); border-top: 1px solid var(--hs-gitter); }

/* Auswahlliste unter dem Pfeil: schlicht, Gitterlinie, aktiver Wert als Stellschraube */
.hs-auswahl { position: absolute; z-index: 30; min-width: 150px; max-height: 320px; overflow: auto; background: var(--hs-weiss); border: 1px solid var(--hs-kopf); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font: 400 var(--hs-gr-daten)/1.2 var(--hs-schrift); }
.hs-auswahl button { display: flex; justify-content: space-between; gap: 14px; width: 100%; min-height: var(--hs-zeile); padding: 3px 8px; border: 0; border-bottom: 1px solid var(--hs-flaeche); background: none; text-align: left; font: inherit; color: var(--hs-text); cursor: pointer; }
.hs-auswahl button:hover { background: var(--hs-flaeche); }
.hs-auswahl button.an { background: var(--hs-stell); font-weight: 700; }
.hs-auswahl button i { font-style: normal; color: var(--hs-grau); }
.hs-menue-trenner { padding: 6px 8px 3px; font-size: var(--hs-gr-kopf); font-weight: 700; color: var(--hs-kopf); background: var(--hs-flaeche); border-top: 1px solid var(--hs-gitter); border-bottom: 1px solid var(--hs-gitter); }
table.hs th.hs-pfeil.hs-sortiert { font-size: 10px; color: var(--hs-tinte); }

/* Fussnote wie Zeile 87: eine Zeile Erklaerung unter der Tabelle */
.hs-fuss { font: 400 var(--hs-gr-kopf)/1.4 var(--hs-schrift); color: var(--hs-kopf); margin: 8px 0 0; }

@media print {
  .hs-auswahl { display: none; }
  table.hs th.hs-pfeil { color: transparent; }
}