/* https://www.w3schools.com/colors/colors_picker.asp */
/* Color #996600 = Familie in Braun; 
#4d3300 = 15% = dunkler Text;  
#ffe6b3 = 90% = dunklerer, sonniger gelb-orange Hintergrund - https://www.colorhexa.com/ffe6b3;
#fff7e6 = 95% = heller gelblicher Hintergrund;
#805500=25%=nicht verwendet;
*/


/* Grundlegendes CSS-Reset */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* Grundlegende Stile */
	body {
		font-family: Arial, sans-serif;
		line-height: 1.6;
		background-color: #ffe6b3; /* #ffffcc ist zwar websafe aber zu zitronengelb, statt orangebraun*/ 
		color: #333;
		padding: 20px;
	}


	/* Überschriften durch Browser automatisch definiert  */
	h1 {
		color: #4d3300; /* 15% */
		font-size: 2.5em; /* em ist relative (statt px) zum umrechnen einfacher für unterschiedliche Auflösungen */
	}

	h2,
	h3,
	h4,
	h5 {
			color: #4d3300; /* 15% */
	}


	/* Listpunktedesign */
		li {
			margin-left: 20px; /* Verschiebt das ganze `<li>`-Element */
		}



/* Navigationsleiste (Header) */ 
	nav {
		display: flex;
		justify-content: space-between; /* Erster und letzter Block an den Rand setzen */
		align-items: baseline; /* "center" Zentriert die Texte vertikal */
		padding: 0px; /* Abstand von oben */
		/* Claude: 28.07.2026 - "height: 70px" (fest) durch "min-height" ersetzt.
		   Grund: Bei fester Höhe wurde der Inhalt (z.B. Adresse/Telefon/Mail im nav-right) auf schmalen
		   Bildschirmen mehrzeilig, ist dadurch aber über den festen 70px-Rahmen hinausgewachsen und hat
		   sich mit der BILDERLEISTE darunter überlagert (Anfrage Punkt 1). min-height + flex-wrap lässt
		   die Nav mitwachsen, wenn der Inhalt umbricht. */
		min-height: 70px;
		flex-wrap: wrap; /* Claude: 28.07.2026 - erlaubt den drei Nav-Blöcken auf schmalen Bildschirmen umzubrechen statt überzulaufen */
		row-gap: 8px;
		background: #fff7e6;
		 /* ohne Schriftdesign werden die Links blau angezeigt */
		font-weight: bold;
		color: #4d3300;	
	}


	/* Links-Standardstil in der Navigation-OBEN */
	.navbar a {
		color: #4d3300;  /* #ff6600=Orange */
		text-decoration: none; /* Entfernt die Unterstreichung */
		font-weight: bold; /* Macht den Text fett */
		transition: color 0.3s ease; /* Sanfter Farbwechsel */
	}

		/* Link-Farbe ändern, wenn man mit der Maus drüberfährt */
		.navbar a:hover {
			color: #cc4400; /* Dunkleres Orange beim Hover */
			transform: scale(1.1); /* Link um x% vergrößern */
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Leichter Schatteneffekt */
		}


	/* Links-Standardstil in der Navigation-UNTEN */
	.navbar-unten a {
		color: #4d3300;  /* #ff6600=Orange */
		/* text-decoration: none; /* Entfernt die Unterstreichung */
		font-weight: bold; /* Macht den Text fett */
		transition: color 0.3s ease; /* Sanfter Farbwechsel */
	}

		/* Link-Farbe ändern, wenn man mit der Maus drüberfährt */
		.navbar-unten a:hover {
			color: #cc4400; /* Dunkleres Orange beim Hover */
			transform: scale(1.1); /* Link um x% vergrößern */
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Leichter Schatteneffekt */
		}

	/* Ausrichtung der einzelnen Elemente in der Navigation */
			.nav-left {
				/* Das Element links (z. B. Logo) */
				display: flex;
				align-items: baseline; /* "center" Zentriert die Texte vertikal */
				margin-left: 20px; /* 20px Abstand vom linken Rand */	
				margin-right: auto; /* Schiebt alles andere nach rechts */
				gap: 20px; /* Abstand zwischen den Links */
			}

			.nav-center {
				display: flex;
				margin-left: 20px; /* 20px Abstand vom linken Rand */	
				margin-right: auto; /* Schiebt alles andere nach rechts */
				gap: 20px; /* Abstand zwischen den mittleren Links */
			}

			.nav-right {
				/* Das Element rechts (z. B. Sprache oder Telefon) */
				margin-right: 20px; /* auto=Schiebt sich ganz nach rechts */    
				gap: 30px;
			}


	/* Umschaltfläche für Sprachauswahl, die im js umgesetzt wird */
	.language-switch button {
		background-color: #ffe6b3;
		color: #4d3300; 
		border: none;
		padding: 12px 25px;
		cursor: pointer;
		font-family: Arial, sans-serif;
		font-weight: bold;
		margin: 12px;
		/*font-size: 5;     hier fehlt die einheit */
	}


