@charset "utf-8";


/* CSS Document */

@import url("https://use.typekit.net/rtc3bvp.css"); 
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');


/* CSS VARIABLEN */

		a {
			text-decoration: none;
			
			}

							
		:root {
   			--dark-grey: #232323; 
			--light-grey: #e9e5e1;
			--white-smoke: #F6F4ED;
			--white-smoke-light: #FCFAF8;
			--smoke-light: #ECE7D9;
			--smoke-air: #F1EDE2;
			--smoke: #E1DCCB;
    		--white: white;
    		--black: black;
    		--abrunden: 3rem; 
			scroll-padding-top: 17vh;
		}

/* CSS RESET (keine vordefinierten Ränder)*/
				
	* {
			padding:0;
			margin:0;
			box-sizing:border-box; 
	}

		
		html {
			font-size: clamp(14px, 1.2vw, 18px);
			max-width: 100%;
			overflow-x: hidden;
			scroll-behavior: smooth;
		}



		body {
			 color: black;
			 font-family: "Open Sans", sans-serif;
			 margin: 0;
			 padding: 0;
			 padding-top: clamp(96px, 17vh, 160px);
			 overflow-x: hidden;
		
		}


/* CONTAINER */
		#container {
			max-width: 100vw;
			overflow-x: hidden;
			margin: 0 auto;
			background-color: var(--white-smoke);
			
		}



/* HEADER */
		header {
			position: fixed;
			top: 0;
			left: 0;
			min-width: 100%;
			z-index: 1000;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			background-color: var(--black);
		
  			min-height: clamp(96px, 17vh, 160px);

			opacity: 95%;
			font-weight: 300;
			font-size: 1.3rem;
			padding: 1.5rem 2rem;
			box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
			}

	
		header img {   
			position:absolute;     
    		max-width:15vw; 
			height:auto;
			top:15%;
			left:2%;
			z-index: 1010;
			
		
		}

	/* HERO SECTION */
		.hero {
		  	position: relative;
		  	min-height: 100vh;
		  	margin: 0;
		  	overflow: hidden;

		  	background-image: url("images/guestdesk_hero_3.jpg");
		  	background-repeat: no-repeat;
		  	background-size: cover;
		  	background-position: center;

		  	display: flex;
		  	align-items: center;
		  	justify-content: center;

		}

		/* Center text + button together */

		.hero_content {
			transform: translateY(-3rem);
		  	text-align: center;
		  	max-width: 70%;
		  	z-index: 2;

		  	display: flex;
		  	flex-direction: column;  
		  	align-items: center;
		  	gap: 5rem;             
		}


		.hero_content {
		  min-height: 70vh;
		  justify-content: center;
		}
		.hero_content h1 {
		  	font-size: clamp(2.8rem, 5vw, 4.8rem);
		  	font-weight: 300;                 /* lighter = more modern */
		  	line-height: 1.15;
		  	letter-spacing: 0.02em;
		  	color: #fff;
		}

		.hero_content h1 span {
		 	 font-weight: 500;
		}

		.hero::before {
		 content: "";
		  position: absolute;
		  inset: 0;
		  background: -webkit-linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.15));
		  background: -o-linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.15));
		  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.15));;
		  z-index: 1;
		}



/* CALL TO ACTION BUTTON*/

		.cta_button_hero {
		  background-color: white;
		  color: black;
		  position:relative;
		  padding: 1rem 3.5rem; /* wider button */
		  border-radius: var(--abrunden);

		  text-decoration: none;
		  font-weight: 400;
		  letter-spacing: 0.03em;

		  transition: all 0.3s ease;
		}


		.cta_button_hero:hover {
		  background-color: black;
		  color: white;
		}


		.cta_button_packages {
		  	position: absolute;
		  	top: 70%;
		  	right: 5%;
		  	width: 90px;
		  	height: 90px;
		  	font-size: 0.8rem;
		  	font-weight: 500;
		  	color: black;
		  	border-radius: 50%;
		    background: linear-gradient(to top, var(--smoke) 50%, var(--white-smoke) 50%);
		    background-size: 100% 200%;
		    background-position: bottom;
		    overflow: hidden;
		    text-align: center;
		    text-decoration: none;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    z-index: 5;
		    animation: shiver 0.6s infinite;
		  }



		@keyframes shiver {
		    0% { transform: translate(-50%, -50%) rotate(0deg); }
		    25% { transform: translate(-50%, -50%) rotate(5deg); }
		    50% { transform: translate(-50%, -50%) rotate(0deg); }
		    75% { transform: translate(-50%, -50%) rotate(-5deg); }
		    100% { transform: translate(-50%, -50%) rotate(0deg); }
		}
  

		.cta_button_packages:hover {
		  background-position: top;
		}


		
		.cta_button {
			background-color:white;
			color:black;
			border:1px solid black;
			padding:1rem;
			margin:2rem auto;
			border-radius:var(--abrunden);
			display:inline-block; /*damit es zu einem block element wird */
			text-decoration:none;
			transition:all 0.3s ease-in-out;
				
		}
				
		.cta_button:hover{
		   	background-color: var(--white-smoke-light);
			background-color:black;
   			color: white;
		}
		
		.cta_button:active {
    		transform: scale(0.95); 
		}

		.cta_button:link {
			transition:all ease-in-out 0.2s;
		}


		.button-row {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
	
		}

		.button-row-button {
			min-width: 10%; 
			border-radius:var(--abrunden);
			border:0.5px solid var(--dark-grey);
			text-align: center;
			padding: 0.6rem;	
			margin: 0 4rem 8rem 0;
			color: var(--black);
			text-decoration: none;
			font-size: 1rem;
			font-weight: 400;
			transition: all 0.3s ease-in-out;
		}

		.button-row-button:hover {
			color:white;
			background-color:var(--black);
		}
	


