/* FONTS  */

@font-face {font-family:'Inter';src:url('../fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face {font-family:'Inter';src:url('../fonts/interItalic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap;}
@font-face {font-family:'Roboto';src:url('../fonts/roboto.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap;}
@font-face {font-family:'Roboto';src: url('../fonts/robotoItalic.woff2') format('woff2');font-weight:300 900;font-style:italic;font-display:swap;}


/* GENERAL */

body{margin:0;font-family:'Inter','Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background-color:#0093dd}
section{padding: 5rem 2rem}
section[id] {scroll-margin-top:80px}
h1,h2,h3,h4,h5,h6{font-family:'Inter',sans-serif;margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.5;letter-spacing:-0.01em;}
h1{font-size:3.60rem}
h2{font-size:3.00rem}
h3{font-size:2.40rem}
h4{font-size:1.20rem}
h5{font-size:1.25rem}
h6{font-size:1.00rem}
p {font-size:1.15625rem;margin-top:0;margin-bottom:1rem;font-weight:300;line-height:1.5;color:#777;hyphens:auto;hyphenate-limit-chars:auto 3;hyphenate-limit-lines:4;-webkit-hyphens:auto;-webkit-hyphenate-limit-chars:auto 3;-webkit-hyphenate-limit-lines:4;-ms-hyphens:auto;-ms-hyphenate-limit-chars:auto 3;-ms-hyphenate-limit-lines:4}
ul p {font-size:1.15625rem}
a {color:#0093dd;text-decoration:none}
.mb-7 {margin-bottom:4.5rem}
.section-desc {font-size:1.25rem !important;padding:1.5rem}
.btn.btn-lg {font-size:1.2rem;font-weight:500;padding:8px 40px 12px}


/* NAVIGATION  */

nav {background-color:transparent;height:80px;transition:background-color 0.3s ease,box-shadow 0.3s ease;will-change:background-color,box-shadow}
nav .container {display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 12px;transition:padding-top 0.3s ease}
nav .navbar-brand {fill:#fff;transition:fill 0.3s ease}
nav .navbar-nav {display:flex;flex-direction:row;list-style:none;padding:0;margin:0;gap:clamp(0.5rem, 2vw, 3rem)}
nav .nav-link {display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:0.5px;text-decoration:none;position:relative;margin:0;transition:color 0.3s ease}
nav .nav-link:focus {color:#fff}
nav .nav-link:hover {color: #fff}
nav li:last-child {background-color:transparent;border:1px solid #fff;border-radius:45px;padding:0px 30px;margin-left:12px;transition:background-color 0.3s ease,border-color 0.3s ease}
nav li:last-child a {color:#fff !important;margin:0;transition:color 0.3s ease}
nav.scrolled {box-shadow:0 2px 3px rgb(96 96 96 / 0.1);background-color:#fff}
nav.scrolled .container {padding-top: 0}
nav.scrolled .navbar-brand {fill:#0093dd}
nav.scrolled .nav-link {color:#666}
nav.scrolled .nav-link:focus {color:#666}
nav.scrolled .nav-link:hover {color:#0093dd}
nav.scrolled li:last-child {background-color:#0093dd;border:1px solid #0093dd}
nav.scrolled li:last-child a {color:#fff !important}
#inmenulogo, .btn-close-menu {display:none}

/* HERO  */

#hero {padding:290px 0 190px;background:linear-gradient(45deg,#0082c9,#0093dd)}
.hero-title {color:#fff;font-size:clamp(2rem,7vw,6rem);line-height:1.15;font-weight:500;letter-spacing:-.5px}
.hero-desc {color:#fff;font-size:1.3rem;font-weight:500;margin:65px 0 100px}


/* ENGAGEMENT  */

#engagement{background-color:#fff}
#engagement .card {border:2px solid #e4e5e9;border-radius:10px;padding:45px 25px;margin:20px 0}
#engagement .card p {font-size:1.0625rem}
#engagement .card-title {padding: 20px 0}
#engagement i {font-size:4rem;color:#0093dd;margin-bottom:2rem}
#engagement ul li p {font-size: 1.0625rem}
.engagement-detail {padding-top:40px}
.engagement-detail h3 {color:#0093dd;display:block;letter-spacing:.5px;margin-bottom:20px}
.engagement-detail h4 {color:#757575;display:block;font-weight:500;letter-spacing:.5px;margin-bottom:35px}


/* INSPIRATION */

#inspiration h2, #inspiration p {color:#fff !important;text-align:center}
#inspiration p {font-size:1.0625rem}


/* FAQs */

#faqs{background-color:#fff}
#faqs .row.g-5 {margin-top:3rem}
#faqs .row.g-5 .col-lg-6 {margin-top:0}
#faqs .accordion-item {border:none}
#faqs .accordion-button {font-family:'Inter',sans-serif;margin:0;padding:1.5rem 0 1rem;font-weight:500;line-height:1.5;letter-spacing:-0.01em;font-size:1.15rem;--bs-accordion-btn-bg:#fff;--bs-accordion-active-bg:#fff;--bs-accordion-btn-focus-box-shadow:none}
#faqs .accordion-body {padding:0 1rem 0 0;margin-bottom:3rem}
#faqs .accordion-body p {font-size:1.0625rem}
#faqs .accordion-button:not(.collapsed) {color:inherit;box-shadow:none}
#faqs .accordion-button::after, .accordion-button:not(.collapsed)::after {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230093dd' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}


/* KONTAKT */

#kontakt {background:linear-gradient(45deg,#0082c9,#0093dd)}
#kontakt h2, #kontakt p {color:#fff !important;text-align:center}
#kontakt form {text-align: center}
#d-name, #d-mail, #d-tel, #d-msg, #kontakt label {width:60%;min-width:280px;margin:0 auto 15px}
#kontakt label {color:#fff}
#kontakt label a {color:#fff;text-decoration:underline}
#contactrequest-info {color:white;text-align:center;margin-top:1rem}

/* FOOTER */

#footer {background-color:#fff;padding:2rem}
#footer .contactPerson {margin:35px 1.5rem 0 0}
#footer .contact-role {color:#0093dd;font-size:0.85rem;line-height:1.2}
#footer .contact-name {color:#998da0;font-size:1rem;line-height:1.2;margin-top:12px}
#footer .contact-mail {color:#998da0;font-size:0.85rem;line-height:1.5}
#footer #address p {font-size:1.0625rem}
#footer img {border:1px solid #ddd;padding:3px;border-radius:4px}

/* ANIMATIONS  */

@keyframes fadeInLeft {from{opacity:0;transform:translate3d(-20%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight {from{opacity:0;transform:translate3d(20%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInTop {from{opacity:0;transform:translate3d(0,30%,0)}to{opacity:1;transform:none}}

.fade-in-left {opacity:0;transform:translate3d(-20%,0,0)}
.fade-in-right {opacity:0;transform:translate3d(20%,0,0)}
.fade-in-top {opacity:0;transform:translate3d(0,30%,0)}

.fade-in-left.appear {animation:fadeInLeft 1.5s ease-out forwards}
.fade-in-right.appear {animation:fadeInRight 1.5s ease-out forwards}
.fade-in-top.appear {animation:fadeInTop 1.5s ease-out forwards}

/* MODAL */
#privacyModal section {padding:1rem 3rem}
#privacyModal section p {font-size:1rem}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0093dd;
  --bs-btn-border-color: #0093dd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0079b6;
  --bs-btn-hover-border-color: #0079b6;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0079b6;
  --bs-btn-active-border-color: #0079b6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0093dd;
  --bs-btn-disabled-border-color: #0093dd;
  padding: 0.5rem 2rem;
  font-size: 0.9rem;
}


/* MEDIA QUERIES */

@media(max-width: 768px) {

  #inmenulogo {display:block}
.navbar-collapse.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display:none;
    background: linear-gradient(45deg,#0082c9,#0093dd);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
  }

  .btn-close-menu {
    position: absolute;
    display: block !important;
    padding: 0.25rem 0.75rem;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 2.5rem;
    color: #fff;
    background: none;
    z-index: 1100;
    cursor: pointer;
    line-height: 1;
    border: none;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .navbar-collapse.fullscreen-menu.show {
    display:flex;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  .navbar-nav {
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin-left: 0 !important;
  }

  .navbar-nav .nav-link {
    font-size: 1.1rem;
    color: #fff !important;
    transition: color 0.2s ease;
  }
  .navbar-toggler {
    border:none;
  }

  .navbar-toggler i {
    font-size: 1.5rem;
    color: white;
  }
  nav.scrolled .navbar-toggler i {
    color: #666;
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }

  .navbar-nav .nav-link:hover {
    color: #f0c040 !important;
  }

  /* Verhindert Scrollen im Hintergrund */
  body.nav-open {
    overflow: hidden;
  }
  nav li:last-child {
    background-color: transparent !important;
    border-color: transparent !important;
  }
}

@media (min-width: 1200px) {
  .container {max-width:1140px !important}
}