/* Kalender - Monat, Woche, Tag (src/views/kalender.js).
 *
 * Nur fuer index.html, geladen nach components.css und vor cockpit.css.
 * Alle Regeln tragen das Praefix .kalender-; Farben kommen ausschliesslich
 * aus tokens.css (und im Kunden-Erscheinungsbild aus mandant-vhv.css), hier
 * steht kein fester Farbwert.
 *
 * Signalgelb (--konflikt-signal) steht in dieser Datei an genau zwei
 * Selektoren: .kalender-block-konflikt::before und
 * .kalender-eintrag-konflikt::before. Es ist nie Text, nie Flaeche unter
 * Text, nie Fokus, und liegt jeweils zwischen zwei Kanten in
 * --konflikt-kante. Es bedeutet: derselbe Fahrer oder derselbe Wagen zur
 * selben Zeit - nie ein blosser Akzent.
 *
 * Das Kunden-Erscheinungsbild VHV setzt --konflikt-signal auf einen eigenen
 * Wert (gemessen am 16.09.2026: #e3aca4 hell, #6b3029 dunkel). Deshalb
 * nennt kein sichtbarer Text eine Farbe, und die Ueberschneidung steht
 * zusaetzlich in der Beschriftung jedes betroffenen Blocks.
 *
 * Ruhezustand: ohne Skript wird hier nichts gezeichnet; jede Regel setzt
 * sichtbaren Inhalt voraus und versteckt keinen. Es gibt keine
 * Einblende-Animation.
 */

/* ---------------------------------------------------------------- Wurzel
 * Vorgaben fuer die Rechnungen des Stundenrasters. Gesetzt werden sie von
 * kalender.js je Raster (--spalten, --fenster-von) und je Block (--start,
 * --dauer, --spur, --spuren). Die Vorgaben hier sorgen dafuer, dass jede
 * calc()-Rechnung auch dann gilt, wenn ein Wert fehlt: der Block liegt dann
 * am oberen Rand ueber die volle Breite, statt dass die Regel verfaellt. */
.kalender {
  /* 84px seit 22.09.2026: eine Stunde traegt fuenf Zeilen (Zeit, Fahrgast,
     Strecke, Fahrer, Zusatz) - der Kunde will alles ohne Klick sehen. */
  --stunde-hoehe: 84px;
  /* Breit genug fuer die Beschriftung "Ganztags" der Ausfallzeile; eine
     schmalere Spalte schnitt sie ab. */
  --zeitspalte: 64px;
  --spalten: minmax(0, 1fr);
  --fenster-von: 360;  /* 06:00 */
  --start: 360;
  --dauer: 60;
  --spur: 0;
  --spuren: 1;
  --jetzt: 720;        /* 12:00 */
}

/* ----------------------------------------------------------- Monatsraster
 * Feste Spaltenbreite: sieben gleiche Siebtel, egal wie lang ein Ortsname
 * ist. So laeuft das Raster auch bei 360 px nicht seitlich aus der Seite. */

.kalender-monat {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.kalender-monat-kopf {
  padding: var(--raum-2) var(--raum-2);
  text-align: left;
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
  border-bottom: 1px solid var(--linie);
}

.kalender-monat-zelle {
  vertical-align: top;
  width: calc(100% / 7);
  height: 104px;
  padding: var(--raum-1);
  border: 1px solid var(--linie);
  background: var(--flaeche-karte);
  cursor: pointer;
  overflow: hidden;
}

.kalender-monat-zelle:hover {
  background: var(--flaeche-vertieft);
}

/* Tage aus dem Nachbarmonat stehen leiser, aber nicht gedaempft: Text wird
   nicht ueber opacity abgeschwaecht, sondern ueber eine eigene Flaeche. */
.kalender-monat-fremd {
  background: var(--flaeche-vertieft);
}

.kalender-monat-heute {
  box-shadow: inset 0 0 0 2px var(--akzent-linie);
}

.kalender-monat-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-1);
  min-width: 0;
}

.kalender-monat-zahl.knopf {
  padding: 0 var(--raum-1);
  min-height: 22px;
  font-family: var(--schriftfamilie-zahl);
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  border-color: transparent;
  background: none;
}

