body {
    font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    display: flex;
      flex-direction: column;
      background-color: #FFF;
      overflow-x: hidden;
}

button, a, .nav-link {
  touch-action: manipulation !important;
}

/* Navbar allgemein */
.custom-navbar {
  border-bottom: 1px solid #e5e5e5;
}

/* Mobile kompakter */
@media (max-width: 992px) {
  .custom-navbar {
    padding: 0.5rem 0rem !important;
  }


  .navbar-brand img {
    height: 22px;
  }

}

@media (max-width: 992px) {
  /* Trennlinie zwischen Header und Menü */
  .navbar-collapse {
    border-top: 1px solid #eee; /* dezente Linie */
    margin-top: 0.5rem;
    padding-top: 0.6rem;
  }

  /* Entfernt Bewegungen beim Öffnen/Schließen */
  .navbar-collapse,
  .navbar-collapse.show {
    transition: none !important;
  }

  /* Erster Menülink mit etwas Luft */
  .navbar-nav .nav-item:first-child .nav-link {
    margin-top: 0.25rem;
  }

  .navbar-nav .nav-link {
    font-size: 0.92rem;
  }
}


/* Menü-Button modern und schlicht */
.navbar-toggler {
  border: none;
  outline: none;
  padding: 0.15rem 0.1rem;
}

.custom-toggler-icon {
  display: inline-block;
  width: 22px;
  height: 2px;
  background-color: #333;
  position: relative;
  transition: all 0.3s ease;
}

.custom-toggler-icon::before,
.custom-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}

.custom-toggler-icon::before {
  top: -6px;
}

.custom-toggler-icon::after {
  top: 6px;
}

/* Optional: animierter Effekt, wenn geöffnet */
.navbar-toggler[aria-expanded="true"] .custom-toggler-icon {
  background-color: transparent;
}
.navbar-toggler[aria-expanded="true"] .custom-toggler-icon::before {
  transform: rotate(45deg);
  top: 0;
}
.navbar-toggler[aria-expanded="true"] .custom-toggler-icon::after {
  transform: rotate(-45deg);
  top: 0;
}


.content-section {
    display: none;
}
.content-section.active {
    display: block;
}

#landingpage {
    background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.1) 100%
  ), url("background.png") center/cover no-repeat;
    background-size: cover;         /* Bild skaliert, um den ganzen Bereich zu füllen */
    background-position: center;    /* Bild mittig ausrichten */
    background-repeat: no-repeat;   /* Bild nicht wiederholen */
   
    height: 100vh;

    display: flex;                  /* macht zentrierung möglich */
    align-items: center;        /* vertikal zentriert */
    justify-content: flex-start;/* linksbündig */
    text-align: left;           /* Text linksbündig */
    padding-left: 5%;           /* Abstand vom linken Rand */
}

#landingpage .container {
    max-width: 550px;               /* begrenzt Textbreite */
    margin-left: 0;   /* Überschreibt Bootstrap-Zentrierung */
    margin-right: auto;
    color: #FFF;
}

#landingpage h1 {
    font-weight: bold;
    font-size: 3.5rem;
    color: #fff;
}

#landingpage h2 {
    font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
}

@media (max-width: 768px) {
   #landingpage {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.422) 100%
  ), url("background.png") center/cover no-repeat;
   }

  #landingpage {
    /* Zeige auf Mobil einen anderen Bildausschnitt */
    background-position: 40% center; /* 40% = leicht nach links verschoben */
  }
}
/* --- Mobile Optimierung --- */
@media (max-width: 768px) {
  #navbarNav .user-menu {
    display: none;
  }
  .user-menu {
    touch-action: manipulation !important;
  }


  #landingpage {
    padding: 20px 0 60px;
  }

  #landingpage .container {
    padding: 0 1rem;
  }

  #landingpage h1 {
    font-size: 3rem;
  }

  #landingpage h2  {
    font-size: 2rem;
    color: #bbb;
  }

  #landingpage p {
    font-size: 1rem !important;
    line-height: 1.6;
  }

  #landingpage .btn {
    font-size: 1rem;
    width: 100%; /* Vollbreite auf Handy */
  }

  /* BADGE */
  #landingpage h4  {
    margin-bottom: 5px;
    font-size: 1rem;
  }
}