/* FADE IN PHOTOS - SCROLL FADE IN */
		
		.scroll_fade_in {
			  opacity: 0;
			  transform: scale(0.8);
			  transition: opacity 1s ease-out, transform 1s ease-out;
		}

		.scroll_fade_in.visible {
			  opacity: 1;
			  transform: scale(1);
		}





/* TYPOGRAPHY */
		
		p {
			 font-family: "Open Sans", sans-serif;
			 font-size: clamp(1.2rem, 2.5vw, 1.3rem);
			 font-optical-sizing: auto;
			 font-weight: 200;
			 font-style: normal;
			color: var(--white);
		}

		ul {
			 font-family: "Open Sans", sans-serif;
			 font-size: clamp(0.9rem, 2.5vw, 1rem);
			 font-optical-sizing: auto;
			 font-weight: 200;
			 font-style: normal;
			color: var(--white);
		}
	
		h1 {
			font-family:"Open Sans", sans-serif;
  			font-size: clamp(1.5rem, 10vw, 3.8rem);
			font-optical-sizing:auto;
  			font-weight: 400;
  			font-style: normal;
			color: var(--white);
	
		}


		h2 {
			font-family: "Playfair Display", serif;
  			font-size: clamp(3rem, 10vw, 4.3rem);
			font-optical-sizing:auto;
  			font-weight: 400;
  			font-style: normal;
			color: var(--black);
		}

		
	
		h3 {
			font-family: "Open Sans", sans-serif;
  			font-size:3rem;
			font-optical-sizing:auto;
  			font-weight: 200;
  			font-style: normal;
			color: var(--black);
		}


	
		h4 {
			font-family: "Open Sans", sans-serif;
  			font-size: clamp(3.5rem, 12vw, 12rem);
			font-optical-sizing:auto;
  			font-weight: 600;
  			font-style: normal;
			color: var(--white);
			line-height:1.1;
			margin-bottom:2rem;
		}
	
		h5 {
			font-family: "Open Sans", sans-serif;
  			font-size:4rem;
			font-optical-sizing:auto;
  			font-weight: 400;
  			font-style: normal;
			color: var(--black);
		}

		h6 {
			font-family: "Playfair Display", serif;
  			font-size:3rem;
			font-optical-sizing:auto;
  			font-weight: 400;
  			font-style: normal;
			color: var(--white);
		}


		h7 {
			font-family: "Playfair Display", serif;
  			font-size:2rem;
			font-optical-sizing:auto;
  			font-weight: 300;
  			font-style: normal;
			color: var(--white);
		}

		h8 {
			font-family: "Open Sans", sans-serif;;
  			font-size:1.8rem;
			font-optical-sizing:auto;
  			font-weight: 200;
  			font-style: normal;
			color: var(--white);
		}
		

			

/* NAVIGATION */


		nav {
			text-align: right;
			padding:0 2rem 0 0;
						
		}
		
		nav a {
			text-decoration: none;
    		color:white;
			padding:1.5rem;
		}
		
		nav a:link {
    		color:white;
   	 		transition: color 0.5s ease-in-out;
		}

		nav a:visited {
  			color:white;
		
		}



		nav a:hover {
    		color:hotpink;
			transition:color 0.3s ease-in-out;
	
		}



	

/* HAMBURGER*/

		.hamburger {
   			display: none;
    		font-size: 2rem;
			font-weight: 100;
    		cursor: pointer;
    		color: var(--white);
    		position: absolute;
			align-items: center;
    		right: 20px;
       		z-index: 1000;
		}

		.close_hamburger_menu {
    		display: none;
    		font-size: 1rem;
			color: var(--white);
    		position: absolute;
    		cursor: pointer;
		}