.kalender-monat-heute-marke {
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-akzent);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kalender-monat-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  min-width: 0;
}

/* Kein Kind der Liste darf breiter werden als die Zelle, sonst schiebt es
   sich in den Nachbartag. Die Zelle klemmt zusaetzlich ab; mit
   table-layout: fixed haelt das auch eine Tabellenzelle. */
.kalender-monat-liste > * {
  min-width: 0;
  max-width: 100%;
}

.kalender-monat-mehr.knopf {
  justify-content: flex-start;
  padding: 0 var(--raum-1);
  min-height: 18px;
  font-size: var(--grad-0);
  border-color: transparent;
  background: none;
  color: var(--schrift-leise);
  overflow: hidden;
}

.kalender-monat-mehr.knopf span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------- Monatseintrag
 * Eine Zeile je Fahrt: Uhrzeit, Strecke, Kuerzel des Fahrers. Der Text
 * wird abgeschnitten, nicht umgebrochen - die Zelle soll ihre Hoehe halten.
 */

.kalender-eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--raum-1);
  width: 100%;
  padding: 1px var(--raum-1);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent-linie);
  border-radius: var(--rund-1);
  background: var(--flaeche-still);
  color: var(--schrift-stark);
  font: inherit;
  font-size: var(--grad-0);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.kalender-eintrag:hover {
  background: var(--flaeche-erhoben);
}

.kalender-eintrag:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 1px;
}

.kalender-eintrag-zeit {
  font-family: var(--schriftfamilie-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--schrift-normal);
}

.kalender-eintrag-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kalender-eintrag-kuerzel {
  font-family: var(--schriftfamilie-fest);
  color: var(--schrift-leise);
}

.kalender-ausfall-zeile {
  padding: 1px var(--raum-1);
  font-size: var(--grad-0);
  color: var(--schrift-leise);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------- Stundenraster
 * Ein Raster aus einer Zeitspalte und je Tag einer Spalte. Die Tagesspalten
 * teilen sich den Rest zu gleichen Teilen (minmax(0, 1fr)), damit auch
 * sieben Spalten auf einem schmalen Geraet in die Seite passen. */

.kalender-raster {
  display: grid;
  grid-template-columns: var(--zeitspalte) var(--spalten);
  align-items: start;
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  overflow: hidden;
  background: var(--flaeche-karte);
}

.kalender-ecke,
.kalender-ganztags-marke {
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
  align-self: stretch;
}

/* Ohne Versalien und ohne Sperrung: "Ganztags" muss in die Zeitspalte
   passen. Bricht es auf einem schmalen Geraet doch um, bricht es innerhalb
   des Wortes - abgeschnitten wird es nicht. */
.kalender-ganztags-marke {
  display: flex;
  align-items: center;
  padding: var(--raum-2) var(--raum-1);
  font-size: var(--grad-0);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
  overflow-wrap: anywhere;
}

.kalender-tagkopf {
  border-bottom: 1px solid var(--linie);
  border-left: 1px solid var(--linie-leise);
  background: var(--flaeche-vertieft);
  align-self: stretch;
  min-width: 0;
}

.kalender-tagkopf-heute {
  background: var(--info-flaeche);
}

.kalender-tagkopf-knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: var(--raum-2);
  border: 0;
  background: none;
  color: var(--schrift-stark);
  font: inherit;
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  text-align: left;
  cursor: pointer;
}

.kalender-tagkopf-knopf:hover {
  background: var(--flaeche-still);
}

.kalender-tagkopf-knopf:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: -2px;
}

.kalender-tagkopf-tag {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.kalender-tagkopf-marke {
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-akzent);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------------------------- Ganztags: Ausfaelle
 * Ganztaegige Abwesenheiten der Fahrer und Sperren der Fahrzeuge stehen
 * ueber dem Stundenraster: sie gelten fuer den Tag. Mit Uhrzeit stehen sie
 * seit 22.09.2026 im Raster an ihrer Planzeit (.kalender-sperre). Die Art einer Abwesenheit steht nur dort, wo die Befugnis sie
 * erlaubt - das entscheidet kalender.js, nicht dieses Stilblatt. */

.kalender-ganztags-tag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--raum-1);
  min-height: 24px;
  min-width: 0;
  border-bottom: 1px solid var(--linie);
  border-left: 1px solid var(--linie-leise);
  background: var(--flaeche-vertieft);
  align-self: stretch;
}

