@charset "UTF-8";

.onlyprint {
  display: none;
  visibility: hidden;
}

@media all {
  .page-break	{
    display: none;
  }
}

@media print {
  .page-break	{
    display: block;
    page-break-before: always;
  }
}

.clear {
  clear:both;
}
.email span {
  display:none;
}
.nowrap {
  white-space:nowrap;
}
.wrap {
  white-space:normal;
}
.nobreak {
  word-wrap: normal;
}
.break {
  word-wrap: break-word;
}

:root {
  --primary-color: #5A4678;
  --secondary-color: #6E5A8C;
}

/* Variable Font - Normal (400) bis Bold (900) */
@font-face {
  font-family: 'Nunito';
  src: url('../font/Nunito-VariableFont_wght.ttf') format('truetype'); /* Variable Font */
  font-weight: 100 900; /* Unterstützt variable Gewichtungen */
  font-style: normal;
  font-optical-sizing: auto;
}

/* Variable Font - Italic */
@font-face {
  font-family: 'Nunito';
  src: url('../font/Nunito-Italic-VariableFont_wght.ttf') format('truetype'); /* Variable Font */
  font-weight: 100 900;
  font-style: italic;
  font-optical-sizing: auto;
}

/* Variable Font - Bold Italic */
@font-face {
  font-family: 'Nunito';
  src: url('/font/Nunito-Italic-VariableFont_wght.ttf') format('truetype'); /* Variable Font */
  font-weight: 700;
  font-style: italic;
  font-optical-sizing: auto;
}

/* Fallback - Normal (400) */
@font-face {
  font-family: 'Nunito';
  src: url('../font/static/Nunito-Regular.ttf') format('truetype'); /* Statisches TTF */
  font-weight: 400;
  font-style: normal;
}

/* Fallback - Bold (700) */
@font-face {
  font-family: 'Nunito';
  src: url('../font/static/Nunito-Bold.ttf') format('truetype'); /* Statisches TTF */
  font-weight: 700;
  font-style: normal;
}

/* Fallback - Italic (400) */
@font-face {
  font-family: 'Nunito';
  src: url('../font/static/Nunito-Italic.ttf') format('truetype'); /* Statisches TTF */
  font-weight: 400;
  font-style: italic;
}

/* Fallback - Bold Italic */
@font-face {
  font-family: 'Nunito';
  src: url('../font/static/Nunito-BoldItalic.ttf') format('truetype'); /* Statisches TTF */
  font-weight: 700;
  font-style: italic;
}

html {
  /* doch lieber via Javascript */
  /*scroll-padding-top: 90px;*/ /* Höhe der Navbar */
}

body {
  font-family: Nunito, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem;
  line-height: var(--bs-body-line-height);
  line-height: 1.6;
  text-align: var(--bs-body-text-align);
  color: var(--bs-body-color);
  color:black;
}

h1, h2, h3, h4, h5, h6 {
  font-weight:bold;
  font-weight:700;
}

/* Navbar Styles */
.navbar {
  background-color: transparent;
  transition: background-color 0.3s ease;
  padding: 1.5rem 0;
}

.navbar.scrolled {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 1rem 0;
}

.navbar-brand {
  display:none;
}

.navbar-brand.scrolled {
  display:block;
}

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

/* Default navbar styles */
.navbar {
  transition: all 0.3s ease;
  background-color: transparent;
}

/* Style for the collapsed menu background */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
  }

  .navbar.scrolled .navbar-collapse {
    background-color: white;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
  }


  .navbar .navbar-nav .nav-link {
    color: white !important;
    padding: 0.5rem 1rem;
  }

  .navbar.scrolled .navbar-nav .nav-link {
    color: black !important;
    padding: 0.5rem 1rem;
  }

  /* Style for dropdown in mobile view */
  .navbar .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 0.5rem;
  }

  .navbar .dropdown-item {
    color: white;
    padding: 0.5rem 1rem;
  }

  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
  }
}

/* Custom styles for navbar-toggler in default state */
.navbar .navbar-toggler {
  border-color: white;
}

