
* {
 
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}




	.navbar-immo {
    	position: absolute;
    	justify-content: center;
    	align-items: center;
    	flex-direction: row;
    	flex-wrap: wrap;
    	background-color: #E5E5D7;
    	width: 100%;
    	height: 30px;
    	z-index: 1;
		}

	.nav {
    	display: none;
    	justify-content: flex-end; /* Flexbox alignment */
    	list-style: none;
    	margin-right: 5%;
		gap: 15px;
		}




	.burger-icon {
    	font-size: 30px;
    	cursor: pointer;
    	padding: 10px;
    	color: #000;
    	position: absolute;
    	top: -17px;
    	right: 1px;
    	z-index: 1002;
    	transition: color 0.3s ease;
		}


	.burger-icon.active {
    	color: black;
		}


	.burger-menu {
    	position: fixed;
    	top: 0;
    	right: -250px; 
    	height: 100%;
    	width: 250px; 
    	background-color: #E5E5D7;
    	border-left: 1px solid #ccc;
   	 	z-index: 1001;
    	transition: right 0.3s ease; 
    	box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
    	display: flex;
    	flex-direction: column;
    	padding-top: 60px; 
		}


	.burger-menu a {
    	padding: 10px 20px;
    	text-decoration: none;
    	color: black;
    	border-bottom: 1px solid #eee;
		}

	.burger-menu a:hover {
    	background-color: #f0f0f0;
		}


	.burger-menu.active {
    	right: 0; /* Menü fährt von rechts rein */
		}





	.opener-immobilie {
   		height: 255px;
   		width: 100%;
   		object-fit: cover;
   		filter: brightness(0.5);
   		transition: filter 0.5s ease;
		}


	.headline-hauserweg {
		position: absolute;
    	margin-left: 9%;
    	text-align: center;
    	top: 60px;
    	color: #fff;
    	font-family: Impact;
    	font-size: 30px;
    	width: 80%;
		}


	.description-hauserweg {
      	position: absolute;
    	margin-left: 15%;
    	top: 145px;
    	color: #fff;
    	font-family: Arial, sans-serif;
    	font-size: 10px;
    	line-height: 1.4em;
    	width: 70%;
    	text-align: center;
    	}

	.cta-button {
		position: absolute;
    	left: 35px;
    	top: 200px;
    	background-color: #E5E5D7;
    	color: #000;
    	padding: 7px 4px;
    	text-decoration: none;
    	font-size: 10px;
    	border-radius: 5px;
    	transition: background-color 0.3s ease;
    	margin-left: 31%;
		font-family: impact;
		}

	.cta-button:hover {
   		background-color: #fff;
		transform: scale(1.1);
		}


	.logo-slider-container {
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: center;
    	background-color: #D6D6D6;
    	height: 80px;
		margin: -3px;
		width: 100%;
		}	


	.Partner-Logos {
    	display: flex;
    	flex-direction: column;
		justify-content: center;
    	align-items: center;
    	gap: 5px;
		margin-top: 1%;
		}

	.panico {
    	width: 90px;
    	height: 25px;
		margin-left: 0;
		}


	#about-container {
    	display: flex;
    	flex-direction: column-reverse;
		align-items: flex-start; 
    	gap: 25px; 
		width: 100%;
	    margin-left: 3%;
		}

	.about-image {
   		width: 260px;
    	height: 150px;
  		box-shadow: 0px 6px 16px -6px rgba(1,1,1,0.5); 
    	border-radius: 8px; 
		margin-left: 5%;
		display: none;
		
		}

	.about-text {
    	flex: 1;
    	width: 100%;
    	margin-left: 5%;
    	margin-top: 5%;
		}


	.title-about {
    	font-size: 18px;
    	color: #000;
    	font-weight: bold;
   		}

	.section2, .section3 {
    	width: 90%;
    	margin-left: 3%;
		margin-top: 10%;
		margin-bottom: 15%;
		}

	.section2 p, .section3 p {
        color: grey;
    	font-family: sans-serif;
    	line-height: 16px;
    	font-size: 14px;
    	margin-bottom: 10px;
    	width: 90%;
    	margin-top: 5%;
		font-weight: 300;
		}

	.Calltoaction{
    	background-color: #E5E5D7;
    	color: #000;
    	border: none;
    	padding: 12px 24px;
    	font-size: 12px;
    	border-radius: 4px;
    	cursor: pointer;
    	text-align: center;font-family: Impact,  "Franklin Gothic Bold", "Arial Black", "sans-serif";
		margin-top: 4%;
		}

	.Calltoaction:hover {
    	background-color: #E5E5D7;
		transform: scale(1.1);
		}


	.farbe-hintergrund{
		background-color: #E5E5D7;
    	padding-bottom: 30px;
    	padding-top: 40px;
    	width: 100%;
		}
	

	#wohnungenh1{
       	font-size: 18px;
    	font-weight: bold;
    	text-align: center;
    	margin-right: 0;
    	margin-top: -5%;
		}

	.grabenstetten-wohnungskarte-grid {
		display: grid;
    	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    	gap: 20px;
    	padding-left: 0px;
    	width: 100%;
		margin-top: 10%;
   		} 

	.grabenstetten-wohnungskarte {
   		background-color: #fff;
   		border: 1px solid #ddd;
   		padding: 20px;
  		border-radius: 8px;
		width: 80%;
		margin-left: 12%;
		max-width: 250px;
		margin: 0 auto;
		}

	.grabenstetten-wohnungskarte img {
    	width: 100%;
    	height: auto;
    	border-bottom: 1px solid #ddd;
    	margin-bottom: 5px;
		}

	.grabenstetten-wohnungskarte img:hover {
   		max-width: 100%;
   		height: auto;
   		border-bottom: 1px solid #ddd;
   		margin-bottom: 15px;
		filter: brightness(0.5);
		}


	.grabenstetten-wohnungskarte h2 {
  		font-size: 14px;
   		margin-top: 0px;
		text-align: left;
		}

	.grabenstetten-wohnungskarte p {
   		font-size: 12px;
		text-align: left;
		font-family: sans-serif;
		}

	.grabenstetten-wohnungskarte ul {
   		list-style-type: none;
  		margin-bottom: 15px;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		display: flex;
		padding: 0;
		gap: 20px;
		margin-top: 5%;
		margin-left: 15%;
		max-width: 150px;
		width: 100%;
		 justify-content: center; 
		flex-direction: row;
		}

	.grabenstetten-wohnungskarte ul li {
  		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: left;
		font-family: sans-serif;
		}

	.grabenstetten-wohnungskarte-preis {
   		font-size: 1.2rem;
   		font-weight: bold;
   		color: #B1B198;
		}

	.grabenstetten-wohnungskarte li {
        max-width: 170px; /* Feste maximale Breite für Listenelemente */
        flex: 1 1 150px; /* Flexibles Wachstum, mit minimaler Breite von 150px */
        margin: 0; /* Entfernt unerwünschte Margen */
    	}


	#faq-ueberschrift{
		font-size: 18px;
   		font-weight: bold;
		text-align: center;
		padding-top: 3%;
		padding-bottom: 1%;
		margin-left: 7%;
		margin: 0 auto;
		}


	.faq-container {
    	width: 90%;
    	padding-top: 10%;
    	margin-bottom: 15%;
   		}
   

	.faq{
      margin-left: 10%;
    	width: 100%;
    	margin-top: 3%;
		margin: 5% 5%;
		}


    .faq .faq-item {
      	border-bottom: 1px solid #90906D;
    	width: 80%;
    	margin-left: 5%;
		margin: 0 auto; /* Zentrale Ausrichtung */
        padding: 0 0; 
		}

    .faq .faq-item button[aria-expanded='true'] {
        border-bottom: 1px solid #90906D;
    	}

    .faq button {
        position: relative;
        display: block;
        text-align: left;
        width: 100%;
        padding: 1em 0;
        color: #000;
        font-weight: 400;
        border: none;
        background: none;
        outline: none;
    	}

    .faq button:hover,
    .faq button:focus {
    	cursor: pointer;
        }

    .faq button:hover::after,
    .faq button:focus::after {
        cursor: pointer;
        color: #E5E5D7;
        border: 1px solid;
    	}

    .faq button .faq-title {
       padding: 1em 1.5em 1em 0;
    	font-size: 13px;

    	}

    .faq button .icon {
        display: inline-block;
        position: absolute;
       
        width: 15px;
        height: 22px;
        border-radius: 22px;
		right: 10px; /* Abstand vom rechten Rand */
    	}

    .faq button .icon::before {
        display: block;
        position: absolute;
        content: '';
        top: 9px;
        left: 5px;
        width: 10px;
        height: 2px;
        background: currentColor;
   		 }
    
	.faq button .icon::after {
        display: block;
        position: absolute;
        content: '';
        top: 5px;
        left: 9px;
        width: 2px;
        height: 10px;
        background: currentColor;
    	}

    .faq button[aria-expanded='true'] {
        color: black;
    	}
    
	.faq button[aria-expanded='true'] .icon::after {
        width: 0;
    	}
    
	.faq button[aria-expanded='true'] + .faq-content {
        opacity: 1;
    	max-height: 20em;
    	transition: all 200ms linear;
    	will-change: opacity, max-height;
    	}
    
	.faq .faq-content {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 200ms linear, max-height 200ms linear;
        will-change: opacity, max-height;
    	}
    
	.faq .faq-content p {
       	font-size: 12px;
    	font-weight: 300;
    	margin: 2em 0;
    	font-family: sans-serif;
		padding: 0 0;
		}

		
	.situation-hintergrund{
		background-color: #E5E5D7;
    	width: 100%;
		margin-bottom: 10%;
		}


	.aktuelle-situation, .situation-2 {
    	width: 90%;
    	margin: 0% 5%;
		padding-top: 5%;
		padding-bottom: 10%;
		}


	.situation-container {
    	display: flex;
		flex-direction: column;
		align-items: flex-start; 
    	gap: 25px; 
		width: 100%;
		margin-left: 5%;
		}


	.situation-image {
    	width: auto;                /* Bildbreite anpassen */
        height: auto;               /* Bildhöhe anpassen */
        max-width: 88%;            /* Maximale Breite auf 100% setzen */
        object-fit: cover;          /* Beibehaltung des Bildformats */
        box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
        border-radius: 8px;
        margin-left: 0;
		margin-right: 0;			/* Rechter Abstand automatisch */
        display: block;             /* Sicherstellen, dass das Bild blockiert ist */
        margin-top: 5%;             /* Konsistenter Abstand zum oberen Element */
		}


	.situation-text {
    	flex: 1; 
		}


	#title-situation {
    	font-size: 18px;
    	color: #000;
    	font-weight: bold;
		}


	.aktuelle-situation p, .situation-2 p {
       	 margin-bottom: 10px; /* Konsistenter Abstand unten */
        margin-top: 5%;      /* Konsistenter Abstand oben */
        line-height: 16px;   /* Zeilenhöhe für Konsistenz */
        font-size: 14px;     /* Schriftgröße */
        color: grey;         /* Textfarbe */
        width: 90%;          /* Breite */
		font-family: sans-serif;
		font-weight: 300;
   		}


	.Calltoaction-situation {
    	background-color: #fff;
    	color: #000;
    	border: none;
    	padding: 12px 24px;
    	font-size: 12px;
    	border-radius: 4px;
    	cursor: pointer;
    	text-align: center;
    	font-family: Impact, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    	margin-top: 4%;
		}	

	.Calltoaction-situation:hover {
    	background-color: #E5E5D7;
		transform: scale(1.1);
		}


	#kontakt-überschrift{
		text-align: center;
		font-size: 18px;
		font-family: impact;
		}


	.entscheidung-wohnung{
		font-family: sans-serif;
		font-weight: 600;
		}

	.grabenstetten-kontakt {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: sans-serif;
    	}
    
	.container-kontakt {
        position: relative;
    	max-width: 850px;
    	width: 90%;
    	background: #fff;
    	padding: 25px;
    	border-radius: 2px;
    	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    	}
    .container header {
        font-size: 1.5rem;
        color: #333;
        font-weight: 500;
        text-align: center;
    	}
    
	.container .form {
        margin-top: 30px;
    	}
    
	.form .input-box {
        width: 100%;
        margin-top: 25px;
    	}
    
	.input-box label {
     	color: #000;
    	font-size: 16px;
    	font-family: impact;
		margin-left: -2%;
    	}
    
	.form :where(.input-box input, .input-box textarea, .select-box) {
    	position: relative;
    	width: 105%;
    	outline: none;
    	color: #707070;
    	margin-top: 8px;
    	border: 1px solid #ddd;
    	border-radius: 6px;
    	padding: 0 15px;
    	height: 45px;
    	font-family: sans-serif;
    	font-size: 14px;
		font-weight: 300;
		margin-left: -2%;
		}
    
	.input-box input:focus, .input-box textarea:focus {
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   		}
    
	.form .column {
        display: flex;
        column-gap: 15px;
    	}
    
	.form .gender-box {
        margin-top: 25px;
		}
    
	.gender-box h3 {
        color: #333;
    	font-size: 16px;
    	font-weight: 400;
    	margin-bottom: 8px;
    	font-family: impact;
		margin-left: -2%;
    	}
    
	.form :where(.gender-option, .gender) {
        display: flex;
        align-items: center;
        column-gap: 50px;
        flex-wrap: wrap;
        color: #E5E5D7;
        display: block; /* Ändern von flex zu block für vertikale Anordnung */
        margin-bottom: 5px; /* Abstand zwischen den Elementen */
		margin-left: -1%;
   		 }

  
    .form .gender {
        column-gap: 5px;
   		}
    
	.gender input {
        accent-color: #E5E5D7;
        border: thin solid;
    	}
    
	.form :where(.gender input, .gender label) {
        cursor: pointer;
    	}
    .gender label {
        color: #707070;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 300;
		}
    
	.address :where(input, .select-box) {
        margin-top: 15px;
    	height: 45px;
    	}
    
	.select-box select {
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
        color: #707070;
        font-size: 1rem;
   		}
    
	.form button {
    	height: 55px;
    	width: 95%;
    	color: #000;
    	font-size: 12px;
    	margin-top: 30px;
    	border: none;
    	cursor: pointer;
    	transition: all 0.2s ease;
    	background: #E5E5D7;
    	font-family: impact;
    	font-weight: 600;
    	border-radius: 4px;
		margin-left: 2%;
    	}
    
	.input-box textarea {
           height: 105px;
    		padding: 15px;
    		resize: vertical;
    		}


	.gallerie-hintergrund {
    	position: relative; /* Positioniert die Pfeile relativ zur Galerie */
    	background-color: #E5E5D7;
    	overflow: hidden; /* Verhindert, dass überlaufende Bilder angezeigt werden */
    	padding: 5%; /* Padding für besseren Abstand */
		margin-top: 10%;
		}

	.container-gallerie {
    	display: flex; 
    	transition: transform 0.5s ease; /* Smooth transition for sliding effect */
		}

	.bild-container {
    	min-width: 100%; /* Jedes Bild nimmt die volle Breite des Containers ein */
    	position: relative;
    	cursor: pointer;
		}

	.bild {
    	width: 100%; /* Füllt den Container */
    	height: 100%; /* Füllt die Höhe des Containers */
    	object-fit: cover; /* Bilder füllen den Container ohne Verzerrung */
    	border: solid 2px #fff; /* Stärkerer Rand */
		}

	.overlay {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	color: white;
    	background: rgba(0, 0, 0, 0.5);
    	opacity: 0;
    	transition: opacity 0.5s;
		font-size: 12px;
		}

	.bild-container:hover .overlay {
    	opacity: 1; /* Overlay sichtbar bei Hover */
		}


	.arrow {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	font-size: 16px;
    	color: white;
    	background-color: rgba(0, 0, 0, 0.7);
    	padding: 10px;
    	cursor: pointer;
    	z-index: 1000; /* Über den Bildern */
		}

	.left {
    	left: 22px; /* Abstand vom linken Rand */
		}

	.right {
    	right: 22px; /* Abstand vom rechten Rand */
		}


	.anfahrt2, .anfahrt-section2 {
    	width: 90%;
    	margin: 10% 5%;
    	margin-top: 8%;
		}

	#anfahrt-container {
    	display: flex;                     /* Flexbox aktivieren */
    	align-items: flex-start;           /* Vertikale Ausrichtung auf den Start */
    	gap: 25px;                        /* Abstand zwischen Bild und Text */
    	flex-direction: column-reverse;               /* Elemente in einer Zeile anordnen */
    	width: 100%;
    	margin-left: 5%;
		}

	.anfahrt-image {
    	width: auto;                     /* Feste Breite für das Bild */
    	height: auto;                    /* Feste Höhe für das Bild */
    	box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5); 
    	border-radius: 8px; 
    	margin-bottom: 0; /* Kein Abstand unten, um Ausrichtung zu verbessern */
		max-width: 85%;
		}

	.anfahrt-text {
    	flex: 1;                          /* Text nimmt den verfügbaren Platz ein */
		}

	.title-anfahrt {
    	font-size: 18px;                  /* Anpassung der Schriftgröße */
    	line-height: 1.5;                 /* Zeilenhöhe anpassen */
    	margin: 5% 0;                     /* Gleiche Abstände oben und unten */
    	width: 90%;                       /* Breite anpassen */
    	text-align: left;                 /* Text linksbündig */
    	color: #000;                      /* Farbton anpassen */
    	word-wrap: break-word;            /* Ermöglicht das Umbrechen langer Wörter */
    	overflow-wrap: break-word;        /* Unterstützung für breitere Wörter */
		}

	.anfahrt2 p, .anfahrt-section2 p {
    	margin-bottom: 10px;              /* Konsistenter Abstand unten */
    	margin-top: 5%;                   /* Konsistenter Abstand oben */
    	line-height: 16px;                /* Zeilenhöhe für Konsistenz */
    	font-size: 14px;                  /* Schriftgröße */
    	color: grey;                      /* Textfarbe */
    	width: 90%;                       /* Breite */
    	font-family: sans-serif;
    	font-weight: 300;
		}



	.unique-footer {
   		background-color: #E5E5D7;
  		color: #000;
   		padding: 25px 0;
		}

	.unique-container {
   		width: 100%;
   		margin: 0 auto;
   		max-width: 90%;
		}

	.unique-footer-top {
    	display: flex;
    	flex-wrap: wrap;
    	text-align: center;
    	gap: 0px;
		}

	.unique-footer-column {
    	flex: 1;
    	min-width: 220px;
    	margin-bottom: 2%;
		}

	.unique-footer-column h3,
	.unique-footer-title h4 {
     	margin-bottom: 15px;
    	font-size: 16px;
    	font-family: impact;
		}

	.unique-about-footer ul,
	.unique-page-more-info ul,
	.unique-open-hours .unique-table {
   		list-style: none;
   		padding: 0;
   		margin: 0;
		}

	.unique-about-footer li,
	.unique-page-more-info li,
	.unique-open-hours .unique-table tr {
       	margin-bottom: 10px;
    	font-family: sans-serif;
		font-size: 14px;
		}


	.unique-footer-bottom {
   		border-top: 1px solid #9294a0;
   		align-items: center;
		}

	.unique-footer-bottom a {
   		color: #fff;
   		text-decoration: none;
		}

	.unique-footer-bottom p {
   		margin: 0;
		}

	a, a:visited, a:hover, a:active {
   		text-decoration: none;
    	color: inherit;
    	font-family: impact;
    	font-size: 14px;
		}

	.unique-footer-bottom-content {
   		flex: 1;
   		display: flex;
   		justify-content: center;
   		align-items: center;
   		padding-top: 1%;
		}
	
	
	.scroll-to-top {
        position: fixed; /* Fixiert den Button beim Scrollen */
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background-color: #E5E5D7;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
		}

	.scroll-to-top.show {
        opacity: 1;
        visibility: visible;
		}

	.scroll-to-top img {
        width: 60px;  /* Tippfehler behoben: idth -> width */
        height: 60px;
        fill: white;
		}
	
	
	
	
  	@media (min-width: 620px) and (max-width: 768px){
	
	
	 .title-about {
    	font-size: 21px;
		} 
	  
	  
	.section2 p, .section3 p {
    	font-size: 16px;
		}
	  
	  
	 #wohnungenh1 {
    	font-size: 21px;
    	margin-right: 0;
    	margin-top: 0;
		}
	  
	 
	.grabenstetten-wohnungskarte-grid {
    	display: flex;
    	flex-direction: column;
    	gap: 20px;
    	padding-left: 0px;
    	width: 100%;
    	margin-top: 10%;
		}
	
	
	.grabenstetten-wohnungskarte {
  		width: 100%;
    	max-width: 350px;
    	margin: 0 auto;
		}  
	  
	#faq-ueberschrift {
    	font-size: 21px;
		margin-left: 10%;
		}  
	  
	  
	.faq button .faq-title {
    	font-size: 15px;
		}
	
	.faq .faq-content p {
    	font-size: 14px;
		}  
	  
	  
	#title-situation {
    	font-size: 21px;
		} 
	  
	.aktuelle-situation p, .situation-2 p {
    	font-size: 16px;
    	}  
	  
	  
	.situation-image {
    	max-width: 60%;
		}
	  
	  
	#kontakt-überschrift {
    	text-align: center;
    	font-size: 21px;
    	font-family: impact;
		}
		
	 .gender-box h3 {
    	color: #333;
    	font-size: 16px;
    	font-weight: 400;
    	margin-bottom: 8px;
    	font-family: impact;
    	margin-left: -1%;
		} 
	  

	.title-anfahrt {
    	font-size: 21px;
		margin-left: 0;
		}
	  
	 .anfahrt2 p, .anfahrt-section2 p {
     
	  }
	  
	  
	.anfahrt2 p, .anfahrt-section2 p {
   		font-size: 14px;
    	color: grey;
    	width: 90%;
		margin-left: 0;
		}
	  
	  
	.anfahrt-image {
   		width: auto;
    	height: auto;
    	max-width: 60%;
    	object-fit: cover;
    	box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
    	border-radius: 8px;
  		margin-right: 0;
    	display: block;
    	margin-top: 5%;
		margin-left: -2%;
		}

	  
	.unique-footer-top {
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: column;
    	text-align: center;
    	gap: 0px;
		}  
	  
	  
	  
	.unique-footer-column h3, .unique-footer-title h4 {
   		font-size: 16px;
   		}
	  
	 .unique-about-footer li, .unique-page-more-info li, .unique-open-hours .unique-table tr {
    	font-size: 14px;
		} 
	

	
	
		@media (min-width: 769px) and (max-width: 1024px){
		
		.title-about {
    		font-size: 21px;
			} 
	  
	  
		.section2 p, .section3 p {
    		font-size: 16px;
			}
	  
	  
	 	.wohnungenh1 {
    		font-size: 21px;
    		margin-right: 0;
    		margin-top: 0;
			}
	  
	 
	  	.grabenstetten-wohnungskarte-grid {
    		display: flex;
    		flex-direction: column;
    		gap: 20px;
    		padding-left: 0px;
    		width: 100%;
    		margin-top: 10%;
			}
	
	
		.grabenstetten-wohnungskarte {
  			width: 100%;
    		max-width: 350px;
    		margin: 0 auto;
			}  
	  

		#faq-ueberschrift {
    		font-size: 21px;
			margin-left: 10%;
			}  
	  
	  
	  	.faq button .faq-title {
    		font-size: 15px;
			}
	
		.faq .faq-content p {
    		font-size: 14px;
			}  
	  
	  
		#title-situation {
    		font-size: 21px;
			} 
	  
		.aktuelle-situation p, .situation-2 p {
    		font-size: 16px;
    		}  
	  
	  
		.situation-image {
    		max-width: 60%;
			}
	  
	  	.kontakt-überschrift {
    		font-size: 21px;
			}
	  
	  
		.anfahrt2 p, .anfahrt-section2 p {
   			font-size: 16px;
    		color: grey;
    		width: 90%;
			}
	  
	  	.anfahrt-image {
   			width: auto;
    		height: auto;
    		max-width: 60%;
    		object-fit: cover;
    		box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
    		border-radius: 8px;
    		margin-left: 0;
    		margin-right: 0;
    		display: block;
    		margin-top: 5%;
			}

	  
		.unique-footer-top {
    		display: flex;
    		flex-wrap: wrap;
    		flex-direction: column;
    		text-align: center;
    		gap: 0px;
			}  
	  
	  
	  .unique-footer-column h3, .unique-footer-title h4 {
   			font-size: 21px;
   			}
	  
	 
	.unique-about-footer li, .unique-page-more-info li, .unique-open-hours .unique-table tr {
   		 	font-size: 16px;
			} 
	
			}
	
	
	
	
	@media (min-width: 1025px) and (max-width: 1440px) {
	


	#wohnungenh1 {
    	font-size: 35px;
    	margin-top: 0;
		}
		
		
	.grabenstetten-wohnungskarte {
    	background-color: #fff;
    	border: 1px solid #ddd;
    	padding: 20px;
   	 	border-radius: 8px;
    	width: 100%;
    	margin-left: 12%;
    	max-width: 250px;
    	margin: 0 auto;
		}
	
	
	.faq-ueberschrift {
    	font-size: 30px;
		text-align: center;
		margin-left: 15%;
		}
	
	.faq button .faq-title {
    	padding: 1em 1.5em 1em 0;
    	font-size: 16px;
		}
	
	.faq .faq-content p {
    	font-size: 14px;
		}
	
	.situation-container {
    	display: flex;
    	flex-direction: row-reverse;
    	align-items: flex-start; 
    	gap: 25px; 
    	width: 100%;
    	margin-left: 5%;
		}

		
	.title-situation {
    	font-size: 25px;
    	color: #000;
    	font-weight: bold;
		}
		
		
	.situation-image {
    	width: auto;
    	height: auto;
    	max-width: 40%; /* Bild auf 40% der Breite setzen */
    	object-fit: cover;
    	box-shadow: 0px 6px 16px -6px rgba(1, 1, 1, 0.5);
    	border-radius: 8px;
    	margin: 0;
    	display: block;
		margin-right: 5%;
		}

	.situation-text {
    	flex: 1;
    	width: 50%; /* Text auf 50% der Breite setzen */
    	margin-left: -5%;
		}

	.aktuelle-situation p, .situation-2 p {
    	margin-bottom: 10px;
    	margin-top: 5%;
    	line-height: 16px;
    	font-size: 16px;
    	color: grey;
    	width: 80%;
    	font-family: sans-serif;
    	font-weight: 300;
		}
	

	#kontakt-überschrift {
    	font-size: 30px;
		}
		
		
	.form .gender-box {
    	margin-top: 80px;
		}
		
		
	.gender-box h3 {
    	font-size: 18px;
		}
		
		
 	.input-box label {
    	font-size: 15px;
  		}
		
		
	.gallerie-hintergrund {
    	position: relative; /* Positioniert die Pfeile relativ zur Galerie */
    	background-color: #E5E5D7;
    	overflow: hidden; /* Verhindert, dass überlaufende Bilder angezeigt werden */
    	padding: 5%; /* Padding für besseren Abstand */
		margin-top: 10%;
		}

	.container-gallerie {
    	display: flex; 
    	transition: transform 0.5s ease; /* Smooth transition for sliding effect */
		width: 50%;
		}

	.bild-container {
    	min-width: 100%; /* Jedes Bild nimmt die volle Breite des Containers ein */
    	position: relative;
    	cursor: pointer;
		}

	.bild {
    	width: 100%; /* Füllt den Container */
    	height: 100%; /* Füllt die Höhe des Containers */
    	object-fit: cover; /* Bilder füllen den Container ohne Verzerrung */
    	border: solid 2px #fff; /* Stärkerer Rand */
		}

	.overlay {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	color: white;
    	background: rgba(0, 0, 0, 0.5);
    	opacity: 0;
    	transition: opacity 0.5s;
		font-size: 12px;
		}

	.bild-container:hover .overlay {
    	opacity: 1; /* Overlay sichtbar bei Hover */
		}


	.arrow {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	font-size: 16px;
    	color: white;
    	background-color: rgba(0, 0, 0, 0.7);
    	padding: 10px;
    	cursor: pointer;
    	z-index: 1000; 
		}

	.left {
    	left: 17px; 
		}

	.right {
    	right: 17px; 
		}
	
		
	.title-anfahrt {
    	font-size: 30px;
		}		
		
	.anfahrt2, .anfahrt-section2 {
    	width: 90%;
    	margin: 10% 5%;
    	margin-top: 12%;
		}
		
	.anfahrt-container {
    	display: flex;
    	align-items: flex-start;
    	gap: 25px;
    	flex-direction: row-reverse;
    	width: 100%;
    	margin-left: 5%;
		}
	
	}
	
	
	
	
	@media screen and (min-width: 1441px) {
		}
	
	
	
	
	
	
	
	
	
	
	
	
	
	


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	



		
	
			
	
	
	
	
	
	
	
	
	
	
	
			
			
			