.kalender-ausfall {
  display: flex;
  flex-direction: column;
  padding: 1px var(--raum-1);
  border-left: 3px solid var(--linie-stark);
  border-radius: var(--rund-1);
  background: var(--neutral-flaeche);
  font-size: var(--grad-0);
  line-height: 1.4;
  min-width: 0;
}

.kalender-ausfall-titel {
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kalender-ausfall-text {
  color: var(--neutral-schrift);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------- Zeit und Tag */

.kalender-zeitspalte {
  border-right: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
}

.kalender-stundenmarke {
  display: flex;
  justify-content: flex-end;
  height: var(--stunde-hoehe);
  padding: 0 var(--raum-2);
  font-family: var(--schriftfamilie-zahl);
  font-size: var(--grad-1);
  font-variant-numeric: tabular-nums;
  color: var(--schrift-leise);
  border-top: 1px solid var(--linie-leise);
}

.kalender-stundenmarke:first-child {
  border-top: 0;
}

.kalender-stundenmarke span {
  transform: translateY(-0.6em);
}

.kalender-tag {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--linie-leise);
}

.kalender-tag-heute {
  background: var(--flaeche-vertieft);
}

/* Eine freie Stunde. Mit der Befugnis 'fahrten' ist sie ein Knopf und legt
   eine Fahrt mit diesem Datum und dieser Uhrzeit an; ohne sie zeichnet
   kalender.js an derselben Stelle ein stummes div. Beide sind gleich hoch,
   damit das Raster in beiden Faellen dasselbe ist. */
.kalender-stunde {
  display: block;
  width: 100%;
  height: var(--stunde-hoehe);
  padding: 0;
  border: 0;
  border-top: 1px solid var(--linie-leise);
  background: none;
}

.kalender-stunde:first-child {
  border-top: 0;
}

.kalender-stunde-frei {
  cursor: pointer;
}

.kalender-stunde-frei:hover {
  background: var(--flaeche-still);
}

.kalender-stunde-frei:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: -2px;
}

/* ------------------------------------------------------------ Fahrtblock
 * Lage und Hoehe aus der Uhrzeit: oben der Abstand vom Fensterbeginn, die
 * Hoehe aus der Dauer. Ueberschneidende Bloecke teilen sich die Breite
 * (--spur von --spuren), damit keiner den anderen verdeckt. */

.kalender-block {
  position: absolute;
  top: calc((var(--start) - var(--fenster-von)) * var(--stunde-hoehe) / 60);
  height: calc(var(--dauer) * var(--stunde-hoehe) / 60);
  min-height: 20px;
  left: calc(var(--spur) / var(--spuren) * 100%);
  width: calc(100% / var(--spuren));
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 1px var(--raum-1);
  border: 1px solid var(--linie-stark);
  border-left: 3px solid var(--akzent-linie);
  border-radius: var(--rund-1);
  background: var(--flaeche-still);
  color: var(--schrift-stark);
  font: inherit;
  font-size: var(--grad-0);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.kalender-block:hover {
  background: var(--flaeche-erhoben);
}

.kalender-block:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 1px;
  z-index: 3;
}