.navbar.scrolled .navbar-toggler {
  border-color: black;
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown styles for desktop */
.navbar .dropdown-menu {
  background-color: rgba(0, 0, 0, 0.9);
  border: none;
  border-radius: 8px;
  margin-top: 0.5rem;
}

.navbar .dropdown-item {
  color: white;
  padding: 0.5rem 1rem;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Scrolled navbar dropdown styles */
.navbar.scrolled .dropdown-menu {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled .dropdown-item {
  color: #333;
}

.navbar.scrolled .dropdown-item:hover,
.navbar.scrolled .dropdown-item:focus {
  background-color: #f8f9fa;
  color: #333;
}

/* Keep existing .navbar.scrolled styles unchanged */
.navbar.scrolled {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled .nav-link {
  color: #333;
}



.section {
  padding: 4rem 0;
  /*scroll-margin-top: 70px;*/  /* Höhe der Navbar */
}
.jump-target {
  /*scroll-margin-top: 100px;*/  /* Höhe der Navbar */
}



/* Hero Section */
.hero-container {
  padding-top: 90px;
  padding-bottom: 40px;
}

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background: url('../img/head.png') center/cover;
  background-size: cover;
  background-position: center;
}

.hero .overlay {
  background: linear-gradient(135deg, rgba(200,190,190,0.95) 0%, rgba(115,65,138,0.7) 100%);
  background-color: rgba(200,190,190,0.3);
  background-color: rgba(128,128,128,0.3);
  backdrop-filter: blur(5px);
}

@media (max-width: 992px) {
  .hero {
    min-height: 100vh;
  }
}

.hero h1 {
  color:#5A4678;
  font-size:1.5rem
}

.floating-card {
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
}

.hero-text {
  font-size:1.6rem;
  font-family: Nunito, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
}

.logo {
  max-width: 300px;
  height: auto;
  margin-bottom: 2rem;
}

.nav-link {
  color: #F0F0F0;
  font-weight: 500;
}
.navbar.scrolled .nav-link {
  color: #333;
  font-weight: 500;
}



/* Services Section */
.service-tile {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  /* border:1px solid gray; */
  background-color: rgba(240,230,230,0.75);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.service-tile img {
  /*
  width: 100%;
  height: 100%;
  */
  height:350px;
  /*
  object-fit: cover;
  object-fit: contain;
  */
  transition: transform 0.5s ease;
  /* transform: scale(1.5); */
}

.service-tile:hover img {
  transform: scale(1.1);
}

.service-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*
  background: linear-gradient(rgba(90,70,120,0.7), rgba(90,70,120,0.9));
  background: linear-gradient(135deg, rgba(200,190,190,0.95) 0%, rgba(115,65,138,0.7) 100%);
  */
  background-color: rgba(200,190,190,0.95);
  opacity: 0;
  transition: opacity 0.3s ease;
}


.xyz {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  background-color: rgba(240,230,230,0.75);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
.xyz-img {
  height: 350px;
  transition: transform 0.5s ease;
}
.xyz-img:hover {
  transform: scale(1.1);
}
.xyz-overlay {
  position:absolute; 
  bottom:0; 
  left:0; 
  width:100%;
  background:rgba(90,70,120,0.9);
  color:#fff;
  /* background-color: rgba(200,190,190,0.95); */
  /* opacity: 1; */
  transition: opacity 0.3s ease;
}
.xyz-overlay:hover {
  /* opacity: 1; */
}



@media (max-width: 767.98px) {
  .service-tile {
    margin-bottom: 0;
    cursor: pointer;
  }
  .service-details.show {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .service-overlay {
    /*
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    */
  }
  .service-tile:hover .service-overlay {
    /*
    transform: translateY(0);
    */
  }
  .service-tile {
    cursor: pointer;
  }
}
#dynamicTextContainer {
  opacity: 0;
  max-height: 0; /* Kein Platz belegen */
  transition: opacity 0.4s ease, max-height 0.5s ease;
}
#dynamicTextContainer.show {
  opacity: 1;
  max-height: 2000px; /* Genug Platz für den Inhalt */
}



.module-lead {
  font-size:1.5rem;
}
.service-tile:hover::before {
  opacity: 1;
}

.service-content {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  padding: 2rem;
  color: white;
  transition: bottom 0.3s ease;
  background-color: var(--secondary-color);
}

.service-tile:hover .service-content {
  bottom: 0;
}

/* About Section */
.timeline-item {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 2rem;
  border-left: 2px solid var(--primary-color);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--primary-color);
}
.no-timeline-item {
  padding-left:2.15rem
}

/* Contact Section */
.contact-form {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Contact Form */
.application {
  display:none;
}
.response {
  display: none;
  margin-top: 0
  margin-left: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 2px 2px 1px 1px lightgray;
}
.response.success {
  border: 1px solid #4CAF50;
  background-color: #DFF2BF;
  color: #4CAF50;
}
.response.error {
  border: 1px solid #f44336;
  background-color: #FFBABA;
  color: #f44336;
}
.checkbox-container {
  display: flex;
  align-items: flex-start;
}
.checkbox-container input {
  margin-right: 1rem;
  margin-top: 0.3rem;
}
.checkbox-container label {
  flex: 1;
}

#link-consent-datenschutz {
  color:white;
}




/* Custom Buttons */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  padding: 0.8rem 2rem;
  border-radius: 8px;
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}




/* Footer */

footer {
  background-color: var(--primary-color);
  background-color: rgba(200,190,190,1);
  color: black;
}

footer a {
  /* padding:4px; */
  color:black;
  text-decoration: none;
  text-decoration:underline;
}

footer a:hover {
  color: rgba(255,255,255,0.8);
  background-color:black;
  color:white;
}

.btn-cognitio {
  width: 210px;
  padding: 10px;
}
.btn-cognitio-img {
  height: 50px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.lnk-cognitio {
  text-decoration:none;
}

.modal-dialog {
  max-width: 90%; /* gewünschte Breite - z.B. 80% des Viewports */
  width: auto; /* Überschreiben der Standardbreite */
  margin:auto;
}
@media (max-width: 768px) {
  .modal-dialog {
    max-width:98%;
  }
  .modal-body {
    padding: 0;
  }
}

#modal-impressum {
  font-size:1.2rem
}
#modal-datenschutz {
  z-index:10000;
  font-size:1.2rem
}
/* modal content scrollable*/
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
}


.custom-list ul {
  margin-left:0;
  padding-left:0;
  list-style-type: none; /* Standard-Aufzählung entfernen */
}
.custom-list li::before {
  /* content: "★"; */ /* Eigenes Symbol */
  content: "-"; /* Eigenes Symbol */
  /* color: gold; */
  margin-right: 10px;
}