/* Ergänzungen für den Betriebsbereich. */

.globalsuche { position: relative; flex: 1 1 320px; max-width: 460px; margin-left: 18px; }
.globalsuche input {
  width: 100%; min-height: 40px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .12);
  color: #fff; font-size: .93rem;
}
.globalsuche input::placeholder { color: rgba(255, 255, 255, .68); }
.globalsuche input:focus { background: #fff; color: var(--text); outline: 3px solid rgba(255, 255, 255, .35); }
.globalsuche input:focus::placeholder { color: var(--text-gedaempft); }

.trefferliste {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten-stark);
  max-height: 60vh; overflow-y: auto; z-index: 60;
}
.treffer-zeile { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--rand); color: var(--text); align-items: baseline; }
.treffer-zeile:last-child { border-bottom: 0; }
.treffer-zeile:hover { background: var(--flaeche-gedaempft); text-decoration: none; }
.treffer-zeile .art { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-gedaempft); font-weight: 700; }
.treffer-zeile .titel { font-weight: 620; }
.treffer-zeile .zusatz { font-size: .85rem; color: var(--text-gedaempft); }
.treffer-leer { padding: 14px; color: var(--text-gedaempft); }

.benutzeranzeige { color: rgba(255, 255, 255, .9); font-size: .9rem; padding: 0 8px; align-self: center; }

