/*
    Woody - Creative Coming Soon HTML5 Template
    Version: 1.0.6
    Author: Mountain-Themes
    Author URL: https://themeforest.net/user/mountain-themes
    Woody © 2025. Design & Coded by Mountain-Themes.

    TABLE OF CONTENTS
    ---------------------------
     1. General
     2. Header
     3. Section About
     4. Section Services
     5. Section Team
     6. Section Contact
     7. Section Subscribe
     8. Footer
     9. Responsive CSS
*/

:root {
  --orange: #e74f00;
  --orange-light: #ff7900;
  --grey: #363636;
  --grey-light: #cecece;
}

 @font-face {
  font-family: "Kozuka";
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/webfonts/KozGoPr6N-Regular.otf') format('opentype')
 }

 @font-face {
  font-family: "Kozuka";
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/webfonts/KozGoPr6N-Bold.otf') format('opentype')
 }

/* ================================= */
/* :::::::::: 1. General ::::::::::: */
/* ================================= */

html, body {
  font-family: 'Kozuka', sans-serif;
  color: var(--grey);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	line-height: 25px;
  font-size: 13px;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.g-6,.gx-6 {
    --bs-gutter-x: 6rem
}

a {
	text-decoration: none !important;
	color: #000;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover {
	  text-decoration: none !important;
	  color: #ababab;
	  -webkit-transition: all 0.3s ease-in-out;
	  -moz-transition: all 0.3s ease-in-out;
	  -ms-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
	}

h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Kozuka', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: none;
}

h1, h2 {
  /* letter-spacing: 2px; */
}

p {
  font-size: medium;
}

#page-loader {
    background: white;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999;
} 

.loader-icon {
    background: repeat white;
    border-bottom: 4px solid white;
    border-left: 4px solid white;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
    border-right: 4px solid white;
    border-top: 4px solid white;
    height: 60px;
    left: 50%;
    margin: -20px 0 0 -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 60px;
}

.colored-border {
   border-top-color: var(--orange);
}

	.fa-spin {
		-webkit-animation: fa-spin 1.2s infinite linear;
		animation: fa-spin 1.2s infinite linear
	}
	
	@-webkit-keyframes fa-spin {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}
	
		100% {
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg)
		}
	}
	
	@keyframes fa-spin {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}
	
		100% {
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg)
		}
	}

.backstretch:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  background-repeat: repeat;
  z-index: 1;
}

.YTPOverlay:after {
 content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  background-repeat: repeat;
  z-index: 1;
}

.rain-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:   #8c9398;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #8c9398;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #8c9398;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:  #8c9398;
}


/* ================================= */
/* :::::::::: 2. Header :::::::::::: */
/* ================================= */

header {
  text-align: left;
  height: 60vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 6em;
}

.header-highlights {
  height: 0vh;
}

.video-outer {
  width: 100%;
  height: 60vh;
  margin: 0;
  padding: 0;
  position: relative;
  background-image: url('media/eaglesnest-img.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.video-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-inner iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;   /* 100vh * (16/9) for 16:9 aspect ratio */
  height: 60vh;
  min-width: 100vw;
  min-height: 56.25vw; /* 100vw * (9/16) */
  transform: translate(-50%, -50%);
  border: 0;
}

.video-inner video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100vh;
  min-width: 100vw;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: 0;
  pointer-events: none;
  background: transparent;
  z-index: 0;
}

.header-storyteller {
  background-image: url('../img/berchtesgaden-mit-watzmann-im-sommer.jpg');
}

.header-photo {
  background-image: url('../img/berchtesgaden-mit-watzmann-im-sommer.jpg');
}

.header-rain {
  background-image: url('../img/berchtesgaden-mit-watzmann-im-sommer.jpg');
}

.header-active {
  background-image: url('../img/bi-sommeraction-segway-6.jpg');
}