/* TO TOP BUTTON */		
		#to_top {
			position: fixed;
			right: 2rem;
			bottom: 2rem;
			background-color: var(--smoke);
			color: white;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 2rem;
			text-decoration: none;
			z-index: 999;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease;
		}

		#to_top.visible {
			opacity: 0.90;
			visibility: visible;
			pointer-events: auto;
		}

		.to_top_arrow {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}

		.to_top_arrow img {
			width: 40px;
			height: 40px;
			object-fit: contain;
			display: block;
			margin-left:4px;
		}

/* TEXT ALIGNEMENT */

		.intro_text {
			text-align:center;
			padding:2rem 2rem 4rem 2rem;
		}

		.intro_content {
   			max-width: 80%;  
    		margin: 0 auto;
		}


		.intro_text h2 {
      		margin:3rem 0 3rem 0;
		}

		.intro_text h3 {
      		margin-bottom: 2rem;
		}

		.intro_text h4 {
      		margin-bottom: 3rem;
		}

/* VORDEFINIERTERE CSS HELFER */
		
		.grossbuchstaben {
			text-transform: uppercase;
			padding-bottom: 1rem;
		}
		
		
		.zentriert {
			display:flex;
			justify-content: flex-start;
			align-items: center;
		}

		.flex_umkehren {
			flex-direction:row-reverse;
		}

/* KACHELN */

		.kacheln {
			display:flex;
			flex-wrap:wrap;
			min-height:90vh;
		
		}

		.kacheln article {
			width:50%;
			aspect-ratio:1/1; /*quadratisch*/
						
		}

			
		.box_webdesign {
			background-color:var(--black);
			}

			
		.box_webshop {
			background-color:var(--black);
			}

		.box_produktfotografie {
			background-color:var(--black);
			}

		.box_about {
			background-color:none;
	
		}

		figure {
    		width: 50%;
	  			   		
		}

		figure.service {
			height:70vh;

		}
	
		.img_webdesign {
			width:100%;
			height:100%;
			object-fit:cover;
			object-position:center;
					
		
		}

		.img_webshop {
			width:100%;
			height:100%;
			object-fit:cover;
			
	
		}

		.img_about {
			width: 85%;
			height: 85%;
			height: auto;
			display: block;
			margin: 3rem auto;
		}
		


		.text_inhalt {
			width: 50%;
			padding:3rem;
			text-align:left;
		
			
		}



	
/* SLIDER KACHELN */


		.slider {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			height:auto;

		}

		.slider-wrapper {
			background: none;
			padding: 4rem 0;
			display: flex;
			justify-content: center;

		}

	

		.slider-content {

			flex-grow: 1;
			overflow: hidden;
			max-width: 100%;
			margin: 0 auto;
		}

		


		.slider img {
			width:100%;
			object-fit:cover;
		  	height: auto;
		  	border-radius: 0;
		   	margin: 0 auto; /* centers the image */
		}



		.slide {
			min-width: 100%;
			object-fit: cover;
			display: none;
		
		}

		.slide.active {
		  	display: block;
		}

		.slider_button {
			position:absolute;
			color:white;
			font-size:2rem;
			top: 50%;
			transform: translateY(-50%);
			border: none;
			padding: 1rem;
			margin: 1rem;
			cursor: pointer;
			z-index: 1;
			background-color: transparent;
		}

		.slider_button.prev {
		  	left: 12px;
		}

		.slider_button.next {
		  	right: 12px;
		}


/* STOERER */

		.stoerer {
			height:15vh;
			background-color:var(--black);
			background-attachement: fixed;
			background-size: cover;
			
		}

		.stoerer_klein {
			height:8vh;
			background-color:var(--black);
			background-attachement: fixed;
			background-size: cover;
			
		}
			



/* TEXT ANIMATION */

		.reveal-text span {
		    opacity: 0;
		    transform: translateY(30px);
		    display: inline-block;
		    animation: fadeUp 2s ease-out forwards; /* slower and smooth */
		    animation-delay: var(--delay, 0s);
		    color: var(--light-grey);
		}

		@keyframes fadeUp {
		  0% {
			opacity: 0;
			transform: translateY(50px);
			color: var(--light-grey);
		  }
		  100% {
			opacity: 1;
			transform: translateY(0);
			color: var(--white);
			filter: none;
		  }
		}


