:root {
  /* Schriftgrößen & BildschirmBreiten in px. Größen müssen aber dimensionslos definiert bleiben, wegen Punktoperationen in CSS! */
  --min-schriftgroesse:                   10;
  --max-schriftgroesse:                   15;
  --bevorzugte-schriftgroesse:            1.1vw;
  --der-weisse-rand:                      0.3rem;
  --width-threshold-min:                  500;
  --width-threshold-max:                  1200;
  --header-hoehe:                         3rem;
  --schriftgroesse-reduzierung:           2;
  --min-schriftgroesse-reduziert:         calc(var(--min-schriftgroesse) - var(--schriftgroesse-reduzierung));
  --max-schriftgroesse-reduziert:         calc(var(--max-schriftgroesse) - var(--schriftgroesse-reduzierung));
  --auftragsliste-punkt-abstand:          1.2rem;
  --auftragsliste-container-einrueckung:  .8rem;
  /* --schriftgroesse-calc-steigung:   calc(
    calc(var(--max-schriftgroesse-reduziert) - var(--min-schriftgroesse-reduziert)) / calc(var(--width-threshold-max) - var(--width-threshold-min))
  );
  --schriftgroesse-calc-y-achsenabschnitt:  calc(
    var(--min-schriftgroesse-reduziert) - var(--schriftgroesse-calc-steigung) * var(--width-threshold-min)
  );
  --schriftgroesse-calc:        calc(
    var(--schriftgroesse-calc-steigung) * 100vw + var(--schriftgroesse-calc-y-achsenabschnitt)
  ); */
  --infobox-gesamt-breite:      30rem;
  --infobox-spalte1-breite:     calc(var(--infobox-gesamt-breite) / 4);
  --farbe-nachtblau-tansparenz-leicht:  rgba(28, 33, 63, .15);
  --farbe-Midnight:             rgb( 18,  29,  64);
  --farbe-Roast:                rgb(255, 188, 141);
  --farbe-Roast-dunkel1:        rgb(233, 152, 94);
  --farbe-Roast-dunkel2:        rgb(223, 125,  56);
  --farbe-Roast-dunkel3:        rgb(202, 107, 40);
  --farbe-Cappuccino:           rgb(217, 198, 181);
  --farbe-Cappuccino-dunkel1:   rgb(133, 121, 111);
  --farbe-Silver:               rgb(234, 234, 234);
  --farbe-apricot:              rgb(248, 186, 142);
  --farbe-apricot-dunkel1:      rgb(186, 101,  41);
  --farbe-apricot-dunkel2:      rgb(165,  83,  24);
  --farbe-apricot-hell1:        rgb(252, 208, 177);
  --farbe-apricot-hell2:        rgb(253, 215, 200);
  --farbe-apricot-hell3:        rgb(255, 233, 219);
  --farbe-nachtblau:            rgb( 28,  33,  63);
  --farbe-nachtblau-hell1:      rgb( 42,  50,  95);
  --farbe-nachtblau-hell2:      rgb( 70,  83, 156);
  --farbe-nachtblau-hell3:      rgb(189, 197, 241);
  --farbe-nachtblau-hell4:      rgb(223, 227, 247);
  --farbe-grau:                 rgb( 88,  88,  88);
  --farbe-grau-hell1:           rgb(126, 126, 126);
  --farbe-grau-hell2:           rgb(204, 204, 204);
  --farbe-gold:                 rgb(255, 205,   4);
  --farbe-gold-hell1:           rgb(253, 223, 102);
  --farbe-gold-hell2:           rgb(253, 238, 178);
  --farbe-gruengelb:            rgb(173, 255,  47);
  --farbe-gruengelb-hell1:      rgb(213, 255, 149);
  --farbe-gruen:                rgb(  5, 158,   0);
  --farbe-gruen-hell1:          rgb(  9, 255,   0);
  --farbe-gruen-hell2:          rgb(201, 250, 199);
  --farbe-rot:                  rgb(192,   0,   0);
  --farbe-rot-hell1:            rgb(255, 112, 112);
  --farbe-rot-hell2:            rgb(255, 173, 173);
  --farbe-status-Anfahrt:       rgb(253, 238, 178);
  --farbe-status-Ankunft:       rgb(201, 250, 199);
  --farbe-status-VT-Bestaetigt: rgb(  0, 200, 255);
  --farbe-status-VT-Anfahrt:    rgb(255, 255,   0);

}

html, body {
  height:           100%;
  background-color: var(--farbe-nachtblau);
  font-size:        clamp(calc(var(--min-schriftgroesse) * 1px), var(--bevorzugte-schriftgroesse), calc(var(--max-schriftgroesse) * 1px));
}

body {
  margin:           0;
  font-family:      "HCo Gotham", sans-serif;
}

.techniker mat-card {
  padding:          0.5rem;                 /* → beeinflusst weissen Rand */
  flex:             1 1 auto;
  display:          flex;
  flex-direction:   column;

}

.techniker-ohne-full-height mat-card,
.techniker-ohne-full-height mat-card-content {
  min-height:   unset !important;
  height:       auto  !important;
}

/* card füllt Resthöhe aus (außer auf rechnungszeilen) */
.techniker:not(.techniker-ohne-full-height) mat-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* card-content ebenfalls flexibel */
.techniker:not(.techniker-ohne-full-height) mat-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mat-mdc-card-content {
  padding:    var(--der-weisse-rand) !important;    /* weisser Rand */
}

.no-linkstyle {
  text-decoration:  none;           /* Unterstreichung entfernen */
  color:            inherit;        /* Textfarbe der Umgebung beibehalten */
  cursor:           pointer;        /* Mauszeiger als Pointer darstellen, um anklickbarkeit anzuzeigen */
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Hauptseite Styles */

.header {
  color:          white;
  height:           var(--header-hoehe);
  width:            95%;
  margin:           0 auto;
  display:          flex;
  justify-content:  space-between;
}

.center-content {
  /* padding-top: 10rem; */
  width:            75%;
  margin:           0 auto;
  min-width:        60rem;
  padding:          1.5rem;

  @media only screen and (max-width: 75rem) {
    width: 95%;
  }
}

.hauptseite-logo {
  padding:        .4rem .4rem .4rem 0;
  height:         2rem;
  display:        block;  /* eliminiert die ungewollte 'Baseline-Ausrichtung' von img */
}

.hauptseite-logo-subtext {
  font-family:    'HCo Gotham';
  padding-left:   6.2rem;
}

.center {
  width:          50%;
  margin:         0 auto;
}

.header-element {
  align-self:     center;
}

.dark {
  background:     black;
}

.hauptseite-button {
  background:         var(--farbe-grau);
  color:              white;
  border:             none;
  border-radius:      2rem;
  cursor:             pointer;
  font-family:        Arial,Helvetica,sans-serif;
  font-size:          .8rem;
  margin:             .0rem .25rem 0 0;
  padding:            .8rem 1.5rem;
  font-weight:        700;
  line-height:        .5rem;
}

.hauptseite-button-transparent {
  background:         none;
  color:              white;
  border:             none;
  border-radius:      2rem;
  cursor:             pointer;
  font-family:        Arial,Helvetica,sans-serif;
  font-size:          .8rem;
  margin:             .0rem .25rem 0 0;
  padding:            .8rem 1.5rem;
  font-weight:        700;
  line-height:        .5rem;
}

.hauptseite-button:hover, .hauptseite-button-transparent:hover {
  background:       rgba(255, 255, 255, .15);
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Home Style */

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 2fr);
  gap: .8rem;
}

.grid-container-big {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  @media (max-width: 65rem) {
    grid-template-columns: repeat(1, 1fr);
  }
  gap:                var(--der-weisse-rand);
}

.menuitem-button {
  width:              100%;
  height:             5rem;
  color:              white;
  background:         var(--farbe-nachtblau);
  cursor:             pointer;
  border:             none;
  border-radius:      1rem;
  font-family:        Arial,Helvetica,sans-serif;
  font-size:          1.5rem;
  font-weight:        500;
  line-height:        4.9rem;
  text-align:         center;
}

