/* Tagesübersicht „Wer ist heute wo“ (Schritt 6d, Entwurf v2 heute.html). Nur var(--rd-…) aus tokens.css; Chips aus planer.css (.pl-chip). */
.ht-steuerung { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-2); align-items: center; margin-bottom: var(--rd-abstand-4); }
.ht-standortwahl { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-1); }
.ht-datum input { padding: var(--rd-abstand-1) var(--rd-abstand-2); }
.ht-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ht-anpassen { margin-bottom: var(--rd-abstand-4); }
.ht-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rd-abstand-1); max-width: 480px; }
.ht-liste li { display: flex; justify-content: space-between; align-items: center; gap: var(--rd-abstand-2); padding: var(--rd-abstand-0-5) 0; border-bottom: 1px solid var(--rd-rahmen-leicht); }
.ht-pfeile { display: inline-flex; gap: var(--rd-abstand-1); }
.ht-dichte { max-width: 240px; margin-top: var(--rd-abstand-3); }

/* Einzelansicht: Abschnitte der einen Kachel nebeneinander, so breit wie möglich. */
.ht-einzeln { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rd-abstand-4); }
.ht-einzeln .ht-kachel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0; align-content: start; }
.ht-einzeln .ht-kachel > .ht-kopf, .ht-einzeln .ht-kachel > p { grid-column: 1 / -1; }

/* „Alle Standorte“ (R26): umbrechendes Raster ohne seitliches Scrollen – je nach Breite eine, zwei oder drei Kacheln nebeneinander
   (Mindestbreite aus tokens.css), die übrigen darunter; am Handy einspaltig. */
.ht-spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rd-kachel-breite-min)), 1fr)); gap: var(--rd-abstand-4); align-items: start; }

.ht-kachel { overflow: hidden; }
.ht-kopf { display: flex; align-items: center; gap: var(--rd-abstand-2); padding: var(--rd-abstand-3) var(--rd-abstand-4); border-bottom: 1px solid var(--rd-rahmen-leicht); background: var(--rd-flaeche-hell); }
.ht-kopf h2 { margin: 0; font-size: var(--rd-schrift-mittel); font-weight: var(--rd-gewicht-fett); flex: 1 1 auto; }
.ht-druckdatum { display: none; }
.ht-innen { padding: var(--rd-abstand-3) var(--rd-abstand-4); margin: 0; }
.ht-abschnitt { padding: var(--rd-abstand-3) var(--rd-abstand-4); border-bottom: 1px solid var(--rd-rahmen-leicht); min-width: 0; }
.ht-abschnitt h3 { margin: 0 0 var(--rd-abstand-2); font-size: var(--rd-schrift-groesse); font-weight: var(--rd-gewicht-halbfett); color: var(--rd-text); }
.ht-tabelle { width: 100%; border-collapse: collapse; font-size: var(--rd-schrift-tabelle); table-layout: fixed; }
.ht-tabelle th:first-child { width: 28%; }
.ht-tabelle .pl-chip { max-width: 100%; }
/* Chips in den Kacheln: einzeilig, solange Platz ist; wird es eng, rutschen Name bzw. Uhrzeit in eine zweite Zeile, statt dass der
   Name auf null Breite gekürzt wird. */
.ht-kachel .pl-chip { flex-wrap: wrap; row-gap: 0; }
.ht-bloecke { display: flex; flex-direction: column; gap: var(--rd-abstand-1); }
.ht-block { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-abstand-1) var(--rd-abstand-2); padding: var(--rd-abstand-1) var(--rd-abstand-1-5); border-radius: var(--rd-rundung-klein); font-size: var(--rd-schrift-tabelle); }
.ht-blocktitel { font-weight: var(--rd-gewicht-mittel); min-width: 6.5em; }
.ht-tabelle th, .ht-tabelle td { text-align: left; padding: var(--rd-abstand-1) var(--rd-abstand-1-5); border-bottom: 1px solid var(--rd-rahmen-leicht); vertical-align: top; }
.ht-tabelle thead th { font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); background: var(--rd-flaeche-hell); font-weight: var(--rd-gewicht-mittel); }
.ht-tabelle tbody th { font-weight: var(--rd-gewicht-mittel); overflow-wrap: anywhere; }
.ht-luecke-zeile td, .ht-luecke-zeile th, .ht-block.ht-luecke-zeile { background: var(--rd-ampel-rot-hell); }
.ht-chips { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-1); }
.ht-chips .pl-chip { max-width: 100%; }
.ht-frei { color: var(--rd-text-gedaempft); font-style: italic; font-size: var(--rd-schrift-tabelle); }
.ht-ohne { margin: var(--rd-abstand-2) 0 var(--rd-abstand-1); color: var(--rd-text-gedaempft); }
.ht-entwurf { border-style: dashed; }
.ht-fremd { display: inline-block; width: 8px; height: 8px; border-radius: var(--rd-rundung-voll); background: var(--rd-amber); border: 1px solid var(--rd-amber-text); flex: none; }
.ht-pool::before { content: var(--rd-pool-symbol); display: inline-block; padding: 0 var(--rd-abstand-1); border-radius: var(--rd-rundung-mini); background: var(--rd-pool); color: var(--rd-pool-text); }
.ht-hinweise { margin: 0; padding-left: var(--rd-abstand-4); font-size: var(--rd-schrift-tabelle); }
.ht-hart { color: var(--rd-ampel-rot-text); }
.ht-luecke { color: var(--rd-amber-text); }
.ht-termin { border-left: 3px solid var(--rd-gruen-haus); padding: var(--rd-abstand-1) var(--rd-abstand-2-5); background: var(--rd-flaeche-hell); border-radius: 0 var(--rd-rundung-klein) var(--rd-rundung-klein) 0; margin-bottom: var(--rd-abstand-1); }
.ht-fuss { margin-top: var(--rd-abstand-4); }

/* Dichte „kompakt“ (persönliche Einstellung). */
.ht-kompakt .ht-abschnitt { padding: var(--rd-abstand-2) var(--rd-abstand-3); }
.ht-kompakt .ht-tabelle th, .ht-kompakt .ht-tabelle td { padding: var(--rd-abstand-0-5) var(--rd-abstand-1); }
.ht-kompakt .pl-chip .pl-nm { display: none; }

/* Drucken einer Kachel: heute.js setzt data-druck="ja" an der gewählten Kachel und „ht-druck-eine“ an body. */
@media print {
  .hub-seitenleiste, .hub-untere-leiste, .hub-kopf-handy, .hub-entwicklungsbanner, .hub-seitenkopf, .ht-keindruck, .ht-steuerung, .ht-fuss { display: none !important; }
  body.ht-druck-eine .ht-kachel[data-druck="nein"] { display: none !important; }
  .ht-spalten { display: block; overflow: visible; }
  .ht-kachel { break-inside: avoid; box-shadow: none; border: 1px solid var(--rd-druck-grau); margin-bottom: var(--rd-abstand-4); }
  .ht-kopf { background: var(--rd-druck-weiss); color: var(--rd-druck-schwarz); }
  .ht-druckdatum { display: inline; color: var(--rd-druck-schwarz); }
  .ht-luecke-zeile td, .ht-luecke-zeile th { background: var(--rd-druck-weiss); font-weight: var(--rd-gewicht-fett); }
  .hub-inhalt { padding: 0; }
}