/* Apply a CSS reset to remove default margin and padding */
/* body {

} */

/* Apply box-sizing: border-box to include padding and border in total width and height */
/* * {
  box-sizing: border-box;
} */

/* Set the base font size for responsive scaling */
body, html {
margin: 0;
  font-size: 16px; /* Adjust this value to your desired base font size */
}


.background-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/pergament2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.2) contrast(1) saturate(1.5); /* Adjust the value to change the brightness (0.1 to 2 or any other suitable value) */
  z-index: -1; /* Place the background behind other elements */
  opacity: 0.9;
}

header {
  text-align: center;
  position: relative; /* Set the header as a positioning context */
  padding-top: 0.625em; /* Add padding to the top to prevent text from being cut off (0.625em is equivalent to 10px based on the base font size) */
  z-index: 2; /* Ensure the header content is above the background image */
}

header h1 {
  font-family: 'Nermola', serif;
  font-size: 4.875em; /* Equivalent to 78px (78 / 16 = 4.875) */
  margin-bottom: 0.45em; /* Equivalent to 20px (20 / 16 = 1.25) */
  color: #800032;
}

header h2 {
  font-family: 'MONTSERRAT', serif;
  font-size: 2.55em; /* Equivalent to 28px (28 / 16 = 1.75) */
  margin-bottom: 1.5em; /* Equivalent to 40px (40 / 16 = 2.5) */
  color: #722f37;
}
	/* Header-Stil für Tablet und Desktop (Screen-Breite kleiner als 48em) */
	@media screen and (min-width: 600px) {
		header h2 {
  			font-size: 2.20em;
			}
		}
		@media screen and (min-width: 990px) {
		header h2 {
  			font-size: 1.75em;
			}
		}

/* ------------------------------------LOGO--------------------------------------------- */

header img {
  width: 20.5em;
  position: relative;
  max-width: 100%;
  margin-top: 3.4375em;
  margin-bottom: 0.625em;
  cursor: pointer; /* Make the logo a pointer on hover */
  filter: brightness(0.95);
}

/* Hide the logo initially */
#logo {
  opacity: 0;
  transition: opacity 1s;
}

/* Show the logo after a delay */
#logo {
  animation: fadeIn 5s 0s forwards;
}

/* Hover pulse effect */
#logo:hover {
  transform: scale(1.1);    /* vergrößern, wenn mit cursor drüber */
}

/* Logo fade-in animation */
@keyframes fadeIn {
  to {
    opacity: 175;
  }
}


/* ----------------------------BLÄTTER RECHTS UND LINKS-------------------------------------- */

/* Position the left image */
.left-leaf {
  position: absolute;
  top: 0;
    /* left: -18.75em;    Adjust this value to position the image off-screen initially */
  max-width: 100%;
  height: 40em; /*  Set the maximum height if needed */
  opacity: 0; /* Hide the image initially */
  animation: fadeIn 6s 1s forwards; /* Apply fadeIn and slideFromLeft animations , slideFromLeft 5s 0s forwards*/
}

/* Position the right image */
.right-leaf {
  position: absolute;
  top: 0;
  right: 0;
    /* right: -18.75em;    Adjust this value to position the image off-screen initially */
  max-width: 100%;
  height: 40em; /*  Set the maximum height if needed */
  opacity: 0; /* Hide the image initially */
  animation: fadeIn 6s 1s forwards; /* Apply fadeIn and slideFromRight animations , slideFromRight 5s 0s forwards*/
}

	/* Header-Stil für Desktop */
		@media screen and (min-width: 990px) {
			.left-leaf {
				height: 60em;
			}
			.right-leaf {
				height: 60em;
			}}

/* Common fadeIn animation for both images */
@keyframes fadeIn {
  to {
    opacity: 0.9;
  }}

/* Animation to slide in the left image from the left */
@keyframes slideFromLeft {
  to {
    left: 0;
  }}  /* Adjust this value to set the final position of the left image */

/* Animation to slide in the right image from the right */
@keyframes slideFromRight {
  to {
    right: 0;
  }}  /* Adjust this value to set the final position of the right image */

/* --------------------------------MENU ICON-------------------------------------------- */


#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 9em;			/* Hamburger Position  */
  right: 7.5em;
  width: 7.3em;      /* Hamburger Größe  */
  height: 5.3em;	 /* Hamburger Größe  */
  cursor: pointer;
  z-index: 2;
}
@media screen and (min-width: 600px) {
		.menu__btn {
  			  top: 8em;			/* Hamburger Position  */
  			  right: 4em;
  		      width: 4.0em;      /* Hamburger Größe  */
  			  height: 4.0em;	 /* Hamburger Größe  */
			}}
@media screen and (min-width: 990px) {
		.menu__btn {
  			  top: 8em;			/* Hamburger Position  */
  			  right: 4.4em;
  		      width: 2.8em;      /* Hamburger Größe  */
  			  height: 4.1em;	 /* Hamburger Größe  */
			}}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 0.60em;
  background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);   /* Hamburger Farbe  */
     /* background-color: #800032;  */
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -55px;
}
.menu__btn > span::after {
  content: '';
  top: 55px;
}