.highlight {
  background-color: #e63946; /* kräftiges Rot – kannst du anpassen */
  color: #fff;              /* weiße Schrift */
  padding: 0em 0.2em 0.1em 0.2em;     /* etwas Innenabstand */
  border-radius: 0.3em;     /* leicht abgerundet, moderner Look */
  font-weight: bold;
}

.shine-btn {
  position: relative;
  overflow: hidden;
  background-color: #05349D;
  border: none;
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shine-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.2), rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  transform: skewX(-25deg);
}

.shine-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(5, 52, 157, 0.4);
}

.shine-btn:hover::before {
  animation: shine 1.2s ease-in-out;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}


section p,
section ul li {
  font-size: 1.1rem;       /* gleiche Schriftgröße */
  line-height: 1.6;        /* gleiche Zeilenhöhe */
}
section ul li span {
  font-size: inherit;      /* falls du <span> verwendest */
}




#register input {
    outline: none;
    -webkit-appearance: none;
    box-shadow: none !important;
}
#register input:focus {
    border-color: #000;
}
.error {
    color: #dc3545;
}

.section {
    padding-top: 100px;
    background-color: #FFF;
    border-top: 1px solid #ddd;
    padding-bottom: 40px;
    flex: 1;
}
.section h1 {
  padding-bottom: 20px;
}

@media (max-width: 1400px) {
  .section {
    padding-top: 70px;      /* etwas weniger Abstand oben */
  }
}

.section p  {
    font-size: 18px;
}
.section img {
    width: 100%;
    height: auto;
}
.section img.resize {
    width: auto;
    height: auto;
}
.section h2, h3, h4, h5 {
    padding: 1em 0;
}
.section h2 {
    padding-top: 0;
}
.section ol.nav {
    color: var(--bs-nav-link-color);
    list-style: decimal !important;
    padding-left: 2rem;
  }
.section li {
    font-size: 18px;
}

/* Stichpunkte in Dienstelistung DIV */
.list-unstyled {
    margin-left: 1em;
}
.fa-circle-check {
    font-size: 1em;       /* Größe wie Text */
    flex-shrink: 0;       /* verhindert, dass das Icon kleiner gedrückt wird */
    color: #000;          /* schwarz, wie im Screenshot */
    padding: 0;
    margin-top: 0.3em !important;
}

/* LOGIN */
.header {
    margin: 20px 0px;
}
.header a {
    cursor: pointer;
}

#login_div {
    max-width: 400px;
    margin: 0 10px;
    margin-top: -50px;
}
#login hr {
}
#login a {
    text-decoration: underline !important;
}
#login h3 {
    font-weight: 700;
}
#login .header {
    text-align: center;
}
#login .body {
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px;
}
.password-toggle-icon {
    cursor: pointer;
  }

.invalid-feedback {

}

.highlight {
    /*display: inline;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    padding: 10px;
    line-height: 1.7;
    border-radius: 5px;*/
}

 .h-90 {
    height: 70%;
 }

 .wave {
    position: absolute;
    right: 0;
    top: 0;
    height: 100vh;
    width: auto;
    z-index: -1;
    
 }

 /* FOOTER */
footer {
background-color: #fff;
border-top: 1px solid #ddd;
width: 100%;
}

.footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

.footer-column {
flex: 1 1 200px;
margin: 20px;
}

.footer-column h4 {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
text-transform: uppercase;
}

.footer-column ul {
list-style: none;
padding: 0;
}

.footer-column li {
margin-bottom: 8px;
}

.footer-column a {
text-decoration: none;
color: #222;
font-size: 14px;
}

.footer-right {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
}

.social-icons {
margin: 10px 0;
}

.social-icons img {
height: 20px;
margin-right: 10px;
}

.app-badges img {
height: 40px;
margin-right: 10px;
margin-top: 10px;
}

.footer-bottom {
border-top: 1px solid #ddd;
font-size: 13px;
}


.language-switch {
display: flex;
align-items: center;
}

.language-switch img {
height: 18px;
margin-right: 5px;
}