/* für die IMAGE-BAD-HOMBURG-BILDER unter dem Header nebeneinander */
	.image-container {
		display: flex;
		justify-content: center; /* Zentriert die Bilder in der Zeile */
		align-items: center; /* Vertikal ausrichten (falls nötig) */
		flex-wrap: wrap; /* Erlaubt Umbruch auf kleinere Bildschirme */
	}

	.image-container img {
		width: auto; /* Anpassbare Breite */
		height: auto; /* Seitenverhältnis beibehalten */
		max-height: 140px; /* Maximale Höhe des Bildes */    
		margin: 0; /* Kein Abstand zwischen den Bildern */
		display: block;    /* Verhindert unnötige Abstände unter dem Bild */
		border-radius: 0px; /* Abgerundete Ecken für ein schöneres Design */
		transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfter Übergang */
	}

	/* Vergrößerung beim Hover */
	.image-container img:hover {
		transform: scale(1.5); /* Bild um x% vergrößern */
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Leichter Schatteneffekt */
		z-index: 10; /* Sicherstellen, dass das Bild über anderen Elementen liegt */
	}




/* Zurück-zum-Anfang Button */
#top-button {
    font-size: 29px; /* Größe des Icons */
    position: fixed;
    bottom: 30px;
    right: 20px;
    background: #4d3300; /*ex rgba(0, 0, 0, 0.5)*/
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: none;
}