.kalender-block-zeit {
  font-family: var(--schriftfamilie-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--schrift-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der Beginn bricht nie um: in einer schmalen Spalte ist er das Einzige,
   was von der Uhrzeit uebrig bleibt. */
.kalender-block-von {
  white-space: nowrap;
}

/* Abfahrt (28.09.2026): Der Block beginnt dort, deshalb steht sie vorn -
   halbfett wie die Uhrzeit, mit einem Trenner dahinter. */
.kalender-block-los {
  white-space: nowrap;
  font-weight: var(--fett-halb);
}

.kalender-block-los::after {
  content: " · ";
}

/* Die Anfahrt als eigener Abschnitt oben im Block (28.09.2026): so hoch,
   wie die Anfahrt dauert (Minuten mal Stundenhoehe), getoent und unten
   gestrichelt abgeschlossen - genau dort ist die Abholung, und dort beginnt
   der uebrige Text. Schrift in der Blockfarbe, Toenung leicht genug fuer den
   Kontrast (gemessen). */
.kalender-block-anfahrt {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: calc(var(--anfahrt, 0) * var(--stunde-hoehe) / 60);
  margin: -1px calc(-1 * var(--raum-1)) 2px;
  padding: 1px var(--raum-1) 0;
  overflow: hidden;
  font-size: var(--grad-0);
  font-weight: var(--fett-halb);
  font-family: var(--schriftfamilie-zahl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, currentColor 60%, transparent);
}

.kalender-block-text {
  font-weight: var(--fett-halb);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kalender-block-fuss {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  min-width: 0;
  font-family: var(--schriftfamilie-fest);
  color: var(--schrift-leise);
  overflow: hidden;
  white-space: nowrap;
}

.kalender-block-vermerk {
  font-family: var(--schriftfamilie);
  color: var(--schrift-leise);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Weitere Zeilen des Blocks: Status neben der Uhrzeit, Strecke, Kennzeichen
   und Zusatz (Flug, Personen). Jede Zeile bleibt einzeilig und wird
   abgeschnitten, die volle Angabe steht in title und aria-label. */
.kalender-block-status {
  margin-left: var(--raum-1);
  font-family: var(--schriftfamilie);
  font-weight: var(--fett-halb);
}

.kalender-block-strecke,
.kalender-block-zusatz {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kalender-block-zusatz {
  display: flex;
  gap: var(--raum-1);
  min-width: 0;
}

.kalender-block-kennzeichen {
  font-family: var(--schriftfamilie-zahl);
  white-space: nowrap;
}

.kalender-block-fuss {
  margin-top: 1px;
}

/* Art der Fahrt vor dem Fahrgast, in normaler Staerke: der Name traegt. */
.kalender-block-art {
  font-weight: var(--fett-normal, 400);
}

/* Modell hinter dem Kennzeichen; faellt in schmalen Spalten zuerst weg. */
.kalender-block-modell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--schriftfamilie);
}

/* Kopieren (22.09.2026): eigener Knopf NEBEN dem Block (ein Knopf im Knopf
   waere ungueltig), rechts oben auf dessen Flaeche gelegt. Mit Maus
   erscheint er beim Zeigen oder im Fokus, auf Touchgeraeten steht er immer. */
.kalender-block-kopieren {
  position: absolute;
  top: calc((var(--start) - var(--fenster-von)) * var(--stunde-hoehe) / 60 + 2px);
  left: calc((var(--spur) + 1) / var(--spuren) * 100% - 26px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-1);
  background: var(--flaeche);
  color: var(--schrift-stark);
  cursor: pointer;
}

.kalender-block-kopieren svg {
  width: 16px;
  height: 16px;
}

.kalender-block-kopieren:hover {
  background: var(--flaeche-erhoben);
}

.kalender-block-kopieren:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 1px;
  z-index: 4;
}

@media (hover: hover) and (pointer: fine) {
  .kalender-block-kopieren {
    opacity: 0;
  }
  .kalender-block:hover + .kalender-block-kopieren,
  .kalender-block:focus-visible + .kalender-block-kopieren,
  .kalender-block-kopieren:hover,
  .kalender-block-kopieren:focus-visible {
    opacity: 1;
  }
}

/* Fahrername als Schild (Kundenwunsch 22.09.2026): Grund in der Farbe des
   Fahrers (--kf-<farbe>-stark mit --kf-auf-stark, gerechnet 5.29 hell,
   7.45 dunkel), ohne Farbe im Akzent. Ohne Fahrer gestrichelt. */
.kalender-fahrer {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--raum-1);
  border-radius: var(--rund-1);
  background: var(--akzent);
  color: var(--akzent-schrift);
  font-family: var(--schriftfamilie);
  font-weight: var(--fett-halb);
}

.kalender-fahrer-farbig {
  background: var(--kfs-grund);
  color: var(--kf-auf-stark);
}

.kalender-fahrer-offen {
  background: transparent;
  border: 1px dashed currentColor;
  color: inherit;
  font-weight: var(--fett-normal, 400);
}

/* Block in der Farbe des Fahrzeugs: Flaeche und Schrift aus der Palette,
   alle Zeilen in der Schrift der Farbe (keine leise Stufe - sie ist gegen
   die farbige Flaeche nicht gerechnet). */
.kalender-block-farbe,
.kalender-eintrag-farbe {
  background: var(--kb-flaeche);
  border-color: var(--kb-kante);
  border-left-color: var(--kb-kante);
  color: var(--kb-schrift);
}
.kalender-block-farbe:hover,
.kalender-eintrag-farbe:hover {
  background: var(--kb-flaeche);
  box-shadow: inset 0 0 0 1px var(--kb-kante);
}
.kalender-block-farbe .kalender-block-zeit,
.kalender-block-farbe .kalender-block-fuss,
.kalender-block-farbe .kalender-block-vermerk,
.kalender-eintrag-farbe .kalender-eintrag-zeit,
.kalender-eintrag-farbe .kalender-eintrag-kuerzel {
  color: var(--kb-schrift);
}

.kalender-eintrag .kalender-eintrag-kuerzel.kalender-fahrer-farbig {
  color: var(--kf-auf-stark);
  padding: 0 3px;
  border-radius: var(--rund-1);
  font-weight: var(--fett-halb);
}

/* Eine laufende Fahrt bekommt die Warnkante (Braun, kein Gelb - Gelb ist
   fuer Ueberschneidungen reserviert). */
.kalender-block-laufend {
  border-left-color: var(--warn-linie);
  background: var(--warn-flaeche);
  color: var(--warn-schrift);
}
.kalender-block-laufend .kalender-block-zeit,
.kalender-block-laufend .kalender-block-fuss,
.kalender-block-laufend .kalender-block-vermerk {
  color: var(--warn-schrift);
}

/* Abwesenheit, Termin oder Sperre mit Uhrzeit (22.09.2026): an der Planzeit
   im Raster, neutral und gestrichelt - belegt, aber keine Fahrt. Farben wie
   in der Ganztagszeile (.kalender-ausfall), dort gegen dieselbe Flaeche
   gerechnet. Kein Gelb: der Konflikt steht an der Fahrt. */
.kalender-sperre {
  position: absolute;
  top: calc((var(--start) - var(--fenster-von)) * var(--stunde-hoehe) / 60);
  height: calc(var(--dauer) * var(--stunde-hoehe) / 60);
  min-height: 20px;
  left: calc(var(--spur) / var(--spuren) * 100%);
  width: calc(100% / var(--spuren));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1px var(--raum-1);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rund-1);
  background: var(--neutral-flaeche);
  font-size: var(--grad-0);
  line-height: 1.35;
  /* Band HINTER den Fahrten; Klicks gehen an die freie Stunde darunter,
     denn eine Sperre des einen Wagens hindert keine Fahrt mit einem anderen. */
  z-index: 0;
  pointer-events: none;
}