header .typed {
  font-size: 1.9em;
  color: #FFFFFF;
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Kozuka', sans-serif;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}

header .logo {
  margin-bottom: 30px;
}

header .logo img {
	position: relative;
  z-index: 2;
  max-width: 500px;
}

header .line {
  display: inline-block;
  width: 40px;
  height: 30px;
  margin:0 auto;
}


header p {
  font-size: 14px;
  color: #fff;
  word-spacing: 1px;
  line-height: 25px;
  position: relative;
  z-index: 2;
}


header .fa-clock-o {
  font-size: 31px;
  color: #FFFFFF;
  margin-right: 5px;
  display: block;
  margin-bottom: 10px;
}

header h3 {
  color: #FFFFFF;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 30px;
  font-family: 'Kozuka', sans-serif;
}

header h1  span {
  font-weight: 500;
}


header .mouse-wrapper {
  z-index: 999;
  position: absolute;
  bottom: 80px;
  left: auto;
}

header .mouse {
  position: relative;
  left: -20px;
  animation: wobbleArrow 1s ease-in-out 0s infinite alternate;
  -webkit-animation: wobbleArrow 1s ease-in-out 0s infinite alternate;
  -moz-animation: wobbleArrow 1s ease-in-out 0s infinite alternate;
  -o-animation: wobbleArrow 1s ease-in-out 0s infinite alternate;
}

header .mouse span {
	font-weight: 500;
	letter-spacing: 1px;
	text-align: left;
	position: relative;
	bottom: 20px;
	left: -1px;
	font-size: 1.3em;
	color: #fff;
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

header .mouse a {
	color: #fff;
    text-align: center;
    outline: none;
    display: flex;
    flex-direction: column;
}

header .mouse a i {
    font-size: 1.3em;
    font-weight: 700;
}

.intro-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 0px;
}

.intro-inner h4, .contact-inner h5 {
  margin: 0 0 20px 4rem;
  text-align: center;
}

.intro-inner h4::before {
  display: block;
  position: relative;
  content: '';
  right: 70px;
  top: 14px;
  height: 3px;
  width: 4rem;
  background-color: var(--orange);
}

.detail {
  display: flex;
  justify-content: center;
}

.detail-inner {
  display: flex;
  flex-direction: column;
  max-width: 80vw;
  text-align: center;
}

.ul-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tooltip-container a {
  color: var(--orange);
  font-weight: bold;
}

.tooltip-container a:hover {
  color: var(--orange-light);
}

.ul-list ul {
  font-size: 16px;
  text-align: left;
  list-style: disc;
  padding-left: 1.5em;
  margin: 0 auto;
}

.ul-list ol {
  font-size: 16px;
  text-align: left;
  list-style: none;
  padding-left: 1.5em;
  margin: 0 auto;
}

.ul-list ol li {
  list-style: auto;
  margin-top: 10px;
}

.ul-list ol li p {
  margin-top: 5px;
}

.detail-inner ul li {
  margin: 10px 0;
  list-style: disc;
}

.detail-inner p, .detail-inner ul {
  margin: 20px 0;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 20px;
}

.tooltip {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  background-color: white;
  color: var(--grey);
  text-align: center;
  border-radius: 15px;
  box-shadow: rgba(149, 157, 165, 0.623) 0px 1px 24px;

  display: flex;
  
  position: absolute;
  bottom: 125%; 
  left: 50%;
  transform: translateX(-50%);
  
  transition: opacity 0.3s;
  z-index: 10;
  pointer-events: auto;
}

.tooltip img {
  width: 200px;
  height: auto;
  border-radius: 15px 0 0 15px;
  object-fit: cover;
}

.tooltip-text {
  width: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  font-family: 'Kozuka';
  padding: 10px 20px;
  font-size: medium;
}

.tooltip-text strong {
  margin: 10px 0;
}

.tooltip-text a {
    color: white !important;
    width: 190px;
    background-color: var(--orange);
    border: 2px solid transparent;
    padding: 10px 2rem;
    margin: 16px 0 10px 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-align: center;
}

.tooltip-text a:hover {
  color: var(--orange) !important;
  background-color: white;
  border: 2px solid var(--orange);
}

.tooltip-container:hover .tooltip,
.tooltip:hover {
  visibility: visible;
  opacity: 1;
}

@media only screen and  (max-width: 540px) {
  .tooltip {
    flex-direction: column; 
    margin: 0 10vw;
  }

  .tooltip img {
    border-radius: 15px 15px 0 0;
    width: auto;
    height: 150px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .tooltip-container:focus-within .tooltip {
    visibility: visible;
    opacity: 1;
  }
  
  /* Link deaktivieren, solange Tooltip offen ist */
  .tooltip-container > a {
    pointer-events: none;
  }
  
  .tooltip-text a {
    pointer-events: auto;
  }
}


	@keyframes wobbleArrow {
		from {
			bottom: 40px;
		}
	
		to {
			bottom: 50px;
		}
	}
	
	@-webkit-keyframes wobbleArrow {
		from {
			bottom: 40px;
		}
	
		to {
			bottom: 50px;
		}
	}

  header #effect-box, header .video-box, header .image-box {
    position: absolute!important;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    top: 0;
}

.why::selection {
  background-color: var(--grey);
  color: white;
}

.why {
  display: flex;
  justify-content: center;
  background-color: var(--orange);
  color: white;
  padding: 50px 0;
  margin-top: 40px;
}

.why-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80vw;
}