/* FOOTER */

		footer {
   			display: flex;
   			justify-content: space-between;
    		align-items: center;
    		padding: 3rem;
    		font-weight: 200;
    		font-size: 1.2rem;
    		width: 100%;
    		min-height:25vh;
   			background-color: var(--black);
    		transition: color 0.5s ease-in-out;
    		color: var(--white);
		}

		footer .footer_links footer .footer_mitte {
   			display: flex;
    		flex-direction: column;
    		justify-content: flex-start;
    		align-items: flex-start;
		 
		}

		.footer_mitte {
			text-align: left;
	
		}

		.footer_rechts {
			text-align: right;
		}


		footer p {
   			color: var(--white);
    		font-size: 1.2rem;
		}

	
		footer h6 {
   			color: var(--white);
		
		}

		footer a {
   			color: var(--white);
			margin:auto;
   		}

		footer a:link {
    		color: var(--white);
   			transition: all ease-in-out 0.2s;
		}

		footer a:hover {
   			font-style: italic;
    		transition: all ease-in-out 0.2s;
		}
	
	
		.cta_button_footer {
   			border:1px solid white;
			color: var(--white);
   			padding: 1rem;
   			margin: 2rem auto;
    		border-radius: var(--abrunden);
    		display: inline-block; /* Makes it behave like a block element */
    		text-decoration: none;
    		transition: all 0.5s ease-in-out;
		}


		.cta_button_footer:hover {
    		background-color: var(--light-grey);  /* Correct variable name */
   			font-style: normal;
   			color: black;
		}


		.cta_button_footer:link {
   			transition: all ease-in-out 0.3s;
		}

/* KONTAKTFORMULAR */


			.contact-section {
			  background: black;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  padding: 6rem 1.5rem;
			}


			.auth-layout {
			  min-height: calc(100vh - 17vh);
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  padding: 3rem 1.5rem;
			}
			


		#kontaktformular {
		  	background: var(--white-smoke-light);
			border-radius: 1rem;
			padding: 3rem;
			max-width: 700px;
			width: 100%;
			box-shadow: 0 30px 80px rgba(0,0,0,0.45);
 
		}

		#kontaktformular h5, #kontaktformular p {
		    margin-bottom: 3rem;
		    text-align: center;
			color:var(--black);
		}



		input, select, textarea {
		    padding: 1rem;
		    font-size: 1rem;
		    border: 1px solid black;
		    border-radius: 0.3rem;
		    margin: 1rem 0 2rem;
		    width: 100%; 
		    box-sizing: border-box; 
		}

		textarea { 
		    height: 250px;
		    font-size: 1rem;
		}

		.checkbox-label {
			display: inline-flex;
		    align-items: center; /* Center text vertically with the checkbox */
		    gap: 0.8rem; /* Space between checkbox and text */
		    margin-bottom: 1rem;
		}


		input[type="checkbox"] {
			width: 1rem;
			height: 1rem;
			display: inline-block;
			accent-color: black;
			margin: 1rem;
		}

		/* Submit Button */
		input[type="submit"] {
		    -webkit-appearance: none;
		    appearance: none;
		    background-color: var(--dark-grey); 
		    color: white;
		    border: none;
		    border-radius: 0.3rem;
		    padding: 1rem;
		    font-size: 1rem;
		    cursor: pointer;
		    width: 100%; 
		    transition: background-color 0.3s ease-in-out;
		 }

		input[type="submit"]:hover {
		    background-color: black;
		    color: white;
		}


/* ACCORDION */


		#angebot-webdesign {
			padding: 5rem 2vw;
			margin-bottom: 4rem;
			background-color:var(--white-smoke-light);
			transition: transform 0.5s ease, border 0.5s ease;
		}

	
		#angebot-webdesign:hover {
    		transform: scale(0.98);
  			background-color:var(--white-smoke-light);
		}


		#angebot-webshop {
			padding: 5rem 2vw;
			margin-bottom: 4rem;
			background-color:var(--white-smoke-light);
			transition: transform 0.5s ease, border 0.5s ease;
			 
		}

		#angebot-webshop:hover {
    			transform: scale(0.98);
  			background-color:var(--white-smoke-light);
  		
		}

		#angebot-fotografie {
			padding: 5rem 2vw;
			margin-bottom: 2rem;
			background-color:var(--white-smoke-light);
			transition: transform 0.5s ease, border 0.5s ease;
		}

		#angebot-fotografie:hover {
			transform: scale(0.98);
  			background-color:var(--white-smoke-light);
		}

		
		.angebot-row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			align-items: center;
			margin-right: 6rem; 
		}


		/* ANGEBOT LINKS: Titel und Untertitel */
		.angebot-left {
		  	width: 30%;
		  	min-width: 280px;
			margin:2rem;
		}

		.angebot-left h3 {
			font-size: 3rem;
			font-weight: 300;
			color: var(--black);
		}

		.untertitel {
			font-size: 1.2rem;
			color: var(--black);
			line-height: 1.5;
			text-align: left;
		}

		/* ANGEBOT RECHTS: Accordion block */
		.angebot-right {
		    width: 65%;
		    max-width: 900px;
		}

		/* ACCORDION BASIS */
		.accordion {
		 	min-width: 100%;
			
		}


		.accordion-item {
		    border-bottom: 1px solid black;
		    overflow: hidden;
		    border-radius: 0;
		}

		.accordion-header {
		    min-width: 100%;
		    background-color: var(--white);
		    border: none;
		    padding: 1.2rem 1rem;
		    font-size: 1.2rem;
		    text-align: left;
		    cursor: pointer;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    color: var(--dark-grey);
		    transition: background 0.3s ease;
		}

		.accordion-header:hover {
		    background-color: var(--light-grey);
		}

		.accordion-title {
		    flex: 1;
		   	font-size: 1.5rem;
		}

		.accordion-icon {
			font-weight: bold;
			font-size: 1.5rem;
			transition: transform 0.3s ease;
		}

		.accordion-item.active .accordion-icon {
		  	color: var(--dark-grey);
		}

		.accordion-content {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.4s ease, opacity 0.3s ease;
			padding: 0 1rem;
			opacity: 0;
			background-color: var(--white-smoke-light);
			border-radius: 0;
		
		}

		.accordion-content p {
		    margin: 1rem 0;
		    font-size: 1.2rem;
		    color: var(--black);
		}

		.accordion-item.active .accordion-content {
		    max-height: 500px;
		    opacity: 1;
		    padding-bottom: 1rem;
		}

		.accordion-item.active .accordion-icon {
		    content: "–";
		    transform: rotate(0deg);
		}

		.accordion-item.active .accordion-header {
		    background-color: var(--white-smoke-light);
			
		}

		.scroll_fade_in {
		    opacity: 0;
		    transform: scale(0.9);
		    transition: all 0.8s ease-out;
		}

		.scroll_fade_in.visible {
		    opacity: 1;
		    transform: scale(1);
		}