.kalender-block {
  z-index: 1;
}

/* Zeilen eines Blocks schrumpfen nicht: in einem kurzen Block schnitt die
   Flex-Spalte sonst jede Zeile an und legte sie uebereinander (gesehen
   22.09.2026). So steht oben, was passt, der Rest beim Aufklappen. */
.kalender-block > * {
  flex-shrink: 0;
}

.kalender-sperre-titel {
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  overflow-wrap: break-word;
}

.kalender-sperre-text {
  color: var(--neutral-schrift);
  overflow-wrap: break-word;
}

/* Beim Zeigen oder im Fokus klappt ein Block auf seine volle Hoehe auf und
   legt sich ueber die Nachbarn - so ist alles lesbar, ohne die Uhrzeit-
   Lage der uebrigen Bloecke zu verschieben. */
.kalender-block:hover,
.kalender-block:focus-visible {
  height: auto;
  min-height: calc(var(--dauer) * var(--stunde-hoehe) / 60);
  z-index: 3;
  outline: 2px solid var(--linie-stark);
  outline-offset: 0;
}

.kalender-block:focus-visible {
  outline-color: var(--fokus);
}

.kalender-block:is(:hover, :focus-visible) :is(.kalender-block-text, .kalender-block-strecke, .kalender-block-zusatz) {
  display: block;
  -webkit-line-clamp: unset;
  white-space: normal;
  overflow: visible;
}

.kalender-block:is(:hover, :focus-visible) .kalender-block-fuss {
  flex-wrap: wrap;
  white-space: normal;
}

