@import "tailwindcss";

@font-face {
  font-family: "M-R";
  src: url("Fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "M-L";
  src: url("Fonts/Montserrat-Light.ttf") format("truetype");
}

@font-face {
  font-family: "M-B";
  src: url("Fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "B";
  src: url("Fonts/Barrio-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "RS-EL";
  src: url("Fonts/RobotoSlab-ExtraLight.ttf") format("truetype");
}

@font-face {
  font-family: "RS-L";
  src: url("Fonts/RobotoSlab-Light.ttf") format("truetype");
}

@font-face {
  font-family: "RS-T";
  src: url("Fonts/RobotoSlab-Thin.ttf") format("truetype");
}

body {
  background-color: #fffdef;
  height: auto;
  overflow-x: hidden;
}

/* Swiper Custom Styles */
.aboutSwiper {
  width: 100%;
  height: 100%;
}

/* Custom Navigation Buttons - unterhalb der Card */
.swiper-button-next-custom,
.swiper-button-prev-custom {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #ff5729;
  transition: all 0.3s ease;
}

.swiper-button-next-custom::after {
  content: "▶";
  font-size: 38px;
  font-weight: bold;
}

.swiper-button-prev-custom::after {
  content: "◀";
  font-size: 38px;
  font-weight: bold;
}

.aboutSwiper .swiper-pagination {
  bottom: 10px;
}

.aboutSwiper .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 1;
  width: 16px;
  height: 16px;
  margin: 5px;
}

.aboutSwiper .swiper-pagination-bullet-active {
  opacity: 1;
  height: 25px;
  width: 25px;
  background: #ff5729;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Optional: Smooth scroll mit besserer Kontrolle */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* Offset für Navigation bei Anchor-Links */
section[id] {
  scroll-margin-top: 120px;
  /* Größerer Abstand zur Navigation */
}

/* Spezifische Anpassungen für verschiedene Sektionen */
#angebote {
  scroll-margin-top: 150px;
  /* Extra Abstand für Angebote-Sektion */
}

#mindMetta {
  scroll-margin-top: 140px;
  /* Angepasster Abstand für Mind & Metta */
}

#ueber-mich {
  scroll-margin-top: 180px;
  /* Angepasster Abstand für Über Mich */
}

#medi {
  scroll-margin-top: 180px;
  /* Angepasster Abstand für Über Mich */
}

#retreat {
  scroll-margin-top: 160px;
  /* Angepasster Abstand für Über Mich */
}

#achtsamkeit {
  scroll-margin-top: 160px;
  /* Angepasster Abstand für Über Mich */
}

#kontakt {
  scroll-margin-top: 80px;
  /* Angepasster Abstand für Über Mich */
}

/* Verhindert horizontales Scrollen und fixiert Content auf Bildschirmbreite */
html,
body {
  overflow-x: hidden;
}

/* Ausnahme für Angebote-Sektion - erlaubt vertikales Überlaufen der Cards */
#angebote {
  overflow-x: hidden;
  overflow-y: visible;
}

#offers {
  overflow: visible;
}

/* Ausnahme für Über Mich Sektion - erlaubt Überlaufen der Swiper-Pfeile */
#ueber-mich {
  overflow-y: visible;
}

#ueber-mich .relative {
  overflow: visible;
}

/* Responsive Fixes für kleinere Bildschirme */
@media (max-width: 1025px) {
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Verhindert dass Nav-Elemente zu breit werden */
  nav {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Stellt sicher dass alle Container responsive bleiben */
  .w-screen {
    width: 100vw;
    max-width: 100vw;
  }
}

/* Zusätzliche Fixes für sehr kleine Bildschirme */
@media (max-width: 768px) {
  * {
    max-width: 100vw !important;
  }

  /* Stellt sicher dass Text nicht überläuft */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

.miniSchatten {
  box-shadow: 0px 10px 0px -3px #ff5729;
  overflow: visible;
}