/* HoWis – gemeinsames Design für Portal und alle Werkzeuge.
   Eigene Variablen sind mit --hw- vorangestellt, damit sie nicht mit den
   Variablen der einzelnen Tools kollidieren. Die Harmonisierung der Tools
   passiert unten über gezielte, gescope-te Überschreibungen. */

:root {
  /* Farbwelt aus dem Logo (26.09.2026): Baggergelb, Signalrot, Schwarz.
     Vorher Indigo→Violett, die Voreinstellung unzähliger Baukästen.

     ZWEI ROLLEN FÜR DEN AKZENT, weil Gelb auf Weiß nicht zu lesen ist
     (1,6:1):
       --hw-gelb        FLÄCHEN – Knöpfe, gewählte Reiter, Zähler. Darauf
                        steht immer --hw-auf-akzent (Schwarz, 12:1).
       --hw-accent      SCHRIFT UND LINIEN – Links, Rahmen, Punkte. Im
                        Hellen ein dunkler Ocker (6:1), im Dunklen das Gelb.
     Die Namen „-grad"/„-flaeche" bleiben, damit kein Werkzeug umgeschrieben
     werden muss; sie tragen eine Vollfarbe, keinen Verlauf. */
  --hw-bg: #f2f1ee;
  --hw-surface: #ffffff;
  --hw-surface-2: #f4f3ef;
  --hw-text: #161616;
  --hw-text-2: #5a5956;
  --hw-border: #dddbd5;
  --hw-border-2: #c9c6be;
  --hw-accent: #7a5a00;
  --hw-accent-2: #5c4400;
  --hw-accent-hg: rgba(250,196,0,.18);
  --hw-gelb: #fac400;
  --hw-gelb-2: #e8b500;
  --hw-auf-akzent: #161616;
  --hw-rot: #d5000c;
  --hw-accent-grad: linear-gradient(#fac400, #fac400);
  --hw-messing: #7a5a00;
  /* Die Kopfleiste: schwarz wie der Grund des Logos. */
  --hw-leiste: #161616;
  --hw-leiste-text: #ffffff;
  --hw-leiste-text-2: #b5b3ae;
  --hw-leiste-rand: #161616;
  /* Dieselbe Farbfamilie, aber dunkler – für FLÄCHEN mit weißer Schrift.
     Auf `--hw-accent-grad` steht Weiß im Hellmodus bei 4,5:1 und im
     Dunkelmodus bei 2,8:1; für den markierten Menüeintrag in 15 Punkt ist
     das zu wenig. Hier sind es 5,4:1, in beiden Modi. Denselben Wert trägt
     `Gestalt.akzentFlaeche` in der App. */
  --hw-akzent-flaeche: linear-gradient(#fac400, #fac400);
  --hw-danger: #b3121b;
  --hw-radius: 10px;
  --hw-radius-lg: 16px;
  --hw-shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --hw-shadow-md: 0 6px 18px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --hw-shadow-lg: 0 22px 50px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.08);
  --hw-ring: 0 0 0 3px rgba(250,196,0,.55);
  /* Archivo: kräftig wie die Wortmarke im Logo. */
  --hw-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hw-font-titel: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 54 statt 46: Jeder Menüeintrag ist 44 hoch – so hoch, dass man ihn mit
     Handschuhen trifft, und so groß beschriftet (15 statt 13), dass man ihn
     im Führerhaus liest. Den wirklichen Wert schreibt shell.js hier hinein,
     sobald die Leiste steht: Mit einer zweiten Zeile ist sie nicht mehr fest. */
  --hw-shell-h: 54px;
  /* Ampel: derselbe Zustand soll überall dieselbe Farbe haben – „überfällig"
     in der Mitarbeiterverwaltung und „überfällig" auf der Startseite sind
     dieselbe Aussage. Bis hierher lagen die Werte im Werkzeug (--ps-*);
     seit die Startseite dieselbe Liste zeigt, gehören sie hierher. */
  --hw-ok-hg: rgba(45,106,62,.12);    --hw-ok: #2d6a3e;
  --hw-warn-hg: rgba(122,83,0,.13);   --hw-warn: #7a5300;
  --hw-weg-hg: rgba(179,18,27,.10);   --hw-weg: #b3121b;
  /* Farbpalette der Gewerke im Bauzeitenplan. NUMMERIERT und nicht nach
     Gewerken benannt: Seit dem 04.09.2026 legt der Betrieb seine Gewerke
     selbst an, und ein „--gw-strassenbau" könnte hier niemand vorsehen. Ein
     Gewerk speichert die Nummer.

     Die ersten sechs sind die bisherigen Farben – so behalten vorhandene
     Bauzeitenpläne ihr Aussehen. Vier sind dazugekommen.

     Nachgerechnet, nicht behauptet: tools/bauzeiten/gewerkfarben.pruefung.mjs
     prüft jedes Paar in OKLab, auch unter Rot-, Grün- und Blaublindheit, und
     jede Farbe gegen die Fläche. Wer hier etwas ändert, hört von der
     Prüfung. */
  --gw-1: #eb6834;  /* Orange   – war Erdarbeiten */
  --gw-2: #1baf7a;  /* Grün     – war Verfüllung */
  --gw-3: #2a78d6;  /* Blau     – war Kanal */
  --gw-4: #eda100;  /* Gelb     – war Abbruch */
  --gw-5: #e87ba4;  /* Rosa     – war Pflaster */
  --gw-6: #a3aab6;  /* Grau     – war Sonstiges */
  --gw-7: #1c1c87;  /* Dunkelblau */
  --gw-8: #832121;  /* Dunkelrot */
}
:root[data-theme="dark"] {
  --hw-bg: #0f0f0f;
  --hw-surface: #1a1a1a;
  --hw-surface-2: #222222;
  --hw-text: #f1f0ec;
  --hw-text-2: #a9a8a3;
  --hw-border: #2b2b2b;
  --hw-border-2: #3a3a3a;
  --hw-accent: #fac400;
  --hw-accent-2: #e8b500;
  --hw-accent-hg: rgba(250,196,0,.14);
  --hw-accent-grad: linear-gradient(#fac400, #fac400);
  --hw-akzent-flaeche: linear-gradient(#fac400, #fac400);
  --hw-messing: #fac400;
  --hw-rot: #e0101b;
  --hw-leiste: #0f0f0f;
  --hw-leiste-rand: #2b2b2b;
  --hw-danger: #f07a72;
  --hw-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.35);
  --hw-shadow-md: 0 6px 20px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.35);
  --hw-shadow-lg: 0 24px 60px rgba(0,0,0,.62), 0 8px 22px rgba(0,0,0,.45);
  --hw-ring: 0 0 0 3px rgba(250,196,0,.45);
  --hw-ok-hg: rgba(124,192,143,.16);  --hw-ok: #7cc08f;
  --hw-warn-hg: rgba(233,196,90,.16); --hw-warn: #e9c45a;
  --hw-weg-hg: rgba(240,122,114,.16); --hw-weg: #f07a72;
  --gw-1: #d95926;  --gw-2: #199e70;  --gw-3: #3987e5;  --gw-4: #c98500;
  --gw-5: #d55181;  --gw-6: #7c828f;  --gw-7: #1f1fb2;  --gw-8: #ab2626;
}

/* --------------------------------------------------------------------------
   Shell-Header: schlanke Leiste oben auf jeder Seite (von shell.js eingefügt).
   Wichtig: Die Tools stylen teils generisch per Element-Selektor (header{…},
   nav{…}, button{…}) – deshalb werden hier ALLE layout-relevanten Eigenschaften
   ausdrücklich gesetzt, damit die Leiste überall gleich aussieht. */
.howis-shell {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  box-sizing: border-box;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  width: auto;
  margin: 0;
  padding: 0 14px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  background: var(--hw-surface);
  border: 0;
  border-bottom: 1px solid var(--hw-border);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--hw-font);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--hw-text);
  position: relative;
  top: auto;
  transform: none;
  overflow: visible; /* Klappmenü darf unter der Leiste herausragen */
  z-index: 5000;
}
.howis-shell * { box-sizing: border-box; }
.howis-shell .hw-brand {
  display: flex;
  flex: none;
  order: 0;
  align-items: center;
  gap: 7px;
  margin: 0 10px 0 0;
  padding: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--hw-text);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
}
.howis-shell .hw-brand .hw-logo {
  width: 22px; height: 22px;
  border-radius: 6px;
  /* Kein Verlauf mehr dahinter: Das Zeichen bringt seinen eigenen
     schwarzen Grund mit. `overflow` schneidet die Ecken des Bildes
     auf denselben Radius. */
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.howis-shell .hw-brand .hw-logo img { width: 100%; height: 100%; display: block; }
.howis-shell nav {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  order: 0;
  align-items: center;
  gap: 2px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.howis-shell nav::-webkit-scrollbar { display: none; }
.howis-shell nav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hw-text);
  text-decoration: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.howis-shell nav a:hover { background: var(--hw-surface-2); color: var(--hw-text); }
/* Wo man ist, sagt eine gefüllte Fläche – nicht bloß eine andere
   Schriftfarbe. Farbe allein sieht nicht jeder. */
.howis-shell nav a.active {
  background: var(--hw-akzent-flaeche);
  color: var(--hw-auf-akzent);
  font-weight: 600;
  box-shadow: var(--hw-shadow-sm);
}
/* Beim Verschieben eines Platzes: Der gezogene Eintrag bleibt als blasse
   Lücke stehen – so sieht man, wo er landet, wenn man loslässt. */
.howis-shell nav a.hw-zieht { opacity: .4; outline: 1px dashed var(--hw-accent); }

/* Die zweite Zeile: die Werkzeuge des Platzes, auf dem man steht. Ein
   EIGENER Streifen unter der Leiste und kein Umbruch in ihr – sonst brächen
   auch die Knöpfe rechts um, sobald es eng wird.

   Leiser als die Zeile darüber: Sie sagt nicht, WO man ist, sondern was hier
   liegt. Den Strich nach unten trägt sie; die Leiste darüber gibt ihn ab
   (`.howis-shell.hw-mit-unter`), damit nicht zwei Haarlinien übereinander
   stehen. */
.hw-unter {
  display: flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 14px 7px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  background: var(--hw-surface);
  border: 0;
  border-bottom: 1px solid var(--hw-border);
  font-family: var(--hw-font);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  position: relative;
  z-index: 4999;
}
.howis-shell.hw-mit-unter { border-bottom: 0; }
.hw-unter::-webkit-scrollbar { display: none; }
.hw-unter a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 36px;
  margin: 0;
  border: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--hw-text-2);
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.hw-unter a:hover { background: var(--hw-surface-2); color: var(--hw-text); }
.hw-unter a.active {
  background: var(--hw-surface-2);
  color: var(--hw-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--hw-border-2);
}
.howis-shell .hw-spacer { margin: 0 0 0 auto; flex: none; order: 0; }
.howis-shell .hw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  order: 0;
  text-decoration: none;
  width: 32px; height: 32px;
  min-width: 32px; min-height: 32px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1px solid var(--hw-border-2);
  border-radius: var(--hw-radius);
  background: var(--hw-surface);
  color: var(--hw-text-2);
  font: inherit;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.howis-shell .hw-btn:hover { color: var(--hw-text); box-shadow: var(--hw-shadow-sm); }
.howis-shell .hw-btn svg { width: 16px; height: 16px; }

/* Priority-Plus-Navigation: Einträge, die nicht in die Zeile passen, blendet
   shell.js aus und bietet sie im Klappmenü (☰) an. */
.howis-shell .hw-hidden { display: none !important; }
.howis-shell .hw-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 8px;
  min-width: 180px;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 6px;
  background: var(--hw-surface);
  border: 1px solid var(--hw-border-2);
  border-radius: 12px;
  box-shadow: var(--hw-shadow-lg);
  z-index: 6000;
}
.howis-shell .hw-menu.open { display: block; }
.howis-shell .hw-menu a {
  display: block;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hw-text);
  text-decoration: none;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}
.howis-shell .hw-menu a:hover { background: var(--hw-surface-2); }
.howis-shell .hw-menu a.active {
  background: var(--hw-accent-grad);
  color: var(--hw-auf-akzent);
  font-weight: 600;
}

@media (max-width: 640px) {
  .howis-shell { padding: 0 8px; font-size: 13px; }
  .howis-shell .hw-brand span { display: none; } /* nur Logo-Quadrat auf sehr schmalen Screens */
}

/* --------------------------------------------------------------------------
   PDF-Export ist zentral: sichtbar ist überall nur der Shell-Knopf
   „🖨 PDF-Export". Die tool-eigenen Druckknöpfe bleiben im DOM (das Menü
   „Nur diese Ansicht" klickt sie programmatisch), werden aber ausgeblendet. */
:root[data-howis-tool="angebot"] #printBtn,
:root[data-howis-tool="angebot"] #printNote,
:root[data-howis-tool="ffg"] #print-doc-btn,
:root[data-howis-tool="ffg"] #overview-print,
:root[data-howis-tool="ffg"] #sketch-print,
:root[data-howis-tool="ffg"] #sk-modal-print,
:root[data-howis-tool="cad"] #print-btn { display: none !important; }

/* --------------------------------------------------------------------------
   PDF-Export: Auswahlmenü + Gesamt-PDF-Overlay (alle Eigenschaften explizit,
   damit generische Selektoren der Werkzeuge nicht hineinfunken) */
/* Der Anker, in den ein Werkzeug den PDF-Knopf holen kann (siehe shell.js).
   Im FFG-Rechner steht er am Ende, unter der Schnittzeichnung. */
.hw-pdf-anker {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 18px;
}
.hw-kunde-bar button.hw-pdf,
.hw-pdf-anker button.hw-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--hw-border-2);
  border-radius: 10px;
  background: var(--hw-surface);
  color: var(--hw-text);
  font-family: var(--hw-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}
.hw-kunde-bar button.hw-pdf:hover,
.hw-pdf-anker button.hw-pdf:hover { box-shadow: var(--hw-shadow-md); }
/* In der Kunden-Leiste (42 px hoch) kleiner, rechts außen. Am Telefon nur
   das Zeichen – die Leiste trägt dort schon Beschriftung und Kundenfeld. */
.hw-kunde-bar .hw-kb-luecke { flex: 1 1 0; min-width: 0; margin: 0; }
.hw-kunde-bar button.hw-pdf { flex: none; height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
@media (max-width: 560px) {
  .hw-kunde-bar button.hw-pdf { width: 36px; padding: 0; justify-content: center; overflow: hidden; }
  .hw-kunde-bar button.hw-pdf .hw-pdf-wort { display: none; }
}
.hw-pdf-menu {
  position: fixed;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 255px;
  margin: 0;
  padding: 6px;
  background: var(--hw-surface);
  border: 1px solid var(--hw-border);
  border-radius: 12px;
  box-shadow: var(--hw-shadow-lg);
  font-family: var(--hw-font);
  font-size: 14px;
}
.hw-pdf-menu > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--hw-text);
  font-family: var(--hw-font);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}
.hw-pdf-menu > button:hover { background: var(--hw-surface-2); }
.hw-pdf-menu > button strong { font-weight: 600; }
.hw-pdf-menu > button small { font-size: 12px; color: var(--hw-text-2); font-weight: 400; }

/* Kunden-Leiste direkt unter der Kopfzeile (nur Rechen-Tabs): Dropdown mit
   allen Kunden + Schnellanlage; der Hinweis rechts macht klar, wohin
   gespeichert wird. Alle Eigenschaften explizit (gegen Tool-Selektoren). */
