/* Logenius – app-weite Ergänzungen zum Universal Theme */

/*
 * Button-Leisten (z. B. unten in modalen Dialogen) auf schmalen Bildschirmen kompakter, damit alle Buttons in einer
 * Zeile Platz haben. Das Universal Theme legt die Leiste als Grid an (links | Mitte | rechts) mit 16 px Innenabstand
 * pro Spalte und 15 px pro Button; ein Umbruch ist keine Lösung, weil die Leiste unten fixiert ist und eine zweite
 * Zeile das Formular überdecken würde. Seltene Aktionen links zusätzlich mit der Template-Option
 * „Hide Label on Mobile“ (nur Icon) versehen.
 */
@media (max-width: 640px) {
  .t-ButtonRegion .t-ButtonRegion-wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
  .t-ButtonRegion .t-ButtonRegion-col--content { padding-inline: 0; }
  .t-ButtonRegion .t-ButtonRegion-col--left .t-ButtonRegion-buttons { padding-right: .5rem; }
  .t-ButtonRegion .t-ButtonRegion-col--right .t-ButtonRegion-buttons { padding-left: .5rem; }
  .t-ButtonRegion .t-ButtonRegion-buttons .t-Button.t-Button--large { padding-inline: .5rem; }
}

/*
 * PIN-Eingabe mit sechs Kästchen (js/logenius-pin.js). Das echte Feld liegt unsichtbar über den Kästchen.
 */