.why h1 {
  margin-bottom: 30px;
}

.cta-btn {
  border: none;
  padding: 10px 3rem;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  margin-top: 20px;
}

.cta-btn:hover {
  padding: 10px 4rem;
}

.cta-btn-o {
  color: white;
  background-color: var(--orange);
}

.cta-btn-o:hover {
  color: var(--orange);
  background-color: white;
}

.cta-btn-w {
  color: var(--orange);
  background-color: white;
}

.cta-btn-w:hover {
  color: white;
  background-color: var(--orange-light);
}

.addons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px;
}

.addons-intro {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
  flex-direction: column;
  text-align: center;
  max-width: 80vw;
}

.addons-intro h1 {
  margin-bottom: 15px;
}

.addons-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
  gap: 20px;
}

.addon {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* makes space for dots */
  border-radius: 24px;
  flex: 1 1 200px;
  width: 350px;
  min-width: 350px;
  max-width: 350px; /* corrected max-width to match width */
  height: auto;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  overflow: hidden; /* optional, in case content spills */
}

.addon-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 275px;
}

.addon-icon img {
  height: 90px;
}

.addon-text {
  padding: 0 20px 40px 20px;
  /* height: 40%; */
}

.dots {
  /* display: flex; */
  display: none;
  padding: 0 0 30px 20px;
}

