* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

.row>* {
  padding-left: unset;
  padding-right: unset;
}

p {
  padding: 0;
  margin: 0;
}

/* TREVERER-LOGISTIK - HEADER */

.tlo_header {
  position: fixed;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  top: 0;
  z-index: 999;
}

.tlo_header_logo {
  height: 88px;
  padding: 12px 24px;
  display: block;
}

/* TREVERER-LOGISTIK - HEADER NAVIGATION */

.tlo_header_navi {
  position: fixed;
  background-color: #3296c5;
  overflow: hidden;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 0;
  margin: 0;
  top: 0;
  right: 24px;
  z-index: 9999;
}

.tlo_header_navi .nav-item {
  position: relative;
  display: inline-block;
}

.tlo_header_navi .nav-item:not(:last-child) {
  border-right: 1px solid #378db5;
}

.tlo_header_navi .nav-item a {
  display: block;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  padding: 38px 24px;
}

.tlo_header_navi .nav-item a:hover {
  background-color: #3091bf;
}

/* TREVERER-LOGISTIK - SMARTNAVIGATION */

.tlo_smartbutton {
  position: fixed;
  background-color: #3296c5;
  border-top-left-radius: 15px;
  bottom: 30px;
  right: 0;
  z-index: 9998;
}

.tlo_smartbutton:hover {
  background-color: #3091bf;
}

.tlo_smartbutton a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 12px 32px 12px 12px;
}

#tlo_smartnavigation {
  position: fixed;
  display: none;
  width: 254px;
  height: 484px;
  overflow: hidden;
  flex-direction: column;
  flex-wrap: wrap;
  background: #3296c5;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  bottom: 30px;
  right: 0;
  z-index: 9999;
  transition: transform 0.4s ease;
}

.tlo_smartnavigation_close {
  position: absolute;
  background-color: #252525;
  border-top-left-radius: 15px;
  bottom: 0;
  right: 0;
  z-index: 999999;
}

.tlo_smartnavigation_close a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 12px 32px 12px 12px;
}

.tlo_smart_logo {
  width: 100%;
  background-color: #252525;
  padding: 24px;
}

.tlo_smart_navi {
  list-style-type: none;
}

.tlo_smart_navi .nav-item a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 6px 0;
}

.tlo_smart_navi .nav-item a:hover {
  
}

/* TREVERER-LOGISTIK - MAIN */

.tlo_main {
  margin-top: 88px;
}