/* Noch unbesetzt: gestrichelte Kante, kein eigener Farbton. */
.kalender-block-offen {
  border-style: dashed;
  border-left-style: solid;
}

/* ------------------------------------------------------- Ueberschneidung
 * Der einzige Ort fuer Signalgelb in dieser Datei. Der Streifen liegt als
 * eigene Flaeche links im Block, zwischen zwei Kanten in --konflikt-kante,
 * und traegt keinen Text. Die Schrift des Blocks steht auf
 * --konflikt-flaeche und kommt aus --konflikt-schrift. */

.kalender-block-konflikt,
.kalender-eintrag-konflikt {
  position: absolute;
  border-color: var(--konflikt-linie);
  border-left-color: var(--konflikt-kante);
  background: var(--konflikt-flaeche);
  color: var(--konflikt-schrift);
}

.kalender-eintrag-konflikt {
  position: relative;
}

.kalender-block-konflikt .kalender-block-zeit,
.kalender-block-konflikt .kalender-block-fuss,
.kalender-block-konflikt .kalender-block-vermerk,
.kalender-eintrag-konflikt .kalender-eintrag-zeit,
.kalender-eintrag-konflikt .kalender-eintrag-kuerzel {
  color: var(--konflikt-schrift);
}

.kalender-block-konflikt::before,
.kalender-eintrag-konflikt::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--konflikt-signal);
  border-right: 1px solid var(--konflikt-kante);
}

.kalender-block-konflikt {
  padding-left: calc(var(--raum-1) + 5px);
}

.kalender-eintrag-konflikt {
  padding-left: calc(var(--raum-1) + 5px);
}

/* --------------------------------------------------------- Linie "jetzt"
 * Nur am heutigen Tag. Sie zeigt die Uhrzeit, mehr nicht - keine Handlung,
 * kein Fokus. Ohne Skript gibt es sie nicht; kalender.js verschiebt sie
 * einmal je Minute. */

.kalender-jetzt {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--jetzt) - var(--fenster-von)) * var(--stunde-hoehe) / 60);
  height: 0;
  border-top: 2px solid var(--akzent-linie);
  pointer-events: none;
  z-index: 2;
}

/* Die Uhrzeit an der Linie steht nur in der Tagesansicht: in der Woche ist
   eine Spalte so schmal, dass das Schild einen Block verdecken wuerde. Die
   Linie selbst steht in beiden, und ihre Vorlesebeschriftung nennt die Zeit
   auch dort, wo das Schild fehlt. */
.kalender-jetzt-zeit {
  display: none;
}

/* Das Schild steht in der Zeitspalte links neben der Tagesspalte, nicht im
   Raster: dort verdeckt es hoechstens eine Stundenmarke und keinen Text
   einer Fahrt. */