@media screen and (min-width: 700px) {
	.menu__btn > span {
  		content: '';
  		top: -15px;
        height: 0.43em;
	}
    .menu__btn > span::before {
  		content: '';
  		top: -15px;
        height: 0.43em;
	}
	.menu__btn > span::after {
  		content: '';
  		top: 15px;
        height: 0.43em;
	}
		}
@media screen and (min-width: 990px) {
 	.menu__btn > span {
  		content: '';
  		top: -11px;
        height: 0.33em;
	}
	.menu__btn > span::before {
  		content: '';
  		top: -11px;
        height: 0.33em;
	}
	.menu__btn > span::after {
  		content: '';
  		top: 11px;
        height: 0.33em;
	}}

.menu__box {
  display: block;
  position: fixed;
  top: 0px;
  left: -100%;
  width: 20em;
  margin: 0;
  padding: 60px 0;
  list-style: none;
  background-image: url('../img/pergament.jpg'); /* Set the path to the background image */
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0 0.4em 0.4em 0;
  transition-duration: .25s;
	z-index: 2; 		/* Stelle sicher, dass die Box vor anderen Elementen angezeigt wird */
}

@media screen and (min-width: 900px) {
	.menu__box {
		background-size: unset;
	}}

.menu__item {
  display: block;
  padding: 0.75em 1.5em;
  color: #800032;   /* Schriftfarbe Menüpunkte  */
  font-size: 2.4em;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
@media screen and (min-width: 700px) {
	.menu__item {
  		font-size: 1.9em;
	}}
@media screen and (min-width: 990px) {
	.menu__item {
  		font-size: 1.5em;
	}}

.menu__item:hover {
  background-color: #e8be5a;
}

/* -----------------------------TEXT CONTAINER---------------------------------------- */

/* Create a container for the text content */
.text-container {
	padding-left: 2em;
    padding-right: 2em;
  	text-align: justify; /* Apply "Blocksatz" (justified alignment) to the text */
  	z-index: 1; /* Ensure the text is above the background image */
  	padding-bottom: 5.1em;
 	overflow-y: auto; /* Allow vertical scrolling when content exceeds the viewport */
	font-size: 1.9em;
}

@media screen and (min-width: 700px) {
	.text-container {
  		padding-left: 4em;
  		padding-right: 4em;
		padding-bottom: 7.1em;
		font-size: 1.7em;
		}}
@media screen and (min-width: 1100px) {
	.text-container {
  		padding-left: 11em;
  		padding-right: 11em;
		padding-bottom: 5.1em;
		font-size: 1.3em;
		}}

body {
  position: relative; /* Ensure proper stacking of body content */
 /*  z-index: 1; Set the z-index of the body above the background */
  /*  overflow-y: auto; /* Allow vertical scrolling when content exceeds the viewport */
}

body p {
  font-family: 'Nermola', serif;
   /* margin: 0 auto; */   /* abstände zwischen den absätzen */
  font-weight: 550;
  color: #333;
}

/* --------------------------------SLIDESHOW CONTAINER-------------------------------------- */

.slideshow-container {
    max-width: 60em;
    position: relative;
    margin: 0 auto; /* Center the slideshow horizontally */
}

/* Center the images horizontally and vertically */
.mySlides img {
    display: block;
    margin: 0 auto;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -1.375em;
    padding: 1em;
    color: #800032;
    font-weight: bold;
    font-size: 1.725em;
    transition: 0.6s ease;
    border-radius: 0.1875em 0 0 0.1875em;
  /*user-select: none;*/
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 0 0.1875em 0.1875em 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 0.9575em;
    width: 0.9575em;
    margin: 0 1.25em;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #800032;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    .slideshow-container {
        max-width: 90%; /* Adjust the container width for smaller screens */
        display: grid;
        place-items: center; /* Center the slideshow vertically and horizontally */
        }
    .mySlides {
        max-width: 100%; /* Ensure the images fill the container width */
        }
    .prev, .next {
        top: unset;
        bottom: 10px; /* Position the buttons at the bottom of the container */
        }
    .dot {
        margin: 9px; /* Add some spacing between the dots */
}}
/* ------------------------------ KONTAKT ---------------------------------------- */

.contact-container {
        margin:3em 5em 5em 5em;
        text-align: justify;
		font-size: 1.6em;
		font-weight: 400;
    }

@media screen and (min-width: 990px) {
  .contact-container {
	  margin:2em 15em 9em 15em;
	  font-size: 1.3em;
      }}

.kontaktformular {
	text-align: center;
	font-family: 'Nermola', serif;
  /*  font-size: 1.3125em;  */
    font-weight: 550;
    color: #333;
    margin-bottom: 5em;
    padding-top: 3.1em;
}

.kontaktform {
	text-align: center;
}

/* ------------------------------FOOTER---------------------------------------- */