.hw-kunde-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  background: var(--hw-surface);
  border: 0;
  border-bottom: 1px solid var(--hw-border);
  font-family: var(--hw-font);
  font-size: 13px;
  color: var(--hw-text);
}
.hw-kunde-bar .hw-kb-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hw-text-2);
}
.hw-kunde-bar .hw-kb-label svg { width: 13px; height: 13px; flex: none; }
/* Kundenwahl: Suchfeld mit Liste (statt <select>, damit Tippen filtert) */
.hw-kunde-bar .hw-kb-wahl {
  position: relative;
  flex: 0 1 320px;
  min-width: 130px;
  margin: 0;
  padding: 0;
}
.hw-kunde-bar .hw-kb-select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 30px;
  text-align: left;
  text-overflow: ellipsis;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--hw-border-2);
  border-radius: 8px;
  background: var(--hw-bg);
  color: var(--hw-text);
  font-family: var(--hw-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: text;
  box-shadow: none;
}
.hw-kunde-bar .hw-kb-select:focus { outline: none; border-color: var(--hw-accent); box-shadow: var(--hw-ring); font-weight: 500; }
.hw-kunde-bar.aktiv .hw-kb-select { border-color: var(--hw-accent); font-weight: 600; }
/* iOS vergrößert die Seite bei Feldern unter 16 px – am Telefon deshalb 16 px */
@media (pointer: coarse) { .hw-kunde-bar .hw-kb-select { font-size: 16px; } }
.hw-kb-liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10050;
  box-sizing: border-box;
  width: min(560px, calc(100vw - 28px));
  max-height: min(420px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  background: var(--hw-surface);
  border: 1px solid var(--hw-border);
  border-radius: 10px;
  box-shadow: var(--hw-shadow-lg);
}
.hw-kb-liste[hidden] { display: none; }
/* Schmal: Liste an der Leiste statt am Feld ausrichten, sonst ragt sie rechts hinaus */
@media (max-width: 720px) {
  .hw-kunde-bar .hw-kb-wahl { position: static; }
  .hw-kb-liste { left: 14px; top: calc(100% + 2px); }
}
.hw-kb-liste .hw-kb-eintrag {
  margin: 0;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.3;
  color: var(--hw-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hw-kb-liste .hw-kb-eintrag.markiert { background: var(--hw-surface-2); }
.hw-kb-liste .hw-kb-eintrag.gewaehlt { font-weight: 650; color: var(--hw-accent); }
.hw-kb-liste .hw-kb-eintrag.gewaehlt::before { content: "✓ "; }
.hw-kb-liste .hw-kb-eintrag.ohne { color: var(--hw-text-2); }
.hw-kb-liste .hw-kb-eintrag.neu { margin-top: 4px; border-top: 1px solid var(--hw-border); border-radius: 0 0 7px 7px; color: var(--hw-accent); font-weight: 600; }
.hw-kb-liste .hw-kb-leer { padding: 8px 10px; color: var(--hw-text-2); font-size: 12.5px; }
.hw-kunde-bar .hw-kb-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12px;
  color: var(--hw-text-2);
}
.hw-kunde-bar.aktiv .hw-kb-status { color: var(--hw-accent); font-weight: 550; }
.hw-kunde-bar .hw-kb-status.fehler { color: var(--hw-danger); font-weight: 650; }
@media (max-width: 720px) { .hw-kunde-bar .hw-kb-status { display: none; } }
.hw-kb-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 14px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, calc(100vw - 28px));
  margin: 0;
  padding: 12px;
  background: var(--hw-surface);
  border: 1px solid var(--hw-border);
  border-radius: 12px;
  box-shadow: var(--hw-shadow-lg);
}
.hw-kb-panel[hidden] { display: none; }
/* doppelte Klasse: schlägt input[type="text"]-Regeln der Werkzeuge (FFG: 130 px, rechtsbündig) */
.hw-kunde-bar .hw-kb-panel input {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  height: auto;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--hw-border-2);
  border-radius: 8px;
  background: var(--hw-bg);
  color: var(--hw-text);
  font-family: var(--hw-font);
  font-size: 13.5px;
  line-height: 1.3;
  box-shadow: none;
}
.hw-kunde-bar .hw-kb-panel input:focus { outline: none; border-color: var(--hw-accent); box-shadow: var(--hw-ring); }
/* Adressvorschläge in der Schnellanlage (gleiche Mechanik wie im Kundenstamm) */
.hw-kb-adrwrap { position: relative; margin: 0; padding: 0; }
.hw-kb-ac {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10060;
  display: none;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  background: var(--hw-surface);
  border: 1px solid var(--hw-border);
  border-radius: 10px;
  box-shadow: var(--hw-shadow-lg);
}
.hw-kb-ac .item {
  margin: 0;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--hw-text);
}
.hw-kb-ac .item:hover { background: var(--hw-surface-2); }
.hw-kb-ac .item b { display: block; font-weight: 600; }
.hw-kb-ac .item small { color: var(--hw-text-2); font-size: 11.5px; }
.hw-kb-ac .ac-leer { padding: 8px 10px; color: var(--hw-text-2); font-size: 12.5px; }
.hw-kb-adrstatus { margin: 0; font-size: 12px; font-weight: 600; color: var(--hw-accent); }
.hw-kb-adrstatus[hidden] { display: none; }
.hw-kmenu-warn { font-size: 12px; font-weight: 600; color: var(--hw-danger); }
.hw-kmenu-warn[hidden] { display: none; }
.hw-kmenu-knoepfe { display: flex; gap: 8px; }
.hw-export {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: var(--hw-bg);
  font-family: var(--hw-font);
}
.hw-export-head {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: auto;
  margin: 0;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--hw-surface);
  border: 0;
  border-bottom: 1px solid var(--hw-border);
  color: var(--hw-text);
  font-size: 14px;
  box-shadow: var(--hw-shadow-sm);
}
.hw-export-head strong { font-weight: 700; font-size: 15px; color: var(--hw-text); }
.hw-export-head .hw-spacer { margin: 0 0 0 auto; flex: none; }
.hw-export-secs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; }
.hw-exp-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--hw-text-2);
  cursor: pointer;
}
.hw-exp-sec input { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--hw-accent); }
.hw-exp-sec.off { color: var(--hw-text-2); opacity: .55; cursor: default; }
.hw-exp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--hw-border-2);
  border-radius: 9px;
  background: var(--hw-surface);
  color: var(--hw-text);
  font-family: var(--hw-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}
.hw-exp-btn:hover { box-shadow: var(--hw-shadow-md); }
.hw-exp-btn.primary { background: var(--hw-accent-grad); border: 0; color: var(--hw-auf-akzent); }
.hw-exp-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.hw-export-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #e6e8eb;
}

/* Beim Drucken (z. B. Abbruch-/FFG-PDF) gehören Portal-Leisten nicht aufs Papier.
   Die Gesamt-PDF-Mappe druckt über ihren eigenen Knopf (bzw. Strg/Cmd+P im Overlay). */
@media print {
  .howis-shell, .hw-pdf-menu, .hw-pdf-anker, .hw-export, .hw-kunde-bar,
  .hw-unter, .hw-leisten, .hw-tabs, .hw-mkopf { display: none !important; }
}

/* --------------------------------------------------------------------------
   Harmonisierung der einzelnen Werkzeuge (Farb- und Schrift-Angleichung).
   :root[data-howis-tool=…] gewinnt gegen die :root-Definitionen der Tools. */

/* Angebotskalkulator: nutzt bereits dieselbe Designsprache – nur den eigenen
   Theme-Umschalter ausblenden, das macht jetzt die Shell. */
:root[data-howis-tool="angebot"] #themeWrap { display: none !important; }
:root[data-howis-tool="angebot"] #themeSeg { display: none !important; } /* Abbruchrechner */

/* Lieferantenvergleich: Markenblau → HoWis-Akzent, HoWis-Schrift,
   eigener Theme-Wähler weicht dem Shell-Umschalter. */
:root[data-howis-tool="lieferanten"] {
  --brand: var(--hw-accent);
  --brand-d: var(--hw-accent-2);
}
:root[data-howis-tool="lieferanten"].dark,
:root[data-howis-tool="lieferanten"][data-theme="dark"] {
  --brand: var(--hw-accent);
  --brand-d: var(--hw-accent-2);
}
:root[data-howis-tool="lieferanten"] body { font-family: var(--hw-font); }
:root[data-howis-tool="lieferanten"] #themeSel { display: none !important; }

/* FFG-Rechner: Akzentblau → HoWis-Akzent, HoWis-Schrift. */
:root[data-howis-tool="ffg"] {
  --accent: var(--hw-accent);
  --accent-soft: var(--hw-accent-hg);
}
:root[data-howis-tool="ffg"][data-theme="dark"] {
  --accent: var(--hw-accent);
  --accent-soft: var(--hw-accent-hg);
}
:root[data-howis-tool="ffg"] body { font-family: var(--hw-font); }

/* TiefbauCAD: bleibt dunkel (3D-Arbeitsfläche), Akzent an HoWis angeglichen. */
:root[data-howis-tool="cad"] {
  --accent2: var(--hw-gelb);
}

/* --------------------------------------------------------------------------
   Sicherheitsabfrage (window.HoWisFrage) – ersetzt confirm(), das in
   installierten Web-Apps und eingebetteten Ansichten gesperrt ist und dort
   ohne Rückfrage sofort false liefert.
   -------------------------------------------------------------------------- */
.hw-frage-back { position: fixed; inset: 0; z-index: 12000; background: rgba(8,10,14,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hw-frage { width: min(430px, 96vw); background: var(--hw-surface); color: var(--hw-text);
  border: 1px solid var(--hw-border-2); border-radius: var(--hw-radius-lg);
  box-shadow: var(--hw-shadow-lg); padding: 20px 22px 16px; font-family: var(--hw-font); }
.hw-frage-titel { font-size: 16px; font-weight: 700; line-height: 1.35; }
.hw-frage-text { font-size: 13.5px; color: var(--hw-text-2); line-height: 1.55; margin-top: 8px; white-space: pre-line; }
.hw-frage-text b { color: var(--hw-text); font-weight: 600; }
.hw-frage-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.hw-frage-btns button { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--hw-radius); border: 1px solid var(--hw-border-2);
  background: var(--hw-surface-2); color: var(--hw-text); }
.hw-frage-btns button:hover { border-color: var(--hw-accent); }
.hw-frage-btns .hw-frage-ok { background: var(--hw-gelb); border-color: var(--hw-gelb); color: var(--hw-auf-akzent); }
.hw-frage-btns .hw-frage-ok.gefahr { background: var(--hw-danger); border-color: var(--hw-danger); }
.hw-frage-btns button:focus-visible { outline: none; box-shadow: var(--hw-ring); }

/* „Mein Zugang“ hinter dem Namenskürzel: Abmelden und die hinterlegte
   Unterschrift. Das Feld ist so groß wie nötig für einen Zug mit dem Finger. */
.hw-frage.hw-konto { width: min(480px, 96vw); }
.hw-konto [hidden] { display: none; }
.hw-konto-abschnitt { margin-top: 16px; font-size: 12px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--hw-text-2); }
.hw-konto-text { font-size: 13px; color: var(--hw-text-2); line-height: 1.5; margin-top: 6px; }
.hw-sig { position: relative; margin-top: 10px; border: 1px solid var(--hw-border); border-radius: 10px;
  background: var(--hw-surface-2); overflow: hidden; }
.hw-sig canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.hw-sig-linie { position: absolute; left: 22px; right: 22px; bottom: 24px; pointer-events: none;
  border-top: 1px solid var(--hw-border); padding-top: 4px; font-size: 12px; color: var(--hw-text-2);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-sig-leeren { position: absolute; top: 8px; right: 8px; font: inherit; font-size: 12px; padding: 4px 10px;
  border-radius: 8px; border: 1px solid var(--hw-border); background: var(--hw-surface); color: var(--hw-text); cursor: pointer; }
/* „Meine hinterlegte Unterschrift einsetzen“ – oben links im Feld, wie „Leeren“ oben rechts. */
.hw-sig-eigene { position: absolute; top: 8px; left: 8px; font: inherit; font-size: 12px; padding: 4px 10px;
  border-radius: 8px; border: 1px solid var(--hw-border); background: var(--hw-surface); color: var(--hw-text); cursor: pointer; }
.hw-sig-eigene[hidden] { display: none; }
.hw-konto-schalter { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--hw-text); }
.hw-konto-schalter input { width: auto; margin: 0; }
.hw-konto-meldung { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: var(--hw-text-2); }
.hw-konto-meldung.fehler { color: var(--hw-danger); }
.hw-konto .hw-frage-btns { flex-wrap: wrap; }
.hw-konto-luecke { flex: 1 1 auto; }
.hw-konto-pw .hw-sperre-feld { margin-top: 8px; }
.hw-konto-pw .hw-sperre-feld button.hw-btn { width: auto; padding: 0 18px; }
.hw-konto-pw .hw-sperre-fehler.ok { color: var(--hw-ok, var(--hw-text-2)); }

/* ----------------------------------------------------------------------------
   Neuerungen ("Was sich geändert hat")

   Derselbe Vorhang wie bei der Rückfrage, nur breiter und mit rollendem
   Inhalt: Eine Liste kann lang werden, der Dialog darf es nicht. Kopf und
   Fuß stehen fest, gerollt wird nur die Mitte.
   -------------------------------------------------------------------------- */
.hw-news-back { position: fixed; inset: 0; z-index: 12000; background: rgba(8,10,14,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hw-news { width: min(620px, 96vw); max-height: min(78vh, 720px); display: flex; flex-direction: column;
  background: var(--hw-surface); color: var(--hw-text); border: 1px solid var(--hw-border-2);
  border-radius: var(--hw-radius-lg); box-shadow: var(--hw-shadow-lg); font-family: var(--hw-font); }
.hw-news-kopf { padding: 20px 22px 12px; border-bottom: 1px solid var(--hw-border); }
.hw-news-titel { font-size: 16px; font-weight: 700; line-height: 1.35; }
.hw-news-unter { font-size: 12.5px; color: var(--hw-text-2); margin-top: 3px; }
.hw-news-koerper { overflow-y: auto; padding: 4px 22px 6px; }
.hw-news-block { padding: 14px 0 4px; }
.hw-news-block + .hw-news-block { border-top: 1px solid var(--hw-border); }
.hw-news-block h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 9px; }
.hw-news-block h3 span { font-size: 11.5px; font-weight: 500; color: var(--hw-text-2); }
.hw-news-block ul { margin: 0; padding: 0; list-style: none; }
.hw-news-block li { padding: 7px 0 7px 15px; position: relative; font-size: 13.5px; line-height: 1.5; }
.hw-news-block li::before { content: ""; position: absolute; left: 0; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--hw-accent); }
.hw-news-block li b { font-weight: 600; }
.hw-news-block li span { display: block; color: var(--hw-text-2); font-size: 13px; margin-top: 2px; }
.hw-news-fuss { display: flex; align-items: center; gap: 12px; padding: 12px 22px 16px;
  border-top: 1px solid var(--hw-border); }
.hw-news-hinweis { flex: 1 1 auto; font-size: 12px; color: var(--hw-text-2); }
.hw-news-ok { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--hw-radius); border: 1px solid var(--hw-accent);
  background: var(--hw-gelb); color: var(--hw-auf-akzent); }