.kalender-raster-tag .kalender-jetzt-zeit {
  display: block;
  position: absolute;
  top: -0.75em;
  left: calc(-1 * var(--zeitspalte));
  width: var(--zeitspalte);
  text-align: center;
  padding: 0 var(--raum-1);
  border-radius: var(--rund-1);
  background: var(--akzent);
  color: var(--akzent-schrift);
  font-family: var(--schriftfamilie-zahl);
  font-size: var(--grad-0);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* ----------------------------------------------------- Woche, lesbar
 * Kundenwunsch 22.09.2026: in der Wochenspalte (bei 1440 px rund 150 px)
 * war jede Zeile abgeschnitten. Mehr Hoehe je Stunde, Fahrgast und Strecke
 * brechen auf hoechstens zwei Zeilen um, Fahrer und Kennzeichen duerfen
 * untereinander stehen, das Modell steht erst beim Aufklappen. */
@media (min-width: 701px) {
  .kalender-raster:not(.kalender-raster-tag) {
    --stunde-hoehe: 116px;
  }

  .kalender-raster:not(.kalender-raster-tag) :is(.kalender-block-text, .kalender-block-strecke) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .kalender-raster:not(.kalender-raster-tag) .kalender-block-fuss {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  /* Beginn, Ende und Status duerfen untereinander stehen; jedes Stueck
     bleibt ganz. */
  .kalender-raster:not(.kalender-raster-tag) .kalender-block-zeit {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--raum-1);
    white-space: normal;
  }

  .kalender-raster:not(.kalender-raster-tag) .kalender-block-bis,
  .kalender-raster:not(.kalender-raster-tag) .kalender-block-status {
    margin-left: 0;
    white-space: nowrap;
  }

  .kalender-raster:not(.kalender-raster-tag) :is(.kalender-fahrer, .kalender-block-zusatz, .kalender-block-vermerk) {
    white-space: normal;
    overflow-wrap: break-word;
    flex-wrap: wrap;
  }

  /* Liegen Fahrten nebeneinander, klappt die gezeigte auf die ganze
     Tagesspalte auf. */
  .kalender-raster:not(.kalender-raster-tag) .kalender-block:is(:hover, :focus-visible) {
    left: 0;
    width: 100%;
  }

  .kalender-raster:not(.kalender-raster-tag) .kalender-block-modell {
    display: none;
  }

  .kalender-raster:not(.kalender-raster-tag) .kalender-block:is(:hover, :focus-visible) .kalender-block-modell {
    display: inline;
  }
}

/* ------------------------------------------------------------- Schmal
 * Bei 360 px ist die Tagesansicht die Vorgabe (kalender.js). Monat und
 * Woche bleiben erreichbar und muessen dort ebenfalls in die Seite passen:
 * schmalere Zeitspalte, kleinere Schrift, kein Kuerzel im Monatseintrag. */

@media (max-width: 700px) {
  .kalender {
    /* Nicht schmaler: darunter bricht "Ganztags" mitten im Wort um. */
    --zeitspalte: 56px;
    --stunde-hoehe: 48px;
  }

  /* Tagesansicht am Handy (24.09.2026): hoehere Stunden, damit ein Block
     seine Zeilen zeigt statt sie zu stapeln; die Erklaerung unter dem Datum
     faellt weg (Prinzip 4: Erklaerungen hinter das Zeichen, nicht ins Bild). */
  .kalender-raster-tag { --stunde-hoehe: 96px; }
  .kalender .karte-unter { display: none; }

  /* In einer Wochenspalte von rund 43 px ist neben dem Datum kein Platz
     fuer das Wort "heute". Die Spalte traegt es weiter als Flaeche, die
     Beschriftung des Knopfs nennt das Datum, und fuer die Vorlesehilfe
     bleibt der Text stehen. In der Tagesansicht ist die Spalte breit -
     dort steht er wie gehabt im Bild. */
  .kalender-raster:not(.kalender-raster-tag) .kalender-tagkopf-marke {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .kalender-monat-zelle {
    height: 82px;
    padding: 1px;
  }

  /* Neben der Tageszahl ist in einer 44 px breiten Zelle kein Platz mehr
     fuer das Wort "heute". Die Zelle traegt es weiter als Rahmen, und die
     Beschriftung des Tagesknopfs nennt das Datum - fuer die Vorlesehilfe
     bleibt der Text deshalb stehen, nur nicht mehr im Bild. */
  .kalender-monat-heute-marke {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .kalender-eintrag {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px;
  }

  .kalender-eintrag-kuerzel {
    display: none;
  }

  .kalender-tagkopf-knopf {
    padding: var(--raum-1);
    font-size: var(--grad-0);
  }

  .kalender-stundenmarke {
    padding: 0 var(--raum-1);
    font-size: var(--grad-0);
  }

  /* 2 px statt 4 px: gemessen am 16.09.2026 braucht "Ganztags" 47.4 px, die
     Spalte bietet 56 px. Mit 4 px Polsterung fehlten 0.4 px und das Wort
     brach um. */
  .kalender-ganztags-marke {
    padding: var(--raum-1) 2px;
  }
}

/* Auf ganz schmalen Geraeten traegt eine Monatszelle keine Textzeile mehr.
   Dann steht je Fahrt nur die Uhrzeit - lieber weniger als abgeschnitten. */
@media (max-width: 420px) {
  .kalender-eintrag {
    grid-template-columns: minmax(0, 1fr);
  }

  .kalender-eintrag-text {
    display: none;
  }

  .kalender-monat-kopf {
    padding: var(--raum-1);
  }

  /* Wochenansicht auf dem Telefon: eine Spalte traegt nur noch den Beginn.
     Ziel, Kuerzel und Ende stehen in Beschriftung und Titel des Blocks und
     im Klartext, sobald der Tag geoeffnet ist. */
  .kalender-raster:not(.kalender-raster-tag) .kalender-block-bis,
  .kalender-raster:not(.kalender-raster-tag) .kalender-block-text,
  .kalender-raster:not(.kalender-raster-tag) .kalender-block-fuss {
    display: none;
  }

  /* Eine Wochenspalte ist hier rund 41 px breit. Mit 4 px Polsterung blieben
     26 px fuer die Uhrzeit, die 28.5 px braucht (gemessen am 16.09.2026) -
     sie wurde abgeschnitten. Mit 1 px passt sie. */
  .kalender-raster:not(.kalender-raster-tag) .kalender-block {
    padding-left: 1px;
    padding-right: 1px;
  }

  .kalender-raster:not(.kalender-raster-tag) .kalender-block-konflikt {
    padding-left: 5px;
  }
}

/* Gedruckt wird ohne Zeiger und ohne Flaechenwechsel beim Zeigen. */
@media print {
  .kalender-monat-zelle,
  .kalender-eintrag,
  .kalender-block {
    cursor: auto;
  }
}

/* ------------------------------------------------ Wochenplan auf Papier
   views/woche.js, Knopf "Drucken" (17.09.2026). Am Bildschirm steht die
   Druckzeile nicht; auf Papier traegt sie Stand und, beim Lesezugang, den
   freigegebenen Zeitraum. Kein eigenes Seitenformat: eine benannte Seite
   haette den Seitenkopf allein auf ein erstes Blatt gestellt (gemessen
   17.09.2026). Das Format waehlt der Druckdialog. Farben bleiben
   die der Tokens; weggenommen werden nur Flaechen und Rahmen der Knoepfe. */
.woche-druckzeile { display: none; }

@media print {
  .woche-druck { gap: var(--raum-3); }
  .woche-druckzeile { display: block; margin: 0; }
  .woche-druck .meldung { display: none; }
  .woche-druck .knopf {
    height: auto;
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background: none;
    box-shadow: none;
    font-size: var(--grad-1);
    white-space: normal;
    text-align: left;
  }
  .woche-druck .kennzahl { break-inside: avoid; }
}

/* ------------------------------------------------ Seitenpanel (24.09.2026)
   Die gewaehlte Fahrt neben dem Raster (views/kalender.js fahrtPanel), nur ab
   1100px und in Tag und Woche. Das Raster behaelt den Rest der Breite, das
   Panel klebt beim Rollen oben. Der gewaehlte Block traegt aria-pressed und
   einen 2px-Rand in --akzent-linie. */
.kalender-koerper { display: flex; flex-direction: column; gap: var(--raum-4); }
@media (min-width: 1100px) {
  .kalender-mit-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--raum-4);
    align-items: start;
  }
  .kalender-panel { position: sticky; top: calc(var(--kopf-hoehe) + var(--raum-4)); }
}
.kalender-panel { padding: var(--raum-5); display: flex; flex-direction: column; gap: var(--raum-3); }
.kalender-panel-kopf { display: flex; align-items: flex-start; gap: var(--raum-2); }
.kalender-panel-titel { flex: 1; min-width: 0; font-size: var(--grad-4); font-weight: var(--fett-stark); color: var(--schrift-stark); }
.kalender-panel-unter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--raum-2); }
.kalender-panel-zeilen { display: flex; flex-direction: column; gap: var(--raum-2); padding-top: var(--raum-3); border-top: 1px solid var(--linie-leise); }
.kalender-panel-zeile { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--raum-3); align-items: baseline; }
.kalender-panel-marke { font-size: var(--grad-1); color: var(--schrift-leise); }
.kalender-panel-wert { font-size: var(--grad-2); font-weight: var(--fett-halb); color: var(--schrift-stark); overflow-wrap: anywhere; }
.kalender-panel-aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-2); padding-top: var(--raum-3); border-top: 1px solid var(--linie-leise); }
.kalender-block[aria-pressed="true"] { outline: 2px solid var(--akzent-linie); outline-offset: 1px; z-index: 2; }