@media (max-width: 768px) {
.footer-container {
    flex-direction: column;
}

.footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
}

.footer-right {
    align-items: center;
}
}

.social-icons {
display: flex;
gap: 15px;
}

.social-icons a {
color: #000;
font-size: 24px;
transition: color 0.3s ease;
}

.social-icons a:hover {
color: #0073e6; /* Farbe beim Hover – kannst du ändern */
}


/* --- Footer Accordion Mobile --- */
.footer-toggle {
  display: none; /* nur mobil sichtbar */
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-weight: bold;
  color: #222;
  font-size: 14px;
  padding: 10px 0;
  position: relative;
  cursor: pointer;
}

.footer-arrow {
  position: absolute;
  right: 0;
  transition: transform 0.3s ease;
  font-size: 16px;
}

/* Standardzustand: Desktop */
.footer-toggle {
  display: none;
}

.footer-column h4 {
  display: block;
}

/* Mobile Darstellung */
@media (max-width: 768px) {
  .footer-wrapper {
    flex-direction: column;
    padding: 10px 20px;

  }

  .footer-column {
    margin: 0;
    border-bottom: 1px solid #eee;
  }

  .footer-column h4 {
    display: none; /* Titel verstecken */
  }

  .footer-toggle {
    display: block; /* Mobiler Button sichtbar */
  }

  /* Liste standardmäßig versteckt */
  .footer-column ul {
    display: none;
    margin: 0;
    padding: 10px 0;
  }

  /* Wenn aktiv: Liste sichtbar */
  .footer-column.active ul {
    display: block;
  }

  /* Pfeil dreht sich beim Öffnen */
  .footer-column.active .footer-arrow {
    transform: rotate(90deg);
  }

  .footer-bottom {
    text-align: center;
    flex-direction: column;
    gap: 10px;
  }

  .footer-right {
    align-items: center;
  }
}

@media (max-width: 768px) {
  .footer-column {
    flex: 1 1 100%;   /* volle Breite, keine Nebeneinander-Anordnung */

  }

  .footer-wrapper {
    padding: 10px 15px;
    padding-top: 0;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 5px;
    padding: 15px 0;
  }

  .social-icons {
    margin: 5px 0;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .zoom-img {
    transform: scale(1);
  }
}


.footer-topline {
    display: flex;
    flex-direction: row;
    width: 50%;
    justify-content: space-between;
  }
  .footer-center {
    margin-right: -80px;
  }

@media (max-width: 768px) {

  /* Zeile mit Logo + Copyright nebeneinander */
  .footer-topline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .footer-center {
    margin-right: 0px;
  }

  /* Sprache darunter zentriert */
  .language-switch {
    padding-top: 20px;
    justify-content: center;
  }
}





.user-menu {
    display: flex;
    justify-content: flex-end;
}
.user-menu-icon {
    width: 25px;
    height: 25px;
    padding: 15px;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    background-color: #000;
    /*olor: #0C2337;
    background-color: #FFF;*/
    border-radius: 100%;
    cursor: pointer;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}

.user-menu {
    display: flex;
    justify-content: flex-end;
}
.message-menu-icon {
    width: 20px;
    height: 20px;
    color: #000;
    cursor: pointer;
}
.list-group-item {
    z-index: 0 !important;
}

.dropdown-toggle::after {
    display: none;
}
.dropdown-menu {
    width: 250px;
    margin-right: 0px !important;
    border: 1px solid #d7dbe0;
    font-size: 1em;
    margin: 5px 0 !important;
    padding: 0 !important;

}
.dropdown-menu li:last-child a {
  border-bottom-left-radius: 0.375rem; /* entspricht .rounded-bottom-start in Bootstrap */
  border-bottom-right-radius: 0.375rem; /* entspricht .rounded-bottom-end */
}
.dropdown-menu h6 {
    padding: 10px 10px 10px 10px;
    margin: 0;
}
.dropdown-menu p {
    margin: 0;
    padding: 10px;
    font-size: 0.9em;
    font-color: #ddd;
}
.dropdown-menu li a {
    padding: 10px 20px;
}

.dropdown-header {
    font-size: 1em;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}
.dropdown-divider {
    margin: 0;
}