.hw-news-ok:focus-visible { outline: none; box-shadow: var(--hw-ring); }
/* ---- Datenschutzhinweise --------------------------------------------------
   Derselbe Kasten wie die Neuerungen, aber ohne Ausweg außer Bestätigen oder
   Abmelden. Der Text selbst (.hw-ds-text) steht auch auf /datenschutz/.
   -------------------------------------------------------------------------- */
.hw-ds-back { z-index: 12500; }
.hw-ds { width: min(680px, 96vw); max-height: min(86vh, 820px); }
.hw-ds .hw-news-fuss { flex-wrap: wrap; }
.hw-ds .hw-news-hinweis { flex-basis: 100%; }
.hw-ds .hw-news-hinweis a { color: inherit; }
.hw-ds .hw-ds-ab { margin-left: auto; }
.hw-ds-fehler { padding: 0 22px 12px; color: var(--hw-danger); font-size: 13px; }
.hw-ds-fehler:empty { display: none; }
.hw-ds-text { font-size: 14px; line-height: 1.55; }
.hw-ds-text h3 { margin: 18px 0 6px; font-size: 14.5px; font-weight: 700; }
.hw-ds-text p { margin: 0 0 8px; }
.hw-ds-text ul { margin: 0 0 8px; padding-left: 20px; }
.hw-ds-text li { margin: 3px 0; }
.hw-ds-abschnitt { margin: 16px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--hw-text-2); }
.hw-ds-kurz { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--hw-radius);
  background: var(--hw-surface-2); }
.hw-ds-kurz-kopf { font-size: 12px; font-weight: 700; color: var(--hw-text-2); }
.hw-ds-kurz ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.hw-ds-liste { margin: 0; padding: 0; list-style: none; }
.hw-ds-liste li { border-top: 1px solid var(--hw-border); }
.hw-ds-liste li:last-child { border-bottom: 1px solid var(--hw-border); }
.hw-ds-liste summary { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.hw-ds-liste summary::-webkit-details-marker { display: none; }
.hw-ds-liste summary::after { content: "›"; display: inline-block; margin-left: auto; color: var(--hw-text-2);
  transition: transform .15s; }
.hw-ds-liste details[open] summary::after { transform: rotate(90deg); }
.hw-ds-art { flex: none; min-width: 72px; text-align: center; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; }
.hw-ds-neu { background: var(--hw-ok-hg); color: var(--hw-ok); }
.hw-ds-geaendert { background: var(--hw-warn-hg); color: var(--hw-warn); }
.hw-ds-umbenannt { background: var(--hw-surface-2); color: var(--hw-text-2); }
.hw-ds-entfallen { background: rgba(210,59,59,.12); color: var(--hw-danger); }
.hw-ds-diff { padding: 0 0 12px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.hw-ds-diff ins { background: var(--hw-ok-hg); color: var(--hw-ok); text-decoration: none;
  border-radius: 3px; padding: 0 1px; }
.hw-ds-diff del { background: rgba(210,59,59,.10); color: var(--hw-danger); border-radius: 3px; padding: 0 1px; }
.hw-ds-leer { color: var(--hw-text-2); font-size: 13.5px; }
.hw-ds-ganz { margin: 14px 0 6px; }
.hw-konto-ds { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hw-konto-ds a { color: var(--hw-accent); text-decoration: none; font-weight: 600; }
/* Mitteilungen auf diesem Gerät (26.09.2026): Stand links, Knopf rechts. */
.hw-konto-mt { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.hw-konto-mt .hw-konto-text { flex: 1; margin-top: 0; }
.hw-konto-mt .hw-mt-knopf { flex: none; min-height: 44px; }
/* ---- Posteingang ----------------------------------------------------------
   Derselbe Kasten wie bei den Neuerungen, aber eine Liste von Vorgängen statt
   eines Textes.
   -------------------------------------------------------------------------- */
.hw-post-liste { list-style: none; margin: 0; padding: 0; }
.hw-post-klappe { border-top: 1px solid var(--hw-border); }
.hw-post-klappe:first-child { border-top: 0; }
.hw-post-klappe > summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer;
  list-style: none; font-weight: 700; font-size: 13.5px; }
.hw-post-klappe > summary::-webkit-details-marker { display: none; }
.hw-post-klappe > summary .pfeil { display: inline-block; width: 12px; color: var(--hw-text-2); transition: transform .15s; }
.hw-post-klappe[open] > summary .pfeil { transform: rotate(90deg); }
.hw-post-anzahl { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--hw-surface-2); color: var(--hw-text-2); }
/* NACH DRINGLICHKEIT SORTIERT (01.10.2026, Entwurf „B“). Drei Gruppen und
   unten die zugeklappte Zeile „Erledigt“:

     .hw-pg-gruppe.tun    Titel, eine Unterzeile, rechts der gelbe Knopf
     .hw-pg-gruppe.frist  vorn das Datum, dann „Was · Wer“
     .hw-pg-gruppe.info   Punkt (rot bei Fehler), Titel, Unterzeile, „Ansehen“

   Titel und Unterzeile bleiben EINZEILIG und werden abgeschnitten – alles
   Weitere steht auf der Zielseite. Deshalb `min-width: 0` an jedem
   Textkasten: Ohne ihn schiebt ein langer Name das Fenster in die Breite.
   Jede Zeile, die man antippt, ist mindestens 44 px hoch.

   Gelb nur als Fläche mit schwarzer Schrift; Schrift in Akzentfarbe ist
   --hw-accent (hell das dunkle Ocker, dunkel das Gelb). */
.hw-pg-gruppe { margin: 14px 0 0; }
.hw-pg-gruppe > h3 { margin: 0 0 6px; padding: 0 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--hw-text-2); }
.hw-pg-gruppe.tun > h3 { color: var(--hw-accent); }
.hw-pg-gruppe > .hw-post-liste, .hw-pg-erledigt > .hw-post-liste { background: var(--hw-surface-2);
  border-radius: 14px; overflow: hidden; }
.hw-post-liste > li { border-top: 1px solid var(--hw-border); min-width: 0; }
.hw-post-liste > li:first-child { border-top: 0; }
.hw-pg-tun { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 10px 6px 14px; }
.hw-pg-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-pg-text b, .hw-pg-text small, .hw-pg-was { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-pg-text b { font-size: 14.5px; font-weight: 700; }
.hw-pg-text b.leicht { font-weight: 500; }
.hw-pg-text small { font-size: 12.5px; color: var(--hw-text-2); }
.hw-pg-tat { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 44px; min-width: 104px; padding: 0 14px; border-radius: 12px;
  background: var(--hw-gelb); color: var(--hw-auf-akzent); font-size: 14px; font-weight: 800;
  text-decoration: none; white-space: nowrap; }
.hw-pg-tat:hover { background: var(--hw-gelb-2, var(--hw-gelb)); }
.hw-pg-tat:focus-visible, .hw-pg-frist:focus-visible, .hw-pg-info:focus-visible,
.hw-pg-alle:focus-visible, .hw-pg-erledigt > summary:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-pg-frist, .hw-pg-info { display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  padding: 4px 14px; color: inherit; text-decoration: none; }
.hw-pg-frist { min-height: 48px; }
.hw-pg-info { min-height: 54px; }
a.hw-pg-frist:hover, a.hw-pg-info:hover { background: color-mix(in srgb, var(--hw-text) 5%, transparent); }
.hw-pg-frist > svg { flex: none; color: var(--hw-text-2); opacity: .7; }
.hw-pg-tag { flex: none; width: 50px; font-size: 13.5px; font-weight: 800; color: var(--hw-warn);
  font-variant-numeric: tabular-nums; }
.hw-pg-frist.ueber .hw-pg-tag { color: var(--hw-rot); }
.hw-pg-ueber { flex: none; font-size: 12px; font-weight: 700; color: var(--hw-rot); }
.hw-pg-fg.ueber .hw-pg-mg-pfeil { color: var(--hw-rot); }
.hw-pg-fg .hw-pg-frist { padding-left: 4px; }
.hw-pg-was { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.hw-pg-was b { font-weight: 700; }
.hw-pg-was span { color: var(--hw-text-2); }
.hw-pg-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hw-text-2); opacity: .55; }
.hw-pg-punkt.fehler { background: var(--hw-danger); opacity: 1; }
.hw-pg-ansehen { flex: none; font-size: 13.5px; font-weight: 600; color: var(--hw-accent); }
.hw-pg-alle { display: block; width: 100%; min-height: 44px; border: 0; background: transparent;
  color: var(--hw-accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.hw-pg-erledigt { margin: 16px 0 6px; border-top: 0; }
.hw-pg-erledigt > summary { min-height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--hw-surface-2); font-size: 14.5px; }
.hw-pg-erledigt[open] > summary { margin-bottom: 6px; }
.hw-pg-erledigt .hw-post-anzahl { background: var(--hw-border); }
.hw-pg-zuletzt { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--hw-text-2); }
.hw-post-leer { padding: 22px 0; font-size: 13px; color: var(--hw-text-2); line-height: 1.55; }
/* Mängel zum selben Fahrzeug in einer Kopfzeile (07.10.2026). */
.hw-pg-mg > details > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 60px;
  padding: 6px 12px 6px 14px; cursor: pointer; }
.hw-pg-mg > details > summary::-webkit-details-marker { display: none; }
.hw-pg-mg-pfeil { flex: none; color: var(--hw-text-2); transition: transform .18s; }
.hw-pg-mg details[open] > summary .hw-pg-mg-pfeil { transform: rotate(90deg); }
.hw-pg-mg.sicher { box-shadow: inset 0 0 0 1.5px var(--hw-rot); border-radius: 14px; }
.hw-pg-mg-rot { color: var(--hw-rot); font-weight: 700; }
.hw-pg-mg-zahl { flex: none; padding: 5px 11px; border-radius: 11px; background: var(--hw-border);
  font-size: 13px; font-weight: 700; color: var(--hw-text-2); white-space: nowrap; }
.hw-pg-mg.sicher .hw-pg-mg-zahl { color: var(--hw-rot); }
.hw-pg-mg > details > summary:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-pg-mg-kinder { list-style: none; margin: 0 0 8px 22px; padding: 0 0 0 10px; border-left: 2px solid var(--hw-border); }
.hw-pg-mg.sicher .hw-pg-mg-kinder { border-left-color: var(--hw-rot); }
.hw-pg-mg-kinder > li { border-top: 1px solid var(--hw-border); }
.hw-pg-mg-kinder > li:first-child { border-top: 0; }
.hw-pg-mg-kinder .hw-pg-tun { padding-left: 4px; }
/* Der gelbe Knopf als echter Knopf – bei einem Bündel (03.10.2026) öffnet er
   ein Fenster statt einer Seite. */
button.hw-pg-tat { border: 0; font-family: inherit; cursor: pointer; }
button.hw-pg-tat:focus-visible { outline: none; box-shadow: var(--hw-ring); }
/* Das Fenster hinter einer gebündelten Zeile (03.10.2026): je Punkt eine
   Karte mit Feld, bisher → neu und den Knöpfen; unten „Alle übernehmen“. */