.tlo_inner {
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.tlo_l, .tlo_r {
  width: 50%;
}

/* TREVERER-LOGISTIK - WELCOME */

.tlo_welcome {
  position: relative;
  width: 100%;
  height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-image: url(/images/lkw_auf_strasse.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 24px;
}

.tlo_welcome h1 {
  font-size: 38px;
  color: #000;
  background-color: #3296c5;
  padding: 12px;
  margin-right: 120px;
  margin-bottom: 0;
  z-index: 99;
}

.tlo_welcome h2 {
  font-size: 30px;
  color: #fff;
  background-color: #257092;
  padding: 12px;
  margin-left: 240px;
  margin-top: -12px;
  z-index: 98;
}

/* TREVERER-LOGISTIK - INTRODUCTION */

.tlo_introduction {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 62px 12px 0;
}

.tlo_introduction_l {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background-color: #257092;
  border-top-left-radius: 12px;
  padding: 12px;
}

.tlo_introduction_l img {
  width: 100%;
}

.tlo_introduction_r {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  background-color: #257092;
  border-bottom-right-radius: 12px;
  padding: 12px;
}

.tlo_introduction_r h3 {
  color: #fff;
  padding: 6px 0 12px;
  margin: 0;
}

.tlo_introduction_r span {
  color: #fff;
}

.tlo_introduction_contact {
  align-self: flex-end;
  background-color: #fff;
  padding: 12px;
  margin-top: 24px;
}

.tlo_introduction_contact a {
  color: #3296c5;
  text-decoration: none;
}

.tlo_introduction_contact a:hover {
  color: #3091bf;
}

/* TREVERER-LOGISTIK - USP */

.tlo_usp {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 62px 12px 0;
}

.tlo_usp_group {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  row-gap: 24px;
}

.tlo_usp_element {
  width: 24%;
  background-color: #257092;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 12px;
}

.tlo_usp_element h4 {
  color: #fff;
  padding: 6px 0 12px;
  margin: 0;
}

.tlo_usp_element p {
  color: #fff;
}

/* TREVERER-LOGISTIK - CALL2ACTION */

.tlo_call2action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 62px 24px;
}

.tlo_call2action a {
  display: block;
  background-color: #3296c5;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 12px;
  padding: 12px 24px;
}

.tlo_call2action a:hover {
  background-color: #3091bf;
}

/* TREVERER-LOGISTIK - PARALLAX HOME */

.tlo_parallax {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-image: url(/images/lkw_auf_strasse_spaet.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  padding: 24px;
}

.tlo_parallax h2 {
  color: #fff;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(206,89,55,0);
}

/* TREVERER-LOGISTIK - PARALLAX ABOUT */

.tlo_about_parallax {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-image: url(/images/about_parallax_3.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  background-attachment: fixed;
  padding: 24px;
}

.tlo_about_parallax h2 {
  color: #fff;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(206,89,55,0);
}

/* TREVERER-LOGISTIK - PARALLAX SERVICES */

.tlo_services_parallax {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-image: url(/images/lkw_lager.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  background-attachment: fixed;
  padding: 24px;
}

.tlo_services_parallax h2 {
  color: #fff;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(206,89,55,0);
}

/* TREVERER-LOGISTIK - PARALLAX CONTACT */

.tlo_contact_parallax {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-image: url(/images/headset.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  background-attachment: fixed;
  padding: 24px;
}

.tlo_contact_parallax h2 {
  color: #fff;
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(206,89,55,0);
}

/* TREVERER-LOGISTIK - ABOUT */

.tlo_about {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.tlo_about h1 {
  margin: 0 0 32px;
}

.tlo_about p {
  font-style: italic;
  text-align: center;
  margin: 24px auto;
}

/* TREVERER-LOGISTIK - ABOUT TEAM */

.tlo_team {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 12px 0 64px;
}

.tlo_team_image {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 12px;
}

.tlo_team_image img {
  width: 100%;
}

.tlo_team_group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 12px;
  padding: 12px;
}

.tlo_team_element {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-self: stretch;
  background-color: #257092;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 12px;
}

.tlo_team_name {
  width: 100%;
  color: #fff;
  font-weight: 500;
}

.tlo_team_position {
  width: 100%;
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
}

.tlo_team_mail {
  display: block;
  background-color: #fff;
  font-size: 14px;
  color: #3296c5;
  text-decoration: none;
  padding: 6px 12px;
  margin-bottom: 6px;
}

.tlo_team_phone {
  display: block;
  background-color: #fff;
  font-size: 14px;
  color: #3296c5;
  text-decoration: none;
  padding: 6px 12px;
}

/* TREVERER-LOGISTIK - SERVICES */

.tlo_services {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.tlo_services h1 {
  margin: 0 0 32px;
}

/* TREVERER-LOGISTIK - SERVICES LIST */

.tlo_services_list {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 12px 0 64px;
}

.tlo_services_group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 12px;
  padding: 12px;
}

.tlo_services_element {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  background-color: #257092;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 12px;
}

.tlo_services_element h4 {
  width: 100%;
  text-align: left;
  color: #fff;
  padding: 6px 0 12px;
  margin: 0;
}

.tlo_services_element span {
  color: #fff;
}

/* TREVERER-LOGISTIK - CONTACT */

.tlo_contact {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.tlo_contact h1 {
  margin: 0 0 32px;
}

/* TREVERER-LOGISTIK - CONTACT FORM */

.tlo_contact_form {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.rsform {
  width: 100%;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: #257092;
  padding: 24px;
  overflow: hidden;
}

.rsform h3 {
  color: #fff;
}

label.formControlLabel {
  display: block;
  color: #fff;
  margin-bottom: 6px;
}

/* =====================================
   Minimal Clean White Form Style
   ===================================== */

.formResponsive input[type="email"],
.formResponsive input[type="number"],
.formResponsive input[type="password"],
.formResponsive input[type="tel"],
.formResponsive input[type="text"],
.formResponsive input[type="url"],
.formResponsive select {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 6px;

  /* Clean look */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #333;
  font-size: 1rem;
  font-family: inherit;

  /* Leichter Schatten für Tiefe */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formResponsive textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 6px;

  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #333;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  min-height: 120px;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Fokus-Effekt: dezent, modern */
.formResponsive input:focus,
.formResponsive select:focus,
.formResponsive textarea:focus {
  outline: none;
  border-color: #257092; /* sanftes Blau als Akzent */
  box-shadow: 0 0 0 3px rgba(37, 112, 146, 0.2);
}

/* Platzhalterfarbe */
.formResponsive input::placeholder,
.formResponsive textarea::placeholder {
  color: #aaa;
}

/* Optional: hübscher Dropdown-Pfeil für Select */
.formResponsive select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg fill='%23333' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1rem;
  padding-right: 2rem; /* Platz für Pfeil */
}

.formResponsive button[type=reset],
.formResponsive button[type=submit],
.formResponsive input[type=reset],
.formResponsive input[type=submit] {
  box-sizing: border-box;
  display: inline-block;
  height: 42px;                 /* gleiche Höhe wie Inputs */
  padding: 0 1.25rem;
  margin-top: 0.5rem;

  background-color: #ffffff;    /* weißer Button */
  color: #257092;               /* dein Blau als Textfarbe */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;

  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

/* Hover & Fokus – dezente Akzente */
.formResponsive button[type=reset]:hover,
.formResponsive button[type=submit]:hover,
.formResponsive input[type=reset]:hover,
.formResponsive input[type=submit]:hover {
  background-color: #f5f5f5;           /* leichtes Grau beim Hover */
  color: #257092;
  border-color: #bbb;
}

.formResponsive button[type=reset]:focus,
.formResponsive button[type=submit]:focus,
.formResponsive input[type=reset]:focus,
.formResponsive input[type=submit]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,112,146,0.25);
}

/* Klick-Effekt */
.formResponsive button[type=reset]:active,
.formResponsive button[type=submit]:active,
.formResponsive input[type=reset]:active,
.formResponsive input[type=submit]:active {
  transform: translateY(1px);
}

/* TREVERER-LOGISTIK - FORM SUCCESS */

.tlo_form_success {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.tlo_form_success h1 {
  margin: 0 0 32px;
}

.tlo_form_success a {
  color: #3296c5;
}

.tlo_form_success a:hover {
  color: #3091bf;
}

/* TREVERER-LOGISTIK - AGBS */

.tlo_agbs {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.tlo_agbs a {
  color: #3296c5;
}

.tlo_agbs a:hover {
  color: #3091bf;
}

/* TREVERER-LOGISTIK - IMPRESSUM */

.tlo_impressum {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.tlo_impressum h1 {
  margin: 0 0 32px;
}

.tlo_impressum a {
  color: #3296c5;
}

.tlo_impressum a:hover {
  color: #3091bf;
}

/* TREVERER-LOGISTIK - DATENSCHUTZ */

.tlo_datenschutz {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 32px 12px;
}

.tlo_datenschutz h1 {
  margin: 0 0 32px;
}

.tlo_datenschutz a {
  color: #3296c5;
}

.tlo_datenschutz a:hover {
  color: #3091bf;
}

/* TREVERER-LOGISTIK - FOOTER */

.tlo_footer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  background-color: #252525;
}

.tlo_footer a {
  color: #3296c5;
  text-decoration: none;
}

.tlo_footer a:hover {
  color: #3091bf;
}

.tlo_footer p {
  color: #fff;
}

.tlo_footer h5 {
  color: #fff;
  font-size: 22px;
  padding: 0;
  margin: 0 0 12px;
}

.tlo_footer_l {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 62px 12px 0;
}

.tlo_footer_logo {
  height: 88px;
  display: block;
  margin-bottom: 24px;
}

.tlo_footer_navi {
  list-style-type: none;
  padding-inline-start: 6px;
  margin-block-start: 6px;
  margin-block-end: 6px;
}

.tlo_footer_r {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 62px 12px 0;
}

.tlo_footer_copy {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 62px 12px 24px;
}

/* TREVERER-LOGISTIK - LANGUAGE */

.mod-languages {
  position: fixed;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  background-color: #252525;
  border-top-right-radius: 15px;
  padding: 12px 12px 19px 12px;
  left: 0;
  bottom: 0;
  z-index: 9998;
}

.mod-languages p {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}

div.mod-languages li {
  margin: unset;
}

@media screen and (max-width: 1400px) {
  
  /* TREVERER-LOGISTIK - WELCOME - MAXIMAL 1400px BREITE */
  
  .tlo_welcome h1 {
    font-size: 30px;
  }
  
  .tlo_welcome h2 {
    font-size: 22px;
  }

}

@media screen and (max-width: 1280px) {
  
  /* TREVERER-LOGISTIK - HEADER - MAXIMAL 1280px BREITE */
  
  .tlo_header {
    justify-content: center;
  }
  
  .tlo_header_logo {
    padding: 12px;
  }
  
  /* TREVERER-LOGISTIK - HEADER NAVIGATION - MAXIMAL 1280px BREITE */
  
  .tlo_header_navi {
    display: none;
    visibility: hidden;
  }
  
}

@media screen and (max-width: 1124px) {
  
  /* TREVERER-LOGISTIK - WELCOME - MAXIMAL 1124px BREITE */
  
  .tlo_welcome h1 {
    font-size: 28px;
  }
  
  .tlo_welcome h2 {
    font-size: 20px;
  }

}

@media screen and (max-width: 1024px) {
  
  /* TREVERER-LOGISTIK - MAIN - MAXIMAL 1024px BREITE */
  
  .tlo_l, .tlo_r {
    width: 100%;
  }

  /* TREVERER-LOGISTIK - INTRODUCTION - MAXIMAL 1024px BREITE */
  
  .tlo_introduction_l {
    border-top-left-radius: unset;
    border-bottom-right-radius: 12px;
    order: 2;
  }

  .tlo_introduction_r {
    border-top-left-radius: 12px;
    border-bottom-right-radius: unset;
    order: 1;
  }

  /* TREVERER-LOGISTIK - PARALLAX - MAXIMAL 1024px BREITE */
  
  .tlo_parallax {
    background-position: center right;
  }

  /* TREVERER-LOGISTIK - FOOTER - MAXIMAL 1024px BREITE */
  
  .tlo_footer_copy {
    padding: 82px 12px;
  }
  
}

@media screen and (max-width: 860px) {
  
  /* TREVERER-LOGISTIK - USP - MAXIMAL 860px BREITE */
  
  .tlo_usp_element {
    width: 48%;
  }
}

@media screen and (max-width: 760px) {
  
  /* TREVERER-LOGISTIK - WELCOME - MAXIMAL 760px BREITE */
  
  .tlo_welcome h1 {
    font-size: 24px;
    margin-right: 20px;
  }
  
  .tlo_welcome h2 {
    font-size: 20px;
    margin-left: 10px;
  }

  .tlo_about_parallax {
    background-position: left center;
  }

  .tlo_contact_parallax {
    background-position: left -100px center;
  }
  
  .tlo_parallax {
    background-position: right -240px center;
  }

}

@media screen and (max-width: 582px) {
  
  /* TREVERER-LOGISTIK - USP - MAXIMAL 582px BREITE */
  
  .tlo_usp_element {
    width: 100%;
  }
}