@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('/assets/fonts/SourceSansPro-Regular.woff'),
         url('/assets/fonts/SourceSansPro-Regular.woff2');
}

body {
    font-family: 'semplicitapro', sans-serif;
    color: rgb(95, 95, 95);
    overflow-x: hidden
}

/* Allgemeine Werte und Klassen */

.headline {
    color: rgb(63,63,63);
    font-size: 3rem;
    max-width: 65%;
    margin: auto;
}

.section-description {
    font-size: 1.25rem;
    max-width: 30%;
    margin: auto;
}

.headline-light {
    color: rgb(255, 255, 255);
    font-size: 3rem;
    max-width: 65%;
    margin: auto;
}

.section-description-light {
    font-size: 1.25rem;
    max-width: 30%;
    margin: auto;
    color: rgb(255,255,255) !important;
}

.section-description-light-contact {
    font-size: 1.25rem;
    max-width: 70%;
    margin: auto;
    color: rgb(255,255,255) !important;
}

.dark-grey {
    color: rgb(63,63,63);
}

.btn-primary-ohrenkino {
    border-radius: 30px;
    font-size: 0.7rem;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #00567B;
    border-color: #00567B;
    color: white;
}

.btn-primary-ohrenkino-invert {
    border-radius: 30px;
    font-size: 0.7rem;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    border-color: white;
    color: #00567B;
}

.btn-primary-ohrenkino:hover {
    background-color: #003d57;
    border-color: #003d57;
    color: white;
}

/* Hier starten die Elementbezogenen css-Werte */

header {
    background-image: url(/assets/img/ohrenkino-slider-bg-ohne-kreis.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 30, 0, 0.2); /* 30% Abdunklung */
  z-index: 0; /* unter den Text, über dem Bild */
}

.navbar {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: rgba(0,86,123,0);
    transition: background-color 1.5s ease;
    transition: padding-top 0.5s ease;
    transition: padding-bottom 0.5s ease;
}

.navbar.scrolled {
    background-color: rgba(0,86,123,0.9);
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-line {
    position: absolute;
    display: block;
    width: 100vw; /* calc(100% + (85vw - 100%));  Containerbreite auf volle Viewport-Breite strecken */
    margin-left: 0;  /* Startet am linken Rand des Containers */
    margin-top: 100px;
    transition: margin-left 0.3s ease;
    z-index: 1;
}

.nav-line.hidden {
  margin-left: 150%;
  pointer-events: none;
}

.navbar-nav .nav-link {
    padding: 0 1rem;         /* Abstand zwischen Menüpunkten */
    text-transform: uppercase; /* Wie im Mockup */
    font-weight: 500;
    color: white;
    z-index: 1;
    text-decoration: underline transparent;
    text-underline-offset: 7px; /* Abstand der Linie vom Text */
    text-decoration-thickness: 2px; /* etwas dickere Linie */
    transition: text-decoration 300ms ease;
}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active .nav-link.show {
  text-decoration: underline;
  text-underline-offset: 7px; /* Abstand der Linie vom Text */
  text-decoration-thickness: 2px; /* etwas dickere Linie */
  text-decoration-color: white;
}

@media (min-width: 992px) {
  /* Basiszustand: Menü ist sichtbar im DOM, aber versteckt via visibility/opacity/transform.
     Dadurch funktionieren Übergänge, ohne das mobile Verhalten zu beeinflussen. */
  .navbar .dropdown-menu {
    display: block;              /* notwendig, damit visibility/opacity greift */
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 0ms linear 200ms;
    margin-top: 0.5rem;          /* optischer Abstand unter dem Link */
    z-index: 1050;               /* über dem Content der Seite */
    background-color: #00567B;
  }

  /* Öffnen bei Hover oder Keyboard-Focus (Tab / Shift+Tab) */
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
  }

  /* Optional: Pfeil umdrehen, wenn offen (ästhetisch) */
  .navbar .dropdown:hover > .dropdown-toggle::after,
  .navbar .dropdown:focus-within > .dropdown-toggle::after {
    transform: rotate(180deg);
  }

  /* Stelle sicher, dass Dropdown-Menüs zügig über andere Elemente liegen */
  .navbar .dropdown-menu {
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border: none; /* falls du Bootstrap-Grenzen nicht willst */
  }

  .dropdown-item {
    color:white;
    transition: background-color 300ms ease;
  }

  .dropdown-item:hover {
    color:white;
    background-color: #017eb4;
  }

  .nav-link.show {
    color:white;
  }
}

.navbar-brand {
    color: white;
    z-index: 1;
}

.social-icons a {
    color: #fff;             /* Icon-Farbe */
    font-size: 1.2rem;       /* etwas größer */
}

.header-circle {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto; /* Proportional skalieren */
  z-index: 0; /* Hinter Inhalte legen */
}

.hero {
    position: relative;
    margin-top: 150px;
    z-index: 1;
}

.hero-img {
    width: 40%;
    margin-top: 55px;
}

.hero-subtitle {
    font-weight: 100;
    color: rgb(220,220,220);
}

.about-column > p {
    font-size: 1rem;
    margin-left: 30px;
    margin-right: 30px;
}

.about-line {
    position: relative;
    display: block;
    width: calc(100% + (85vw - 100%)); /* Containerbreite auf volle Viewport-Breite strecken */
    margin-left: 0;  /* Startet am linken Rand des Containers */
    margin-top: 80px;
    transition: margin-left 0.3s ease;
    z-index: 1;
}

.team-card-text {
    color: rgb(95, 95, 95);
    font-weight: 500;
}

.team-card-name {
    color: rgb(95, 95, 95);
    font-weight: 400;
    margin-bottom: 5px;
}

.team-card-position {
    color: rgb(95, 95, 95);
    font-weight: 300;
}


/* offer section */
.position-relative {
  position: relative;
}

.offer-trailer {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.mySwiper {
  overflow: hidden;        /* verhindert abgeschnittene Slides */
  padding: 7px 40px;         /* Platz für Pfeile */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Pfeile leicht außerhalb positionieren */
.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

/* Optional: Bei Mobile enger setzen */
@media (max-width: 768px) {
  .swiper-button-prev {
    left: 5px;
  }
  .swiper-button-next {
    right: 5px;
  }
}

.shadow-cards {
    box-shadow: 0px 2px 7px rgba(60,60,60,0.6);
}


/* Project Section */
.mySwiperProjects {
  overflow: hidden;
  padding: 7px 50px; /* Platz für Pfeile */
}

.mySwiperProjects .swiper-slide .card {
  transition: transform 0.3s ease;
}

.mySwiperProjects .swiper-slide .card:hover {
  transform: translateY(-5px);
}