/* PAKETE/PREISE PANELS */
		.pakete-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 3rem;
			justify-content: center;
		}

		.panel {
			background-color: var(--white-smoke-light);
			border: 1px solid var(--light-grey);
			padding: 4rem;
			min-width: 30vw;
			min-height: 30vw;
			flex: 1 1 30%;
			text-align: left;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
			border-radius: 0.5rem;
			margin-top: 2rem;
			margin-bottom: 5rem;
			margin-left: 0.5rem;
			opacity: 0;
			transform: translateY(50px);
			transition: opacity 0.8s ease, transform 0.8s ease;
		}

		/* Slide-in effect */
		.panel.visible {
			opacity: 1;
			transform: translateY(0);
		}

	
		.panel:nth-child(1).visible {
			transition-delay: 0s;
		}

		.panel:nth-child(2).visible {
			transition-delay: 0.2s;
		}

		.panel:nth-child(3).visible {
			transition-delay: 0.4s;
		}

	

		.panel:hover {
			transform: scale(1.1);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		}

		.panel h3 {
			font-size: 2rem;
			margin-bottom: 1rem;
			color: var(--dark-grey);
		}

		.panel-untertitel {
			font-size: 1.2rem;
			font-weight: 400;
			color: var(--dark-grey);
			margin-top: 1.5rem;
			margin-bottom: 1rem;
		}	

		.panel-header {
			background-color: var(--white-smoke);
			margin: -3rem -2rem 1rem -2rem;
			padding: 1.7rem;
			border-radius: 0.5rem 0.5rem 0 0;
			font-size: 2.3rem;
			font-weight: 600;
		}

		.panel ul {
			list-style: none;
			padding: 0;
			color: var(--black);
			line-height: 1.8;
		}


/* FOTO CAROUSEL */


		carousel {
		  	position: relative;
			overflow: hidden;
			width: 100%;
			height: 100vh;
			margin-bottom: 8rem;
		}

		.carousel-track {
			display: flex;
			gap: 2rem;
			padding: 2rem;
			will-change: transform;
			transform: translateX(0);
			transition: transform 0.1s ease-out;
			overflow-x: auto; 
			overflow-y: hidden;
			scroll-snap-type: x mandatory;
 			scroll-behavior: smooth;
		}

		.carousel-image {
		   flex: 0 0 auto;
		   width: 50vw;
		   height: 80vh;
		   object-fit: cover;
		   border-radius: 1rem;
		   scroll-snap-align: center;
		}




/* DATENSCHUTZ */

		.datenschutz {
			max-width: 80%;
			margin: 0 auto;
			padding: 4rem 2rem;
			font-family: "Open Sans", sans-serif;
			font-size: 1rem;
			line-height: 1.6;
			color: var(--black);
		}


		.datenschutz h2{
			font-weight:500;
			font-size:2.5rem;
			margin-top:2rem;
			margin-bottom:1rem;
			color: var(--dark-grey);
		}

		.datenschutz h3 {
			font-weight: 400;
			font-size:1.5rem;
			margin-bottom: 0.5rem;
			color: var(--dark-grey);
		}

		.datenschutz p {
		  	margin-bottom: 1.2rem;
		}

		.datenschutz strong {
			font-weight: 400;
			color: var(--white);
		}

		.datenschutz ul,
		.datenschutz ol {
			margin-left: 1.5rem;
			margin-bottom: 2rem;
		}

		.datenschutz ul li::before {
			content: "\2713";
			margin-right: 0.5rem;
			color: var(--dark-grey);
		}

		.datenschutz address {
			font-style: normal;
			margin-bottom: 2rem;
		}


		#datenschutz-section {
			background-color: var(--white-smoke);
			padding: 4rem 0;
		}