.lg-pin .apex-item-icon,
.lg-pin .t-Button--passwordVisibility {
  display: none;
}
.lg-pin .t-Form-itemWrapper {
  position: relative;
}
/* Eingabegruppe samt (unsichtbarem) Feld liegt genau über der ganzen Kästchenreihe */
.lg-pin .apex-item-group--password {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lg-pin .apex-item-group--password input.apex-item-password {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;            /* verhindert das automatische Zoomen unter iOS */
  caret-color: transparent;
}
.lg-pin-kaestchen {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: .5rem;
}
.lg-pin-k {
  display: flex;
  flex: 1 1 0;
  min-width: 0;               /* ohne max-width: die Reihe ist gleich breit wie Benutzerfeld und Buttons */
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--a-field-border-color, #c4cbd2);
  border-radius: .5rem;
  background-color: var(--a-field-background-color, #fff);
  font-size: 1.375rem;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}
.lg-pin-k.is-punkt {
  font-size: .875rem;
}
.lg-pin-k.is-aktiv {
  border-color: var(--ut-palette-primary, #12304a);
  box-shadow: 0 0 0 2px rgba(18, 48, 74, .2);
}
.lg-pin.is-error .lg-pin-k {
  border-color: var(--ut-palette-danger, #c00);
}

/* Kundenimport (Seite 3050): Ergebniszeile nur, wenn nach dem Import Fehlerzeilen übrig sind */
.lg-import-ergebnis:empty {
  display: none;
}

/* Angeheftete Buttons in Dialogen: Hintergrund, damit lange Inhalte (z.B. Importvorschau) nicht durchscheinen */
.t-Dialog-page .t-ButtonRegion--stickToBottom {
  background-color: var(--ut-component-background-color, #fff);
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Tab-Leiste unten (nur Smartphone). Region "Tab-Leiste (Smartphone)" auf der Global Page mit der Liste "Tab-Leiste"
 * (Links List). Desktop und Tablet behalten das Seitenmenü; auf dem Smartphone ersetzt "Mehr" den Menü-Knopf oben und
 * öffnet das Seitenmenü mit allen Einträgen.
 * Aussehen wie iOS 26 ("Liquid Glass"): schwebende Kapsel mit Abstand zum Rand, halbtransparenter, unscharfer
 * Hintergrund (der Inhalt scheint beim Scrollen durch), feiner heller Rand und weicher Schatten; der aktive Tab hat
 * eine eigene kleine Kapsel.
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-tabbar {
  display: none;
}

@media (max-width: 640px) {
  .t-PageBody:not(.t-Dialog-page) .lg-tabbar {
    display: block;
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    z-index: 900;
    padding: .25rem;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, .6);
    background-color: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 8px 24px rgba(18, 48, 74, .16), 0 1px 3px rgba(18, 48, 74, .10),
                inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  /* ohne Unschärfe (ältere Browser): weniger durchsichtig, damit die Beschriftung lesbar bleibt */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .t-PageBody:not(.t-Dialog-page) .lg-tabbar {
      background-color: rgba(255, 255, 255, .94);
    }
  }
  .lg-tabbar .t-LinksList {
    display: flex;
    gap: .125rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .lg-tabbar .t-LinksList-item {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: none;
  }
  .lg-tabbar .t-LinksList-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    padding: .375rem .25rem .3125rem;
    border: 0;
    border-radius: 1.5rem;
    background: none;
    box-shadow: none;
    color: var(--ut-component-text-muted-color, #5b6672);
    font-size: .6875rem;
    line-height: 1.2;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
  }
  .lg-tabbar .t-LinksList-link:hover,
  .lg-tabbar .t-LinksList-link:focus {
    background: none;
  }
  .lg-tabbar .t-LinksList-icon {
    margin: 0;
    font-size: 1.375rem;
    color: inherit;
  }
  .lg-tabbar .t-LinksList-label {
    padding: 0;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .lg-tabbar .t-LinksList-item.is-current > .t-LinksList-link {
    color: var(--ut-palette-primary, #12304a);
    font-weight: 600;
    background-color: rgba(18, 48, 74, .09);
  }
  .lg-tabbar .t-LinksList-badge,
  .lg-tabbar .t-LinksList-afterLabel {
    display: none;
  }

  /* Platz für die Leiste, damit das Ende jeder Seite darüber hinaus scrollt; Menü-Knopf oben wird durch "Mehr"
     ersetzt, der Knopf "nach oben" der Fusszeile läge hinter der Leiste */
  .t-PageBody:not(.t-Dialog-page) .t-Body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
  .t-PageBody:not(.t-Dialog-page) #t_Button_navControl,
  .t-PageBody:not(.t-Dialog-page) .t-Footer-topButton {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Dialoge auf dem Smartphone: Das Universal Theme heftet die Button-Leiste (t-ButtonRegion--stickToBottom) dort fest an
 * den unteren Rand (position: fixed, 72 px). APEX berechnet die Höhe des Dialogs aber ohne diese Leiste - der untere
 * Teil des Inhalts lag dahinter und liess sich nicht hervorscrollen. Platz unten reservieren: am inneren Bereich
 * (t-Dialog-body), denn dessen Höhe misst APEX für die Dialoghöhe - so wächst der Dialog mit, statt zu scrollen.
 * ------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .t-Dialog-page .t-Dialog-body {
    padding-bottom: 4.5rem;
  }
}

/* Dialoge auf dem Smartphone: Die Fehlermeldung liegt sonst fest über den ersten Feldern (L-24); so steht sie darüber
 * und schiebt das Formular nach unten. */
@media (max-width: 640px) {
  .t-Dialog-page #t_Alert_Notification {
    position: static;
    width: auto;
    margin: 0 0 .75rem;
  }
}

/* Smartphone: "Profil" ist als Tab unten vorhanden, im Seitenmenü unter "Mehr" daher ausblenden */
@media (max-width: 640px) {
  #t_TreeNav .a-TreeView-node:has(> .a-TreeView-content > .a-TreeView-label[href*="/profil?"]) {
    display: none;
  }
}

/* Smartphone: Buttons in der Titelleiste immer nebeneinander und als kompakte Icon-Buttons. Bei einem langen Titel
   (z.B. "Aufträge \ 2026-00012 · Bahnhof AG" auf Seite 1100) wurde der Button-Bereich sonst zusammengedrückt, die
   Buttons brachen untereinander um und zogen sich in die Breite - jetzt bricht stattdessen der Titel um */
@media (max-width: 640px) {
  .t-BreadcrumbRegion-buttons {
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Auftrag (Seiten 1100 und 1200): Kopfangaben mit Symbolen und Status-Badge, Positionsnummern
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-auftrag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.lg-auftrag-angaben > div {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  line-height: 1.5rem;
}
.lg-auftrag-angaben .fa {
  width: 1rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  text-align: center;
}
.lg-auftrag-angaben > div:has(> span:last-child:empty) {
  display: none;
}

/* Positionsnummer im Kreis (Positionskarten auf Seite 1200) */
.lg-karte-nr {
  display: flex;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 .4rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #12304a;
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lg-karte-nach {
  background-color: #12304a;
  color: #fff;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Fahreransicht (Seite 1200): eine Karte pro Position mit grossen Buttons (js/logenius-fahrer.js)
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-pos-liste {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lg-pos {
  padding: 1rem;
  border: 1px solid var(--ut-component-border-color, #dfe4ea);
  border-radius: var(--ut-component-border-radius, .5rem);
  background-color: var(--ut-component-background-color, #fff);
  box-shadow: var(--ut-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
}
.lg-pos--erledigt {
  opacity: .7;
}
.lg-pos-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.lg-pos-kopf .lg-karte-nr {
  flex: 0 0 auto;
  cursor: default;
  box-shadow: none;
}
.lg-pos-was {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
}
.lg-pos-ort {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  margin-bottom: .5rem;
  line-height: 1.4;
}
.lg-pos-ort .fa {
  width: 1rem;
  flex: 0 0 auto;
  color: var(--ut-component-text-muted-color, #5b6672);
  text-align: center;
}
.lg-pos-ort small {
  display: block;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
/* Ort des Auftrags (auftrag_p.ort_html, Seite 1200): Kontakt mit Telefon zum Antippen, Hinweis für den Fahrer gelb
   hinterlegt */
.lg-pos-ort small .fa {
  width: auto;
  margin-right: .375rem;
}
.lg-pos-ort-kontakt {
  margin-top: .125rem;
}
.lg-pos-ort-kontakt a {
  text-decoration: underline;
}
.lg-pos-ort .lg-pos-ort-hinweis {
  margin-top: .375rem;
  padding: .375rem .5rem;
  border-radius: .375rem;
  background-color: #fef3c7;
  color: #3f3a2a;
  white-space: pre-line;
}
.lg-pos-ort .lg-pos-ort-hinweis .fa {
  color: #b45309;
}
.lg-hinweis-aendern {
  margin: .5rem 0 .75rem;
}
.lg-unterschrift-protokoll {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  font-size: .75rem;
  color: var(--ut-palette-neutral-text, #5f6b7a);
}
.lg-pos-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
}
/* der Abstand kommt vom gap - das Theme gibt einem Button nach einem Button sonst zusätzlich einen linken Rand */
.lg-pos-aktionen .t-Button {
  margin: 0;
}
.lg-pos-aktionen .t-Button--large {
  flex: 1 1 10rem;
  justify-content: center;
}
.lg-pos-aktionen .t-Button--link {
  flex: 0 0 100%;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Fotos an Positionen (Seiten 1200 und 1020, js/logenius-anhang.js): Vorschaubilder mit Badge der Art, Formular für
 * ein neues Foto, Grossansicht
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-anhaenge {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 0;
}
.lg-anhang {
  position: relative;
  display: flex;
  width: 5rem;
  height: 5rem;
  padding: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ut-component-border-color, #dfe4ea);
  border-radius: .5rem;
  background-color: var(--ut-component-highlight-background-color, #f2f6fa);
  cursor: zoom-in;
}
.lg-anhang img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lg-anhang .t-Badge {
  position: absolute;
  left: .25rem;
  bottom: .25rem;
  max-width: calc(100% - .5rem);
  overflow: hidden;
  padding: 0 .35rem;
  font-size: .6875rem;
  line-height: 1.125rem;
  text-overflow: ellipsis;
}
.lg-foto-neu {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
  padding: .75rem;
  border-radius: .5rem;
  background-color: var(--ut-component-highlight-background-color, #f2f6fa);
}
.lg-foto-neu-bild {
  width: 6rem;
  height: 6rem;
  border-radius: .375rem;
  object-fit: cover;
}
.lg-foto-neu-felder {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.lg-foto-arten {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.lg-foto-art {
  padding: .5rem .875rem;
  border: 1px solid var(--ut-component-border-color, #c7ced6);
  border-radius: 2rem;
  background-color: var(--ut-component-background-color, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lg-foto-art[aria-checked="true"] {
  border-color: var(--ut-palette-primary, #12304a);
  background-color: var(--ut-palette-primary, #12304a);
  color: var(--ut-palette-primary-contrast, #fff);
}
.lg-foto-bemerkung {
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--ut-field-border-color, #c7ced6);
  border-radius: .375rem;
  font-size: 1rem;   /* iOS zoomt bei kleinerer Schrift beim Tippen hinein */
}
.lg-foto-knoepfe {
  display: flex;
  gap: .5rem;
}
.lg-foto-knoepfe .t-Button {
  flex: 1 1 0;
  justify-content: center;
}
.lg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background-color: rgba(0, 0, 0, .75);
}
.lg-lightbox-inhalt {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 60rem;
  max-height: 100%;
  overflow: hidden;
  border-radius: .75rem;
  background-color: var(--ut-component-background-color, #fff);
}
.lg-lightbox-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .5rem .5rem 1rem;
  font-weight: 600;
}
.lg-lightbox-bild {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  background-color: #111;
}
.lg-lightbox-bild img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.lg-lightbox-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
  padding: .75rem 1rem;
}
.lg-lightbox-fuss p {
  margin: 0;
}
.lg-lightbox-bemerkung {
  flex: 1 0 100%;
}
.lg-lightbox-info {
  flex: 1 1 auto;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}

/* Speicherbelegung (Seite 9600 Lizenz) */
/* Hinweis unter den Angaben zur Lizenz (Seite 9600) */
.lg-lizenz-hinweis {
  margin: .5rem 0 0;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
.lg-speicher-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin-bottom: 1rem;
}
.lg-speicher-zahl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.lg-speicher-liste {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.lg-speicher-liste li {
  display: flex;
  gap: 1rem;
  padding: .5rem 0;
  border-top: 1px solid var(--ut-component-border-color, #dfe4ea);
}
.lg-speicher-liste li > span:first-child {
  flex: 1 1 auto;
}
/* Speicherkontingent der Lizenz: Balken, ab 90 % orange, ab 100 % rot */
.lg-speicher-balken {
  height: .625rem;
  margin: -.25rem 0 1rem;
  border-radius: .3125rem;
  background-color: var(--ut-component-border-color, #dfe4ea);
  overflow: hidden;
}
.lg-speicher-balken > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--ut-palette-primary, #12304a);
}
.lg-speicher-balken--warnung > span {
  background-color: #f59e0b;
}
.lg-speicher-balken--voll > span {
  background-color: #dc2626;
}
.lg-speicher-voll {
  margin: 0 0 1rem;
  color: #b91c1c;
  font-weight: 600;
}
/* Foto-Knopf bei vollem Speicher (Seite 1200): sichtbar, aber ausgegraut; ein Klick zeigt die Meldung */
.lg-foto-voll {
  opacity: .55;
}
.lg-speicher-hinweis {
  margin: 0;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
/* Reiter Aufbewahrung (Seite 9600) */
p.lg-aufbewahrung-text {
  margin: 0 0 .75rem;
}
p.lg-aufbewahrung-text:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Unterschriften unter den Auftrag, Auftraggeber und Fahrer (Seiten 1200 und 1100, js/logenius-unterschrift.js):
 * zwei Karten nebeneinander (Smartphone: untereinander), Anzeige und Unterschriftsfeld
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-unterschriften {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.lg-unterschrift-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.lg-unterschrift-karte-titel {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.lg-unterschrift-karte .lg-kopf-leer {
  margin: 0;
}
.lg-unterschrift-karte .t-Button {
  margin: 0;
}
.lg-unterschrift-karte .t-Button--large {
  align-self: stretch;
  justify-content: center;
}
.lg-unterschrift-bereich {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}
.lg-unterschrift-bereich p {
  margin: 0;
}
.lg-unterschrift {
  margin: 0;
}
.lg-unterschrift img {
  display: block;
  max-width: 100%;
  max-height: 8rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--ut-component-border-color, #c7ced6);
}
.lg-unterschrift figcaption {
  margin-top: .375rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .875rem;
}
body.lg-unterschrift-offen {
  overflow: hidden;
}
.lg-unterschrift-box {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
  background-color: rgba(0, 0, 0, .6);
}
.lg-unterschrift-inhalt {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  max-width: 48rem;
  max-height: 100%;
  overflow: auto;
  padding: 1rem;
  border-radius: .75rem;
  background-color: var(--ut-component-background-color, #fff);
}
.lg-unterschrift-titel {
  margin: 0;
  font-size: 1.25rem;
}
.lg-unterschrift-text {
  margin: 0;
}
.lg-unterschrift-feld {
  position: relative;
  flex: 0 0 auto;
  height: clamp(9rem, 38vh, 16rem);
  border: 1px dashed var(--ut-component-border-color, #9aa5b1);
  border-radius: .5rem;
  background-color: #fff;
  touch-action: none;   /* Finger zeichnet, statt die Seite zu verschieben */
}
.lg-unterschrift-feld canvas {
  position: relative;
  z-index: 1;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
/* Unterschriftslinie mit Kreuz, wie auf Papier */
.lg-unterschrift-linie {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 22%;
  border-bottom: 1px solid #c7ced6;
  color: #9aa5b1;
  font-size: .875rem;
  line-height: 1.5;
  pointer-events: none;
}
.lg-unterschrift-fehler {
  margin: 0;
  color: var(--ut-palette-danger, #b91c1c);
  font-weight: 600;
}
.lg-unterschrift-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.lg-unterschrift-knoepfe .t-Button {
  margin: 0;
}
.lg-unterschrift-platz {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Startseite Büro (Seite 1): Kacheln mit Kennzahlen, neueste Fotos, System-Karte der Administratoren
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.lg-kachel {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .875rem 1rem;
  border: 1px solid var(--ut-component-border-color, #dfe4ea);
  border-radius: var(--ut-component-border-radius, .5rem);
  background-color: var(--ut-component-background-color, #fff);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
.lg-kachel:hover,
.lg-kachel:focus-visible {
  border-color: var(--ut-palette-primary, #12304a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  text-decoration: none;
}
.lg-kachel-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .875rem;
}
.lg-kachel-zahl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.lg-kachel-info {
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
/* Kachel ohne Link (Übersicht auf Seite 9100) */
.lg-kachel--statisch:hover {
  border-color: var(--ut-component-border-color, #dfe4ea);
  box-shadow: none;
}
.lg-kachel--statisch.lg-kachel--warnung:hover {
  border-color: #f59e0b;
}
/* Warnung nur, wenn die Zahl grösser als 0 ist */
.lg-kachel--warnung {
  border-color: #f59e0b;
  background-color: #fffbeb;
}
.lg-kachel--warnung .lg-kachel-kopf .fa {
  color: #b45309;
}
/* Smartphone: zwei Kacheln pro Zeile, kompakter */
@media (max-width: 640px) {
  .lg-kacheln {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }
  .lg-kachel {
    padding: .625rem .75rem;
  }
  .lg-kachel-zahl {
    font-size: 1.5rem;
  }
}
.lg-fotos-neu {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.lg-foto-kachel {
  width: 6.5rem;
  margin: 0;
}
.lg-foto-kachel .lg-anhang {
  width: 6.5rem;
  height: 6.5rem;
}
.lg-foto-kachel figcaption {
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
}
.lg-foto-kachel figcaption small {
  display: block;
  overflow: hidden;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-system {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lg-system li + li {
  border-top: 1px solid var(--ut-component-border-color, #dfe4ea);
}
.lg-system a,
.lg-system div {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 0;
  color: inherit;
  text-decoration: none;
}
.lg-system a:hover span:not(.fa) {
  text-decoration: underline;
}
.lg-system .fa {
  width: 1.25rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  text-align: center;
}
.lg-system span:not(.fa) {
  flex: 1 1 auto;
}
.lg-system-warnung strong,
.lg-system-warnung .fa {
  color: #b45309;
}

/* ------------------------------------------------------------------------------------------------------------------
 * Fusszeile: Links Datenschutz/Impressum (Region "Rechtliches (Fusszeile)" auf der Global Page) direkt rechts neben
 * der Versionsnummer, gleiche Schrift wie diese.
 * Die Footer-Regionen stecken im APEX-Raster (container/row/col-12, volle Breite) in .t-Footer-content, das vor
 * .t-Footer-apex steht. Das Raster wird mit display: contents aufgelöst, die Region per order hinter die Version
 * gesetzt. Abstand mit margin statt gap, weil die übrigen Footer-Regionen (Statusfarben = nur <style>, Tab-Leiste =
 * fixed bzw. ausgeblendet) ebenfalls Flex-Elemente werden und sonst Lücken erzeugen
 * ------------------------------------------------------------------------------------------------------------------ */
.t-Footer-body:has(.lg-footer-recht) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;                       /* UT setzt hier einen eigenen Abstand (1rem) */
}
.t-Footer-content:has(.lg-footer-recht),
.t-Footer-content:has(.lg-footer-recht) :is(.container, .row, .col) {
  display: contents;
}
.t-Footer-body:has(.lg-footer-recht) .t-Footer-apex {
  order: 1;
}
.lg-footer-recht {
  order: 2;
  margin-inline-start: .75rem;   /* wie der Abstand zwischen Version und "Customize" bei UT (.5rem) plus etwas Luft */
  font-size: var(--ut-footer-apex-font-size, .75rem);
  line-height: var(--ut-footer-apex-line-height, 1.25rem);
}
@media (max-width: 639px) {
  /* UT zentriert die Fusszeile auf dem Smartphone */
  .t-Footer-body:has(.lg-footer-recht) {
    justify-content: center;
  }
}

/* ------------------------------------------------------------------------------------------------------------------
 * Hinweis auf Cookies (js/logenius-hinweis.js): schmale Leiste unten, bis sie mit "verstanden" geschlossen wird.
 * Auf dem Smartphone oberhalb der Tab-Leiste
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-cookiehinweis {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 950;
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  width: min(40rem, calc(100% - 1.5rem));
  padding: .75rem 1rem;
  transform: translateX(-50%);
  border-radius: .75rem;
  background-color: #12304a;
  color: #fff;
  box-shadow: 0 8px 24px rgba(18, 48, 74, .25);
  font-size: .875rem;
  line-height: 1.35;
}
.lg-cookiehinweis-text {
  flex: 1 1 auto;
  margin: 0;
}
.lg-cookiehinweis a {
  color: #fff;
  text-decoration: underline;
}
.lg-cookiehinweis .t-Button {
  flex: 0 0 auto;
}
/* Solange ein modaler Dialog offen ist (jQuery-UI-Overlay), den Hinweis ausblenden - er lag sonst über den Buttons
   des Dialogs (z.B. "löschen" im Auftrag); nach dem Schliessen erscheint er wieder */
body:has(.ui-widget-overlay) .lg-cookiehinweis {
  display: none;
}

@media (max-width: 640px) {
  .t-PageBody:has(.lg-tabbar) .lg-cookiehinweis {
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
}


/* ------------------------------------------------------------------------------------------------------------------
 * Hilfe (Seiten 9800 und 9810): Texte aus Markdown (apex_markdown). Mehrere Themen einer Seite als aufklappbare
 * <details>, Tabellen mit feinen Linien
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-hilfe-einleitung {
  margin-block: 0 var(--ut-region-margin, 1rem);
  font-size: var(--ut-region-font-size, .875rem);
}
.lg-hilfe {
  padding: 0 1rem;
  font-size: .9375rem;
  line-height: 1.5;
}
.lg-hilfe-titel {
  margin: .5rem 0 .75rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.lg-hilfe h3 {
  margin: 1.25rem 0 .375rem;
  font-size: 1rem;
  font-weight: 600;
}
.lg-hilfe p,
.lg-hilfe ul,
.lg-hilfe ol {
  margin: 0 0 .75rem;
}
.lg-hilfe ul,
.lg-hilfe ol {
  padding-inline-start: 1.25rem;
}
.lg-hilfe li + li {
  margin-top: .25rem;
}
.lg-hilfe table {
  width: 100%;
  margin: 0 0 .75rem;
  border-collapse: collapse;
}
.lg-hilfe th,
.lg-hilfe td {
  padding: .375rem .5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  text-align: start;
  vertical-align: top;
}
.lg-hilfe th {
  font-weight: 600;
}
.lg-hilfe-thema {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/* Eigener Pfeil rechts statt des kaum sichtbaren Dreiecks des Browsers: zeigt nach unten (zu) bzw. oben (offen) */
.lg-hilfe-thema > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.lg-hilfe-thema > summary::-webkit-details-marker {
  display: none;
}
.lg-hilfe-thema > summary::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg);
  transition: transform .15s;
}
.lg-hilfe-thema[open] > summary::after {
  transform: translateY(.1rem) rotate(-135deg);
}
.lg-hilfe-thema > summary:hover {
  color: var(--ut-palette-primary, #12304a);
}
.lg-hilfe-thema[open] > summary {
  padding-bottom: .25rem;
}
.lg-hilfe-thema > :last-child {
  margin-bottom: 1rem;
}
.lg-hilfe-leer {
  padding: 1rem;
}

/* ------------------------------------------------------------------------------------------------------------------
 * Benachrichtigungen (Dialog 20010): Fälle als Liste mit Name, Beschreibung und Schalter rechts
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-push-hinweis {
  margin: 0 0 .5rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.lg-push-faelle {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lg-push-fall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.lg-push-fall:last-child {
  border-bottom: 0;
}
.lg-push-fall label {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  cursor: pointer;
}
.lg-push-fall-name {
  font-weight: 600;
}
.lg-push-fall-text {
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
.lg-push-fall .a-Switch {
  position: relative;
  flex: 0 0 auto;
}
/* Das Eingabefeld (unsichtbar) ist sonst nur 20 von 44 px breit: rechts reagierte der Schalter nicht auf die Maus */
.lg-push-fall .a-Switch input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

/* ------------------------------------------------------------------------------------------------------------------
 * Hinweis neue Version (Global Page, Region release-hinweis): "ausblenden" als kleiner Link neben "Was ist neu?"
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-release-ausblenden {
  margin-left: .75rem;
  vertical-align: baseline;
}

/* ------------------------------------------------------------------------------------------------------------------
 * Datenexport (Seite 9700, export_p.liste_html): ein Block pro Export mit Status, Fortschrittsbalken bzw. Downloads
 * ------------------------------------------------------------------------------------------------------------------ */
p.lg-export-text {
  margin: 0 0 .75rem;
}
p.lg-export-text:last-child {
  margin-bottom: 0;
}
.lg-export-liste {
  margin: 0 0 .75rem 1.25rem;
}
.lg-export + .lg-export {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ut-component-border-color, #dfe4ea);
}
.lg-export-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin-bottom: .75rem;
}
.lg-export-titel {
  font-weight: 600;
}
.lg-export-von {
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
.lg-export-status {
  margin-left: auto;
  padding: .125rem .5rem;
  border-radius: .75rem;
  background-color: var(--ut-component-border-color, #dfe4ea);
  font-size: .75rem;
  font-weight: 600;
}
.lg-export--fertig .lg-export-status {
  background-color: #dcfce7;
  color: #166534;
}
.lg-export--fehler .lg-export-status {
  background-color: #fee2e2;
  color: #b91c1c;
}
.lg-export-balken {
  height: .625rem;
  margin-bottom: .5rem;
  border-radius: .3125rem;
  background-color: var(--ut-component-border-color, #dfe4ea);
  overflow: hidden;
}
.lg-export-balken > div {
  height: 100%;
  border-radius: inherit;
  background-color: #f28c28;
  transition: width .5s ease;
}
.lg-export-schritt {
  margin-bottom: .75rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
.lg-export-dateien {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
}
.lg-export-dateien li {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.lg-export-groesse {
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Downloads (Verarbeitungen im Hintergrund, Seite 9820, js/logenius-verarbeitung.js)
 * ------------------------------------------------------------------------------------------------------------------ */
.lg-downloads .t-Button-badge:empty {
  display: none;
}
.lg-downloads-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lg-download {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .75rem;
}
.lg-download + .lg-download {
  border-top: 1px solid var(--ut-component-border-color, #e6e8eb);
}
.lg-download-symbol {
  flex: 0 0 auto;
  width: 1.25rem;
  text-align: center;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.lg-download--fertig .lg-download-symbol {
  color: var(--ut-palette-success, #278701);
}
.lg-download--fehler .lg-download-symbol {
  color: var(--ut-palette-danger, #cb1100);
}
.lg-download-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.lg-download-titel {
  font-weight: 600;
}
.lg-download-info,
.lg-downloads-hinweis {
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .875rem;
}
.lg-downloads-hinweis {
  margin: .75rem 0 0;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Verrechnung (Seiten 4000, 4010, 4110): Status der Verrechnungsperiode (Badge), Aufträge eines Kunden im Monat nach
 * Baustelle, Beträge pro Position, Zwischentotal pro Auftrag, Total der Auswahl
 * (verrechnung_monat_v, verrechnung_p.offen_html / verrechnung_html, js/logenius-verrechnung.js)
 * ------------------------------------------------------------------------------------------------------------------ */
/* Badge-State "vr-<status>" (Seite 4000) -> Klasse t-Badge--vr-<status>; Farben wie die Auftragsstatus */
.t-Badge--vr-offen {
  background-color: #FEF3C7;
  color: #1f2933;
}
.t-Badge--vr-teilweise {
  background-color: #DBEAFE;
  color: #1f2933;
}
.t-Badge--vr-verrechnet {
  background-color: #DCFCE7;
  color: #1f2933;
}
.lg-vr-anleitung {
  margin: 0 0 .75rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.lg-vr {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.lg-vr-baustelle {
  padding: 1rem;
  border: 1px solid var(--ut-component-border-color, #dfe4ea);
  border-radius: var(--ut-component-border-radius, .5rem);
  background-color: var(--ut-component-background-color, #fff);
  box-shadow: var(--ut-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
}
.lg-vr-baustelle-titel {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  font-size: 1.125rem;
}
.lg-vr-baustelle-titel .lg-vr-wahl {
  flex: 1 1 auto;
  min-width: 0;
}
.lg-vr-summe {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.lg-vr-ort {
  margin: .25rem 0 .75rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .875rem;
}
.lg-vr-wahl {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  cursor: pointer;
}
.lg-vr-wahl input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  align-self: center;
  cursor: pointer;
}
.lg-vr-auftrag {
  padding: .75rem 0;
  border-top: 1px solid var(--ut-component-border-color, #dfe4ea);
}
.lg-vr-auftrag--abgewaehlt {
  opacity: .5;
}
.lg-vr-auftrag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  margin-bottom: .5rem;
}
.lg-vr-datum,
.lg-vr-nummer {
  font-weight: 600;
}
.lg-vr-info {
  flex: 1 1 auto;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .875rem;
}
.lg-vr-link {
  flex: 0 0 auto;
}
.lg-vr-positionen {
  width: 100%;
  border-collapse: collapse;
  /* feste Spalten (Nr., Betrag): ein langes Wort ohne Leerzeichen bricht im Text um, statt die Tabelle zu sprengen */
  table-layout: fixed;
}
/* lange Wörter ohne Leerzeichen (Positionstext, Baustelle, Fahrzeug, Zusatzmaterial, Bemerkung) umbrechen */
.lg-vr-baustelle-titel,
.lg-vr-ort,
.lg-vr-info,
.lg-vr-zusatz,
.lg-vr-hinweis {
  min-width: 0;
  overflow-wrap: anywhere;
}
.lg-vr-positionen td {
  padding: .25rem .5rem .25rem 0;
  vertical-align: middle;
}
.lg-vr-nr {
  width: 2rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  text-align: right;
}
.lg-vr-was {
  overflow-wrap: anywhere;
}
.lg-vr-betrag-zelle {
  width: 9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lg-vr-betrag {
  width: 100%;
  padding: .375rem .5rem;
  border: 1px solid var(--ut-field-border-color, #b6bfc8);
  border-radius: var(--ut-field-border-radius, .25rem);
  background-color: var(--ut-field-background-color, #fff);
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lg-vr-betrag:focus {
  outline: 2px solid var(--ut-palette-primary, #12304a);
  outline-offset: 1px;
}
.lg-vr-betrag--fehler {
  border-color: var(--ut-palette-danger, #cb1100);
  background-color: #fdeceb;
}
.lg-vr-betrag--gespeichert {
  border-color: var(--ut-palette-success, #278701);
  transition: border-color .3s;
}
.lg-vr-auftrag-total td {
  padding-top: .375rem;
  border-top: 1px solid var(--ut-component-border-color, #dfe4ea);
  font-weight: 600;
}
/* auf 4010 bündig mit dem Text in den Eingabefeldern (Innenabstand und Rahmen des Felds) */
.lg-vr--bearbeiten .lg-vr-auftrag-total .lg-vr-betrag-zelle {
  padding-right: calc(1rem + 1px);
}
.lg-vr-mwst {
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .875rem;
}
.lg-vr-zusatz {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  margin: .5rem 0 0 2rem;
  font-size: .875rem;
}
.lg-vr-label {
  color: var(--ut-component-text-muted-color, #5b6672);
}
/* Total der Auswahl am Ende der Liste (nicht klebend: die Region scrollt horizontal selbst, «sticky» griff deshalb
   nicht zuverlässig und lag auf dem Smartphone teils über dem letzten Auftrag) */
.lg-vr-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  padding: .75rem 1rem;
  /* dunkelblau wie der Header: auf 4010 liegt das Total ohne Region direkt auf dem grauen Seitenhintergrund */
  border: 1px solid #12304a;
  border-radius: var(--ut-component-border-radius, .5rem);
  background-color: #12304a;
  color: #fff;
  font-size: 1rem;
}
.lg-vr-ohne {
  color: #a35a00;
}
/* auf dem dunklen Total: Orange der App (Kontrast 5.4:1) statt Braun, MWST-Hinweis abgeschwächt weiss */
.lg-vr-total .lg-vr-ohne {
  color: #f28c28;
}
.lg-vr-total .lg-vr-mwst {
  color: rgba(255, 255, 255, .75);
}
.lg-vr-total-betrag {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.lg-vr-hinweis {
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  border-left: 4px solid var(--ut-palette-warning, #f28c28);
  background-color: #fff6ec;
}
.lg-vr-hinweis p {
  margin: 0 0 .25rem;
}
.lg-vr-hinweis ul {
  margin: 0;
  padding-left: 1.25rem;
}
.lg-vr-dialog-kopf {
  margin: 0;
}
@media (max-width: 640px) {
  .lg-vr-baustelle {
    padding: .75rem;
  }
  .lg-vr-total {
    padding: .75rem;
  }
  .lg-vr-betrag-zelle {
    width: 7rem;
  }
}

/* Warteschlange der Fahrer (js/logenius-warteschlange.js, Offline Etappe 0): Hinweis oben auf der Seite, wartende
   Fotos mit Badge "wartet", wartende Unterschrift abgeschwächt */
.lg-ws-hinweis {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-block: 0 var(--ut-region-margin, 1rem);
  padding: .75rem 1rem;
  border: 1px solid #f2c94c;
  border-radius: var(--ut-region-border-radius, .5rem);
  background-color: #fff8e1;
  color: #5c4400;
  font-size: var(--ut-region-font-size, .875rem);
}
.lg-ws-hinweis > .t-Icon {
  margin-top: .125rem;
  font-size: 1.25rem;
}
.lg-ws-hinweis--fehler {
  border-color: #e5a4a4;
  background-color: #fdecec;
  color: #7a1f1f;
}
.lg-ws-hinweis-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
}
.lg-ws-hinweis-text p,
.lg-ws-liste {
  margin: 0;
}
.lg-ws-liste {
  padding-left: 1.125rem;
}
.lg-ws-hinweis .t-Button {
  margin: 0;
}
.lg-ws-foto img {
  opacity: .75;
}
.lg-ws-foto .t-Badge {
  background-color: #f2c94c;
  color: #3d2e00;
}
.lg-ws-unterschrift img {
  opacity: .75;
}
/* Positionen (Etappe 2): Formular für «Was» in der Karte, wartende Positionen mit Badge, gelöschte durchgestrichen;
   der Button "unterschreiben" eines Auftrags ohne Positionen erscheint erst mit einer wartenden Position */
.lg-pos-formular {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem;
  border-radius: .5rem;
  background-color: var(--ut-component-highlight-background-color, #f2f6fa);
}
.lg-pos-eingabe {
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--ut-field-border-color, #c7ced6);
  border-radius: .375rem;
  font-size: 1rem;   /* iOS zoomt bei kleinerer Schrift beim Tippen hinein */
}
.lg-pos .lg-ws-badge {
  flex: 0 0 auto;
  background-color: #f2c94c;
  color: #3d2e00;
}
.lg-ws-pos--geloescht .lg-pos-was {
  text-decoration: line-through;
  opacity: .6;
}
.lg-unterschriften:not(.lg-unterschriften--pos) .lg-unterschrift-ohne-pos {
  display: none;
}

/* Offline-Ansicht der Fahrer (js/logenius-offline.js, Offline Etappe 1): eigene Seite ohne APEX-Seitenvorlage, aus
   dem Cache des Service Workers; Karten und Abstände wie in der App */
body.lg-off {
  margin: 0;
  background-color: #eef1f4;
  font-family: var(--a-base-font-family, system-ui, -apple-system, sans-serif);
  font-size: .875rem;
  color: #1f2933;
}
.lg-off-seite {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 0 2rem;
}
.lg-off-seite .t-Body-contentInner {
  padding: 1rem;
}
.lg-off-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background-color: #12304a;
  color: #fff;
}
.lg-off-logo {
  font-size: 1.25rem;
  font-weight: 700;
}
.lg-off-badge {
  padding: .125rem .625rem;
  border-radius: 1rem;
  background-color: #f28c00;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
}
.lg-off-status {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .75rem 1rem;
  background-color: #fff8e1;
  color: #5c4400;
}
.lg-off-status p {
  flex: 1 1 14rem;
  margin: 0;
}
.lg-off-meldung {
  margin: 0;
  padding: .75rem 1rem;
  background-color: #1e7e34;
  color: #fff;
  font-weight: 600;
}
.lg-off-titel {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
}
.lg-off-untertitel {
  margin: 1.25rem 0 .5rem;
  font-size: 1rem;
}
.lg-off-karte {
  display: block;
  margin-bottom: .75rem;
  padding: 1rem;
  border: 1px solid #dde3ea;
  border-radius: .5rem;
  background-color: #fff;
  color: inherit;
  text-decoration: none;
}
.lg-off-karte p {
  margin: 0 0 .5rem;
}
.lg-off-auftrag {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.lg-off-zeile1 {
  font-weight: 600;
}
.lg-off-zeile2,
.lg-off-klein {
  color: #5b6672;
  font-size: .8125rem;
}
.lg-off-zurueck {
  display: inline-block;
  margin-bottom: .75rem;
  color: #12304a;
  text-decoration: none;
}
.lg-off-angaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem .75rem;
  margin: .75rem 0 0;
}
.lg-off-angaben dt {
  color: #5b6672;
}
.lg-off-angaben dd {
  margin: 0;
  white-space: pre-line;
}
.lg-off .lg-pos-kopf {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}
.lg-off .lg-pos-aktionen {
  margin-top: .75rem;
}
/* "Position hinzufügen" unter der Liste: Abstand zur letzten (auch einer neu erfassten) Position */
.lg-off #positionen {
  margin-bottom: 1rem;
}
.lg-off .lg-unterschriften {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}