.dot-active {
  background-color: var(--grey);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-inactive {
  background-color: var(--grey-light);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ================================= */
/* :::::: 12. Responsive CSS ::::::: */
/* ================================= */

@media only screen and  (max-width: 1036px) {

    .section-contact input[type="submit"], .section-subscribe button, .section-subscribe input[type=text] {
    width: 100%;
    }

    .section-subscribe input[type=text] {
        margin-bottom: 15px;
    }

    .mouse-wrapper {
        display: none!important;
    }
}

@media only screen and  (max-width: 768px) {

    header .logo img {
    height: auto;
    margin: 10px;
    }

}

@media only screen and  (max-width: 540px) {

  .lightbox {
    flex-direction: column;
  }

  .nav-btn {
    top: auto;
    bottom: 80px;
    transform: none;
  }

  .nav-btn.right {
    /* top: 270px; */
    margin-left: 0 !important;
  }

  .nav-btn.left {
    margin-right: 0 !important;
  }

  .intro-inner {
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .intro-inner h4 {
    text-align: center;
    margin: 0 20px 50px 20px;
  }

  .intro-inner h4::before {
    right: -50%;
    top: 3.5rem;
    transform: translate(-50%, 0);
  }

  .intro-inner .hl::before {
    top: 5rem;
  }

  header {
    text-align: center;
 }
  footer {
    text-align: center;
 }
  header .countdown {
    margin-left: 0;
 }

}

@keyframes carousel-animate {
  0% {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(200%) scale(0.7);
  }
  3%,
  14.2857142857% {
    visibility: visible;
    pointer-events: auto;
    opacity: 0.8;
    transform: translateX(100%) scale(0.9);
  }
  17.2857142857%,
  28.5714285714% {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  31.5714285714%,
  42.8571428571% {
    visibility: visible;
    pointer-events: auto;
    opacity: 0.8;
    transform: translateX(-100%) scale(0.9);
  }
  45.8571428571% {
    visibility: visible;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-200%) scale(0.9);
  }
  100% {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-200%) scale(0.7);
  }
}

:root {
  --light: 0;
  --max-width-post: 420px;

  --primary: hsl(64, 77%, 79%);
  --bg: hsl(284, 70%, 23%);
  --text-primary: hsl(0, 0%, 97%);

  --font-size-sm: clamp(0.7rem, 0.91vw + 0.47rem, 1.2rem);
  --font-size-base: clamp(0.88rem, 1.14vw + 0.59rem, 1.5rem);
  --font-size-md: clamp(1.09rem, 1.42vw + 0.74rem, 1.88rem);
  --font-size-lg: clamp(1.37rem, 1.78vw + 0.92rem, 2.34rem);
  --font-size-xl: clamp(1.71rem, 2.22vw + 1.15rem, 2.93rem);
  --font-size-xxl: clamp(2.14rem, 2.77vw + 1.44rem, 3.66rem);
  --font-size-xxxl: clamp(2.67rem, 3.47vw + 1.8rem, 4.58rem);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

@supports (height: 100dvh) {
  body {
    height: 100dvh;
  }
}

.container-carousel {
  --container-padding-horizontal: 32px;
  position: relative;
  display: grid;
  place-items: center;
  height: 55%;
  margin-bottom: 15vh;
  margin-top: 5vh;
}

.carousel {
  pointer-events: auto;
  padding-block-start: 67px;
  padding-block-end: max(24px, calc(29px + var(--font-size-md)));
  perspective: 100px;
  width: 100%;
}

@media (max-width: 568px) {
  .carousel {
    padding-block-end: 52px;
  }

  .carousel__wrapper {
    height: 60vh !important;
  }

  .container-carousel {
    margin-top: 0 !important;
    margin-bottom: 10vh !important;
  }
}

.carousel__wrapper {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  height: 70vh;
}

.carousel .item {
  position: absolute;
  max-width: 418px;
  height: 100%;
  margin-inline: var(--container-padding-horizontal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  animation: carousel-animate 27s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-fill-mode: backwards;
}

@media (max-width: 568px) {
  .carousel .item {
    margin-inline: calc(var(--container-padding-horizontal) + 1px);
  }
}

/* Manually add delays for each of 7 items */
.carousel .item:nth-child(1) {
  animation-delay: calc(3.85714s * -1); /* slide -2 */
}
.carousel .item:nth-child(2) {
  animation-delay: 0s;
}
.carousel .item:nth-child(3) {
  animation-delay: 3.85714s;
}
.carousel .item:nth-child(4) {
  animation-delay: 7.71429s;
}
.carousel .item:nth-child(5) {
  animation-delay: 11.57143s;
}
.carousel .item:nth-child(6) {
  animation-delay: 15.42857s;
}
.carousel .item:nth-child(7) {
  animation-delay: 19.28571s;
}

.carousel .item:last-child {
  animation-delay: calc(-3.85714s * 2);
}

.carousel img {
  max-width: 100%;
  object-fit: cover;
  height: 100%;
  cursor: pointer;
}

.item,
.item img {
  position: relative;
  z-index: 1;
}

.lightbox {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* position: relative; */
}

#lightbox-img {
  transition: opacity 0.3s ease;
  opacity: 1;
}

#lightbox-img.fade-out {
  opacity: 0;
}

.lightbox img {
  max-width: 87vw;
  max-height: 90vh;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  border-radius: 8px;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  transition: all 0.5s ease;
}

.close-btn:hover {
  color: var(--orange);
}

.nav-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white !important;
  background-image: none !important;
  border: none;
  transition: all 0.2s ease-in-out;
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.nav-btn.right {
  right: 20px;
}

.nav-btn.left {
  left: 20px;
}

.nav-btn i {
  color: var(--orange);
}

.nav-btn:hover {
  cursor: pointer;
  background-color: var(--orange) !important;
}

.nav-btn:hover i {
  color: white;
}

.nav-btn:focus {
  outline: none;
  box-shadow: 0 0 0 5px var(--grey);
}