/* ============================================================
   Responsive Styles for Bootstrap 5 & home slider positioning
   ============================================================ */

/* NAVIGATION: Ein-/Ausblenden der .navbar-collapse übernimmt Bootstrap 5 selbst.
   (Die frühere Regel .navbar-collapse{display:none} hat die Collapse-Animation zerstört.) */

@media (max-width: 767.98px) {
  .navbar-brand {
    margin-top: 0 !important;
  }
  .navbar-toggler {
    display: block !important;
    margin-top: 0 !important;
    border: none; /* Rand weg */
  }
}


/* ============================================================
   LG only (992px – 1199px)
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .col-md-4.portfolio-item {
    width: 33%;
  }


  h1 { font-size: 26px;}


}

#home-slider .slider-island {
  position: absolute;
  right: 20%;
  bottom: 0;
  top: 4em;
  width: 28%;
}


#home-slider .slider-ship {
  position: absolute;
  right: 70%;
  bottom: -3em;
  width: 8%;
}

#home-slider .small-island {
  position: absolute;
  right: 37%;
  bottom: -1em;
  width: 10%;
}

#home-slider .slider-birds2 {
  position: absolute;
  right: 30%;
  bottom: 20em;
}




/* ============================================================
   MD only (768px – 991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .col-sm-4.portfolio-item {
    width: 33%;
  }

  h1 {
    font-size: 25px;
  }

  #header .navbar-nav li {
    padding: 0 5px;
  }

}


/* ============================================================
   MD & down (max 1200px)
   ============================================================ */



/* ============================================================
   bis 991.98px (unter Bootstrap-Breakpoint lg)
   ============================================================ */
@media (max-width: 991.98px) {
  h1 {
    font-size: 22px;
  }

  #home-slider {
    margin-top: 30px;
  }

  /* Blog */
  .post-comment {
    padding-left: 0;
  }

  .single-blog.two-column .post-overlay {
    margin-top: 0;
  }
}


/* ============================================================
   bis 767.98px (unter Bootstrap-Breakpoint md)
   ============================================================ */
@media (max-width: 767.98px) {
  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 18px;
  }

  .padding {
    padding: 30px 0;
  }

  #header {
    padding: 10px 0 40px 0;
  }


  /* Navi */
  .navbar {
    margin-top: 10px;
    padding: 0 15px;
  }

  .navbar-toggler {
    border-color: #82cde0;
    outline: none;
  }

  .navbar-toggler-icon {
  width: 1.8em;
  height: 1.8em;
  position: relative;
  display: inline-block;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(68,165,191,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

  .navbar-toggler:focus-visible,
  .navbar-toggler:hover {
    background: #82cde0;
  }

  .navbar-toggler:focus .navbar-toggler-icon,
  .navbar-toggler:hover .navbar-toggler-icon {
    background-color: #fff;
  }

  .navbar-collapse {
    border-top: 0;
  }


/* Burger-Icon sichtbar und blau */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #44a5bf; /* dein Blau */
  transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
  top: 0;
}

.navbar-toggler-icon div {
  top: 50%;
  transform: translateY(-50%);
}

.navbar-toggler-icon::after {
  bottom: 0;
}


  /* Socials */
  .social-icons {
    margin-top: 10px;
    text-align: center;
  }

  .social-icons ul li {
    display: inline-block;
    padding: 0 5px;
  }

  /* Slider */
  #home-slider {
    margin-top: 50px;
  }

  /* Blog */
  .post-comment .pull-left img {
    margin-right: 15px;
  }
}


/* ============================================================
   Extra small (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  .navbar-brand {
    margin-top: 0 !important;
  }

  h1 {
    font-size: 18px;
  }

  h2 {
    font-size: 16px;
  }

  





  /* 404 page */
  #error-page {
    padding: 40px 20px;
  }

  #error-page h2 {
    font-size: 22px;
  }

  .btn-error {
    font-size: 12px;
    padding: 10px 15px;
  }
}


/* Burger-Icon in Eisblau */
.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(130,205,224,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}



/* ============================================================
   HOME-SLIDER – Szene skaliert auf ALLEN Bildschirmgrößen gleichmäßig
   ------------------------------------------------------------
   Referenz ist die Desktop-Ansicht: Container 1320 px breit, Szene 450 px hoch.
   Alle Positionen sind in % der Breite bzw. in cqw (1 cqw = 1 % der
   Szenenbreite) angegeben. Dadurch schrumpft bzw. wächst die komplette Szene
   wie ein Bild – Steg, Boote, Sonne, Rettungsring und Vögel behalten ihre
   Lage zueinander. Umrechnung: 1 px Desktop = 100 / 1320 cqw = 0.07576 cqw.
   ============================================================ */
#home-slider .main-slider {
  container-type: inline-size;   /* Bezugsgröße für cqw */
  padding-left: 0;                /* Bootstrap-Spaltenabstand weg: cqw = volle Szenenbreite */
  padding-right: 0;
  height: auto;
  padding-bottom: 34.091%;        /* 450 / 1320 → Seitenverhältnis der Szene */
}

/* vertikale Lage immer vom unteren Rand der Szene aus gemessen */
#home-slider .slider-jetty {       /* Desktop: top 390px */
  left: 18%;
  width: 18%;
  top: calc(100% - 4.545cqw);
  bottom: auto;
}

#home-slider .slider-boats {       /* Desktop: top 435px */
  left: 30%;
  right: auto;
  width: 13%;
  top: calc(100% - 1.136cqw);
  bottom: auto;
}

#home-slider .slider-sun {         /* Desktop: bottom 300px */
  right: 70%;
  bottom: 22.727cqw;
  top: auto;
  /* --nw = Originalbreite des Bildes, setzt main.js. Ohne JS bleibt Originalgröße. */
  width: calc(var(--nw) * 100cqw / 1320);
}

#home-slider .slider-lifebuoy {    /* Desktop: bottom -15px */
  left: -7%;
  /* nie weiter nach links als bis zum Bildschirmrand */
  left: max(-7%, calc((100cqw - 100vw) / 2 + 4px));
  width: 5%;
  bottom: -1.136cqw;
  top: auto;
}

#home-slider .slider-birds {       /* Desktop: bottom 150px */
  right: 15%;
  left: auto;
  width: 6%;
  bottom: 11.364cqw;
  top: auto;
}

/* Text: ab 1200 px wie gehabt links in der Szene, mitskalierend */
@media (min-width: 1200px) {
  #home-slider .slide-text {
    top: 3.788cqw;                  /* Desktop: 50px */
    left: 0;
    width: 34.091%;                 /* Desktop: 450px */
  }
  #home-slider h1 {
    margin-top: 7.576cqw;           /* Desktop: 100px */
  }
}

/* Unter 1200 px wäre die Szene zu klein für den Text:
   Text steht zentriert ÜBER der Szene, die Szene folgt darunter. */
@media (max-width: 1199.98px) {
  #home-slider .slide-text {
    position: static;
    width: auto;
    text-align: center;
    padding-bottom: 20px;
  }
  #home-slider h1 {
    margin-top: 0;
    margin-bottom: 15px;
  }
  #home-slider .btn-common {
    margin-top: 10px;
  }
}