.hw-vb { width: min(560px, 96vw); }
.hw-vb-liste { list-style: none; margin: 12px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hw-vb-punkt { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px;
  background: var(--hw-surface-2); min-width: 0; }
.hw-vb-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hw-vb-kopf b { font-size: 14.5px; font-weight: 700; }
.hw-vb-kopf span { font-size: 12.5px; color: var(--hw-text-2); white-space: nowrap; }
.hw-vb-zeilen { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.hw-vb-zeilen > div { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 10px; font-size: 14px; }
.hw-vb-zeilen dt { color: var(--hw-text-2); }
.hw-vb-zeilen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hw-vb-zeilen dd b { font-weight: 700; }
.hw-vb-zeilen small { font-size: 12px; color: var(--hw-text-2); }
.hw-vb-alt { color: var(--hw-text-2); text-decoration: line-through; }
.hw-vb-hinweis { font-size: 13.5px; font-weight: 600; color: var(--hw-ok); }
.hw-vb-text { font-size: 13.5px; color: var(--hw-text-2); font-style: italic; }
.hw-vb-eins { grid-template-columns: minmax(0, 1fr); }
.hw-vb-alle { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; min-height: 40px;
  padding: 0 14px; border-radius: var(--hw-radius); border: 1px solid var(--hw-border-2);
  background: transparent; color: var(--hw-text); }
.hw-vb-alle:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-vb-alle[hidden] { display: none; }
.hw-vb-meldung.fehler { color: var(--hw-danger); }
.hw-vb .hw-news-fuss { flex-wrap: wrap; }
@media (max-width: 420px) {
  .hw-vb-zeilen > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Der Punkt am Knopf: solange etwas ungelesen ist, und keinen Moment länger. */
.howis-shell .hw-btn.hw-neu { position: relative; }
.howis-shell .hw-btn.hw-neu.hat-neu::after { content: ""; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--hw-accent);
  box-shadow: 0 0 0 2px var(--hw-surface); }
/* Der Posteingang meldet sich in Rot: Er sagt „hier wartet etwas", nicht
   „hier gibt es Neues zu lesen". */
.howis-shell .hw-btn.hw-post { position: relative; }
/* Der Punkt am Posteingang trägt seit dem 03.09.2026 eine ZAHL: Posteingang
   und ungelesene Nachrichten zusammen. Ein blinder Punkt sah bei einer
   Urlaubszeichnung genauso aus wie bei zwölf offenen Nachrichten – und wurde
   deshalb irgendwann nicht mehr angeklickt. Der Inhalt kommt aus
   `data-zahl` (shell.js); ist er leer, bleibt es beim reinen Punkt, denn
   `min-width` und die Rundung tragen auch nichts. */
.howis-shell .hw-btn.hw-post.hat-post::after {
  content: attr(data-zahl);
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px;
  background: var(--hw-danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  box-shadow: 0 0 0 2px var(--hw-surface);
}
.howis-shell .hw-btn.hw-post.hat-post[data-zahl=""]::after {
  content: ""; top: 5px; right: 5px; min-width: 0; width: 7px; height: 7px;
  padding: 0; border-radius: 50%;
}

/* Die Nachrichten als erste Zeile im Posteingang – der Weg dorthin, weil die
   Zahl am Knopf beides zusammenzählt. */
.hw-post-chat {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--hw-accent); border-radius: var(--hw-radius);
  background: var(--hw-accent-hg, var(--hw-surface-2));
  color: var(--hw-text); text-decoration: none;
}
.hw-post-chat:hover { box-shadow: var(--hw-shadow-md); }
.hw-post-chat small { color: var(--hw-text-2); }
.hw-post-chat-zahl {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--hw-gelb); color: var(--hw-auf-akzent); font-size: 13px; font-weight: 700;
}
.hw-post-chat-pfeil { margin-left: auto; color: var(--hw-accent); font-weight: 700; }

/* --------------------------------------------------------------------------
   Tätigkeitsmarken – wofür ein Mitarbeiter eingeteilt werden kann.
   Steht hier und nicht im Werkzeug, weil BEIDE sie zeigen: die
   Mitarbeiterverwaltung an der Person, der Bauzeitenplan an der Baustelle.
   Dieselbe Tätigkeit muss an beiden Stellen gleich aussehen, sonst hilft die
   Farbe beim Wiedererkennen nicht. Der Farbtupfer ist Beiwerk – der Name
   steht immer daneben, damit nichts allein an der Farbe hängt.
   -------------------------------------------------------------------------- */
.hw-taet-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
/* max-width: Ohne das wächst eine Marke wie „LKW-Fahrer (Dreiachser)" über
   ihre Tabellenspalte hinaus und legt sich über die Nachbarspalte – ein
   Rasterfeld schneidet von sich aus nichts ab. */
.hw-taet { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 22px; padding: 0 9px 0 7px; border-radius: 999px;
  background: var(--hw-surface-2); color: var(--hw-text-2);
  font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.hw-taet-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hw-taet .hw-punkt { width: 7px; height: 7px; border-radius: 999px; flex: none; }
/* Dieselben Tätigkeiten, aber nur als Punkte – in einer Listenzeile stünden
   die Namen sonst untereinander und machten aus einer Zeile fünf. Der ganze
   Streifen ist ein Knopf: Er führt dorthin, wo sie geändert werden. */
.hw-taet-punkte { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--hw-text-2); font: inherit; font-size: 12px; cursor: pointer; }
.hw-taet-punkte:hover { border-color: var(--hw-border-2); background: var(--hw-surface-2); }
.hw-taet-punkte:focus-visible { outline: none; border-color: var(--hw-accent); box-shadow: var(--hw-ring); }
.hw-taet-punkte .hw-punkt { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.hw-taet-leer { font-size: 12.5px; color: var(--hw-text-3, var(--hw-text-2)); font-style: italic; }

/* ---- Was diese Rolle nicht darf ------------------------------------------
   Der Vorhang über einer Seite, die dieser Rolle nicht offensteht, und die
   Leiste, die an eine laufende Ansichtsprobe erinnert. */
.hw-sperre {
  position: fixed; left: 0; right: 0; top: var(--hw-shell-h); bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--hw-bg);
}
.hw-gesperrt body { overflow: hidden; }
.hw-sperre-karte {
  max-width: 460px; text-align: center;
  padding: 30px 28px; background: var(--hw-surface);
  border: 1px solid var(--hw-border); border-radius: var(--hw-radius-lg); box-shadow: var(--hw-shadow-sm);
}
.hw-sperre-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px;
  background: var(--hw-surface-2); color: var(--hw-text-2);
}
.hw-sperre-zeichen svg { width: 24px; height: 24px; }
.hw-sperre-karte h1 { margin: 0 0 8px; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.hw-sperre-karte p { margin: 0 0 8px; font-size: 13.5px; color: var(--hw-text-2); line-height: 1.5; }
.hw-sperre-weg { margin-bottom: 18px !important; }
/* Der Weg zurück ist ein Knopf, kein Fließtext-Verweis – er ist das Einzige,
   was auf dieser Seite noch zu tun ist. */
.hw-sperre-karte a.hw-btn {
  display: inline-flex; align-items: center; width: auto; height: auto;
  min-height: 32px; padding: 0 15px; border-radius: var(--hw-radius);
  border: 0; background: var(--hw-accent-grad); color: var(--hw-auf-akzent);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
/* Dieselbe Sperre trägt auch das FORMULAR für das eigene Passwort. Links
   ausgerichtet, obwohl die Karte sonst mittig steht: Eingabefelder mit
   zentrierten Beschriftungen liest niemand gern, und zwei Felder untereinander
   brauchen eine gemeinsame Kante. */
.hw-sperre-feld { text-align: left; margin: 16px 0 4px; }
.hw-sperre-feld label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--hw-text-2); margin: 0 0 5px;
}
.hw-sperre-feld input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--hw-border-2); border-radius: var(--hw-radius);
  background: var(--hw-surface-2); color: var(--hw-text);
  /* 16 px, damit iOS beim Antippen nicht hineinzoomt. */
  font: inherit; font-size: 16px;
}
.hw-sperre-feld input:focus { outline: none; box-shadow: var(--hw-ring); border-color: var(--hw-accent); }
.hw-sperre-feld button.hw-btn {
  width: 100%; min-height: 40px; border: 0; border-radius: var(--hw-radius);
  background: var(--hw-accent-grad); color: var(--hw-auf-akzent); font: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.hw-sperre-fehler { color: var(--hw-danger); font-size: 13px; min-height: 18px; margin-bottom: 6px; }
/* Abmelden ist der zweite Ausweg und sieht deshalb nicht aus wie der erste. */
.hw-sperre-ab {
  background: none; border: 0; padding: 0; color: var(--hw-accent);
  font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline;
}

/* Läuft gerade eine Ansichtsprobe, darf der Vorhang ihre Leiste nicht
   verdecken – sonst käme man aus der Probe nicht mehr heraus. */
.hw-mit-probe .hw-sperre { bottom: var(--hw-leisten-h, 56px); }

/* Alle unteren Leisten stehen ÜBEREINANDER in einem Kasten, nicht jede für
   sich am unteren Rand: Zwei Hinweise gleichzeitig – Ansichtsprobe und
   fehlendes Passwort – lagen sonst aufeinander. Wie hoch der Kasten wirklich
   ist, misst shell.js und schreibt es nach --hw-leisten-h; ein fester Wert
   ging schief, sobald der Text auf dem Telefon zweizeilig wurde und sich über
   den Inhalt legte. */
.hw-leisten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 190; }
.hw-probe-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px max(14px, env(safe-area-inset-left)) 9px;
  background: var(--hw-warn-hg); border-top: 1px solid var(--hw-warn);
  color: var(--hw-warn); font-size: 13px;
}
.hw-leisten > .hw-probe-bar:last-child { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
.hw-probe-text { flex: 1 1 auto; min-width: 0; }
.hw-probe-bar b { font-weight: 650; }
/* Die Ansichtsprobe: volle Farbfläche statt Hinweisstreifen, und ein Rahmen
   um die ganze Seite – sie darf nicht mit der eigenen Sicht zu verwechseln sein. */
.hw-probe-bar.hw-probe-aktiv { background: var(--hw-warn); color: #1b1300; border-top: 0;
  font-size: 14px; padding-top: 12px; padding-bottom: 12px; }
.hw-leisten > .hw-probe-bar.hw-probe-aktiv:last-child { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.hw-probe-bar.hw-probe-aktiv b { font-weight: 750; }

/* --- Am Telefon wie die App (29.09.2026) ---------------------------------
   Bis 767 px: keine schwarze Leiste, sondern der große Titel der Seite mit
   dem Posteingang daneben (.hw-mkopf), und unten die fünf Reiter der App
   (.hw-tabs) – für jede Rolle. Ab 768 px ist beides unsichtbar und die
   Kopfzeile unverändert; die Regeln stehen deshalb ALLE in der Medienabfrage.
   Vorbild: ios/HoWis/Ansichten/HauptAnsicht.swift (Kopf, Reiter). */
.hw-mkopf, .hw-tabs { display: none; }
@media (max-width: 767px) {
  .howis-shell { display: none !important; }
  .hw-mkopf {
    display: flex; align-items: flex-start; gap: 12px;
    box-sizing: border-box; width: 100%;
    padding: calc(14px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
    font-family: var(--hw-font); color: var(--hw-text); background: transparent;
  }
  .hw-mkopf * { box-sizing: border-box; }
  .hw-mkopf-text { flex: 1 1 auto; min-width: 0; }
  .hw-mkopf:not(.hw-mkopf-titel-da) .hw-mkopf-text { display: none; }
  .hw-mkopf-titel {
    margin: 0; font-size: 28px; font-weight: 750; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--hw-text); overflow-wrap: anywhere;
  }
  .hw-mkopf-unter { margin-top: 3px; font-size: 14px; color: var(--hw-text-2); overflow-wrap: anywhere; }
  .hw-mkopf-zurueck {
    display: inline-flex; align-items: center; gap: 2px; min-height: 40px; margin-left: -6px; padding: 0 8px 0 2px;
    border-radius: 999px; color: var(--hw-accent); text-decoration: none; font-size: 16px; font-weight: 600;
    flex: 1 1 auto; align-self: center;
  }
  .hw-mkopf-zurueck[hidden] { display: none; }
  .hw-mkopf-zurueck svg { width: 22px; height: 22px; flex: none; }
  /* Der Briefkasten neben dem Titel, mit der Zahl als Plakette – Gelb nur
     als Fläche, darauf Schwarz. 44 × 44, damit ihn ein Daumen trifft. */
  .hw-mpost {
    position: relative; flex: none; width: 44px; height: 44px; margin: -2px -8px 0 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 12px; background: transparent; color: var(--hw-accent); cursor: pointer;
  }
  .hw-mpost svg { width: 28px; height: 28px; }
  .hw-mpost:active { background: var(--hw-surface-2); }
  .hw-mpost-zahl:empty { display: none; }
  .hw-mpost-zahl {
    position: absolute; top: 2px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--hw-gelb); color: var(--hw-auf-akzent);
    font-size: 11.5px; font-weight: 750; line-height: 1; box-shadow: 0 0 0 2px var(--hw-bg);
  }

  /* Die Reiter schweben als Pille über dem Inhalt, wie die Leiste der App;
     der gewählte trägt eine graue Fläche und die Akzentfarbe. */
  .hw-tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    box-sizing: border-box;
    margin: 0 max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    padding: 4px; border-radius: 34px;
    background: color-mix(in srgb, var(--hw-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--hw-border); box-shadow: var(--hw-shadow-md);
    font-family: var(--hw-font);
  }
  .hw-tabs * { box-sizing: border-box; }
  .hw-tabs a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-width: 0; min-height: 54px; padding: 5px 2px 4px; border-radius: 28px;
    color: var(--hw-text); text-decoration: none;
    font-size: 11px; font-weight: 550; line-height: 1.1; text-align: center; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .hw-tab-wort { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .hw-tab-zeichen { position: relative; display: inline-flex; }
  .hw-tabs a svg { width: 24px; height: 24px; }
  .hw-tabs a.active { background: var(--hw-surface-2); color: var(--hw-accent); font-weight: 650; }
  .hw-tabs a:active { background: var(--hw-surface-2); }
  .hw-tab-zahl:empty { display: none; }
  .hw-tab-zahl {
    position: absolute; top: -5px; left: 15px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--hw-rot); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  }
}
@media (max-width: 340px) {
  .hw-tabs a { font-size: 10px; }
  .hw-tabs a svg { width: 22px; height: 22px; }
}
.hw-probe-bar.hw-probe-aktiv .hw-btn { background: #1b1300; color: #fff; border-color: #1b1300; font-weight: 650; }
html.hw-in-probe::after { content: ""; position: fixed; inset: 0; border: 4px solid var(--hw-warn);
  pointer-events: none; z-index: 12500; }
.hw-mit-probe body { padding-bottom: var(--hw-leisten-h, 56px); }
/* Der Hinweis auf die noch fehlende Einrichtung ist keine Warnung im Betrieb,
   sondern ein offener Zustand – deshalb in der Akzentfarbe und nicht in Rot. */
.hw-erst-bar { background: var(--hw-surface); border-top: 1px solid var(--hw-accent); color: var(--hw-text); }
.hw-erst-bar .hw-btn { width: auto; padding: 0 13px; border: 0; background: var(--hw-accent-grad); color: var(--hw-auf-akzent); font-weight: 600; text-decoration: none; }
/* Die Initialen des Angemeldeten in der Kopfzeile. */
.hw-btn.hw-ich { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }

/* ---- Reiterleisten: der Rest unter einem Knopf ----------------------------
   Der Knopf trägt die Reiter-Klasse des Werkzeugs, damit er aussieht wie ein
   Reiter; hier steht nur, was ihn vom Reiter unterscheidet. Das aufgeklappte
   Menü hängt am Rumpf – die Leiste selbst ist beschnitten. */
.wz-tab.hw-mehr { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 0 10px; }
.wz-tab.hw-mehr svg { width: 18px; height: 18px; }
.wz-tab.hw-mehr .hw-mehr-zahl:not(:empty) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--hw-surface-2); color: var(--hw-text-2);
  font-size: 10.5px; font-weight: 700; line-height: 1;
}
.hw-reiter-menue {
  position: fixed; z-index: 90; min-width: 172px; max-width: min(84vw, 280px);
  padding: 5px; background: var(--hw-surface);
  border: 1px solid var(--hw-border-2); border-radius: var(--hw-radius);
  box-shadow: var(--hw-shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
}
.hw-reiter-menue[hidden] { display: none; }
.hw-reiter-eintrag {
  display: block; width: 100%; text-align: left;
  min-height: 36px; padding: 0 11px; border: 0; border-radius: 7px;
  background: transparent; color: var(--hw-text);
  font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-reiter-eintrag:hover { background: var(--hw-surface-2); }
.hw-reiter-eintrag.an { color: var(--hw-accent); font-weight: 650; }
.hw-reiter-eintrag:focus-visible { outline: none; box-shadow: var(--hw-ring); }

/* ---- Kalenderwoche an einem Datumsfeld -----------------------------------
   Der Kalender, den der Browser beim Anklicken aufklappt, gehört ihm – dort
   lässt sich keine Wochenspalte ergänzen. Die Woche steht deshalb unter dem
   Feld. Sie wird von portal/personal.js gesetzt und bleibt leer, solange kein
   Datum gewählt ist; dann nimmt sie auch keinen Platz weg. */
/* Die Höhe bleibt reserviert, auch solange kein Datum gewählt ist. Sonst wäre
   das Feld MIT Datum um eine Zeile höher als das daneben ohne – und weil die
   Felder in ihren Reihen unten bündig sitzen, säßen sie dann schief
   zueinander, sobald man das erste Datum einträgt. */
.hw-kw { display: block; min-height: 15px; font-size: 11px; font-weight: 500; color: var(--hw-text-2); line-height: 1.35; }

/* ---- Eigener Kalender für Datumsfelder (portal/kalender.js) ---------------
   Der Kalender des Browsers kennt keine Kalenderwochen und lässt sich nicht
   erweitern – auf dem Bau wird aber in KW geplant. Deshalb ein eigener.
   Er greift nur bei feinem Zeiger; auf dem Telefon bleibt der Systemkalender,
   dessen Walzen mit dem Daumen schneller sind als jedes Monatsraster. */
.hw-eigener-kalender input[type="date"]::-webkit-calendar-picker-indicator {
  /* Das Symbol bleibt sichtbar – es ist die vertraute Schaltfläche –, nimmt
     aber keine Klicks mehr an: Die gehen ans Feld, und das öffnet den eigenen
     Kalender. Ohne das öffneten sich beide übereinander. */
  pointer-events: none;
}
/* In Safari reicht das nicht: Dort klappt der native Kalender auch ohne das
   Symbol auf, und im Safari des iMac war er am 01.09.2026 immer noch da.
   Deshalb dort gar kein Symbol mehr – was nicht da ist, lässt sich auch nicht
   anklicken. Der eigene Kalender öffnet ohnehin beim Klick ins Feld, also
   fehlt nichts; nur in Chrome bleibt das vertraute Zeichen stehen. */
.hw-safari.hw-eigener-kalender input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
.hw-kal {
  position: fixed; z-index: 7000; width: 268px; padding: 10px;
  background: var(--hw-surface); color: var(--hw-text);
  border: 1px solid var(--hw-border); border-radius: var(--hw-radius-lg);
  box-shadow: var(--hw-shadow-lg); font-size: 13px;
}
.hw-kal[hidden] { display: none; }
.hw-kal-kopf { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.hw-kal-titel { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 4px;
  font-weight: 650; font-size: 13.5px; min-width: 0; }
.hw-kal-monat, .hw-kal-jahr {
  height: 26px; border: 1px solid transparent; border-radius: var(--hw-radius); background: transparent;
  color: var(--hw-text); font: inherit; font-weight: 650; font-size: 13.5px; padding: 0 4px; margin: 0;
}
.hw-kal-monat { cursor: pointer; max-width: 104px; }
.hw-kal-jahr { width: 52px; text-align: left; font-variant-numeric: tabular-nums; }
.hw-kal-monat:hover, .hw-kal-jahr:hover { background: var(--hw-surface-2); }
.hw-kal-monat:focus-visible, .hw-kal-jahr:focus { outline: none; border-color: var(--hw-accent); background: var(--hw-surface-2); }
.hw-kal-nav {
  flex: none; width: 24px; height: 26px; border: 0; border-radius: var(--hw-radius);
  background: transparent; color: var(--hw-text-2); font-size: 14px; line-height: 1;
}
.hw-kal-nav:hover { background: var(--hw-surface-2); color: var(--hw-text); }
.hw-kal-raster { display: grid; grid-template-columns: 30px repeat(7, 1fr); gap: 1px; }
.hw-kal-wd, .hw-kal-kw-kopf {
  height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em; color: var(--hw-text-2);
}
.hw-kal-kw-kopf, .hw-kal-kw { border-right: 1px solid var(--hw-border); }
/* Die Wochenspalte ist der Grund für den ganzen Aufwand – sie steht deshalb
   vorn und wird nicht mitgescrollt oder ausgeblendet. */
.hw-kal-kw {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--hw-text-2);
  background: var(--hw-surface-2); margin-right: 3px; border-radius: 3px 0 0 3px;
}
.hw-kal-tag {
  height: 30px; border: 0; border-radius: var(--hw-radius);
  background: transparent; color: var(--hw-text); font-size: 12.5px; font-weight: 500;
}
.hw-kal-tag:hover:not(:disabled) { background: var(--hw-surface-2); }
.hw-kal-tag.we { color: var(--hw-text-2); }
.hw-kal-tag.fremd { opacity: .4; }
.hw-kal-tag.heute { box-shadow: inset 0 0 0 1px var(--hw-accent); color: var(--hw-accent); font-weight: 700; }
/* Der Beginn des Zeitraums, wenn gerade das Ende gewählt wird: gefüllt, aber
   blass – er ist Orientierung, nicht die Auswahl. */
.hw-kal-tag.ab { background: var(--hw-surface-2); font-weight: 700; }
.hw-kal-tag.ab.gewaehlt { background: var(--hw-accent-2); }
.hw-kal-tag.gewaehlt { background: var(--hw-accent-2); color: #fff; font-weight: 700; box-shadow: none; }
:root[data-theme="dark"] .hw-kal-tag.gewaehlt { background: var(--hw-gelb); color: var(--hw-auf-akzent); }
.hw-kal-tag:disabled { opacity: .25; }
.hw-kal-fuss { display: flex; justify-content: space-between; margin-top: 8px; }
.hw-kal-text { border: 0; background: transparent; color: var(--hw-accent); font-size: 12.5px; font-weight: 600; padding: 4px 2px; }
.hw-kal-text:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Telefon: was für JEDES Werkzeug gilt.

   Diese Datei wird von shell.js in jede Seite eingehängt – sie ist die eine
   Stelle, an der Regeln stehen können, die überall greifen sollen. Der Block
   steht bewusst am Ende: Er soll die Werkzeugstile überschreiben, und zwar
   nur unterhalb der Schwelle.

   820px, nicht 640: Ein iPhone im QUERFORMAT ist 812px breit. Bei 640 fiele
   genau die Haltung heraus, in der man auf der Baustelle etwas nachschlägt. */
@media (max-width: 820px) {

  /* Safari zoomt beim Antippen in jedes Eingabefeld hinein, dessen Schrift
     kleiner als 16px ist – und zoomt NICHT wieder heraus. Man tippt eine Zahl
     ein und sitzt danach in einer vergrößerten, verschobenen Seite fest. Das
     ist keine Geschmacksfrage: 16px ist die Schwelle, ab der Safari es lässt.

     !important steht hier bewusst: Die Werkzeuge setzen ihre Feldgrößen teils
     über Klassen und Kennungen und gewinnen damit gegen einen schlichten
     Element-Selektor. Es gibt aber keinen Fall, in dem ein Feld auf einem
     Telefon kleiner als 16px sein DARF – die Regel ist keine Vorliebe,
     sondern eine Bedingung des Browsers. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  /* Ein Finger trifft rund 44px sicher, 30px nicht. Betrifft vor allem die
     Werkzeugleisten, deren Knöpfe für die Maus bemessen sind. */
  button,
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]),
  [role="button"],
  .knopf { min-height: 44px; }

  /* Ausgenommen: die Kopfleiste hat eine feste Höhe – dort würden 44px die
     Leiste sprengen, statt sie bedienbarer zu machen. */
  .howis-shell button,
  .howis-shell a,
  .howis-shell select,
  .howis-shell .knopf { min-height: 0; }

  /* Ankreuzfelder sind mit 15px kaum zu treffen. Die Beschriftung daneben
     schaltet ohnehin mit – das hier ist für den Fall, dass jemand das
     Kästchen selbst anvisiert. */
  input[type="checkbox"],
  input[type="radio"] { min-width: 20px; min-height: 20px; }

  /* Bewusst KEIN overflow-x:hidden auf html/body: Das verdeckt einen Überlauf,
     statt ihn zu beheben, und macht body zum Bildlauf-Bezug – klebende
     Kopfzeilen hören dann auf zu kleben. Überläufe werden dort behoben, wo
     sie entstehen.

     Was legitim breiter ist als das Fenster – Tafeln, Tabellen,
     Zeichenflächen – bekommt seinen eigenen Bildlauf im Werkzeug selbst. */
}

/* --------------------------------------------------------------------------
   Stufenlos statt sprunghaft.

   Umbruchpunkte kümmern sich um das, was umbrechen muss – Spalten, die zu
   Zeilen werden. Für alles andere ist ein Sprung bei 700px die falsche
   Antwort: Ein Fenster ist selten genau 700 breit. Abstände und Zeilenlängen
   folgen deshalb der Breite, nicht einer Schwelle.
   -------------------------------------------------------------------------- */

/* Seitenrand wächst mit. Auf 320px fraßen feste 22px je Seite ein Siebtel der
   Breite; auf einem 27-Zöller waren dieselben 22px ein Faden.

   „body main" statt „main": Diese Datei wird VOR den Stilen der Werkzeuge
   geladen – bei gleicher Spezifität gewinnt deshalb das Werkzeug, und
   „main { padding: 18px 22px 26px }" hätte die Regel hier stumm überschrieben.
   Ein vorangestelltes body verschiebt das Gewicht, ohne zu !important zu
   greifen: Das Werkzeug kann seinen Rand weiterhin gezielt bestimmen, wenn es
   das ausdrücklich will. */
body main, body .wrap {
  padding-left: clamp(12px, 2.2vw, 28px);
  padding-right: clamp(12px, 2.2vw, 28px);
  padding-left: max(clamp(12px, 2.2vw, 28px), env(safe-area-inset-left));
  padding-right: max(clamp(12px, 2.2vw, 28px), env(safe-area-inset-right));
}

/* Fließtext bekommt eine ZEILENLÄNGE, keine Bildschirmbreite. Gemessen vor
   dieser Regel: Die Fußnote im Bauzeitenplan lief auf einem 1600er Schirm
   über 214 Zeichen je Zeile, die in der Mitarbeiterverwaltung über 166, die
   Hinweise im FFG-Rechner über 123. Lesbar sind 45 bis 90 – darüber verliert
   das Auge beim Zeilenwechsel die Spur und liest Zeilen doppelt.

   Ausdrücklich NICHT betroffen: Tabellen, Tafeln und Zeichenflächen. Die
   sollen jede Breite nutzen, die da ist – dort ist mehr wirklich mehr. */
body .fussnote,
body .hint,
body .hinweis,
body .hw-hinweis,
body p.hint,
body .lead { max-width: 70ch; }
/* 70ch, nicht 78: Die Einheit ch misst die Breite der Ziffer Null. Deutscher
   Fließtext mit seinen langen Wörtern bringt darin rund 20 % mehr Zeichen
   unter – gemessen 92 tatsächliche Zeichen bei einer Grenze von 78ch. 70ch
   landen bei etwa 82 und damit im lesbaren Bereich. */

/* ---- Erklärungen zum Aufklappen (details.hw-mehr) ------------------------
   Statt eines Absatzes Fließtext unter einer Liste oder einem Feld: EINE
   Zeile zum Aufklappen, darin kurze Zeilen – links das Stichwort, rechts ein
   Satz. Bis zum 11.09.2026 standen solche Erklärungen als Textwand da; die
   Zeilenlänge oben half beim Lesen, aber gelesen hat sie trotzdem niemand.
   Aufbau:
     <details class="hw-mehr"><summary>Titel</summary>
       <dl class="hw-mehr-liste"><div><dt>Stichwort</dt><dd>Satz</dd></div>…</dl>
     </details>
   oder statt der Liste <ul class="hw-mehr-punkte"><li>…</li></ul>. */
details.hw-mehr { margin-top: 10px; font-size: 12.5px; color: var(--hw-text-2); }
details.hw-mehr > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; font-weight: 600; user-select: none; }
details.hw-mehr > summary::-webkit-details-marker { display: none; }
details.hw-mehr > summary::before { content: "▸"; font-size: 11px; transition: transform .12s; }
details.hw-mehr[open] > summary::before { transform: rotate(90deg); }
details.hw-mehr > summary:hover { color: var(--hw-text); }
details.hw-mehr > summary:focus-visible { outline: none; box-shadow: var(--hw-ring); border-radius: 4px; }
.hw-mehr-liste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; }
.hw-mehr-liste > div { display: flex; gap: 10px; min-width: 0; }
.hw-mehr-liste dt { flex: 0 0 132px; font-weight: 600; color: var(--hw-text); }
.hw-mehr-liste dd { margin: 0; min-width: 0; }
.hw-mehr-liste b, .hw-mehr-punkte b { color: var(--hw-text); font-weight: 600; }
ul.hw-mehr-punkte { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
/* Schmal: Stichwort über den Satz statt daneben – 132 px Stichwortspalte
   ließen auf dem Telefon kaum Platz für den Satz. */
@media (max-width: 520px) {
  .hw-mehr-liste > div { flex-direction: column; gap: 1px; }
  .hw-mehr-liste dt { flex: none; }
}

/* ---- Tankpreise: die Karte der Mitarbeiter (01.10.2026) -------------------
   „Tanken · Diesel je Liter“ bei der Fahrzeugübernahme – je Tankkarte eine
   Zeile mit Kartensymbol, Name, Zeitraum und groß dem Brutto-Preis von heute.
   Das HTML baut portal/tankpreise.js (karteHtml); dasselbe Symbol steht auf
   der Seite des Admins im Fuhrpark. Hier und nicht im Werkzeug, weil zwei
   Seiten es zeigen.

   Die Farben der Symbole sind die der Plastikkarten (Radius blau, Knauber
   weiß mit grauem Streifen) und bleiben in Hell und Dunkel gleich – sonst
   erkennte man die Karte im Geldbeutel nicht wieder. */
.tk-symbol { flex: none; display: inline-block; box-sizing: border-box; width: 46px; height: 30px;
  border-radius: 6px; position: relative; overflow: hidden; }
.tk-symbol > span { position: absolute; display: block; }
.tk-symbol.tk-radius { background: #1f5fbf; }
.tk-symbol.tk-radius > span { left: 6px; bottom: 6px; width: 16px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.75); }
.tk-symbol.tk-knauber { background: #ededea; border: 1px solid #c9c6be; }
.tk-symbol.tk-knauber > span { left: 0; right: 0; bottom: 0; height: 12px; background: #9c9c98; }

.tk-karte { box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px;
  background: var(--hw-surface); border: 1px solid var(--hw-border); border-radius: var(--hw-radius-lg); color: var(--hw-text); }
.tk-karte * { box-sizing: border-box; }
.tk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tk-titel { font-size: 14px; font-weight: 600; color: var(--hw-text-2); }
.tk-zusatz { font-size: 12px; color: var(--hw-text-2); white-space: nowrap; }
.tk-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  border: 2px solid transparent; background: var(--hw-surface-2); }
.tk-zeile.tk-guenstiger { border-color: var(--hw-gelb); background: var(--hw-accent-hg); }
.tk-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-name { font-size: 16px; font-weight: 700; }
.tk-schild { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--hw-gelb); color: var(--hw-auf-akzent); font-size: 12px; font-weight: 800; }
.tk-unter { font-size: 13px; color: var(--hw-text-2); }
.tk-unter > span { white-space: nowrap; }
.tk-hinweis { font-size: 13px; font-weight: 600; color: var(--hw-warn); }
.tk-kommt { font-size: 13px; font-weight: 700; color: var(--hw-ok); }
.tk-preis { flex: none; font-size: 22px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Nicht mehr aktuell: der letzte bekannte Preis in Grau – er steht noch da,
   damit man eine Größenordnung hat, aber er sieht nicht aus wie der von heute. */
.tk-zeile.tk-veraltet .tk-preis, .tk-zeile.tk-veraltet .tk-name { color: var(--hw-text-2); }
.tk-zeile.tk-veraltet .tk-symbol { opacity: .55; }

/* Auf schmalen Geräten drängt die Schaltfläche rechts in der Werkzeugleiste
   die Reiter an den Rand: „Mitarbeiter anlegen" nimmt auf 320px die Hälfte
   der Leiste, und „Belegschaft" war nur noch als „Beleg" zu sehen. Der
   entbehrliche Teil der Beschriftung fällt weg – aus „Projekt einplanen"
   wird „einplanen", aus dem Druckknopf sein Symbol. Die Handlung bleibt
   dieselbe, und der volle Wortlaut steht weiter im title-Attribut. */
@media (max-width: 620px) {
  .wz-lang { display: none; }
}

/* --------------------------------------------------------------------------
   Ein Knopf sieht überall gleich aus.

   Gemessen war das vorher nicht so: sechs Geometrien nebeneinander –
   Höhen 25/27/37/37/40/44 px, Radien 0/6/7/7/10/11 px, Schriftgrößen
   12,5/13,5/14/16 px. Und drei Namen für dieselbe Sache: .knopf in
   Bauzeiten und Mitarbeiterverwaltung, .btn in Lieferanten, Kunden und
   Abbruch, .btn-primary/-secondary im Angebotsrechner.

   Umbenannt wird NICHT – 177 Fundstellen umzuschreiben brächte Risiko ohne
   Gegenwert. Stattdessen bekommen alle Namen dieselben Maße. Farbe und
   Gewicht bleiben beim Werkzeug: Sie tragen die Bedeutung (zurückhaltend,
   primär, Gefahr), und die ist bereits überall dieselbe.

   „body" davor, weil diese Datei VOR den Stilen der Werkzeuge geladen wird –
   bei gleicher Spezifität gewänne sonst das Werkzeug.
   -------------------------------------------------------------------------- */
body .knopf,
body .btn,
body .btn-primary,
body .btn-secondary,
body .btn-danger,
body .btn-add,
body .btn-ghost,
body .btn-print {
  min-height: 32px;
  padding: 0 13px;
  border-radius: var(--hw-radius);
  font-family: var(--hw-font);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

/* Die kleine Ausführung – für dichte Werkzeugleisten über einer Zeichenfläche
   oder Tabelle, wo ein 32er Knopf die Zeile sprengen würde. */
body .knopf.klein,
body .btn.sm,
body .mini {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
  border-radius: var(--hw-radius);
}

/* --------------------------------------------------------------------------
   Grundschriftgröße.

   Gemessen gab es drei: 14px in Bauzeiten, Mitarbeiterverwaltung,
   Lieferanten und CAD, 15px in Portal, Kunden, Abbruch und Angebot, 16px im
   FFG-Rechner. Die 16 waren kein Entwurf, sondern die Voreinstellung des
   Browsers – dort ist schlicht nie eine Größe gesetzt worden.

   15px ist ab hier der Satz der Suite. Wer keine eigene Größe angibt, bekommt
   ihn. Die vier dichten Werkzeuge setzen weiterhin ausdrücklich 14px: Sie
   zeigen Tabellen und Tafeln, in denen eine Zeile mehr aufs Blatt passen
   muss. Das ist ein Entwurf, kein Zufall – und weil sie ihre Größe selbst
   setzen, gewinnen sie hier von allein.
   -------------------------------------------------------------------------- */
body { font-size: 15px; }

/* --------------------------------------------------------------------------
   Stechuhr — die Karte steht an zwei Stellen: auf der Startseite und im
   Reiter „Zeiten". Deshalb liegt sie hier und nicht in einem Werkzeug.

   Autark gebaut: Knöpfe, Marke und Schilder bekommen INNERHALB der Karte
   ihren Stil, weil die Startseite die Varianten „primaer", „gefahr" und
   „klein" sonst nicht kennt. So sieht sie überall gleich aus, statt je nach
   Seite ein bisschen anders.
   -------------------------------------------------------------------------- */
/* minmax(0, 1fr) und nicht die stille Voreinstellung `auto`: Eine auto-Spalte
   wird nie schmaler als ihr breitester Inhalt – und der ist die
   Baustellenauswahl, denn ein <select> ist so breit wie sein längster Eintrag.
   Bis zum 14.09.2026 war die Karte deshalb auf jedem Telefon so breit wie
   „Bauherr · Vorhaben" der längsten Baustelle, bei 320 px Bildschirm gemessen
   1018 px, und die ganze Seite ließ sich seitwärts schieben. Nachgemessen in
   tools/seitenbreite.pruefung.mjs. */
.stech { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.stech-karte { border: 1px solid var(--hw-border); border-radius: var(--hw-radius); background: var(--hw-surface);
  padding: 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stech-karte.laeuft { border-color: color-mix(in srgb, var(--hw-ok) 55%, var(--hw-border)); }
.stech-karte.pausiert { border-color: color-mix(in srgb, var(--hw-warn) 55%, var(--hw-border)); }
.stech-kopf { font-size: 12.5px; font-weight: 650; color: var(--hw-text-2); display: flex; align-items: center; gap: 7px; }
.stech-punkt { width: 8px; height: 8px; border-radius: 999px; background: var(--hw-warn); }
.stech-karte.laeuft .stech-punkt { background: var(--hw-ok); animation: stechPuls 2s ease-in-out infinite; }
@keyframes stechPuls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stech-zahl { display: flex; flex-direction: column; line-height: 1.25; }
.stech-zahl b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stech-zahl .grau { font-size: 12px; }
/* Die eigene laufende Uhr (30.09.2026): „Stechuhr läuft · heute gesamt“
   über der großen Zahl, nicht daneben. */
.stech-karte.laeuft > .stech-kopf, .stech-karte.pausiert > .stech-kopf { flex: 1 1 100%; margin-bottom: -10px; }
.stech-karte.laeuft > .stech-zahl b, .stech-karte.pausiert > .stech-zahl b { font-size: 30px; }
.stech .grau { color: var(--hw-text-2); }
.stech-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.stech-fuss { flex: 1 1 100%; font-size: 12px; color: var(--hw-text-2); line-height: 1.45; }
.stech-live { border: 1px solid var(--hw-border); border-radius: var(--hw-radius); background: var(--hw-surface); overflow: hidden; }
.stech-live-kopf { display: flex; align-items: baseline; gap: 10px; padding: 11px 16px; font-size: 13px; font-weight: 650;
  border-bottom: 1px solid var(--hw-border); }
.stech-live-kopf .grau { font-size: 12px; font-weight: 500; }
/* Die Zeile darf umbrechen. Der Name bekommt mindestens 180 px; ist daneben
   kein Platz mehr für Uhrzeit, Schild und Knopf, rutschen die gemeinsam
   (.stech-rechts) rechtsbündig in eine zweite Zeile – und schrumpfen dabei
   nie, sonst wird aus „läuft" ein „lä". */
.stech-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 16px;
  border-bottom: 1px solid var(--hw-border); }
.stech-zeile:last-child { border-bottom: 0; }
.stech-name { flex: 1 1 180px; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.stech-rechts { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.stech-seit { font-size: 12px; white-space: nowrap; }
.stech-dauer { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; white-space: nowrap; }
.stech-dauer b { font-size: 15px; font-variant-numeric: tabular-nums; }
.stech-dauer .grau { font-size: 11.5px; }
.stech-leer { padding: 12px 16px; font-size: 13px; color: var(--hw-text-2); }
/* Marke und Schilder in der Live-Zeile – die Startseite hat sie, die
   Mitarbeiterverwaltung auch, aber nicht in derselben Größe. */
.stech .marke.klein { width: 28px; height: 28px; flex: none; border-radius: 9px; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hw-accent-grad); color: var(--hw-auf-akzent); font-weight: 700; }
.stech .schild { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; }
.stech .schild.ok { background: var(--hw-ok-hg); color: var(--hw-ok); }
.stech .schild.warn { background: var(--hw-warn-hg); color: var(--hw-warn); }
/* Die Knöpfe der Karte: gleiche Gestalt in jeder Seite. */
.stech .knopf { height: 32px; min-height: 32px; padding: 0 13px; border-radius: var(--hw-radius);
  border: 1px solid var(--hw-border-2); background: var(--hw-surface); color: var(--hw-text-2);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; }
.stech .knopf:hover { background: var(--hw-surface-2); color: var(--hw-text); border-color: var(--hw-border-2); }
.stech .knopf.primaer { border-color: transparent; background: var(--hw-accent-grad); color: var(--hw-auf-akzent);
  font-weight: 600; box-shadow: var(--hw-shadow-sm); }
.stech .knopf.primaer:hover { color: var(--hw-auf-akzent); }
.stech .knopf.gefahr { border-color: transparent; background: transparent; color: var(--hw-danger); }
.stech .knopf.gefahr:hover { background: transparent; color: var(--hw-danger); }
.stech .knopf.klein { height: 28px; min-height: 28px; padding: 0 10px; font-size: 12px; }
@media (max-width: 640px) {
  .stech-seit { display: none; }
}

/* Die Zeile „Beginn 06:30 · Ändern“ in der laufenden Karte (30.09.2026). */
.stech-beginn { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.stech-beginn b { font-variant-numeric: tabular-nums; }
.stech-beginn .grau { font-size: 12px; }
/* Nach einem Baustellenwechsel ausgegraut, mit Hinweis darunter. */
.stech-beginn { flex-wrap: wrap; }
.stech-beginn.aus > b, .stech-beginn.aus > .grau { opacity: .55; }
.stech-beginn .knopf:disabled { opacity: .45; cursor: default; }
.stech-beginn-hinweis { flex: 1 1 100%; font-size: 12px; color: var(--hw-text-2); line-height: 1.4; }

/* Baustellenwechsel (30.09.2026): der Verlauf „Heute“ in der laufenden Karte
   – eingetragene Abschnitte, darunter der laufende mit gelbem Punkt – und
   die Zeile „Baustelle wechseln“. */
.stech-heute { flex: 1 1 100%; display: flex; flex-direction: column; border: 1px solid var(--hw-border);
  border-radius: 12px; overflow: hidden; background: var(--hw-bg); }
.stech-heute-kopf { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hw-text-2); padding: 8px 12px 2px; }
.stech-ab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; min-width: 0; }
.stech-ab + .stech-ab { border-top: 1px solid var(--hw-border); }
.stech-ab-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stech-ab-text b { font-variant-numeric: tabular-nums; font-weight: 650; }
.stech-ab-ort { font-weight: 600; }
/* Die Adresse der laufenden Baustelle zum Navigieren (30.09.2026). */
.stech-navi { padding: 6px 0 2px 18px; min-width: 0; }
.stech-ab-dauer { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.stech-ab-punkt { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--hw-gelb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-gelb) 30%, transparent); }
.stech-ab.fertig { color: var(--hw-text); }
.stech-ab .knopf.klein { flex: none; }
.stech-stift { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--hw-accent); }
.stech-stift svg { width: 13px; height: 13px; }
.stech-aktion { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--hw-border-2); border-radius: 12px; background: var(--hw-surface); color: var(--hw-text);
  font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; text-align: left; }
.stech-aktion:hover { background: var(--hw-surface-2); }
.stech-aktion:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.stech-aktion-sym { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--hw-gelb); color: #161616;
  display: flex; align-items: center; justify-content: center; }
