/* ======================================================
   Allgemeine Stile
====================================================== */

ion-content {
  --background: #f0f0f0;
}

p {
  padding: 0;
  margin: 0;
}

div {
  white-space: nowrap;
  color: #333;
}

/* ======================================================
   Grid-Container für Arrivals Kacheln
====================================================== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-width-percent), 1fr));
  row-gap: 1vh;
  column-gap: 1vh;
  padding: 0;
  justify-content: center;
}

.arrival-card {
  height: var(--tile-height-vh);
  border-radius: 15px;
  transition: box-shadow 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  animation: fadeIn 0.2s ease-in-out;
}

.card-number {
  position: absolute;
  top: 2%;
  left: 0.1%;
  font-size: calc(var(--tile-height-vh) * 0.14);
  font-weight: bold;
  background-color: transparent;
  padding: 0.1% 2%;
   color: #003680;
}

/* ======================================================
   Typografie
====================================================== */

ion-title {
  font-size: calc(var(--tile-height-vh) * 0.24);
  font-weight: bold;
  color: #003680;
}

.title {
  font-size: clamp(12px, 2vw, var(--tile-title-font-size));
  font-weight: bold;
  color: #003680;
}

.lkwnr {
 
  text-align: center;
  white-space: nowrap;
  color: #002050;
  font-weight: bold;
}

