/* 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;
  }
}

/* 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, Karte mit nummerierten Markierungen
 * (js/logenius-karte.js) und Legende
 * ------------------------------------------------------------------------------------------------------------------ */
.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;
}

/* Karte: nummerierte Markierungen (js/logenius-karte.js) */
.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;
}
.lg-karte-von {
  background-color: #fff;
  color: #12304a;
}
/* Legende gehört zur Karte (näher dran); darunter derselbe Abstand wie zwischen den übrigen Regionen */
.lg-karte-legende {
  margin: -.5rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  align-items: center;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
.lg-karte-legende .lg-karte-nr {
  display: inline-flex;
  min-width: 1rem;
  height: 1rem;
  margin-right: .35rem;
  padding: 0;
  box-shadow: none;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * 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;
}
/* Abholort -> Zielort: gestrichelte Linie vom Pointer bis zur Zielflagge der nächsten Zeile (Mitte der 1rem breiten
   Symbolspalte; reicht über den Zeilenabstand von .5rem hinunter) */
.lg-pos-ort--von {
  position: relative;
}
.lg-pos-ort--von::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  bottom: -.6rem;
  left: calc(.5rem - 1px);
  border-left: 2px dashed var(--ut-component-text-muted-color, #5b6672);
  opacity: .6;
}
.lg-pos-ort small {
  display: block;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}
.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 9300) */
.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;
}
.lg-speicher-hinweis {
  margin: 0;
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .8125rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Unterschrift des Auftraggebers (Seiten 1200 und 1100, js/logenius-unterschrift.js): Anzeige und Unterschriftsfeld
 * ------------------------------------------------------------------------------------------------------------------ */
.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;
}
/* 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;
}