.stech-aktion-sym svg { width: 15px; height: 15px; }
.stech-aktion-pfeil { margin-left: auto; font-size: 20px; color: var(--hw-text-2); }
/* Das Blatt „Baustelle wechseln“: Überschrift über der Zeitkarte, kleinere Karte. */
.sw-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hw-text-2); margin: 2px 2px -6px; }
.su-karte.klein { min-height: 0; padding: 12px 16px; }
.su-ort-kopf.grau { color: var(--hw-text-2); }

/* ----------------------------------------------------------------------------
   „Stechuhr starten“ / „Beginn ändern“ (30.09.2026, Entwurf vom Nutzer
   freigegeben). Wie ein Uhrblatt: auf dem Telefon von unten, sonst mittig.
   EINE Karte an derselben Stelle für beide Modi – beim Umschalten springt
   nichts. Eigenes box-sizing: Ohne ragt jedes Eingabefeld heraus.
   -------------------------------------------------------------------------- */
.su-back { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10, 12, 20, .45); }
.su-back *, .su-back *::before, .su-back *::after { box-sizing: border-box; }
.su-blatt { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--hw-bg);
  color: var(--hw-text); border: 1px solid var(--hw-border); border-radius: 18px; box-shadow: var(--hw-shadow-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; font-family: var(--hw-font); }