.menuitem-button:hover {
  background: var(--farbe-nachtblau-hell1);
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Login Style */

.login-actionbuttons {
  display: grid;
  grid-template-columns:
      1fr 1fr
      5rem auto 10rem 1fr;
}

.login-actionbutton {
  padding: 0.5rem;
}

.login-center-content {
  margin: 0 auto;
  width: 15rem;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Komponenten-übergreifende Styles */

.komponenten-button {
  background: var(--farbe-grau);
  color: white;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  font-family: Arial,Helvetica,sans-serif;
  font-size: .8rem;
  margin: .50rem .25rem 0 0;
  padding: .8rem 1.5rem;
  font-weight: 700;
  line-height: 1rem;
}

.komponenten-button:hover {
  background: var(--farbe-grau-hell1);
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------- Techniker SP Styles ---------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Styles der gesamten Techniker Komponente */

.techniker {
  width:          100%;
  margin:         0;
  padding:        .0rem .0rem;
}

.techniker h1, .techniker h2, .techniker h3, .techniker h4, .techniker h5, .techniker h6 {
  color:        rgb(0, 0, 0);
  line-height:    1.3rem;
  padding:        0rem;
}

.techniker h1 {
  font-size:      1.6rem;
  font-weight:    bold;
  margin:         0rem 0rem 1rem;
  min-height:     1rem;
}

.techniker h2 {
  font-size:      1.4rem;
  font-weight:    bold;
  margin:         1.85rem 0rem 1rem;
}

.techniker h2.ohne-margin {
  margin:         0rem;
}

.techniker h3 {
  font-size:      1.3rem;
  font-weight:    bold;
  margin:         0.9rem 0rem;
}

.techniker h4 {
  font-size:      1.1rem;
  font-weight:    550;
  margin:         0rem 0rem;
  line-height:    1.5rem;
}

.techniker h5 {
  font-size:      1.1rem;
  font-weight:    550;
  font-family:    "Arial", sans-serif;
  margin:         1.85rem 0rem 1rem;
}

.techniker h6 {
  font-size:      1rem;
  font-weight:    550;
  margin:         0rem 0rem;
}

.techniker button, .techniker a.button {
  background-color:   var(--farbe-apricot);
  color:            rgba(0,0,0);
  /* box-sizing:         inherit; */
  box-sizing:         border-box;
  overflow:           visible;
  cursor:             pointer;
  display:            inline-block;
  min-height:         1rem;
  border:             none;
  /* border: 0.15rem solid rgba(0, 0, 0, 0.15); */
  vertical-align:     initial;
  font-family:        Arial,Helvetica,sans-serif;
  /* margin:             .50rem .25rem 0 0; */
  padding:            .8rem 1.5rem;
  text-transform:     none;
  text-shadow:        none;
  font-weight:        700;
  line-height:        1rem;
  font-style:         normal;
  text-align:         center;
  text-decoration:    none;
  border-radius:      .3rem;
  user-select:        none;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
  -webkit-tap-highlight-color: transparent;
  font-size:          .8rem;
  /* box-shadow: inset 0 0 0 0.1rem transparent,inset 0 0 0 0 rgba(34,36,38,.15); */
}

.techniker button:hover, .techniker a.button:hover {
  background-color: var(--farbe-apricot-hell1);
}

.techniker button:disabled {
  cursor:   default;
  color:              var(--farbe-grau);
  background-color:   var(--farbe-apricot-hell1);
  &:hover {
    background-color: var(--farbe-apricot-hell1);
  }
}

.techniker .unsichtbar {
  display: none;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Navigationsbar Style */

.techniker nav {
  display:              flex;
  flex-wrap:            wrap;
  color:              rgb(255, 255, 255);
  background:           var(--farbe-nachtblau);
  line-height:          1rem;
  box-sizing:           inherit;
  margin:               .3rem 0rem;
  font-weight:          normal;
  border:               0.35rem solid rgba(0, 0, 0, 0.15);
  border-radius:        0.5rem;
  /* box-shadow: 0rem 0.1rem 0.2rem 0rem rgba(34, 36, 38, 0.15); */
  min-height:           1rem;
  font-size:            1rem;
  margin-top:           0rem;
}

.techniker nav .nav-tab {
  display:              flex;
  color:              rgb(255, 255, 255);
  --icon-text-color:  black;
  background:           none;
  font-size:            1rem;
  box-sizing:           inherit;
  position:             relative;
  vertical-align:       middle;
  line-height:          1;
  text-decoration:      none;
  flex:                 0 0 auto;
  user-select:          none;
  padding:              0.1rem 1.1rem;
  text-transform:       none;
  font-weight:          normal;
  align-items:          center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
}

.techniker nav .nav-tab:hover {
  color:            rgb(0,0,0);
  background:         var(--farbe-apricot);
  cursor:             pointer;
  --icon-text-color: white;
}

.techniker nav .nav-tab.active-tab {
  color:              var(--farbe-apricot);
  background:         none;
  font-weight:        normal;
  box-shadow:         none;
  --icon-text-color:  black;
}

/* .techniker nav span.nav-tab.techniker-setting-tab img.app-einstellungen-icon {
  color:              rgb(255, 255, 255);
} */

/* gesamter Platz zwischen letztem linksbündigem und dem rechtsbündigem Tab */
.techniker nav .flex-spacer {
  flex:               1;
}

/* zusätzliche Absicherung, dass dar rechtsbündige Tab ganz rechts bleibt */
.techniker nav .app-info-tab {
  margin-left:        auto;
}

/* erforderlich für Navigationsleiste des DevHelpers */
.techniker nav a {
  display:              flex;
  color:              rgb(255, 255, 255);
  background:           none;
  font-size:            1rem;
  box-sizing:           inherit;
  position:             relative;
  vertical-align:       middle;
  line-height:          1;
  text-decoration:      none;
  flex:                 0 0 auto;
  user-select:          none;
  padding:              0.1rem 1.1rem;
  text-transform:       none;
  font-weight:          normal;
  align-items:          center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
}

/* erforderlich für Navigationsleiste des DevHelpers */
.techniker nav a:hover {
  color:            rgb(0,0,0);
  background:         var(--farbe-apricot);
  cursor:             pointer;
}

/* erforderlich für Navigationsleiste des DevHelpers */
.techniker nav a.active-tab {
  color:              var(--farbe-apricot);
  background:         none;
  font-weight:        normal;
  box-shadow:         none;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----- AppInfo-Tab ----- */
.techniker-app-info-icon {
  width:              1.5rem;
  height:             1.5rem;
}

.techniker-version-clickable {
  cursor: pointer;
}

/* ----- Changelog ----- */
.techniker-changelog-overlay {
  width:              90vw;
  height:             90vh;
  max-width:          95vw;
  max-height:         95vh;
  background-color:   white;
  color:              black;

  overflow-y:         auto;
  padding:            0;
  margin:             0;
  border-radius:      0.4rem;
  box-shadow:         1.5rem 1.5rem 1.5rem rgba(0,0,0,0.9);
}

.techniker-changelog-header {
  background-color:   var(--farbe-Cappuccino);
  color:              var(--farbe-Midnight);
  display:            flex;
  justify-content:    space-between;
  align-items:        center;
  padding:            0.75rem 1rem;
  cursor:             move;
  user-select:        none;
}

.techniker-changelog-header h3 {
  color:              var(--farbe-Midnight);
}

.techniker-changelog-content {
  padding:            1rem;
}

.techniker-changelog-eintrag {
  margin-bottom:      2rem;
}

.techniker-changelog-eintrag strong {
  color:              var(--farbe-Midnight);
  display:            inline;
  margin-bottom:      0rem;
  padding-left:       1rem;
}

.techniker-changelog-eintrag ul {
  margin-top:         0rem;
  margin-bottom:      0rem;
}

.techniker-changelog-eintrag ul.techniker-block-eintrag {
  margin-bottom:      .8rem;
}

.techniker-changelog-eintrag ul li ul.mehr-eingerueckt li {
  margin-left:        .5rem;
  margin-top:         0rem;
  margin-bottom:      0rem;
}

.techniker-changelog-eintrag ul li ul.loesung-unterpunkt-mehr-eingerueckt li {
  margin-left:        1.8rem;
  margin-top:         0rem;
  margin-bottom:      0rem;
}

.techniker-changelog-eintrag ul .techniker-known-issues-listitem {
  margin-block:       .8rem;
}

.techniker-changelog-eintrag ul .techniker-known-issues-listitem .problem-high-prio {
  background-color:   rgb(240, 255, 184);
  font-weight:        500;
}

.techniker-changelog-eintrag ul .techniker-known-issues-listitem .problem-moderate-prio {
  background-color:   rgb(246, 255, 213);
}

.techniker-eintrag-toggle {
  cursor:             pointer;
  user-select:        none;
  display:            inline-block;
}

.techniker-eintrag-toggle .techniker-toggle-icon {
  margin-left:        0.5rem;
  font-weight:        normal;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----- AppSetting-Tab ----- */
.app-einstellungen-icon {
  width:              1.5rem;
  height:             1.5rem;
}

.app-einstellungen-settings-title {
  margin: 1rem 0;
  font-size: 1.5rem;
}

.spracheinstellungen h2 {
  margin-bottom: 0.5rem;
}

.sprachliste {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sprachliste button {
  display: flex;
  align-items: center;
  border: 2px solid #ccc;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: 0.2s all ease-in-out;
}

.sprachliste button.aktiv {
  border-color: #007acc;
  background: #e6f2ff;
}

.sprachliste .flagge {
  width: 24px;
  height: 16px;
  margin-right: 0.5rem;
}


/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Auftrags-Tab Style */

.techniker .auftrags-tab-spalte-1 {
  float:              left;
  width:              var(--infobox-gesamt-breite);
  position:           sticky;
  top:                0;
}

.techniker .auftrags-tab-spalte-2 {
  margin-left:        var(--infobox-gesamt-breite);
}

/* Auftrags-Liste */
.techniker .auftrags-liste {
  padding-left:       var(--auftragsliste-punkt-abstand);
}

.techniker .auftrags-liste .list-item {
  border-bottom:      1px solid var(--farbe-nachtblau-tansparenz-leicht);
  margin-bottom:      1rem;
}

.techniker .auftrags-liste .anfahrt .list-item {
  background-color:   var(--farbe-gold-hell2);
}

.techniker .auftrags-liste .ankunft .list-item {
  background-color:   var(--farbe-gruen-hell2);
}

.techniker .auftrags-liste a:hover {
  color:              var(--farbe-nachtblau);
}

.techniker .auftrags-liste .list-item .link-wrapper {
  text-decoration:    underline;
  cursor:             pointer;
}

.techniker .auftrags-liste .list-item .link-wrapper.clicked {
  color:              var(--farbe-Roast-dunkel1);
}

.techniker .auftrags-liste .list-item .link-wrapper.unclicked {
  color:              var(--farbe-Roast-dunkel3);
}

.techniker .auftrags-liste .list-item .link-wrapper:focus {
  text-decoration:    underline;
  cursor:             pointer;
}

.techniker .auftrags-liste .link-wrapper .auftrags-header  {
  display:            flex;
  gap:                .5rem;
  align-items:        center;
  white-space:        nowrap;
  overflow:           hidden;
}

.techniker .auftrags-liste .ext-id {
  font-weight:        bold;
  flex-shrink:        0;
}

.techniker .auftrags-liste .name1 {
  font-weight:        500;
  color:              black;
  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;
  min-width:          0;
}

.techniker a.clicked {
  color:              var(--farbe-Cappuccino-dunkel1);
}

.techniker a.unclicked {
  color:              var(--farbe-Roast-dunkel2);
}

.techniker .auftrags-liste li.aktiv::before {
  content:            "•";
  color:              var(--farbe-nachtblau);
  font-size:          1.5rem;
  line-height:        1;
  margin-right:       0.5rem;
  display:            inline-block;
  width:              var(--auftragsliste-punkt-abstand);
  text-align:         center;
  position:           absolute;
  left:               calc(-1 * var(--auftragsliste-punkt-abstand));    /* hängt von Padding ab */
  top:                0.1rem;
}

.techniker .auftrags-liste li {
  list-style-type:    none;
  position:           relative; /* notwendig für ::before */
}

.techniker .auftrags-tab-button {
  margin:             0 0 0 .5rem;
}

/* ----- Infobox ----- */

.techniker .infobox-spalte-1 {
  float:              left;
  width:              var(--infobox-spalte1-breite);
}

.techniker .infobox-spalte-2 {
  margin-left:        var(--infobox-spalte1-breite);
}

.infobox-datum-zaehler-container {
  display:            flex;
  justify-content:    space-between;    /* Gleichmäßige Verteilung */
  text-align:         left;
}

.infobox-datum-zaehler-spalte {
  flex:               1;      /* Jeder nimmt gleich viel Platz ein */
  min-width:          0;      /* Verhindert Überlaufprobleme */
}

.infobox {
  background-color:   var(--farbe-nachtblau-hell3);
  padding:            .3rem .6rem;
  border:             none;
  border-radius:      .6rem;
}

.infobox h5 {
  background-color:   #ffffff;
  font-size:          1.1rem;
  font-weight:        550;
  font-family:        "Arial", sans-serif;
  margin:             0rem;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------ AuftragsErfassungs - Style ------------------------------------------------------ */

/* ----- links- und rechts-bündiger Content ----- */

.links-rechts-buendig {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  width:            100%;
}

/* ----- Eingabe CallAgent - Style ----- */

.text-button-zeile {
  display:          flex;
  align-items:      baseline;
}

.text-button-zeile h3 {
  margin:           0;
  margin-right:     1rem;
}

.text-button-zeile span {
  margin:           0;
  margin-right:     2rem;
}

/* ----- AuftragsErfassung-Problem-Lösungs - Tabelle ----- */

.problem-loesung-table {
  width:              100%;
  border-collapse:    collapse;
  margin-top:         2rem;
  table-layout:       auto;
  overflow-x:         auto;
  display:            block;
}

.problem-loesung-table th {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .5rem;
  text-align:         center;
  box-sizing:         border-box;
  white-space:        nowrap;
  background-color:   whitesmoke;
}

.problem-loesung-table td {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .5rem;
  text-align:         center;
  box-sizing:         border-box;
  white-space:        nowrap;
}

.problem-loesung-table tr:hover {
  background-color:   white;
  font-weight:        normal;
}

/* ----- WasserZählerStände - Style ----- */

.zaehler-table {
  border-collapse:  collapse;
  border:           none;
  table-layout:     auto;
}

.zaehler-label {
  text-align:       right;
  white-space:      nowrap;
}

.zaehler-input {
  box-sizing:       border-box;
  padding-right:    3rem;
}

.zaehler-input input {
  width:            4.5rem;
  padding:          .2rem;
  text-align:       right;
}

input.invalides-feld-mit-rotem-rahmen {
  resize:           none;
  background-color: red;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------- RechnungszeilenErfassungs - Style -------------------------------------------------- */

/* ----- Rechnungszeilen → Abbruchgrund-Select und Buttons ----- */
.techniker .buttons-und-abbruchgrund-zeile{
  display:            flex;
  justify-content:    space-between;
  align-items:        center;
  margin-top:         1rem;
  margin-bottom:      1rem;
  flex-wrap:          wrap;
  gap:                1rem;
}

.techniker .abbruchgrund-container {
  flex:               1;
  display:            flex;
  align-items:        center;
  min-width:          15rem;
}

.techniker .abbruchgrund-label{
  padding-left:       0rem;
}

.techniker .button-container {
  display:            flex;
  gap:                0.5rem;
  justify-content:    flex-end;
  flex-wrap:          wrap;
}

/* ----- Rechnungszeilen-Erfassungs - Tabelle ----- */
.rechnungszeilen-table{
  width:              100%;
  border-collapse:    collapse;
  table-layout:       auto;
  margin-top:         1rem;
  color:              black;
}

/* .rechnungszeilen-table th:nth-child(1)  { width:  4.2rem;                       max-width: 6rem;    }
.rechnungszeilen-table th:nth-child(2)  { width:  4.7rem;                       max-width: 6rem;    }
.rechnungszeilen-table th:nth-child(3)  { width:   40%;                         max-width: 60%;     }
.rechnungszeilen-table th:nth-child(4)  { width:  2.8rem;     min-width: 2.5rem;    max-width: 4rem;  }
.rechnungszeilen-table th:nth-child(5)  { width:  2.8rem;     min-width: 2.5rem;    max-width: 4rem;  }
.rechnungszeilen-table th:nth-child(6)  { width:  1.8rem;                       max-width: 2.2rem;  }
.rechnungszeilen-table th:nth-child(7)  { width:  3rem;                                             }
.rechnungszeilen-table th:nth-child(8)  { width:  3.5rem;                                           }
.rechnungszeilen-table th:nth-child(9)  { width:  3.5rem;                                             }
.rechnungszeilen-table th:nth-child(10) { width:  2.5rem;                                             } */

.rechnungszeilen-table th:nth-child(3)  { width:   100%;}
.rechnungszeilen-table th:nth-child(6)  { min-width: 3.5rem;  }

.rechnungszeilen-table th {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .1rem .2rem;
  text-align:         left;
  box-sizing:         border-box;
  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;
  background-color:   whitesmoke;
  height:             2.3rem;
}

.rechnungszeilen-table td {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .05rem .2rem;
  text-align:         left;
  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;
  height:             1.8rem;
}

.rechnungszeilen-table td.techniker-yellow-spalte {
  /* border-color:       var(--farbe-gold); */
  background-color:   var(--farbe-gold-hell2);
  /* background-color:   var(--farbe-cappuccino); */
}

.rechnungszeilen-table tr {
  transition:         background-color 0.4s ease;
  background-color:   white;
}

.rechnungszeilen-table tr:hover {
  background-color:   var(--farbe-apricot-hell1);
  font-weight:        500;
}

.rechnungszeilen-table tr:hover .rechnungszeilen-table-button-zelle {
  background-color:   rgb(255, 255, 255);
  font-weight:        500;
}

.rechnungszeilen-table input[type="text"] {
  width:              100%;
  box-sizing:         border-box;
  padding:            .3rem;
  border:             none;
  background-color:   rgba(255, 255, 255, 0);
}

.rechnungszeilen-table input[type="text"]:hover {
  background-color:   rgb(255, 255, 255);
}

.rechnungszeilen-table select {
  width:              100%;
  box-sizing:         border-box;
  padding:            .3rem;
  border:             none;
  background-color:   rgba(255, 255, 255, 0);
}

.rechnungszeilen-table select:hover {
  background-color:   rgb(255, 255, 255);
}

/* ----- Rechnungs-Zeilen - Buttons ----- */

.techniker .rechnungszeilen-button.green {
  background-color:   var(--farbe-gruen-hell1);
}

.techniker .rechnungszeilen-button.red {
  background-color:   rgb(255, 255, 255);
  color:              rgb(197, 0, 0);
  border:             0.2rem solid rgb(197, 0, 0);
  font-size:          1.5rem;
  padding:            .15rem .1rem;
  border-radius:      .2rem;
  min-height:         .5rem;
}

.techniker .rechnungszeilen-button.red:hover {
  background-color:   rgb(223, 255, 231);
  color:              rgb(255, 0, 0);
  border:             0.2rem solid rgb(197, 0, 0);
}

.techniker .rechnungszeilen-button.blue {
  background-color:   rgb(255, 255, 255);
  color:              rgb(  0,   0, 197);
  border:             0.2rem solid rgb(  0,   0, 197);
  font-size:          1.5rem;
  padding:            .15rem 1rem;
  border-radius:      .2rem;
  min-height:         .5rem;
}

.techniker .rechnungszeilen-button.blue:hover {
  background-color:   rgb(223, 238, 255);
  color:              rgb(  0,   0, 255);
  border:             0.2rem solid rgb(  0,   0, 255);
}

.techniker .rechnungszeilen-button.emoji-button.blue {
  padding:            .15rem 0rem;
  font-size:          1.4rem;
}

/* .emoji-symbol {
  display: inline-block;
  padding: 0.1rem 0.1rem;
  font-size: 1.2rem;
  line-height: 1;
  border: 0.2rem solid rgb(0, 0, 197);
  border-radius: 0.2rem;
  background-color: white;
  color: unset;
  transform: translateY(0.1rem);
} */

.svg-icon {
  width:    1.7rem;
  height:   1.7rem;
  display: inline-block;
  vertical-align: middle;
}

/* ----- Mengen - Spalte ----- */

.mengen-zelle {
  white-space:        nowrap;               /* Verhindert Zeilenumbrüche */
}

.mengen-container {
  display:            flex;
  align-items:        center;
  gap:                .1rem;                /* Abstand zwischen Input und Einheit */
}

.mengen-input {
  width:              3rem;                 /* Reduziert die Breite des Eingabefeldes */
  min-width:          3rem;
  max-width:          4rem;
  text-align:         right;                /* Optional: Zahleneingabe rechtsbündig */
}

.mengen-einheit {
  width:              .2rem;
  min-width:          .2rem;
  max-width:          2rem;
  font-size:          0.85rem;
  color:            #6b6b6b; /* Optional: Farbe leicht abschwächen */
}

/* ----- Preis- & Summe-Spalte ----- */
.rechnungszeilen-table .rechnungszeilen-preis-zelle {
  text-align:         right;
  padding-right:      .8rem;
}

.fixpreis-input {
  width:              5rem;                 /* Reduziert die Breite des Eingabefeldes */
  min-width:          3rem;
  max-width:          5rem;
  text-align:         right;                /* Optional: Zahleneingabe rechtsbündig */
}

/* ----- Rabatt-Spalte ----- */
.rechnungszeilen-table .rechnungszeilen-rabatt-zelle {
  text-align:         right;
  white-space:        pre;
  padding-right:      .8rem;
}

.rechnungszeilen-table .rechnungszeilen-rabatt-zelle .techniker-rechnungszeilen-rabatt-zelle-input {
  text-align:         right;
  font-size:          inherit;
  font-family:        inherit;
  font-weight:        inherit;
  line-height:        inherit;
  padding:            0 .3rem 0 0;
  margin:             0;
  background:         none;
  border:             none;
  outline:            none;
  width:              100%;
  box-sizing:         border-box;
}

/* ----- Artikel-Such-Tabelle in Rechnungszeilen / ArtikelSearchComponent ----- */
/* Schriftgröße mit linearem Übergangsbereich */
.techniker-such-ergebnis-tabelle {
  width:              auto;
  border-collapse:    collapse;
  table-layout:       auto;

  /* font-size:          clamp(
    var(--min-schriftgroesse-reduziert),
    1.3vw,
    var(--max-schriftgroesse-reduziert)
  ); */

  font-size:          clamp(
    calc(var(--min-schriftgroesse-reduziert) * 1px),
    calc((
    (var(--min-schriftgroesse-reduziert) / 100) +
    (var(--max-schriftgroesse-reduziert) - var(--min-schriftgroesse-reduziert)) *
    (1 - var(--width-threshold-min) / 100) /
    (var(--width-threshold-max) - var(--width-threshold-min))
    ) * 100vw),
    calc(var(--max-schriftgroesse-reduziert) * 1px)
  );

}

.techniker-such-ergebnis-tabelle th, .techniker-such-ergebnis-tabelle td{
  border:             .2rem solid var(--farbe-Midnight);
  padding:            0rem .3rem;
  text-align:         left;
}

.techniker-such-ergebnis-tabelle tbody > tr:hover.techniker-such-ergebnis-zeile {
  background-color:   var(--farbe-apricot-hell3);
  cursor:             pointer;
}

.techniker-such-ergebnis-tabelle th.techniker-such-ergebnis-artikelnr-spalte,
.techniker-such-ergebnis-tabelle td.techniker-such-ergebnis-artikelnr-spalte {
  width:              5rem;
  min-width:          4rem;
  max-width:          10rem;
  text-align:         left;
}

.techniker-such-ergebnis-tabelle th.techniker-such-ergebnis-beschreibung-spalte,
.techniker-such-ergebnis-tabelle td.techniker-such-ergebnis-beschreibung-spalte {
  text-align:         left;
}

.techniker-such-ergebnis-tabelle th.techniker-such-ergebnis-blocked-spalte,
.techniker-such-ergebnis-tabelle td.techniker-such-ergebnis-blocked-spalte {
  width:              2rem;
  max-width:          3rem;
  text-align:         left;
}

.techniker-such-ergebnis-tabelle td.techniker-such-ergebnis-blocked-spalte-roter-rahmen {
  border-color:       red;
  background-color:   var(--farbe-rot-hell2);
}

.techniker-such-ergebnis-tabelle th.techniker-such-ergebnis-letzte-6-Monate-spalte,
.techniker-such-ergebnis-tabelle td.techniker-such-ergebnis-letzte-6-Monate-spalte {
  width:              2rem;
  max-width:          3rem;
  text-align:         left;
}

.techniker-such-ergebnis-tabelle th.techniker-such-ergebnis-ersatzartikel-spalte,
.techniker-such-ergebnis-tabelle td.techniker-such-ergebnis-ersatzartikel-spalte {
  width:              5rem;
  max-width:          7rem;
  text-align:         left;
}

/* TODO: muss noch angepasst werden! */
.artikel-search-overlay {
  background-color: #fff;
  padding:            .4rem;
  border-radius:      .8rem;
  box-shadow:         0 4rem 8rem rgba(0,0,0,0.2);
  /* width:              clamp(35rem, 90vw, 70rem); */
  width:              auto;
  max-height:         90vh;
  overflow:           auto;
}

/* TODO: muss noch angepasst werden! */
.cdk-overlay-dark-backdrop {
  background:       rgba(0,0,0,0.4);
}

.overlay-header {
  display:            flex;
  justify-content:    space-between;
  align-items:        center;
  cursor:             move;
  /* background-color:   #f0f0f0; */
  /* background-color:   rgba(0,0,0,0.1);; */
  background-color:   var(--farbe-nachtblau-hell4);
  padding:            0rem 1rem;
  /* border-bottom:      .3rem solid var(--farbe-apricot-hell2); */
}

.overlay-header>h3 {
  font-size:          1rem;
  font-weight:        bold;
  margin:             0rem;
}

.overlay-header>button {
  margin:             0rem;
  background-color:   var(--farbe-apricot);
  color:            rgba(0,0,0);
  box-sizing:         border-box;
  overflow:           visible;
  cursor:             pointer;
  display:            inline-block;
  min-height:         .8rem;
  border:             none;
  vertical-align:     initial;
  font-family:        Arial,Helvetica,sans-serif;
  padding:            .5rem 1.5rem;
  text-transform:     none;
  text-shadow:        none;
  font-weight:        700;
  line-height:        .8rem;
  font-style:         normal;
  text-align:         center;
  text-decoration:    none;
  border-radius:      .3rem;
  user-select:        none;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
  -webkit-tap-highlight-color: transparent;
  font-size:          .7rem;
}

.overlay-header>button:hover {
  background-color: var(--farbe-apricot-hell1);
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----- Problem-Auftragstext - Tabelle / Problem-Selector ----- */

/* ──────────────────────────────────────────────────────────────
  Grundlayout der beiden großen Spalten-Bereiche
  ────────────────────────────────────────────────────────────── */
.problem-auftragstext-tabelle {
  box-sizing:                           border-box;
  display:                              flex;
  align-items:                          stretch;   /* alle Spalten gleiche Höhe */
  justify-content:                      space-between;
  gap:                                  1rem;
  width:                                100%;
  margin-top:                           .5rem;
  min-height:                           0;          /* wichtig für internes Scrollen der Kinder */
}
.tabellenspalte-breit  { flex: 2; min-width: 0; }
.tabellenspalte-schmal { flex: 1; min-width: 0; }

h3.auftrags-erfassung { margin: .5rem 0; }

/* ──────────────────────────────────────────────────────────────
  Problem-Selector (2 Spalten im Inneren)
  ────────────────────────────────────────────────────────────── */
.problem-selector-container {
  box-sizing:               border-box;
  display:                  flex;
  align-items:              stretch;
  justify-content:          space-between;
  gap:                      1rem;
  width:                    100%;
  min-height:               0;          /* erlaubt Schrumpfen */
}

.problem-selector-column {
  box-sizing:               border-box;
  flex:                     1;
  display:                  flex;
  flex-direction:           column;
  min-width:                0;
  min-height:               0;
}

/* Spalte 1: natürliche Höhe (sie bestimmt die Zeilenhöhe) */
.problem-selector-container > .problem-selector-column:first-child {
  align-self:               flex-start;
}

/* Spalte 1: natürliche Höhe (Selects + Button bestimmen die Gesamthöhe) */
.problem-selector-container > .problem-selector-column:first-child > .problem-selector-form-group {
  flex:                     0 0 auto;
}

/*  Spalte 2 (Lösungen): Höhe = Höhe von Spalte 1
    beeinflusst die Zeilenhöhe NICHT → contain:size
    füllt aber die von der Zeile vorgegebene Höhe und scrollt innen */
.problem-selector-container > .problem-selector-column:last-child > .problem-selector-form-group {
  contain:                  size;
  display:                  flex;
  flex-direction:           column;
  min-height:               0;
  flex:                     1 1 auto;
}

/* Selects im linken Block */
.problem-selector-select {
  box-sizing:               border-box;
  width:                    100%;
  height:                   2rem;
  margin-bottom:            1rem;
}
.problem-selector-button {
  box-sizing:               border-box;
  width:                    100%;
  margin-top:               1rem;
}

/* ──────────────────────────────────────────────────────────────
  Scrollbereiche
  ────────────────────────────────────────────────────────────── */
/* Auftragstext-Spalte (rechts) auf Zeilenhöhe strecken, intern scrollen */
.problem-auftragstext-tabelle > .problem-selector-column.tabellenspalte-schmal {
  display:                  flex;
  flex-direction:           column;
  min-height:               0;
}

/* Spalte 3: Auftragstext-Form-Group ebenfalls auf die Höhe von Spalte 1 begrenzen */
.problem-auftragstext-tabelle > .problem-selector-column.tabellenspalte-schmal > .problem-selector-form-group {
  contain:                  size;
  display:                  flex;
  flex-direction:           column;
  min-height:               0;
  flex:                     1 1 auto;
}

textarea.auftragstext-textfeld,
textarea.auftragstext-textfeld-roter-rahmen {
  box-sizing:               border-box;
  width:                    100%;
  padding:                  .5rem;
  background:               white;
  border-radius:            .3rem;
  font:                     inherit;
  font-size:                small;
  line-height:              1.1;
  border:                   .1rem solid #4d4d4d;
  resize:                   none;
  flex:                     1 1 auto;
  min-height:               0;
  overflow:                 auto;
}
textarea.auftragstext-textfeld-roter-rahmen { border: .5rem solid red; }

/* Lösungs-Listbox füllt die restliche Höhe der Form-Group und scrollt */
.cdk-listbox.problem-selector-listbox {
  box-sizing:               border-box;
  width:                    100%;
  padding:                  .5rem;
  background:               white;
  border:                   .1rem solid #4d4d4d;
  border-radius:            .3rem;
  font:                     inherit;
  font-size:                small;
  line-height:              1.1;
  flex:                     1 1 auto;
  min-height:               0;
  overflow-y:               auto;
  overflow-x:               hidden;
}

/* Listbox-Item-Styles */
.cdk-listbox.problem-selector-listbox .cdk-option.zeile-eines-listbox-eintrags {
  display:                  block;
  padding:                  .1rem .1rem;
  white-space:              pre-wrap;
  cursor:                   pointer;
  outline:                  none;
}
.cdk-listbox.problem-selector-listbox .cdk-option.zeile-eines-listbox-eintrags:hover { background: #edf0ff; }
.cdk-listbox.problem-selector-listbox .cdk-option.cdk-option[aria-selected="true"] { background: #d7e3ff; }
.cdk-listbox.problem-selector-listbox .cdk-option.cdk-option:focus { box-shadow: inset 0 0 0 .2rem #497bc7; }

/* .problem-selector-label {
  display:          inline-block;
  margin-bottom:    .1rem;
} */

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----- MaschinenWechsel - Tabelle ----- */

/* .maschinenwechsel-table{
  width:              100%;
  border-collapse:    collapse;
  table-layout:       fixed;
  margin-top:         1rem;
  color:              black;
} */

/* .maschinenwechsel-table th:nth-child( 1) { width:  2rem; }
.maschinenwechsel-table th:nth-child( 2) { width:   40%; }
.maschinenwechsel-table th:nth-child( 3) { width:  7rem; }
.maschinenwechsel-table th:nth-child( 4) { width:    8%; }
.maschinenwechsel-table th:nth-child( 5) { width:  8rem; }
.maschinenwechsel-table th:nth-child( 6) { width:    8%; }
.maschinenwechsel-table th:nth-child( 7) { width:    7%; }
.maschinenwechsel-table th:nth-child( 8) { width:    7%; }
.maschinenwechsel-table th:nth-child( 9) { width:    7%; }
.maschinenwechsel-table th:nth-child(10) { width:  4rem; max-width: 5rem;} */

.maschinenwechsel-table{
  width:              100%;
  border-collapse:    collapse;
  table-layout:       auto;
  margin-top:         1rem;
  color:              black;
}

.maschinenwechsel-table th {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .1rem;
  text-align:         left;
  box-sizing:         border-box;
  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;
  background-color:   whitesmoke;
  /* height:             2.3rem; */
}

.maschinenwechsel-table td::before {
  content:            attr(data-text);
  font-weight:        500;
  visibility:         hidden;
  height:             0;
  display:            block;
  overflow:           hidden;
}

.maschinenwechsel-table td {
  border:             .14rem solid var(--farbe-grau-hell2);
  /* padding:            .1rem; */
  padding:            .05rem .2rem;
  text-align:         left;
  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;
  /* height:             1.8rem; */
}

.maschinenwechsel-table tr {
  transition:         background-color 0.4s ease;
  background-color:   white;
}

.maschinenwechsel-table tr:hover {
  background-color:   var(--farbe-apricot-hell1);
  font-weight:        500;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----- Style von Listen in Tabellenform ----- */

.techniker .list-item-spalte-1 {
  float:          left;
  width:          8.5rem;
}

.techniker .list-item-spalte-2 {
  margin-left:    8.5rem;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----- AuftragsDetails Styles ----- */

.techniker .details {
  margin:               1rem 0rem;
}

.details .list-item-spalte-1 {
  float:                left;
  width:                20rem;
}

.details .list-item-spalte-2 {
  margin-left:          20rem;
}

.details .sub-list-item-spalte-1 {
  float:                left;
  width:                8rem;
}

.details .sub-list-item-spalte-2 {
  margin-left:          8rem;
}

.details h5 {
  background-color:     #ffffff;
  font-size:            1.1rem;
  font-weight:          550;
  font-family:          "Arial", sans-serif;
  margin:               0rem;
}

.techniker .details .obligatorisch {
  background-color:     rgb( 230, 240, 255);
  border:               0.2rem solid rgb(   0, 112, 204);
  border-radius:        0.6rem;
}

.techniker .details .fakultativ {
  background-color:     rgb( 255, 251, 230);
  border:               0.2rem solid rgb( 212, 170,   0);
  border-radius:        0.6rem;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----- ContainerAufträge Styles ----- */
techniker-auftrags-liste-container .obligatorisch {
  background-color:     rgb( 230, 240, 255);
  border:               0.2rem solid rgb(   0, 112, 204);
  border-radius:        0.6rem;
}

techniker-auftrags-liste-container .fakultativ {
  background-color:     rgb( 255, 251, 230);
  border:               0.2rem solid rgb( 212, 170,   0);
  border-radius:        0.6rem;
}

.techniker .container-auftrags-zeile {
  display:                  grid;
  grid-template-columns:    7rem 2rem 11.1rem 1fr 7rem;
  align-items:              center;
  gap:                      .5rem;
  margin:                   0rem var(--auftragsliste-container-einrueckung);
}

.techniker .container-auftrags-zeile .auftragsnr-link {
  text-decoration:    underline;
  cursor:             pointer;
  text-align:         center;
}

.techniker .container-auftrags-zeile .auftragsnr-link:hover {
  color:              var(--farbe-Roast-dunkel2);
}

.techniker .container-auftrags-zeile .auftragsnr-link:focus {
  outline:            .4rem solid #3399ff;
  outline-offset:     .1rem;
}

.techniker .container-auftrags-zeile .auftragstyp,
.techniker .container-auftrags-zeile .seriennr,
.techniker .container-auftrags-zeile .beschreibung {
  overflow:                 hidden;
  text-overflow:            ellipsis;
  white-space:              nowrap;
}

/* .techniker .container-auftrags-zeile .seriennr {
  text-align:               center;
} */

.techniker .container-auftrags-zeile .button-gruppe {
  display:                  grid;
  grid-template-columns:    1fr 1fr;
  gap:                      0.5rem;
  justify-items:            start;
}

.techniker .container-auftrags-zeile .container-auftrags-button{
  margin:                   0;
  padding:                  .2rem .6rem;
}

.techniker .container-auftrags-zeile .container-auftrags-button.emoji-button.red {
  background-color:   rgb(255, 255, 255);
  color:              rgb(197, 0, 0);
  border:             0.2rem solid rgb(197, 0, 0);
  font-size:          1.2rem;
  padding:            .0rem .1rem;
  border-radius:      .2rem;
  min-height:         .5rem;
}

.techniker .container-auftrags-zeile .container-auftrags-button.emoji-button.red:hover {
  background-color:   rgb(223, 255, 231);
  color:              rgb(255, 0, 0);
  border:             0.2rem solid rgb(197, 0, 0);
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Navision-Daten-Formular / Navision-Tab Styles */

.techniker form {
  background-color:   var(--farbe-nachtblau);
  padding:            0.9rem 1.1rem;
  border:             0.35rem solid rgba(0, 0, 0, 0.15);
  border-radius:      0.5rem;
}

.techniker .form-group {
  display:                grid;
  /* grid-template-columns: 120px auto; */
  grid-template-columns:  minmax(8.5rem, 10rem) minmax(10rem, 30rem);
  align-items:            center;
  background-color:       var(--farbe-nachtblau);
  /* padding-left: 5px; */

}

.techniker .form-group label {
  /* width: 120px;          /* Breite nach Bedarf anpassen */
  color: #ffffff;
}

.techniker .form-group input {
  padding-left: 0.5rem;        /* Abstand innerhalb des Eingabefeldes */
}

/* ----- Navision-Daten-Tabelle ----- */
.navision-daten-table {
  width:              100%;
  border-collapse:    collapse;
  margin-top:         .1rem;
  table-layout:       auto;
  overflow-x:         auto;
  display:            block;
  font-size:          .8rem;
}

.navision-daten-table th {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .2rem;
  text-align:         center;
  box-sizing:         border-box;
  white-space:        nowrap;
  background-color:   whitesmoke;
}

.navision-daten-table td {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .2rem;
  text-align:         center;
  box-sizing:         border-box;
  white-space:        nowrap;
}

.navision-daten-table tr:hover {
  background-color:   white;
  font-weight:        normal;
}

.navision-daten-button {
  margin:             .5rem .25rem 0 0;
}

h2.navisionTabHeader {
  margin: 1.2rem 0rem .2rem;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Unterschrift */

.techniker .help-icon-active {
  position:             relative;
  top:                  .1rem;
  left:                 93%;
  width:                2%;
  font-size:            1.2rem;
  text-align:           center;
  cursor:               pointer;
  background-color:     rgb(146, 255, 151);
  padding:              .5rem;
  border-radius:        50%;
  border:               .1rem solid rgb(204, 204, 204);
}

.techniker .help-icon-inactive {
  position:             relative;
  top:                  .1rem;
  left:                 93%;
  width:                2%;
  font-size:            1.2rem;
  text-align:           center;
  cursor:               pointer;
  background-color:     rgb(238, 238, 238);
  padding:              .5rem;
  border-radius:        50%;
  border:               .1rem solid rgb(204, 204, 204);
}

.techniker .unterschrift-container {
  display:              flex;
  flex-direction:       column;
  align-items:          center;
  margin:               3.5rem;
}

.techniker .unterschrift-controls {
  margin-top:           1rem;
}

.techniker .vollstaendiger-name-label {
  text-align:           right;
  white-space:          nowrap;
  color:                white;
  margin-right:         1rem;
}

.techniker .vollstaendiger-name-input {
  box-sizing:           border-box;
  width:                100%;
}

.techniker .unterschrift-io-header {
  background-color:     var(--farbe-Cappuccino);
  color:                var(--farbe-Midnight);
  display:              flex;
  justify-content:      space-between;
  align-items:          center;
  padding:              0.75rem 1rem;
  cursor:               move;
  user-select:          none;
}

.techniker .unterschrift-io-header h3 {
  color:                var(--farbe-Midnight);
}

.techniker .unterschrift-button {
  margin:               .5rem .25rem 0 0;
}

.techniker canvas {
  border-radius:        3rem;
  border:               .3rem solid #000;
  background-color:     white;
}

/*
 * Wichtig: Verwende `.techniker.unterschrift-io-overlay` anstelle von `.techniker .unterschrift-io-overlay`.
 *
 * Der Selektor `.techniker .unterschrift-io-overlay` ist ein "descendant selector":
 * Er greift nur, wenn ein Element mit der Klasse `.unterschrift-io-overlay` sich innerhalb eines
 * Elements mit der Klasse `.techniker` befindet.
 *
 * Das Unterschrift-Overlay wird jedoch über Angular CDK als eigenständiges Element direkt im <body>
 * erzeugt – also außerhalb der App-Hierarchie. Es existiert kein übergeordnetes `.techniker`-Element im DOM.
 *
 * Deshalb wird dem Overlay-Root-Element zusätzlich die Klasse `.techniker` mitgegeben.
 * So kann `.techniker.unterschrift-io-overlay` als kombinierter Klassen-Selektor verwendet werden,
 * der zuverlässig auch bei globalen Overlays greift.
 *
 * Fazit: Nur `.techniker.unterschrift-io-overlay` stellt sicher, dass techniker-spezifische Styles
 * auch bei CDK-Overlays korrekt angewendet werden.
 */
.techniker.unterschrift-io-overlay {
  width:                90vw;
  height:               90vh;
  max-width:            100vw;
  max-height:           100vh;
  overflow:             auto;
  padding:              0;
  margin:               0;
  background-color:     var(--farbe-Midnight);
  color:                black;

  display:              flex;
  flex-direction:       column;
  justify-content:      start;
  align-items:          stretch;

  border-radius:        0.4rem;
  box-shadow:           1.5rem 1.5rem 1.5rem rgba(0,0,0,0.9);
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------ Rechnungs-PDF / PDF-Erstellung - Style ------------------------------------------------ */
.rechnungs-pdf-overlay h3 {
  color:              var(--farbe-Midnight);
}

.rechnungs-pdf-overlay-header {
  background-color:   var(--farbe-Cappuccino);
  color:              var(--farbe-Midnight);
  display:            flex;
  justify-content:    space-between;
  align-items:        center;
  padding:            0.75rem 1rem;
  cursor:             move;
  user-select:        none;
}

.rechnungs-pdf-iframe {
  flex:     1 1 auto;
  width:    100%;
  height:   100%;
  display:  block;
  border:   none;
}

.rechnungs-pdf-overlay {
  width:              90vw;
  height:             90vh;
  max-width:          100vw;
  max-height:         100vh;
  overflow:           auto;
  padding:            0;
  margin:             0;
  background-color:   white;
  color:              black;

  display:            flex;
  flex-direction:     column;
  justify-content:    start;
  align-items:        stretch;

  border-radius:      0.4rem;
  box-shadow:         1.5rem 1.5rem 1.5rem rgba(0,0,0,0.9);
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------- UmlagerungsAufträge - Style ------------------------------------------------------ */
.techniker .umlagerungsauftrag-container .umlagerungsauftrag-auftragsnummer {
  display:            flex;
  align-items:        center;
  gap:                1rem;
  margin-top:         0.5rem;
  margin-bottom:      0.5rem;
  font-weight:        bold;
}

.techniker .umlagerungsauftrag-container .lager-auswahl-zeile {
  display:            flex;
  align-items:        center;
  gap:                2rem;
  margin-top:         0.5rem;
  margin-bottom:      1rem;
}

.techniker .umlagerungsauftrag-container .lager-auswahl-zeile label {
  display:            flex;
  flex-direction:     column;
  font-weight:        normal;
}

.techniker .umlagerungsauftrag-container .lager-pfeil {
  font-size:          1.5rem;
  font-weight:        bold;
  margin-top:         1.4rem;
  padding:            0 0.5rem;
}

.techniker .umlagerungsauftrag-container .umlagerungsartikel-eingabe-zeile {
  display:            flex;
  align-items:        center;
  gap:                2rem;
  margin-top:         0.5rem;
  margin-bottom:      1rem;
}

.techniker .umlagerungsauftrag-container .umlagerungsartikel-eingabe-zeile .input-beschreibung input {
  min-width:          20rem;
  flex:               1 1 30%;
}

.techniker .umlagerungsauftrag-container .umlagerungsartikel-eingabe-zeile .mengen-eingabe-dynamisch {
  position:           relative;
  display:            inline-block;
}

.techniker .umlagerungsauftrag-container .umlagerungsartikel-eingabe-zeile .mengen-eingabe-dynamisch input {
  transition:         width .5s ease;
  padding:            0.2rem;
}

.techniker .umlagerungsauftrag-container .umlagerungsartikel-eingabe-zeile .mengen-eingabe-dynamisch .input-breiten-spiegel {
  position:           absolute;
  visibility:         hidden;
  pointer-events:     none;
  height:             auto;
  white-space:        pre;
  /* font-family:        inherit; */
  /* font-size:          inherit; */
  font:               inherit;
  padding:            0.2rem;
  border:             none;
}

.techniker .umlagerungsauftrag-container .umlagerungs-auftrags-button{
  margin:             0;
  padding:            .2rem .6rem;
}

.techniker .umlagerungsauftrag-container .umlagerungs-auftrags-button.emoji-button.red {
  background-color:   rgb(255, 255, 255);
  color:              rgb(197, 0, 0);
  border:             0.2rem solid rgb(197, 0, 0);
  font-size:          1.2rem;
  padding:            .0rem .1rem;
  border-radius:      .2rem;
  min-height:         .5rem;
}

.techniker .umlagerungsauftrag-container .umlagerungs-auftrags-button.emoji-button.red:hover {
  background-color:   rgb(223, 255, 231);
  color:              rgb(255, 0, 0);
  border:             0.2rem solid rgb(197, 0, 0);
}

.techniker .umlagerungsauftrag-container .umlagerungs-auftrags-button.emoji-button.green {
  background-color:   rgb(255, 255, 255);
  color:              rgb(0, 197, 0);
  border:             0.2rem solid rgb(0, 197, 0);
  font-size:          1.2rem;
  padding:            .0rem .1rem;
  border-radius:      .2rem;
  min-height:         .5rem;
}

.techniker .umlagerungsauftrag-container .umlagerungs-auftrags-button.emoji-button.green:hover {
  background-color:   rgb(255, 223, 223);
  color:              rgb(  0, 255,   0);
  border:             0.2rem solid rgb(0, 197, 0);
}

.techniker .umlagerungsauftrag-container .aktion-buttons {
  margin-top:         1rem;
  margin-bottom:      .5rem;
}

.techniker .umlagerungsauftrag-container .umlagerungs-tabelle {
  border-collapse:    collapse;
  table-layout:       auto;
  margin-top:         1rem;
  color:              black;
  background-color:   white;
}

.techniker .umlagerungsauftrag-container .umlagerungs-tabelle th,
.techniker .umlagerungsauftrag-container .umlagerungs-tabelle td {
  border:             0.14rem solid var(--farbe-grau-hell2);
  padding:            0.15rem 0.4rem;
  text-align:         left;
  white-space:        nowrap;
  overflow:           hidden;
  text-overflow:      ellipsis;
  height:             2.2rem;
}

.techniker .umlagerungsauftrag-container .umlagerungs-tabelle th {
  background-color:   whitesmoke;
  font-weight:        bold;
}

.techniker .umlagerungsauftrag-container .umlagerungs-tabelle tr {
  transition:         background-color 0.3s ease;
}

.techniker .umlagerungsauftrag-container .umlagerungs-tabelle tr:hover {
  background-color:   var(--farbe-apricot-hell1);
}

.techniker .umlagerungsauftrag-container .umlagerungs-tabelle td:last-child {
  text-align:         center;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------ Dialog-Styles ------------------------------------------------------------- */
.techniker-dialog-subheading {
  font-size: 1.1rem;
  font-weight: 500;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------ Development Helper Styles ------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------- */

/* ----- CallsMaster-Checker ----- */

.hinweis {
  color:    red;
}

.flex-container {
  display:    flex;
  gap:        2rem;
  padding:    .5rem;
}

.button-group {
  display:    flex;
  gap:        .5rem;
}

.button-group button {
  padding:            .8rem 1.6rem;
  border:             .1rem solid var(--farbe-apricot-dunkel1);
  background-color:   var(--farbe-apricot);
  cursor:             pointer;
}

.button-group button.active {
  background-color:   var(--farbe-apricot-dunkel1);
  color:              white;
  border-color:       var(--farbe-apricot-dunkel1);
}

/* ----- CallsMaster - Tabelle ----- */
.calls-master-table{
  width:              100%;
  border-collapse:    collapse;
  table-layout:       fixed;
  margin-top:         1rem;
  color:              black;
}

.calls-master-table th:nth-child(1) { width: 13%; }
.calls-master-table th:nth-child(2) { width:  6%; }
.calls-master-table th:nth-child(3) { width:  8%; }
.calls-master-table th:nth-child(4) { width: 48%; }
.calls-master-table th:nth-child(5) { width: 10%; }
.calls-master-table th:nth-child(6) { width: 10%; }
.calls-master-table th:nth-child(7) { width:  5%; }

.calls-master-table th {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .1rem;
  text-align:         left;
  box-sizing:         border-box;
  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;
  background-color:   whitesmoke;
}

.calls-master-table td {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            .1rem;
  text-align:         left;
  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;
}

.calls-master-table tr {
  transition:         background-color 0.4s ease;
  background-color:   white;
}

.calls-master-table tr:hover {
  background-color:   var(--farbe-apricot-hell1);
  font-weight:        500;
}

.calls-master-button{
  margin:             .5rem .5rem 0 0;
}

/* ----- GateWay-Checker - Tabelle ----- */
.gateway-checker-table {
  --anzahl-other-spalten:     1;
  --column-width-first:       20%;
  --column-width-last:         5%;
  --column-width-others-sum:  calc(100% - var(--column-width-first) - var(--column-width-last));
  width:                      100%;
  border-collapse:            collapse;
  margin-top:                 2rem;
  table-layout:               fixed;
}

.gateway-checker-table th,
.gateway-checker-table td {
  border:             .14rem solid var(--farbe-grau-hell2);
  padding:            1rem;
  text-align:         center;
  box-sizing:         border-box;
}

.gateway-checker-table .first-column {
  width:    var(--column-width-first);
}

.gateway-checker-table .other-columns {
  width:    calc(var(--column-width-others-sum) / var(--anzahl-other-spalten));
}

.gateway-checker-table .last-column {
  width:    var(--column-width-last);
}

.techniker-gatewaychecker-button-container {
  display:            flex;
  justify-content:    center;
  width:              100%;
}

.gateway-checker-table button {
  width:              100%;
  max-width:          30rem;
}

.gateway-checker-table tr:hover {
  background-color:   white;
  font-weight:        normal;
}

/* ----- Gateway-Check-Zelle in der GateWay-Checker - Tabelle ----- */

.gateway-check-zelle {
  text-align:         center;
}

.gateway-check-container {
  display:            flex;
  align-items:        center;
  justify-content:    space-between;
  width:              100%;
}

.url-kopier-button {
  flex:               0 0 auto
}

.url-kopier-button button {
  padding:            .5rem 1rem;
  width:              8rem;
  text-align:         center;
}

.gateway-check-text {
  flex:               1;
  text-align:         center;
}

.circle {
  width:              2rem;
  height:             2rem;
  border:             .2rem solid black;
  border-radius:      50%;                  /* Runde Form */
  background-color:   white;
  display:            inline-block;         /* Inline-Block für Darstellung in Zelle */
}

.small {
  width:              1.5rem;
  height:             1.5rem;
  display:            inline-flex;
  justify-content:    center;
  align-items:        center;
  border:             .1rem solid black;
  font-weight:        bold;
}

.verysmall {
  width:              1.3rem;
  height:             1.3rem;
  display:            inline-flex;
  justify-content:    center;
  align-items:        center;
  border:             .1rem solid black;
  font-weight:        bold;
}

.veryverysmall {
  width:              1rem;
  height:             1rem;
  display:            inline-flex;
  justify-content:    center;
  align-items:        center;
  border:             .1rem solid black;
  font-weight:        bold;
}

.circle.green {
  background-color:   green;
}

.circle.red {
  background-color:   red;
}

.small.green {
  background-color:   var(--farbe-gruen-hell1);
}

.small.red {
  background-color:   var(--farbe-rot-hell1);
}

.verysmall.green {
  background-color:   var(--farbe-gruen-hell1);
}

.verysmall.yellow {
  background-color:   var(--farbe-gold-hell1);
}

.verysmall.red {
  background-color:   var(--farbe-rot-hell1);
}

.veryverysmall.green {
  background-color:   var(--farbe-gruen-hell1);
}

.veryverysmall.yellow {
  background-color:   var(--farbe-gold-hell1);
}

.veryverysmall.red {
  background-color:   var(--farbe-rot-hell1);
}

/* ----- Authentifizierungs-Seite ----- */

.devhelper-authentifizierungsseite-flex-container {
  display:          flex;
  flex-direction:   row;
  align-items:      flex-end;
  gap:              2rem;
  padding:          .5rem;
}

.devhelper-authentifizierungsseite-label-input-container {
  display:          flex;
  gap:              .5rem;
}

button.kopier-marker{
  background-color: var(--farbe-gruengelb);
}

button:hover.kopier-marker{
  background-color: var(--farbe-gruengelb-hell1);
}