/* IMPRESSUM */

		.impressum {
		    max-width: 80%;
		    margin: 0 auto;
			padding: 4rem 2rem;
		    line-height: 1.6;
		    color: #fff;
		    border-radius: 12px;
		}

		.impressum h2 {
		    margin-top: 1rem;
		    margin-bottom: 0.5rem;
			font-size:2.5rem;
		}

		.impressum h3{
			margin-top: 1.5rem;
		    margin-bottom: 0.5rem;
			font-size:1.5rem;
			font-weight:400;

		}


/* AUTO TYPE SECTION - ABOUT */

		#about-autotype {
			min-height:40vh;
		}


/* KONTAKT FORMULAR - RESPONSE */


body.form-response {
  background: var(--black);
  margin: 0;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 2rem;
}
.response-box {
  width: 100%;
  max-width: 680px;

  padding: 4.5rem 4rem;

  background: var(--white-smoke-light);
  border-radius: 1.8rem;

  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25);

  text-align: center;

  animation: fadeUpResponse 0.8s ease forwards;
}

/* Elegant divider */

/* Headline */
.response-box h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 1.5rem;
}

/* Text */
.response-box p {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--dark-grey);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

/* Logo */
.logo-response {
  width: 11rem;
  margin-bottom: 2.5rem;
  
}



/* RESPONSIVE DESIGN SCREEN 1200px*/

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

			
		header img {  
			position:absolute;  
			max-width:250px;
			z-index:1003;
			margin-left:1rem;
			align-content:center;
			height:auto;
			top:15%;
			left:2%;
				
		}
					
	
		
			
		.hero_titel {
			top: 20%; 
 			left: 50%; 
					
    	}
			
		.hero_titel h1 {
			font-size: 4.8rem;
      	 }
			
	
		nav {
			text-align: right;
			padding:0 4rem 0 0;
						
		}
		 /* header img {
			width: clamp(150px, 18vw, 220px);
		  }*/
	
			
      	/*.cta_button_hero {
       		position: absolute;
    		top: 70%;
    		left: 50%;
    			
         }*/
			
			
		.kacheln article {
			width:100%;
				
		}
			
		figure {
			width:100%;
		}
		
			
		.img_webdesign {
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}


		.img_webshop {
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}
	
		.img_fotografie {
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}
	
		.img_about{
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}
				
		.intro_text {
			text-align:center;
		}
			
		.text_inhalt {
			width: 100%;
	
		}
			
			
		.panel-header {
		    margin: -2rem -1rem 0.5rem -1rem; 
			font-size: 1.5rem;

		}
		.panel {
			max-width: 40vw;
			min-height: 40vw;
			padding: 3rem 2.5rem;
    	}

			
		.pakete-grid {
		    gap: 2rem;
					
		}
			
			
   		footer {
        	flex-direction: column;
        	align-items: center;
        	text-align: center;
        	height: auto;
        	padding: 2rem;
   	 	}

 
		.footer_links {
			width:100%;
			text-align: center;
			margin-bottom:1rem;
		}
		
		.footer_mitte {
			text-align: center;
			margin-bottom:1rem;
		}
		
		.footer_rechts {
			margin-top:1rem;
			margin-bottom:1rem;
			text-align: center;
		}
	
	  	.cta_button_footer {
       		 width: 60%;
       		 margin: 1rem auto;
    	}
    
		footer a {
			margin: 10px;
		}	
	
		.carousel-image {
			flex: 0 0 60%; /* a little bigger image */
			height: 70vh;
		}