.htmltext {
  height: var(--text-balken-height-vh);
  width: 100%;
  white-space: pre-line;
  transition: box-shadow 0.3s, transform 0.3s;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ======================================================
   Icons
====================================================== */

.grid-container ion-icon {
  vertical-align: middle;
  font-size: calc(var(--tile-height-vh) * 0.15);
  margin-right: -3px;
  margin-left: 0.1em;
  margin-bottom: 0.1em;
}


 

/* ======================================================
   Statusklassen
====================================================== */
.lkwfertig {
  border-left: 10px solid #306c0c;
  background-color: #e6ffe6;
}

.fehlt {
  border-left: 10px solid #a00f05;
  background-color: #f79391;
}

.statusLKW_LKW_neu,
.statusLKW_Ankunft {
}

/* ======================================================
   Animationen
====================================================== */

@keyframes fadeIn {
  from {
    opacity: 1;
    transform: scale(0.3);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.blinking-image {
  animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
  0%, 50% {
    opacity: 1;
  }

  50.01%, 100% {
    opacity: 0;
  }
}

/* ======================================================
   Bilder und Logos
====================================================== */

.logo {
  max-height: 10vh;
  object-fit: contain;
}

.logobar {
  max-height: 12vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}



.bottom-left-image-problem img {
  position: absolute;
  width: 11%;
  bottom: 2%;
  left: 2%;
  aspect-ratio: 9 / 9;
}

.bottom-left-image-passport img {
  position: absolute;
  width: 18%;
  bottom: 2%;
  left: 2%;
}

.bottom-left-image-round img {
  position: absolute;
  width: 8%;
  aspect-ratio: 9.5 / 9; 
  bottom: 2%;
  left: 1%;
}



.problem {
  width: 32%;
 }

.passport {
  width: 42%;
 
}

/* ======================================================
   Benutzerdefinierte Segmente
====================================================== */
.custom-segment {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  height: 40px;
}

.custom-segment-button {
  min-width: 50px;
  height: 35px;
  margin: 2px;
  padding: 5px;
  font-size: 12px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  transition: border-bottom 0.3s ease, color 0.3s ease;
}

.custom-segment-button.active {
  border-bottom: 2px solid #003680;
}

.custom-segment-button:hover {
  border-bottom: 2px solid #cccccc;
}

.custom-segment-button:focus {
  outline: none;
}

.custom-segment-button.active .tab-label {
  color: #003680;
}

.tab-image {
  width: 24px;
  height: 20px;
}

/* ======================================================
   Dynamische und Lade-Indikatoren
====================================================== */
 
.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.custom-progress-bar {
  --progress-background: #003680;
  width: 100%; 
}

/* ======================================================
   Flex Container
====================================================== */
.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  row-gap: var(--tile-row-gap);
}

.flex-container > div:first-child {
  height: 100%;
}
 
.flex-container-hinweis {
  display: flex;
  flex-direction: column;
  align-items: center;
 
}


.tabs-container {
  position: absolute;
  bottom: var(--text-flagge-bottom);
  left: var(--text-flagge-left);
  z-index: 10;
}

.bottom-right-icon-im {
  position: absolute;
  bottom: 0.1%;
  right: 2%;
  font-size: calc(var(--tile-height-vh) * 0.15);
  color: #003680;  
}

.bottom-right-icon-ex {
  position: absolute;
  bottom: 0.1%;
  right: 2.5%;
  font-size: calc(var(--tile-height-vh) * 0.15);
  color: #ee7621;
}


 
.logo-and-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}


.legendecontainer {
  display: flex;
  position: absolute;
  margin-left: 55%;
  flex-direction: column;
}

 

.div-import {
  color: #003680;
 }

.div-export {
  margin-bottom:0%;
  color: #ee7621;
}

.wechseltext {
  visibility: hidden;
}
.wechseltextdiv {
  margin-left:-9%;
}


@media only screen and (max-width: 768px) {

  /* Grid-Container anpassen */
  .grid-container {
    grid-template-columns: 1fr; /* Eine Spalte */
    row-gap: 1px; /* 20px * 0.8 */
    column-gap: 1px; /* 20px * 0.8 */
    padding: 8px; /* 10px * 0.8 */
  }

  .arrival-card {
    height: 120px; /* Flexible Höhe bleibt unverändert */
    padding: 8px; /* 10px * 0.8 */
    margin-bottom: 8px; /* 10px * 0.8 */
  }

  .card-number {
    font-size: 16px; /* 16px * 0.8 */
    padding: 1.6% 2.4%; /* 2% * 0.8 und 3% * 0.8 */
  }

  /* Typografie anpassen */
  ion-title {
    font-size: 10px; /* 24px * 0.8 */
  }

  .title {
    font-size: 20px; /* 16px * 0.8 */
  }

  .lkwnr {
    font-size: 11px; /* 14px * 0.8 */
  }

  .htmltext {
    height: auto;
    padding: 8px; /* 10px * 0.8 */
  }

  .grid-container ion-icon {
    font-size: 16px; /* 20px * 0.8 */
    margin-right: 0;
    margin-left: 0.16em; /* 0.2em * 0.8 */
    margin-bottom: 0.16em; /* 0.2em * 0.8 */
  }

  .logo {
    max-height: 8vh; /* 8vh * 0.8 */
  }

  .logobar {
    max-height: 8vh; /* 10vh * 0.8 */
  }

  .bottom-left-image-problem img,
  .bottom-left-image-passport img,
  .bottom-left-image-round img {
    width: 4%; /* 5% * 0.8 */
    left: 4%; /* 5% * 0.8 */
  }

 

  /* Benutzerdefinierte Segmente anpassen */
  .custom-segment {
    height: 40px; /* 50px * 0.8 */
  }

  .custom-segment-button {
    min-width: 32px; /* 40px * 0.8 */
    height: 24px; /* 30px * 0.8 */
    padding: 3px; /* 4px * 0.8 */
    font-size: 8px; /* 10px * 0.8 */
  }

  .tab-image {
    width: 16px; /* 20px * 0.8 */
    height: 14px; /* 18px * 0.8 */
  }

  /* Flex Container anpassen */
  .flex-container {
    row-gap: 1px; /* 20px * 0.8 */
  }

  .tabs-container {
    bottom: 4%; /* 5% * 0.8 */
    left: 4%; /* 5% * 0.8 */
  }

  .bottom-right-icon-im,
  .bottom-right-icon-ex {
    font-size: 14px; /* 18px * 0.8 */
  }

  .legendecontainer {
    margin-left: 8%; /* 10% * 0.8 */
  }

  .problem {
    width: 22%;
  }

  .passport {
    width: 32%;
  }
} 