.su-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.su-kopf h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.su-unter { font-size: 13.5px; color: var(--hw-text-2); margin-top: 2px; }
.su-zu { font: inherit; font-size: 13px; font-weight: 600; height: 32px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--hw-border-2); background: var(--hw-surface); color: var(--hw-text-2); }
.su-datum { font-size: 13px; font-weight: 650; color: var(--hw-text-2); text-transform: none; }
.su-umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--hw-surface-2); border: 1px solid var(--hw-border); }
.su-umschalter button { font: inherit; font-size: 14px; font-weight: 650; height: 40px; border: 0; border-radius: 9px;
  background: transparent; color: var(--hw-text-2); cursor: pointer; }
.su-umschalter button[aria-pressed="true"] { background: var(--hw-gelb); color: #161616; }
.su-umschalter button:focus-visible, .su-zu:focus-visible, .su-los:focus-visible, .su-pm:focus-visible,
.su-zeit:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.su-karte { background: var(--hw-surface); border: 1px solid var(--hw-border); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 168px; justify-content: center; }
.su-wahl { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 10px; width: 100%; }
.su-pm { font: inherit; font-size: 26px; font-weight: 700; width: 52px; height: 52px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--hw-border-2); background: var(--hw-surface-2); color: var(--hw-text); line-height: 1; }
.su-pm:disabled { opacity: .35; cursor: default; }
.su-zeit { font-family: var(--hw-font); font-size: 52px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; text-align: center; color: var(--hw-text); background: transparent; border: 0;
  padding: 0; width: 100%; min-width: 0; }
button.su-zeit { cursor: text; }
.su-back .su-wahl input.su-zeit { border: 2px solid var(--hw-gelb); border-radius: 12px; background: var(--hw-bg); height: 64px;
  font-family: var(--hw-font); font-size: 40px !important; font-weight: 800; color: var(--hw-text); text-align: center; padding: 0 6px; }
/* !important gegen die 16-px-Regel für Telefone: Sie soll nur das
   Hineinzoomen bei kleiner Schrift verhindern – 40 px liegen weit darüber. */
.su-zeile { font-size: 13.5px; color: var(--hw-text-2); text-align: center; }
.su-zeile.fehler { color: var(--hw-weg); font-weight: 600; }
.su-hinweis { font-size: 12.5px; color: var(--hw-text-2); line-height: 1.45; text-align: center; }
.su-fuss { font-size: 12px; color: var(--hw-text-2); line-height: 1.45; }
.su-kasten { font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 12px;
  background: var(--hw-warn-hg); color: var(--hw-warn); border: 1px solid color-mix(in srgb, var(--hw-warn) 30%, transparent); }
/* Baustelle von heute und der letzte Eintrag (30.09.2026, Zusatz zum Entwurf). */
.su-ort { background: var(--hw-surface); border: 1px solid var(--hw-border); border-radius: 16px; overflow: hidden; }
.su-ort-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; }
.su-ort-zeile + .su-ort-zeile { border-top: 1px solid var(--hw-border); }
.su-ort-kreis { flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--hw-gelb); color: #161616;
  display: flex; align-items: center; justify-content: center; }
.su-ort-kreis svg, .su-ort-uhr svg { width: 19px; height: 19px; display: block; }
.su-ort-uhr { flex: none; width: 38px; display: flex; justify-content: center; color: var(--hw-text-2); }
.su-ort-text { flex: 1 1 auto; min-width: 0; }
.su-ort-kopf { font-size: 11.5px; font-weight: 700; color: var(--hw-accent); text-transform: none; }
.su-ort-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-ort-name.leer { color: var(--hw-text-2); font-weight: 500; }
.su-ort-aendern { flex: none; font: inherit; font-size: 14px; font-weight: 650; border: 0; background: transparent;
  color: var(--hw-accent); cursor: pointer; padding: 6px 4px; }