/* RESPONSIVE DESIGN SCREEN  768px - 1024px */	
/* iPad portrait + landscape */
		@media (max-width: 1024px) and (min-width: 768px) {
  		
	
		header image {
			max-width:250px;
			z-index:1003;
			margin-left:1rem;
			position:absolute;  
			height:auto;
			top:15%;
			left:2%;
				
			
		}
			
		
			.hero_content {
    		min-height: 65vh;
    		gap: 3rem;
			transform: translateY(-1.5rem);
  			}
	
		.hero_titel {
			top: 20%; 
 			left: 50%; 
					
    	}
			
		.hero_titel h1 {
			font-size: 6rem;
      	 }
			
		/*.hero_content {
			max-width: 80%;
			gap: 3rem;
			transform: translateY(-1.5rem);
		}*/	
			
		/*.cta_button_hero {
		 	position: relative;
		  	top: auto;
		  	left: auto;
		  	transform: none;
		}*/	
			
		.kacheln {
  			min-height: auto;
			
		}

		.kacheln article {
  			aspect-ratio: auto;
		}	
			
			
/* RESPONSIVE DESIGN SCREEN 900px */

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

		header image {
			max-width:250px;
			z-index:1003;
			margin-left:1rem;
		
		}
	
				
		.hero_titel {
			position:absolute;
  			top:25%;
			left: 50%;
          	transform: translate(-50%);
        	text-align: center;
        
		}
 				 		
		.hero_titel h1 {
			font-size: 6rem;
       	
   		 }

		
      	/*.cta_button_hero {
       		position: absolute;
    		top: 75%;
    		left: 50%;
    		text-align: center;
			transform: translate(-50%);
	   		
         }*/
	
	
		 .cta_button {
        	font-size:1rem;
        	padding: 1rem;
   		}
	
		 .button-row-button {
			min-width: 15%;
			font-size: 1rem;
			margin: 0 3rem 3rem 3rem;
		  }
	
	
		.cta_button_packages {
			top: 70%;
			right: 2%;
			width: 80px;
			height: 80px;
			}
	
  					
			
		.hamburger {
       		display: block; 
			margin-right:1rem;
		    }
		
		.close_hamburger_menu {
    		display:contents;
				
		}
		
		nav {
    		display: none; 
    		position: absolute;
	
			top: 15px;
    		left: 0;
    		width: 100%;  
			height:auto;
    		border-radius: 0 !important;
  			background-color: var(--black) !important;
			padding: 1.2rem;
   		 	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    		text-align: right;
			z-index: 1000;
		}

		nav.active {
    		display: block;
	
		}


		nav a {
   		 	display: block;
    		padding: 0.5rem;
			font-size:16px;
			color: white;
}

    	
		}
   
		.kacheln {
  			flex-direction: column;
		}
			
		.kacheln article {
			 aspect-ratio: auto;
				
			}

			
		.text_inhalt, figure {
  			width: 100%;
  			padding: 2rem 1rem;
		}
	
	
		
		.img_webdesign {
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}


		.img_webshop {
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}
	
		.img_fotografie {
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}
	
		.img_about {
			width:100%;
			min-height:60vh;
			object-fit:cover;
		}
				
		.intro_text {
			text-align:center;
			align-content:center;
			padding-left:1rem;
			padding-right:1rem;
		}
	
		.video-container {
			padding: 1.5rem;
	 	}

		.video-container video {
			width: 100%;
			max-height: 100%;
		   }

		.play-button {
			width: 70px;
			height: 70px;
			font-size: 0.9rem;
			top: 12%;
			right: 2%;
		  }

		.close-button {
			font-size: 1.8rem;
			top: 20px;
			right: 20px;
		  }

					
		 .pakete-grid {
			  flex-direction: column;
			  align-items: center;
			  gap: 2rem;
		  }

		  .panel {
			  min-width: 90%;
			  min-height: auto;
			  padding: 3rem 2rem;
			  margin-top: 2rem;
			  margin-bottom: 2rem;
		  }
	
		.panel-header {
		    margin: -2rem -1rem 0.5rem -1rem; 
			font-size: 1.5rem;

		}

		 .carousel-image {
			flex: 0 0 70%;
			height: 60vh;
		  }
			
	
   		footer {
        	flex-direction: column;
        	align-items: center;
        	text-align: center;
        	height: auto;
			padding:2rem;
   	 	}

		  
		.footer_links {
			width:100%;
			text-align: center;
			margin-bottom:1rem;
		}
		
		.footer_mitte {
			text-align: center;
			margin-bottom:1rem;
		}
		
		.footer_rechts {
			margin-top:1rem;
			margin-bottom:1rem;
			text-align: center;
		}

    	.cta_button_footer {
       		 width: 60%;
       		 margin: 1rem auto;
    	}

   		footer p {
        	font-size: 1rem;
			text-align:center;
    	}

		footer a {
			margin: 10px;
		}	
	
	
		.angebot-row {
			flex-direction: column;
			gap: 2rem;
		}

		.angebot-left,
		.angebot-right {
			width: 100%;
			min-width: auto;

		}
	
		.carousel-image {
			flex: 0 0 80%; 
			height: 60vh;
		}
	
		#about-autotype {
			min-height:25vh;
		}
	
		.datenschutz {
			max-width: 100%;
		}
	
		.response-box {
			max-width: 70vw;
			padding: 2.5rem;
	  	}

	  	.response-box h1 {
			font-size: 1.8rem;
	  	}

	  	.response-box p {
			font-size: 1rem;
	  	}

	
}			
	