footer {
    padding: 0.6em 3em 2em 3em;
    z-index: 3; /* Ensure the footer content is above the background image */
    }
    .oben {
	/*  position: relative;*/
        display: block;
        font-size: 1.3em;
        /* align-items: center; */
    }
    .social-container{
        font-size: 2.1em;
    }
    .unten {
        font-family: 'MONTSERRAT', sans-serif;
        font-size: 1.4em;
        color: #333;
        display: block;
        text-align: center;
        text-decoration: none;
    }
        .footer-right {
        font-family: 'MONTSERRAT', sans-serif;
        font-size: 1.1em;
        color: #333;
    }
@media screen and (min-width: 750px) {
	footer {
		font-size: 1.2em;
    }
    .oben {
	/*  position: relative;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
@media screen and (min-width: 1100px) {
	footer {
		font-size: 1.3em;
}}


/* Remove the default underline style for anchor elements */
a {
  text-decoration: none;
  color: #333;
  /*   #3366BB  (Link Blau)  */
}
/* Remove the dot before the "@" symbol in the anchor element */
a::before {
  content: none;
}

                /* ------------INSTAGRAM LOGO-------------------- */

/* Define a base font size that affects the entire logo */
:root {
  --base-font-size: 4px; /* You can adjust this value to change the whole logo size (default war 3) */
}

.social-container {
  display: flex;
  align-items: center;
  gap: calc(2.4 * var(--base-font-size)); /* Add some gap between the elements */
}

.follow-text, .instagram-handle {
  font-family: 'Nermola', serif;
  font-size: calc(8 * var(--base-font-size)); /* Use the base font size for consistent sizing */
  background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /*  color: #800032;  */
  margin: 0;
}
p.follow-text {
    display: none;
}
 @media only screen and (min-width: 400px) {
p.follow-text {
    display: initial;
}}

/* Adjust the size of the @staudenrauscherwein handle */
.instagram-handle {
  font-family: 'Nermola', serif;
  font-size: calc(8 * var(--base-font-size)); /* You can adjust this value for the handle's size */
  /* color: #722f37; */
  margin: 0;
  font-weight: bold;
}


/* main box of insta */
.insta {
  width: calc(8.8 * var(--base-font-size));
  height: calc(8.8 * var(--base-font-size));
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-radius: calc(2.0 * var(--base-font-size));
  display: grid;
  place-items: center;
}

/* innerbox in insta box */
.innerbox {
  width: calc(7.5 * var(--base-font-size));
  height: calc(7.5 * var(--base-font-size));
  border: calc(0.8 * var(--base-font-size)) solid #fff;
  border-radius: calc(2 * var(--base-font-size));
  display: grid;
  place-items: center;
  position: relative;
}

/* center circle of insta */
.innerbox::before {
  content: '';
  width: calc(2.3 * var(--base-font-size));
  height: calc(2.3 * var(--base-font-size));
  border: calc(0.7 * var(--base-font-size)) solid #fff;
  border-radius: 50%;
  background: transparent;
  position: absolute;
}

/* top right circle of insta */
.innerbox::after {
  content: '';
  width: calc(0.4 * var(--base-font-size));
  height: calc(0.4 * var(--base-font-size));
  border: calc(0.1 * var(--base-font-size)) solid #fff;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: calc(0.8 * var(--base-font-size));
  right: calc(1 * var(--base-font-size));
}

/* ----------------------------- IMAGES ---------------------------------------- */

img.i1 {
	float: right;
	margin: 0 0 0.4em 0.4em;
}

img.i2 {
	float: left;
	margin: 0 0.4em 0.4em 0;
}

ul {
    padding-inline-start: unset;
}
.col-md-4 {
    padding-right: unset;
}

img.a1 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    width: 90%;
}
@media screen and (min-width: 700px) {
		img.a1 {
  			width: 80%;
            margin-top: 1em;
            margin-bottom: 1em;
        }}
		@media screen and (min-width: 1100px) {
		img.a1 {
  			width: 65%;
        }}
img.a2 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
@media screen and (min-width: 700px) {
		img.a2 {
  			width: 35%;
        }}
		@media screen and (min-width: 1100px) {
		img.a2 {
  			width: 15%;
        }}
img.a3 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 88%;
}
@media screen and (min-width: 700px) {
		img.a3 {
  			width: 65%;
        }}
		@media screen and (min-width: 1100px) {
		img.a3 {
  			width: 35%;
        }}
img.a4 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}
@media screen and (min-width: 700px) {
		img.a4 {
  			width: 80%;
        }}
		@media screen and (min-width: 1100px) {
		img.a4 {
  			width: 70%;
        }}
img.a5 {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}
@media screen and (min-width: 700px) {
		img.a5 {
  			width: 80%;
        }}
		@media screen and (min-width: 1100px) {
		img.a5 {
  			width: 70%;
        }}
/* -----------------------------KONTAKT BUTTON---------------------------------------- */

/*
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*/
.btn-hover {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    height: 55px;
    display: block;
    text-align:center;
    margin-top: 7em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:5em;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

a > .btn-hover {
text-decoration: none;
color: #f7b500;
font-size: 1.15em;
}