/* Sektionen */
	section {
		margin: 20px 0;
		padding: 20px;
		background-color: #fff7e6;
		border-radius: 5px;
	}


	/* Textbreite für responsives Design beschränken, für bessere Lesbarkeit */
	.text-container {
		max-width: 900px;  /* Begrenzung der maximalen Breite */
		width: 90%;        /* Sorgt dafür, dass der Text auf kleinen Bildschirmen nicht zu breit wird */
		margin: 0 auto;    /* Zentriert den Textbereich horizontal */
		line-height: 1.6;  /* Erhöht die Lesbarkeit */
		text-align: left;  /* Standardmäßige linke Ausrichtung */
	}

	/* Sektionen Titel */
	section h2 {
		margin-bottom: 10px;
		color: #4d3300; 
	}


	/* zum Nichtanzeigen einer Überschrift, die nur für die Semantik und Barrierefreiheit/Screenreader gedacht ist */
	.visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;

		clip: rect(0 0 0 0);
		clip-path: inset(50%);

		white-space: nowrap;
		border: 0;
	}


	/* Klappbare Sektionen */
		.collapsible .content {
			display: none; /* Standardmäßig versteckt */
		}

		.collapsible.open .content {
			display: block; /* Sichtbar, wenn geöffnet */
		}



		/* Standardstil für den klappbaren Titel */
		.collapsible h2 {
			font-size: 1.5em;
			color: #4d3300; /* #333=Dunkelgrau */
			cursor: pointer; /* Zeigt an, dass es klickbar ist */
			transition: color 0.3s ease, font-size 0.3s ease; /* Sanfte Übergänge */
		}

		/* Effekt beim Mouseover */
		.collapsible h2:hover {
			color: #4d3300; /* #ff6600=Orange */
			font-size: 1.7em; /* Größer */
		}

		/* Info-Text kleiner machen */
		.collapsible h2 .info {
			font-size: 0.6em;
			color: #0000ff; /*#666*/
		}



			/* Klappbare Sektionen - Standard: Geschlossen*/
			/*
			.collapsible {
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.3s ease-out;
			}

			/* Klappbare Sektionen - Standard: OFFEN*/
			/*
			.collapsible.open {
				max-height: auto; /* oder eine sinnvolle maximale Höhe 
			}*/




	/* Appartement Liste */
		.appartement-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start; /* Claude: 28.07.2026 - explizit linksbündig (war bereits Standardverhalten, jetzt bewusst gesetzt) */
		}

		.appartement {
			/* Claude: 28.07.2026 - "flex: 1 1 ..." auf "flex: 0 1 ..." geändert (Anfrage Punkt 3).
			   Der erste Wert (flex-grow) war 1, d.h. wenn die letzte Zeile nicht komplett gefüllt ist
			   (z.B. nur 1 oder 2 Appartements übrig), haben sich diese auf die volle Zeilenbreite gedehnt
			   und waren dadurch breiter als die Appartements in den Zeilen darüber. Mit flex-grow: 0
			   behalten alle Appartements exakt die gleiche Breite und die letzte Zeile wird links
			   ausgerichtet aufgefüllt, statt gestreckt zu werden. */
			flex: 0 1 calc(33.333% - 10px);
			margin: 5px;
			padding: 10px;
			background-color: #ffe6b3;
			border-radius: 5px;
		}

		.appartement h3 {
			color: #4d3300; /* 15% */
		}





		/* Bildgröße für responsives Design in der Höhe beschränken */
		img {
			max-width: 100%;   /* Bild passt sich der Breite des Containers an */
			max-height: 250px; /* Maximale Höhe des Bildes */
			height: auto;      /* Hält das Seitenverhältnis des Bildes */
			display: block;    /* Verhindert unnötige Abstände unter dem Bild */
			margin: 0 auto;    /* Zentriert das Bild im Container */
			border-radius: 0px; /* Abgerundete Ecken für ein schöneres Design */
			transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfter Übergang */
			/* width: auto; /* Anpassbare Breite */
			/* display: block;    /* Verhindert unnötige Abstände unter dem Bild */
		}


	/* Claude: 28.07.2026 - NEU: Gemeinsamer Button-Stil für Inhalte, die erst per Klick
	   nachgeladen werden (Video-Rundgang, OpenStreetMap-Karte), um die initiale Ladezeit der Seite
	   zu verkürzen (Anfrage Punkte 5+6). */
	.lazy-load-btn {
		display: inline-block;
		background-color: #fff7e6; /* passend zum restlichen Hintergrund */
		color: #4d3300; /* 15% - passend zur restlichen Textfarbe */
		border: none;
		padding: 10px 18px;
		border-radius: 4px;
		font-weight: bold;
		cursor: pointer;
		font-family: Arial, sans-serif;
		font-size: 0.95em;
		transition: background-color 0.3s ease, transform 0.3s ease;
	}

	.lazy-load-btn:hover {
		background-color: #cc4400; /* gleicher Hover-Ton wie die Navigationslinks */
		transform: scale(1.03);
	}

	/* Claude: 28.07.2026 - NEU: eingebettetes Appartement-Video.
	   Gleiche Höhenbegrenzung wie Bilder/Slideshow (max-height: 250px), damit das Video das
	   Flexbox-Layout der Appartement-Kacheln nicht durcheinanderbringt (siehe alter Kommentar im HTML
	   "Das Video bringt die automatische Ausrichtung durcheinander" - das war vermutlich genau die
	   fehlende Höhenbegrenzung). */
	.apartment-video {
		max-width: 100%;
		max-height: 250px;
		width: 100%;
		display: block;
		margin-top: 10px;
		background: #000;
	}

	/* Claude: 28.07.2026 - NEU: Platzhalter/Container für die OpenStreetMap-Karte in der
	   Sektion "Lage". Die Karte wird per JavaScript erst hier eingefügt, wenn die Sektion aufgeklappt
	   wird. Breite responsiv statt fest 599px, damit es auf Handys nicht seitlich übersteht. */
	.osm-map-placeholder {
		margin: 10px 0;
	}

	.osm-map-placeholder iframe {
		width: 100%;
		max-width: 599px;
		height: 360px;
		border: 1px solid black;
	}

	@media (max-width: 480px) {
		.osm-map-placeholder iframe {
			height: 260px; /* Claude: 28.07.2026 - auf Handys niedriger, damit nicht zu viel Scroll-Strecke */
		}
	}



/* Klappbare Sektionen - Standard: Geschlossen*/
/*
.collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Klappbare Sektionen - Standard: OFFEN*/
/*
.collapsible.open {
    max-height: auto; /* oder eine sinnvolle maximale Höhe 
}
*/