/* RESPONSIVE DESIGN SCREEN 600px */

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

		
		header img {  
			max-width:210px;
			top:10%;
			z-index:1003;
	
		
		}
  
		.hero {
			background-image: url("images/guestdesk_hero_2_small.JPG");
			
		}
				
		.hero_titel {
			position:absolute;
  			top:20%;
			left: 50%;
          	transform: translate(-50%);
        	text-align: center;
        		
 				 		
		}
		
	
		
	
		h5 {
			font-size: 2.5rem;
       	
   		 }

      	/*.cta_button_hero {
       		position: absolute;
    		top: 60%;
    		left: 50%;
    		text-align: center;
			transform: translate(-50%);
			padding: 0.5rem 1.rem;

  			
        }*/
	
			
		.button-row-button {
			min-width: 3%;
			font-size: 0.8rem;
			margin: 0 1rem 3rem 1rem;
		  }
	
		.cta_button_packages {
			top: 64%;
			right: 3%;
			width: 65px;
			height: 65px;
			font-size:0.7rem;
			}

  					
			
		.hamburger {
       		display: block; 
    	}
		
		.close_hamburger_menu {
    		display:contents;
		
		}
		
		nav {
    		display: none; 
    		position: absolute;
			top: 15px;
    		left: 0;
    		width: 100%;  
			height:auto;
    		border-radius: 0 !important;
  			background-color: var(--black) !important;
			padding: 1.5rem;
   		 	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    		text-align: right;
			z-index: 1000;
		}

		nav.active {
    		display: block; 
		}


		nav a {
   		 	display: block;
    		padding: 0.5rem;
			font-size:16px;
			color:white;
    
    	
		}
		
		.kacheln article {
			 aspect-ratio: auto;
				
			}

		figure {
			width:100%;
			}
		
					
		.text_inhalt, figure {
  			width: 100%;
  			padding:1rem;
		}
	

		.img_webdesign {
			width:100%;
			min-height:50vh;
			object-fit:cover;
		}


		.img_webshop {
			width:100%;
			min-height:50vh;
			object-fit:cover;
		}


		.img_about {
			width: 100%;
			max-width: 100%;
			height: auto;
			object-fit: cover;
		}

		.slider_button {
			font-size:1rem;

		}

		.slider_button.prev {
			 left: 12px;
		}

		.slider_button.next {
			 right: 12px;
		}

		.intro_text {
			text-align:center;
		}

		.intro_text h2 {
			font-size: 2rem;  
		}

		.intro_text h3 {
			font-size: 1.5rem; 
		}

	
		.text_inhalt {
			width: 100%;
		}

		.video-container,
		.play-button,
		.overlay {
			display: none !important;
		}
			
		
    	footer {
        	flex-direction: column;
        	align-items: center;
        	text-align: center;
        	height: auto;
        	padding: 2rem;
		 }

 
		.footer_links {
			width:100%;
			text-align: center;
			margin-bottom:1rem;
		}
		
		.footer_mitte {
			text-align: center;
			margin-bottom:1rem;
		}
		
		.footer_rechts {
			margin-top:1rem;
			margin-bottom:1rem;
			text-align: center;
		}
    	
		.cta_button_footer {
       		width: 80%; 
        	padding: 0.5rem;
        	font-size: 1rem;
    	}

    	footer p {
        	font-size: 1rem;
    	}

    	footer a {
        	font-size: 1rem;
        	margin: 5px 0;
			padding:1rem;
    	}

		#kontaktformular {
			padding: 2rem;
		  }
		
		#kontaktformular p {
			margin-bottom: 3rem;
			text-align: center;
			font-size:1.2rem;
		}
		
		#kontaktformular label {
			display: block;
			margin-right: 0;
			marging-top: 1rem;
			margin-bottom: 0;
			align-content: center;
		  }
		
		input, select, textarea, input[type="submit"] {
			font-size: 1rem;
			padding: 1rem;
			width: 100%; 
		  }

		textarea {
			height: 200px;
		  }
		
	

		input[type="checkbox"] {
			width: 0.8rem;
			height: 0.8rem;
			display: inline-block;
			accent-color: black;
			margin: 0.8rem;
		}
		
		
		.angebot-row {
			flex-direction: column;
			gap: 2rem;
		 }

		.angebot-left,
		.angebot-right {
			width: 100%;
			min-width: auto;
		}	  
  
		
		#angebot-webdesign {
			margin-bottom: 2rem;
		}


		#angebot-webshop {
			margin-bottom: 2rem;
 		}
		
		#angebot-fotografie{
			margin-bottom: 0;
	
 		}

		.carousel-image {
			flex: 0 0 100%;
			height: 50vh;
		  }

		.carousel-track {
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
		  }

		.carousel-image {
			scroll-snap-align: center;
		  }

	
		#about-autotype {
			min-height:45vh;
			
				
		}
		
		.datenschutz {
			max-width: 100%;
			}


		.datenschutz h2{
			font-size:2rem;

		}
		
		.response-box {
			max-width: 90vw;
			padding: 2rem;
			border-radius: 1rem;
  		}

		.response-box h1 {
			font-size: 1.6rem;
		  }

		.response-box p {
			font-size: 0.95rem;
		  }

		.response-box a.cta_button {
			font-size: 1rem;
		  }

	}
	}