.seitenleiste a { justify-content: flex-start; }
.seitenleiste .zaehler {
  margin-left: auto; font-size: .76rem; font-weight: 700; min-width: 20px; height: 20px;
  border-radius: 999px; display: none; place-items: center; padding: 0 6px;
  background: var(--flaeche-gedaempft); color: var(--text-gedaempft);
}
.seitenleiste .zaehler:not(:empty) { display: grid; }
.seitenleiste .zaehler.fehler { background: var(--fehler); color: #fff; }
.seitenleiste .zaehler.warnung { background: var(--warnung); color: #fff; }
.seitenleiste a.aktiv .zaehler { background: rgba(255, 255, 255, .22); color: #fff; }

/* Filterleiste über Listen */
.filterleiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filterleiste .knopf { min-height: 38px; }
.filterleiste input, .filterleiste select { min-height: 38px; width: auto; min-width: 210px; }
.filterleiste .schalter {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rand-stark); background: var(--flaeche);
  font-size: .88rem; cursor: pointer; font-family: inherit; color: var(--text); min-height: 38px;
}
.filterleiste .schalter.aktiv { background: var(--primaer); color: #fff; border-color: var(--primaer); font-weight: 620; }
/* Die Anzahl im aktiven Schalter darf nicht die gedaempfte Textfarbe behalten -
   dunkles Grau auf dunklem Grund ist nicht lesbar. */
.filterleiste .schalter.aktiv .gedaempft { color: rgba(255, 255, 255, .8); }

/* Kalender der Disposition */
.kalender { display: grid; gap: 2px; grid-auto-rows: minmax(58px, auto); }
.kalender-kopf { display: grid; gap: 2px; font-size: .78rem; color: var(--text-gedaempft); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.kalender-zelle { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 6px; min-width: 0; }
.kalender-zelle.heute { border-color: var(--primaer); box-shadow: inset 0 0 0 1px var(--primaer); }
.kalender-zelle .tagzahl { font-size: .78rem; color: var(--text-gedaempft); font-weight: 700; margin-bottom: 4px; }
.kalender-zelle.wochenende { background: var(--flaeche-gedaempft); }
.termin {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 4px; padding: 4px 6px;
  font-size: .78rem; margin-bottom: 3px; cursor: pointer; font-family: inherit; line-height: 1.25;
  background: var(--info-grund); color: #123a68; border-left: 3px solid var(--info);
}
.termin.rueckholung { background: var(--warnung-grund); color: #6d4506; border-left-color: var(--warnung); }
.termin.erledigt { background: var(--gut-grund); color: #12512f; border-left-color: var(--gut); }
.termin.offen { background: var(--fehler-grund); color: #7d1818; border-left-color: var(--fehler); }
.termin strong { display: block; font-weight: 700; }

/* Belegungsband je Gerät */
.belegungsband { display: grid; grid-template-columns: 132px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.band { position: relative; height: 26px; background: var(--flaeche-gedaempft); border-radius: 4px; overflow: hidden; }
.band .stueck { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.band .stueck.miete { background: var(--primaer); }
.band .stueck.puffer { background: repeating-linear-gradient(45deg, #b9c6d3, #b9c6d3 4px, #cdd7e1 4px, #cdd7e1 8px); }
.band .stueck.transport { background: var(--akzent); }
.band .stueck.reinigung { background: #9db3c6; }
.band .stueck.wartung, .band .stueck.sperre { background: var(--fehler); }
.bandlegende { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--text-gedaempft); margin-top: 8px; }
.bandlegende span { display: inline-flex; align-items: center; gap: 6px; }
.bandlegende i { width: 14px; height: 12px; border-radius: 3px; display: inline-block; }

/* Karte der Standorte */
.standortkarte { position: relative; width: 100%; height: 420px; background: var(--flaeche-gedaempft);
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.standortkarte .punktmarke {
  position: absolute; transform: translate(-50%, -100%); background: var(--primaer); color: #fff;
  padding: 4px 8px; border-radius: 6px; font-size: .78rem; font-weight: 650; white-space: nowrap;
  cursor: pointer; box-shadow: var(--schatten);
}
.standortkarte .punktmarke::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--primaer);
}
.standortkarte .punktmarke.wartung { background: var(--fehler); }
.standortkarte .punktmarke.wartung::after { border-top-color: var(--fehler); }
.standortkarte .hinweis-mitte { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-gedaempft); }

/* Detailspalten */
.detailraster { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--abstand); align-items: start; }
@media (max-width: 1000px) { .detailraster { grid-template-columns: 1fr; } }

.merkzeile { display: grid; grid-template-columns: 190px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.merkzeile:last-child { border-bottom: 0; }
.merkzeile .name { color: var(--text-gedaempft); font-size: .9rem; }
.merkzeile .wert { font-weight: 560; min-width: 0; overflow-wrap: break-word; }

/* Im Detailraster stehen Karten nebeneinander - dort ist neben der
   Namensspalte kaum Platz. Dann untereinander statt Wörter zerhacken. */
.karte { container-type: inline-size; }
@container (max-width: 460px) {
  .merkzeile { grid-template-columns: 1fr; gap: 2px; }
  .merkzeile .name { font-size: .82rem; }
}

.verlauf { position: relative; padding-left: 20px; }
.verlauf::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--rand); }
.verlauf .eintrag { position: relative; padding: 0 0 14px 0; }
.verlauf .eintrag::before {
  content: ""; position: absolute; left: -19px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--flaeche); border: 2px solid var(--primaer);
}
.verlauf .zeitpunkt { font-size: .8rem; color: var(--text-gedaempft); }

/* Kopfzeile auf schmalen Geräten -------------------------------------------
   Suchfeld, Benutzername und Abmelden passen neben der Marke nicht in eine
   Zeile: das Suchfeld schrumpfte auf Symbolbreite und der Rollenname lief
   seitlich aus dem Bild. Die Suche bekommt deshalb eine eigene Zeile. */
@media (max-width: 720px) {
  .globalsuche { flex: 1 1 100%; order: 4; margin-left: 0; max-width: none; }
  .benutzeranzeige { padding: 8px 13px; overflow-wrap: anywhere; }
}

/* Einsätze ------------------------------------------------------------------
   Die Aktionsspalte trägt drei Knöpfe nebeneinander. Ohne feste Anordnung
   stapeln sie sich ungleich - der randlose "schlicht"-Knopf sieht dann wie
   ein verrutschter Link aus. Die Auftragsnummer darf nicht umbrechen:
   "A2026-" über "0001" liest sich wie zwei verschiedene Nummern. */
.einsatzknoepfe {
  display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
}
.einsatzknoepfe .knopf { white-space: nowrap; }
/* Die Aktionsspalte fordert nebeneinander rund 345px - ein Drittel der ganzen
   Liste. Auf Laptopbreiten (901-1399px) sprengte diese Mindestbreite den
   Rahmen: gemessen 231px Überhang bei 1100px, der Knopf "Aufgestellt" lag
   ausserhalb. Der Rahmen rollt zwar, aber niemand rollt eine Liste zur Seite,
   um den wichtigsten Knopf zu finden. Deshalb gilt die Mindestbreite erst,
   wo sie nachweislich hineinpasst; darunter brechen die Knöpfe rechtsbündig
   um. Die Zeilenhöhe trägt das, weil jede Zelle ohnehin zweizeilig ist. */
@media (min-width: 1400px) {
  table.liste td:has(> .einsatzknoepfe) { min-width: 345px; }
}
/* Dazwischen reicht die Breite für einen Knopf je Zeile. Statt sie im
   Zufallsumbruch verschieden breit rechts hängen zu lassen, stehen sie
   bewusst als Gruppe untereinander - gleiche Breite, gleiche Kanten. Die
   Zeile ist ohnehin vierzeilig, die Höhe kostet also nichts. */
/* Seit "Erfassen" dazugekommen ist, sind es vier Knöpfe: untereinander
   ergäbe das rund 200 px Zeilenhöhe, und eine Liste aus zwölf Einsätzen
   passt dann nicht mehr auf einen Bildschirm. Deshalb zwei nebeneinander. */
@media (min-width: 1001px) and (max-width: 1399px) {
  table.liste td:has(> .einsatzknoepfe) { min-width: 232px; }
  .einsatzknoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: stretch; }
  .einsatzknoepfe .knopf { width: 100%; }
}
table.liste td .nummer { white-space: nowrap; }

@media (max-width: 1000px) {
  .einsatzknoepfe { justify-content: flex-start; }
}