/* Hauptcontainer für die Slideshow */
		.slideshow {
			position: relative;  /* Ermöglicht die Positionierung der Navigationselemente */
			max-width: 100%;   /* Bild passt sich der Breite des Containers an */
			max-height: 250px; /* Maximale Höhe des Bildes */
			height: auto;      /* Hält das Seitenverhältnis des Bildes */
		/*     width: 500px;  /* 500 Breite der Slideshow */
			height: 250px; /* 300 Höhe der Slideshow */
			overflow: hidden; /* Verhindert das Überlaufen von Bildern */
		/*	display: flex; /* Flex für bessere Ausrichtung */
		/*	justify-content: center; /* Zentriert die Bilder */
		/*    margin-bottom: 20px; /* Abstand zwischen den Slideshows */
		}

		/* Container, der die Bilder enthält */
		.slideshow-container {
			position: relative;
			width: 100%; /* Nimmt jetzt die volle Breite der Slideshow ein (auto=Automatische Breite basierend auf Bild) */
			height: 100%;
			/*	display: flex;
			/*	align-items: center; /* Bilder vertikal ausrichten */
		}


		/* Alle Bilder der Slideshow */
		.slide {
			position: absolute; /* Stapelt die Bilder übereinander */
			width: 100%; /* auto=Breite bleibt proportional */
			height: 100%;
			object-fit: cover; /* Stellt sicher, dass das Bild den Container füllt */
			opacity: 0; /* Standardmäßig unsichtbar */
			transition: opacity 0.5s ease-in-out; /* Sanfter Übergang beim Wechsel */
		}


						/*		.slideshow img {
									height: 100%; /* Bild passt sich der Container-Höhe an - Höhe bleibt konstant */
						/*			width: 100%;  /* Breite passt sich proportional an und füllt container-breite */
							/*		object-fit: cover; /* Verhindert Verzerrung, schneidet falls nötig */ 
									/* für ganze sichtbare Bild (ohne Beschnitt): object-fit: contain; statt cover; – dann können allerdings Ränder entstehen.*/
								/*	display: block;
									margin: 0 auto; /* Zentriert das Bild, falls es kleiner als 100% Breite ist */
						/*		}
						*/


		/* Das aktuell sichtbare Bild */
		.slide.active {
			opacity: 1; /* Macht das aktuelle Bild sichtbar */
		}

		/* Navigationsflächen links & rechts */
		.nav {
			position: absolute;
			top: 0;
			width: 50%; /* Jede Fläche nimmt die Hälfte der Breite ein */
			height: 100%;
			cursor: pointer; /* Mauszeiger als Hand-Symbol */
			z-index: 10; /* Stellt sicher, dass die Navigation über den Bildern liegt */
		}

			/* Linke Navigationsfläche */
			.nav.left {
				left: 0;
				background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); 
				/* Sanfte Abdunklung links */
			}

			/* Rechte Navigationsfläche */
			.nav.right {
				right: 0;
				background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); 
				/* Sanfte Abdunklung rechts */
			}


		/* Slideshow Pfeile */
		/* Pfeil-Styling */
		/* Größere und flexible Pfeile */
		.arrow {
			font-size: 5vw;  /* Die Größe passt sich der Bildschirmbreite an */
			color: rgba(255, 247, 230, 0.6); /* 60% Deckkraft - Halbtransparentes beige*/
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			pointer-events: none; /* Verhindert, dass die Pfeile Klicks blockieren */
		}

			/* Linker Pfeil */
			.nav.left .arrow {
				left: 2vw; /* Abstand zum linken Rand (responsive) */
			}

			/* Rechter Pfeil */
			.nav.right .arrow {
				right: 2vw; /* Abstand zum rechten Rand (responsive) */
			}

			/* Beim Hover werden die Pfeile größer */
			.nav:hover .arrow {
				color: rgba(255, 247, 230, 0.8); /* Volle Deckkraft */
				transform: translateY(-50%) scale(1.3); /* Mehr Vergrößerung beim Hover */
			}

		/* Klickbare Flächen */
		.nav {
			position: absolute;
			top: 0;
			width: 50%;
			height: 100%;
			cursor: pointer;
			z-index: 10;
		}

		/* Linke Navigation mit sanfter Abdunklung */
		.nav.left {
			left: 0;
			background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
		}

		/* Rechte Navigation mit sanfter Abdunklung */
		.nav.right {
			right: 0;
			background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
		}




/* Footer */
footer {
    text-align: left;
    margin-top: 20px;
	font-size: x-small;
}