.su-ort-aendern:focus-visible { outline: none; box-shadow: var(--hw-ring); border-radius: 8px; }
.su-ort-letzt { font-size: 13.5px; color: var(--hw-text-2); }
.su-ort-fuss { font-size: 12px; color: var(--hw-text-2); margin-top: -4px; }
.su-fehler { font-size: 13px; color: var(--hw-weg); font-weight: 600; }
.su-fehler:empty { display: none; }
.su-los { font: inherit; font-size: 17px; font-weight: 750; height: 54px; width: 100%; border: 0; border-radius: 14px;
  cursor: pointer; background: var(--hw-gelb); color: #161616; }
.su-los:disabled { opacity: .45; cursor: default; }
@media (max-width: 560px) {
  .su-back { align-items: flex-end; padding: 0; }
  .su-blatt { width: 100%; border-radius: 18px 18px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ----------------------------------------------------------------------------
   Auswahlmenü „Baustelle wählen“ (portal/baustellenwahl.js, 30.09.2026).
   Über allem, was es öffnet – auch über dem Tagesbericht (12000). Gruppen
   wie die Aufmaße-Klappe: gelbe Überschrift für den Plan, Suchfeld mit Lupe
   und ✕, abgesetzt „Ohne Baustelle“ mit gestrichelter Karte.
   -------------------------------------------------------------------------- */
.bw-back { position: fixed; inset: 0; z-index: 12500; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10, 12, 20, .45); }
.bw-back *, .bw-back *::before, .bw-back *::after { box-sizing: border-box; }
.bw-blatt { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--hw-bg);
  color: var(--hw-text); border: 1px solid var(--hw-border); border-radius: 18px; box-shadow: var(--hw-shadow-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 6px; font-family: var(--hw-font); }
.bw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.bw-kopf h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.bw-fertig { flex: none; font: inherit; font-size: 14px; font-weight: 700; height: 34px; padding: 0 14px; border-radius: 10px;
  cursor: pointer; border: 0; background: var(--hw-gelb); color: #161616; }
.bw-gruppe { margin: 12px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hw-text-2); }
.bw-gruppe.heute { color: var(--hw-accent); margin-top: 4px; }
.bw-block { border: 1px solid var(--hw-border); border-radius: 16px; overflow: hidden; background: var(--hw-surface); }
.bw-zeile, .bw-ohne { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 14px;
  border: 0; background: transparent; color: var(--hw-text); font: inherit; text-align: left; cursor: pointer; }
.bw-zeile + .bw-zeile, .bw-zeile + .bw-leer, .bw-leer + .bw-zeile { border-top: 1px solid var(--hw-border); }
.bw-zeile:disabled, .bw-ohne:disabled { cursor: default; opacity: .5; }
.bw-zeile:focus-visible, .bw-ohne:focus-visible, .bw-fertig:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.bw-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bw-kunde { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-kunde.leise { font-weight: 600; color: var(--hw-accent); }
.bw-unter { font-size: 13px; color: var(--hw-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-bisher { flex: none; font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px;
  background: var(--hw-surface-2); color: var(--hw-text-2); border: 1px solid var(--hw-border-2); }
.bw-haken { flex: none; width: 24px; height: 24px; color: var(--hw-gelb); }
.bw-haken svg { width: 24px; height: 24px; display: block; }
.bw-zeile.gewaehlt .bw-kunde, .bw-ohne.gewaehlt .bw-kunde { color: var(--hw-text); }
.bw-lupe, .bw-symbol { flex: none; width: 22px; height: 22px; color: var(--hw-accent); display: flex; }
.bw-lupe svg, .bw-symbol svg { width: 22px; height: 22px; }
.bw-pfeil { flex: none; font-size: 20px; color: var(--hw-text-2); }
.bw-leer { padding: 14px; font-size: 13.5px; color: var(--hw-text-2); }
.bw-suche { margin: 10px 0 8px; }
.bw-feld { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 6px 0 12px; border: 1px solid var(--hw-border-2);
  border-radius: var(--hw-radius); background: var(--hw-surface-2); color: var(--hw-text-2); }
.bw-feld svg { width: 18px; height: 18px; flex: none; }
.bw-feld input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--hw-text); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.bw-feld button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent;
  color: var(--hw-text-2); font-size: 16px; cursor: pointer; }
.bw-ohne { border: 1.5px dashed var(--hw-border-2); border-radius: 16px; background: var(--hw-surface); margin-bottom: 8px; }
.bw-ohne .bw-symbol { color: var(--hw-text-2); }
@media (max-width: 560px) {
  .bw-back { align-items: flex-end; padding: 0; }
  .bw-blatt { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}


/* ----------------------------------------------------------------------------
   Tagesbericht (Bautagebuch, window.HoWisBericht)

   Derselbe Vorhang wie bei der Rückfrage, aber ein Formular statt zweier
   Knöpfe. Eine Sache trägt es sichtbar: die Leistungsbeschreibung. Alles
   Weitere – Wetter, Behinderung, Material, Massen – liegt unter „Mehr
   eintragen". Wer abends im Auto sitzt, tippt einen Satz und ist fertig; wer
   den Regentag belegen will, klappt auf.
   -------------------------------------------------------------------------- */
.hw-bt { width: min(560px, 96vw); max-height: min(88vh, 820px); display: flex; flex-direction: column;
  background: var(--hw-surface); color: var(--hw-text); border: 1px solid var(--hw-border-2);
  border-radius: var(--hw-radius-lg); box-shadow: var(--hw-shadow-lg); font-family: var(--hw-font); }
.hw-bt-kopf { padding: 20px 22px 12px; border-bottom: 1px solid var(--hw-border); }
.hw-bt-kopf .titel { font-size: 16px; font-weight: 700; }
.hw-bt-kopf .unter { font-size: 12.5px; color: var(--hw-text-2); margin-top: 3px; }
.hw-bt-koerper { overflow-y: auto; padding: 16px 22px 8px; }
.hw-bt label { display: block; font-size: 12.5px; font-weight: 600; color: var(--hw-text-2);
  margin-bottom: 5px; }
.hw-bt label .frei { font-weight: 400; }
.hw-bt textarea, .hw-bt input[type="text"], .hw-bt input[type="number"] {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border-radius: var(--hw-radius);
  border: 1px solid var(--hw-border-2); background: var(--hw-surface-2); color: var(--hw-text);
  resize: vertical; }
.hw-bt textarea:focus, .hw-bt input:focus { outline: none; box-shadow: var(--hw-ring); }
.hw-bt-feld + .hw-bt-feld { margin-top: 14px; }
/* Wetter als Knopfreihe und nicht als Auswahlliste: Ein Griff statt drei,
   und man sieht ohne Aufklappen, was zur Wahl steht. */
.hw-bt-wetter { display: flex; flex-wrap: wrap; gap: 7px; }
.hw-bt-wetter button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hw-border-2);
  background: var(--hw-surface-2); color: var(--hw-text-2); display: inline-flex; align-items: center; gap: 6px; }
.hw-bt-wetter button[aria-pressed="true"] { border-color: var(--hw-accent); color: var(--hw-text);
  background: color-mix(in srgb, var(--hw-accent) 14%, var(--hw-surface)); }
.hw-bt-wetter button:focus-visible { outline: none; box-shadow: var(--hw-ring); }
/* Die eingeplanten Baustellen beim Feierabend (15.09.2026): Knöpfe wie beim
   Wetter, aber untereinander – ein Bauvorhaben hat einen langen Namen, und
   nebeneinander passt auf dem Telefon keiner. */
.hw-bt-bau { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.hw-bt-ort { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 6px 6px 12px; margin-bottom: 8px;
  border: 1px solid var(--hw-border-2); border-radius: 12px; background: var(--hw-surface); }
.hw-bt-ort-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-bt-ort-name.leer { color: var(--hw-text-2); font-weight: 500; }
.hw-bt-ort-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-bt-ort-navi:empty { display: none; }
.hw-bt-ort-aendern { flex: none; font: inherit; font-size: 14px; font-weight: 650; border: 0; background: transparent;
  color: var(--hw-accent); cursor: pointer; padding: 8px 10px; border-radius: 8px; }
.hw-bt-ort-aendern:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-bt-bau button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  padding: 8px 12px; border-radius: var(--hw-radius); border: 1px solid var(--hw-border-2);
  background: var(--hw-surface-2); color: var(--hw-text-2); overflow-wrap: anywhere; }
.hw-bt-bau button[aria-pressed="true"] { border-color: var(--hw-accent); color: var(--hw-text);
  background: color-mix(in srgb, var(--hw-accent) 14%, var(--hw-surface)); }
.hw-bt-bau button:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-bt-feld > .hw-bt-hinweis + input { margin-top: 8px; }
/* Die übrigen laufenden Baustellen (29.09.2026) – für die, die aushelfen,
   ohne eingeplant zu sein. Eine Auswahl, keine Knopfreihe: Es sind viele.
   Breite bis zum Rand und nicht darüber hinaus, sonst schiebt der längste
   Eintrag das Blatt auf dem Telefon zur Seite. */
.hw-bt-feld select { box-sizing: border-box; width: 100%; max-width: 100%; font: inherit; font-size: 14px;
  padding: 9px 11px; margin-bottom: 8px; border-radius: var(--hw-radius);
  border: 1px solid var(--hw-border-2); background: var(--hw-surface-2); color: var(--hw-text); }
.hw-bt-feld select:focus { outline: none; box-shadow: var(--hw-ring); }
.hw-bt-grad { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px;
  color: var(--hw-text-2); }
.hw-bt-grad input { width: 84px; }
.hw-bt-mehr { margin-top: 16px; }
.hw-bt-mehr > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--hw-accent);
  list-style: none; padding: 6px 0; }
.hw-bt-mehr > summary::-webkit-details-marker { display: none; }
.hw-bt-mehr > summary::before { content: "▸ "; }
.hw-bt-mehr[open] > summary::before { content: "▾ "; }
.hw-bt-hinweis { font-size: 12px; color: var(--hw-text-2); line-height: 1.5; margin-top: 5px; }
.hw-bt-hinweis b { color: var(--hw-text); font-weight: 600; }
.hw-bt-fuss { display: flex; align-items: center; gap: 10px; padding: 14px 22px 18px;
  border-top: 1px solid var(--hw-border); }
.hw-bt-fuss .grow { margin-left: auto; }
.hw-bt-fuss button { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--hw-radius); border: 1px solid var(--hw-border-2);
  background: var(--hw-surface-2); color: var(--hw-text); }
.hw-bt-fuss button:hover { border-color: var(--hw-accent); }
.hw-bt-fuss .ok { background: var(--hw-gelb); border-color: var(--hw-gelb); color: var(--hw-auf-akzent); }
.hw-bt-fuss button:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-bt-fehler { color: var(--hw-danger); font-size: 13px; font-weight: 600; }

/* ---- Lieferscheine im Tagesbericht (01.10.2026, portal/bautagebuch.js) ----
   Nach dem freigegebenen Entwurf: im Bericht eine Karte mit einer Zeile je
   Material (Name, Scheine, Summe, Fotos), dahinter je Material ein Blatt mit
   Auswahl, Einheit, einem Wert je Lieferschein und den Fotos. Eigenes
   box-sizing an jedem Teil – das Blatt steht auch auf Seiten ohne die
   Grundregeln von .howis-shell. */
.hw-bt { position: relative; }
.hw-bt.ls-offen { min-height: min(88vh, 660px); }
.hw-ls, .hw-ls *, .hw-ls-blatt, .hw-ls-blatt *, .hw-ls-tag, .hw-ls-tag * { box-sizing: border-box; }
.hw-ls-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hw-ls-kopf label { margin-bottom: 5px; }
.hw-ls-zahl { font-size: 12px; color: var(--hw-text-2); white-space: nowrap; }
.hw-ls-liste { display: flex; flex-direction: column; border: 1px solid var(--hw-border-2);
  border-radius: 14px; background: var(--hw-surface-2); overflow: hidden; }
.hw-ls-zeile, .hw-ls-leer { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 8px 12px; font: inherit; text-align: left; color: var(--hw-text); cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--hw-border); }
.hw-ls-leer { min-height: 68px; border: 1px solid var(--hw-border-2); border-radius: 14px; background: var(--hw-surface-2); }
.hw-ls-zeile:hover, .hw-ls-leer:hover { background: color-mix(in srgb, var(--hw-accent) 7%, var(--hw-surface-2)); }
.hw-ls-zeile:focus-visible, .hw-ls-leer:focus-visible, .hw-ls-dazu:focus-visible { outline: none; box-shadow: inset var(--hw-ring); }
.hw-ls-zeichen { flex: none; width: 40px; height: 40px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--hw-accent-hg); color: var(--hw-accent); }
.hw-ls-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-ls-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-ls-leer .hw-ls-name { color: var(--hw-accent); }
/* Bis zu zwei Zeilen: Auf dem Telefon passen vier Werte nicht neben die Summe. */
.hw-ls-unter { font-size: 12px; line-height: 1.35; color: var(--hw-text-2); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.hw-ls-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hw-ls-summe { font-size: 15px; font-weight: 800; color: var(--hw-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-ls-fotos { font-size: 11.5px; color: var(--hw-text-2); white-space: nowrap; }
.hw-ls-pfeil { flex: none; color: var(--hw-text-2); opacity: .7; }
.hw-ls-dazu { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--hw-accent); background: transparent; border: 0; cursor: pointer; }
.hw-ls-dazu:hover { background: color-mix(in srgb, var(--hw-accent) 7%, transparent); }
.hw-ls-voll { padding: 10px 12px; font-size: 12px; color: var(--hw-text-2); text-align: center; }

/* Das Blatt eines Materials: liegt über dem Tagesbericht, in derselben Karte. */
.hw-ls-blatt { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  background: var(--hw-surface); color: var(--hw-text); border-radius: inherit; overflow: hidden; }
.hw-ls-bkopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--hw-border); }
.hw-ls-bkopf .titel { font-size: 15.5px; font-weight: 700; }
.hw-ls-bkopf .platz { width: 78px; }
.hw-ls-bkopf button { min-height: 38px; min-width: 78px; padding: 0 14px; border-radius: 19px; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; background: var(--hw-surface-2); color: var(--hw-accent); }
.hw-ls-bkopf button.fertig { font-weight: 700; }
.hw-ls-bkopf button:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-ls-bkoerper { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 14px; }
.hw-ls-feld { position: relative; }
.hw-ls-such { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 6px 0 12px;
  border: 2px solid transparent; border-radius: 14px; background: var(--hw-surface-2); }
.hw-ls-such.offen, .hw-ls-such:focus-within { border-color: var(--hw-gelb); }
.hw-bt .hw-ls-such input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; min-height: 40px; padding: 0; border: 0;
  background: transparent; font-size: 16px; font-weight: 600; box-shadow: none; }
.hw-ls-such button { flex: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--hw-accent);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.hw-ls-such button[aria-expanded="true"] svg { transform: rotate(180deg); }
.hw-ls-treffer { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; background: var(--hw-surface); border: 1px solid var(--hw-border-2);
  border-radius: 14px; box-shadow: var(--hw-shadow-lg); }
.hw-ls-treffer[hidden] { display: none; }
.hw-ls-treffer .hw-ls-gruppe { padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-text-2); }
.hw-ls-treffer button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--hw-border);
  background: transparent; color: var(--hw-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.hw-ls-treffer button:last-child { border-bottom: 0; }
.hw-ls-treffer button:hover, .hw-ls-treffer button:focus-visible { outline: none; background: var(--hw-surface-2); }
.hw-ls-treffer button[aria-selected="true"] { background: var(--hw-accent-hg); font-weight: 650; }
.hw-ls-kein { padding: 12px 14px; font-size: 13px; color: var(--hw-text-2); }
.hw-ls-einheit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: 14px; background: var(--hw-surface-2); }
.hw-ls-einheit button { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--hw-text-2);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hw-ls-einheit button[aria-pressed="true"] { background: var(--hw-gelb); color: var(--hw-auf-akzent); }
.hw-ls-einheit button:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-ls-blatt .hw-ls-summe { font-size: 14px; }
.hw-ls-werte { display: flex; flex-direction: column; border-radius: 14px; background: var(--hw-surface-2); overflow: hidden; }
.hw-ls-wert { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 14px;
  border-bottom: 1px solid var(--hw-border); }
.hw-bt .hw-ls-wert label { flex: none; width: 64px; margin: 0; font-size: 13px; font-weight: 500; }
.hw-bt .hw-ls-wert input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; min-height: 40px; padding: 0 4px; border: 0;
  background: transparent; font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hw-ls-wert .eh { flex: none; width: 50px; font-size: 14px; color: var(--hw-text-2); }