/* Responsive Design */
	@media (max-width: 768px) {
		.appartement {
			/* Claude: 28.07.2026 - flex-grow auch hier von 1 auf 0, siehe Begründung oben bei .appartement */
			flex: 0 1 calc(50% - 10px);
		}
	}

	@media (max-width: 480px) {
		nav ul {
			flex-direction: column;
		}

		nav ul li {
			margin: 10px 0;
		}

		.appartement {
			flex: 0 1 100%;
		}

		/* Claude: 28.07.2026 - Neue Regeln für kleine Bildschirme (Anfrage: "komplett lesbar und responsive") */

		/* Überschrift in der Nav war mit font-size 2.5em auf schmalen Handys zu groß / brach unschön um */
		.nav-left h1 {
			font-size: 1.5em;
		}

		/* Fotos der Bilderleiste auf Handys kleiner, damit mehr davon nebeneinander passen und die Leiste nicht zu hoch wird */
		.image-container img {
			max-height: 90px;
		}

		/* Claude: 28.07.2026 - Regel für das alte <marquee>-Element entfernt: es gibt das Tag im HTML
		   nicht mehr (siehe .marquee-box weiter unten in dieser Datei, ersetzt jetzt das marquee). */
	}

	/* Claude: 28.07.2026 - NAVIGATIONSLEISTEN (oben + unten) auf schmalen Bildschirmen:
	   Die drei Blöcke (nav-left / nav-center / nav-right, plus Sprachumschalter oben) werden untereinander
	   gestapelt und jeweils zentriert dargestellt, statt nebeneinander zu quetschen bzw. überzulaufen.
	   Das ergibt eine klar gruppierte, gut lesbare Struktur (Anfrage Punkt 1 + 2). */
	@media (max-width: 700px) {
		.navbar,
		.navbar-unten {
			flex-direction: column;
			align-items: center;
			padding: 10px 0;
		}

		.navbar .nav-left,
		.navbar .nav-center,
		.navbar .nav-right,
		.navbar-unten .nav-left,
		.navbar-unten .nav-center,
		.navbar-unten .nav-right {
			margin: 4px 0;
			justify-content: center;
			text-align: center;
			flex-wrap: wrap;
		}

		.navbar .language-switch {
			margin: 4px 0;
		}
	}

 
 
    /* Claude: 28.07.2026 - Ersatz für <marquee> per CSS (Anfrage Punkt 1).
       Vorheriger Versuch (jetzt ersetzt) hat nicht funktioniert, weil der bewegte Text kein eigenes
       "Sichtfenster" (Box mit fester Breite + overflow:hidden) hatte, siehe Erklärung im HTML. */

	/* .marquee-box = das "Sichtfenster", genauso groß wie früher das marquee-Attribut (420x22px) */
	.marquee-box {
		width: 420px;
		max-width: 100%; /* auf schmalen Handys nicht breiter als der Bildschirm */
		height: 22px;
		overflow: hidden; /* wichtig: schneidet den Text außerhalb der Box ab */
		position: relative;
		white-space: nowrap;
	}

	/* .marquee-text = der eigentliche Lauftext, wird per @keyframes von rechts nach links bewegt */
	.marquee-text {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 100%; /* Start: knapp außerhalb des rechten Randes der Box (Prozent bezieht sich auf die Box-Breite, NICHT auf die Textbreite - das war der Fehler im alten Versuch) */
		color: #4d3300; /* 15% - gleiche Farbe wie vorher im <font>-Tag */
		font-weight: bold;
		animation: marquee-scroll 10s linear infinite;
	}

	@keyframes marquee-scroll {
		to {
			left: -100%; /* Ziel: komplett links außerhalb der Box (bei kurzem Text wie "Ab sofort" mehr als genug Weg) */
		}
	}

	/* Barrierefreiheit: Laufschrift anhalten, wenn man mit der Maus drüber ist oder sie per Tastatur
	   fokussiert (genau das Verhalten, das beim alten <marquee>-Tag im Browser eingebaut war) */
	.marquee-box:hover .marquee-text,
	.marquee-box:focus-within .marquee-text {
		animation-play-state: paused;
	}

	/* Barrierefreiheit: Wer in seinem Betriebssystem "Bewegungen reduzieren" eingestellt hat,
	   bekommt den Text ruhig stehend angezeigt statt laufend (WCAG 2.2.2) */
	@media (prefers-reduced-motion: reduce) {
		.marquee-text {
			animation: none;
			position: static;
		}
	}