.hw-ls-wert button { flex: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--hw-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.hw-ls-wert button:hover { color: var(--hw-danger); }
.hw-ls-bilder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hw-ls-bilder:empty { display: none; }
.hw-ls-bild { position: relative; display: flex; align-items: center; justify-content: center; height: 62px;
  border-radius: 10px; background: var(--hw-surface-2); overflow: hidden; font-size: 10.5px; color: var(--hw-text-2); text-align: center; }
.hw-ls-bild a { display: block; width: 100%; height: 100%; }
.hw-ls-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Feste Maße samt min-/max-: Die Telefonansicht gibt jedem Knopf 44 px Mindesthöhe – hier läge er über dem ganzen Bild. */
.hw-ls-bild button { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; min-width: 0; min-height: 0;
  max-height: 26px; padding: 0; border: 0; border-radius: 13px;
  background: rgba(0,0,0,.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hw-ls-bild button svg { width: 12px; height: 12px; }
.hw-ls-bild.laedt { background: linear-gradient(90deg, var(--hw-surface-2), var(--hw-border), var(--hw-surface-2));
  background-size: 200% 100%; animation: hw-ls-laedt 1.2s linear infinite; }
@keyframes hw-ls-laedt { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .hw-ls-bild.laedt { animation: none; } }
.hw-ls-fotoknoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.hw-bt label.hw-ls-knopf { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 10px;
  border: 1px solid var(--hw-border-2); border-radius: 12px; background: var(--hw-surface-2); color: var(--hw-text);
  font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; }
.hw-bt label.hw-ls-knopf:hover { border-color: var(--hw-accent); }
.hw-ls-weg { align-self: flex-start; padding: 8px 2px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--hw-danger); }
.hw-ls-fehler { font-size: 13px; font-weight: 600; color: var(--hw-danger); min-height: 18px; }
.hw-ls-fehler:empty { display: none; }

/* ---- Lieferschein direkt eintragen (05.10.2026, portal/lieferschein.js) ----
   Die Karte „Lieferscheine heute“ im Fahrzeug-Bereich und das Blatt dazu.
   Richtung, Baustelle, Firma und Material sind Felder, die eine Auswahl
   öffnen (Liste mit Suche) – sie tragen oben das Wort und rechts „Ändern“.
   Was noch fehlt, steht mit rotem Rand da. */
.hw-lsd-karte, .hw-lsd-karte * , .hw-lsd, .hw-lsd * { box-sizing: border-box; }
.hw-lsd-karte { margin-top: 18px; }
.hw-lsd-karte .hw-ls-kopf label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hw-text-2); }
.hw-lsd-gesamt { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--hw-accent); font-variant-numeric: tabular-nums; }
.hw-lsd-richtung { color: var(--hw-text-2); }
.hw-lsd-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-lsd-feldknopf { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 10px 6px 14px;
  border: 2px solid transparent; border-radius: 14px; background: var(--hw-surface-2); color: var(--hw-text);
  font: inherit; text-align: left; cursor: pointer; }
.hw-lsd-feldknopf:hover { border-color: var(--hw-border-2); }
.hw-lsd-feldknopf:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-lsd-feldknopf.fehlt { border-color: var(--hw-danger); }
.hw-lsd-feldknopf .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hw-lsd-wert { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-lsd-wert.leer { color: var(--hw-text-2); font-weight: 500; }
.hw-lsd-unter { font-size: 12px; color: var(--hw-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-lsd-aendern { flex: none; font-size: 14px; font-weight: 650; color: var(--hw-accent); }
.hw-lsd-wahl .hw-ls-such { margin-bottom: 4px; }
.hw-lsd-gruppen { display: flex; flex-direction: column; }
.hw-lsd-gruppe { margin: 14px 2px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hw-text-2); }
.hw-lsd-gruppe:first-child { margin-top: 6px; }
.hw-lsd-wzeile { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 14px; border: 0;
  border-bottom: 1px solid var(--hw-border); background: var(--hw-surface-2); color: var(--hw-text); font: inherit; text-align: left; cursor: pointer; }
.hw-lsd-wzeile:first-of-type { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.hw-lsd-wzeile:last-child { border-bottom: 0; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.hw-lsd-gruppe + .hw-lsd-wzeile { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.hw-lsd-wzeile:hover, .hw-lsd-wzeile:focus-visible { outline: none; background: color-mix(in srgb, var(--hw-accent) 7%, var(--hw-surface-2)); }
.hw-lsd-wzeile[aria-selected="true"] { background: var(--hw-accent-hg); }
.hw-lsd-wzeile .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hw-lsd-wzeile .h { font-size: 15px; font-weight: 650; }
.hw-lsd-wzeile .u { font-size: 12px; color: var(--hw-text-2); }
.hw-lsd-typ { flex: none; font-size: 11.5px; color: var(--hw-text-2); white-space: nowrap; }
.hw-lsd-marke { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; background: var(--hw-gelb); color: var(--hw-auf-akzent); vertical-align: 1px; }
.hw-lsd-haken { flex: none; color: var(--hw-accent); font-weight: 800; }

/* ---- Tagesbericht unter der Stechuhr (05.10.2026, portal/tagesberichte.js) ---- */
.hw-tb, .hw-tb *, .hw-tb-blatt, .hw-tb-blatt * { box-sizing: border-box; }
.hw-tb { margin-top: 18px; }
.hw-tb .hw-ls-kopf label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hw-text-2); }
.hw-tb-fruehkopf { margin-top: 14px; }
.hw-tb-heute, .hw-tb-zeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 12px 8px 14px;
  border: 0; background: var(--hw-surface-2); color: var(--hw-text); font: inherit; text-align: left; cursor: pointer; }
.hw-tb-heute { border-radius: 14px; }
.hw-tb-zeile { border-bottom: 1px solid var(--hw-border); }
.hw-tb-zeile:last-child { border-bottom: 0; }
.hw-tb-heute:hover, .hw-tb-zeile:hover { background: color-mix(in srgb, var(--hw-accent) 7%, var(--hw-surface-2)); }
.hw-tb-heute:focus-visible, .hw-tb-zeile:focus-visible { outline: none; box-shadow: inset var(--hw-ring); }
.hw-tb .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-tb .h { font-size: 15px; font-weight: 700; }
.hw-tb .u { font-size: 12.5px; color: var(--hw-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-tb-heute .u { white-space: normal; }
.hw-tb-schild { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .03em; background: var(--hw-gelb); color: var(--hw-auf-akzent); vertical-align: 1px; }
.hw-tb-schild.ok { background: var(--hw-ok-hg); color: var(--hw-ok); }
.hw-tb-stand { flex: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.hw-tb-stand.ok { color: var(--hw-ok); }
.hw-tb-stand.fehlt { color: var(--hw-weg); }
.hw-tb-nav { display: flex; align-items: center; gap: 8px; }
.hw-tb-nav button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--hw-surface-2);
  color: var(--hw-accent); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.hw-tb-nav button:disabled { opacity: .3; cursor: default; }
.hw-tb-nav button:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-tb-datum { flex: 1 1 auto; min-width: 0; text-align: center; display: flex; flex-direction: column; }
.hw-tb-datum b { font-size: 16px; }
.hw-tb-datum span { font-size: 12px; color: var(--hw-text-2); }
.hw-tb-block { padding-top: 2px; }
.hw-tb-titel { margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hw-text-2); }
.hw-tb-gross { font-size: 15.5px; font-weight: 650; }
.hw-tb-klein { font-size: 13px; color: var(--hw-text-2); }
.hw-tb-text { font-size: 14.5px; line-height: 1.5; }
.hw-tb-wartet { color: var(--hw-text-2); font-weight: 600; font-size: 14px; }
.hw-tb-knopf { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 0; border-radius: 14px;
  background: var(--hw-gelb); color: var(--hw-auf-akzent); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.hw-tb-knopf:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-tb-blatt .hw-ls-bkoerper { gap: 12px; }

/* Die Tagessummen im Bautagebuch (Bauzeitenplan): je Material und Einheit
   eine Zeile, die Einzelwerte und Fotos dahinter aufklappbar. */
.hw-ls-tag { margin: 6px 0 10px; border: 1px solid var(--hw-border); border-radius: 12px; background: var(--hw-surface); overflow: hidden; }
.hw-ls-tag-kopf { padding: 8px 12px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hw-text-2); }
.hw-ls-tag details { border-bottom: 1px solid var(--hw-border); }
.hw-ls-tag details:last-child { border-bottom: 0; }
.hw-ls-tag summary { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; cursor: pointer; list-style: none; }
.hw-ls-tag summary::-webkit-details-marker { display: none; }
.hw-ls-tag summary::before { content: "▸"; flex: none; width: 12px; color: var(--hw-text-2); font-size: 12px; }
.hw-ls-tag details[open] > summary::before { content: "▾"; }
.hw-ls-tag summary:focus-visible { outline: none; box-shadow: inset var(--hw-ring); }
.hw-ls-tag .mat { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-ls-tag .zahl { flex: none; font-size: 12.5px; color: var(--hw-text-2); white-space: nowrap; }
.hw-ls-tag .sum { flex: none; min-width: 86px; text-align: right; font-size: 14.5px; font-weight: 800; color: var(--hw-accent);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-ls-tag-innen { padding: 2px 12px 12px 34px; display: flex; flex-direction: column; gap: 6px; }
.hw-ls-tag-teil { font-size: 13px; color: var(--hw-text); line-height: 1.45; }
.hw-ls-tag-teil b { font-weight: 650; }
.hw-ls-tag-teil .grau { color: var(--hw-text-2); }
.hw-ls-tag .hw-ls-bilder { grid-template-columns: repeat(auto-fill, minmax(74px, 74px)); margin-top: 2px; }

/* Die Kopfleiste schwarz wie der Grund des Logos (Farbwelt aus dem Logo,
   26.09.2026). Der gewählte Reiter ist ein Baggergelb-Feld mit schwarzer
   Schrift – dieselbe Rolle wie jeder Knopf. */
.howis-shell { background: var(--hw-leiste); border-bottom-color: var(--hw-leiste-rand); color: var(--hw-leiste-text); }
.howis-shell .hw-brand { color: var(--hw-leiste-text); }
.howis-shell nav a { color: var(--hw-leiste-text-2); }
.howis-shell nav a:hover { background: rgba(255,255,255,.08); color: var(--hw-leiste-text); }
.howis-shell nav a.active { background: var(--hw-gelb); color: var(--hw-auf-akzent); box-shadow: none; }
.howis-shell .hw-btn { background: transparent; border-color: rgba(255,255,255,.2); color: var(--hw-leiste-text-2); }
.howis-shell .hw-btn:hover { color: var(--hw-leiste-text); background: rgba(255,255,255,.08); box-shadow: none; }
.howis-shell .hw-menu a.active { background: var(--hw-gelb); color: var(--hw-auf-akzent); }

/* Das Häkchen, das sich zeichnet (HoWisBewegung.haken, 27.09.2026). Die
   Strichlängen passen zu Kreis (2π·10 ≈ 63) und Haken (≈ 14): So lange ist
   der Strich „ausgeblendet“, und die Animation zieht ihn auf null. */
.hw-haken { display: inline-flex; vertical-align: -4px; margin-right: 6px; color: var(--hw-ok); flex: none; }
.hw-haken svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hw-haken circle { stroke-dasharray: 63; }
.hw-haken path { stroke-dasharray: 14; }
/* Symbole in Knöpfen (Start/Pause): klein, in Schriftfarbe, dreht sich beim
   Wechsel herein (HoWisBewegung.wechsel). */
.hw-sym { display: inline-flex; width: 16px; height: 16px; flex: none; }
.hw-sym svg { width: 16px; height: 16px; }

/* ---- Urlaub, den der Arbeitgeber vorgibt (30.09.2026) --------------------
   Die Karte im Posteingang und in der Urlaubsplanung (portal/shell.js,
   HoWisVorgabe). Das Schild ist die gelbe FLÄCHE mit schwarzer Schrift; der
   Stand trägt die Ampelfarben. Eigenes box-sizing: Posteingang und Blatt
   liegen außerhalb von .howis-shell. */
.hw-uv-karte, .hw-uv-karte * { box-sizing: border-box; }
.hw-uv-karte { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--hw-radius-lg);
  border: 1px solid var(--hw-border); background: var(--hw-surface); color: var(--hw-text); text-align: left; }
.hw-uv-karte.offen { border: 2px solid var(--hw-gelb); }
.hw-uv-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hw-uv-schild { display: inline-flex; align-items: center; gap: 5px; background: var(--hw-gelb); color: var(--hw-auf-akzent);
  font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 7px; line-height: 1.2; }
.hw-uv-schild svg { flex: none; }
.hw-uv-stand { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.hw-uv-stand.offen { color: var(--hw-warn); background: var(--hw-warn-hg); }
.hw-uv-stand.angenommen { color: var(--hw-ok); background: var(--hw-ok-hg); }
.hw-uv-stand.abgelehnt { color: var(--hw-weg); background: var(--hw-weg-hg); }
.hw-uv-titel { font-size: 17px; font-weight: 800; line-height: 1.3; }
.hw-uv-zeit { font-size: 14.5px; color: var(--hw-text-2); margin-top: -6px; }
.hw-uv-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hw-uv-zahlen > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px;
  background: var(--hw-surface-2); min-width: 0; }
.hw-uv-zahlen span { font-size: 12px; color: var(--hw-text-2); }
.hw-uv-zahlen b { font-size: 20px; font-weight: 800; }
.hw-uv-zahlen em { font-style: normal; }
.hw-uv-zahlen em.weg { color: var(--hw-weg); }
.hw-uv-klein { font-size: 13px; color: var(--hw-text-2); line-height: 1.45; }
.hw-uv-nachricht { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--hw-border); background: var(--hw-surface-2); font-size: 14.5px; line-height: 1.45; }
.hw-uv-nachricht span { font-size: 12px; color: var(--hw-text-2); }
.hw-uv-karte details.hw-mehr { margin-top: 0; font-size: 14px; }
.hw-uv-karte details.hw-mehr > summary { color: var(--hw-accent); min-height: 32px; font-weight: 700; }
.hw-uv-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hw-uv-knoepfe button, .hw-uv-link { font: inherit; cursor: pointer; }
.hw-uv-knoepfe button { min-height: 46px; border-radius: 10px; font-size: 15.5px; font-weight: 700; padding: 0 12px; }
.hw-uv-knoepfe button:focus-visible, .hw-uv-link:focus-visible { outline: none; box-shadow: var(--hw-ring); }
.hw-uv-ja { border: 0; background: var(--hw-gelb); color: var(--hw-auf-akzent); font-weight: 800 !important; }
.hw-uv-nein { border: 1px solid color-mix(in srgb, var(--hw-weg) 45%, transparent); background: transparent; color: var(--hw-weg); }
.hw-uv-still { border: 1px solid var(--hw-border-2); background: transparent; color: var(--hw-text); font-weight: 500 !important; }
.hw-uv-senden { border: 0; background: #b3121b; color: #fff; }
.hw-uv-knoepfe button:disabled { opacity: .5; cursor: default; }
.hw-uv-grund { display: flex; flex-direction: column; gap: 5px; }
.hw-uv-grund span { font-size: 13px; color: var(--hw-text-2); }
.hw-uv-grund textarea { width: 100%; border-radius: 10px; border: 1px solid var(--hw-border-2); background: var(--hw-surface-2);
  color: var(--hw-text); padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; }
.hw-uv-antwort { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--hw-text-2); }
.hw-uv-antwort small { font-size: 12.5px; white-space: nowrap; }
.hw-uv-link { border: 0; background: transparent; color: var(--hw-accent); font-weight: 700; font-size: 14px;
  min-height: 40px; padding: 0 2px; white-space: nowrap; }
.hw-uv-fehler { font-size: 13px; color: var(--hw-weg); }
.hw-uv-fehler:empty { display: none; }
/* Im Posteingang steht die Karte in einer Zeile der Liste – ohne den Punkt davor. */
.hw-post-liste li.hw-uv-li { padding: 10px; }
@media (max-width: 420px) {
  .hw-uv-antwort { flex-direction: column; align-items: flex-start; gap: 2px; }
}