/* =========================================================
   MOBILE / RESPONSIVE STYLES – Reiterlandhof Kamm
   Diese Datei ergänzt text.css / layout.css / color.css.
   Sie NICHT vor den anderen drei einbinden, sondern danach,
   damit die Regeln hier Vorrang haben.
   ========================================================= */

/* Vernünftiges Box-Modell für alle Elemente, sonst sprengen
   Innenabstände/Rahmen die Breiten auf kleinen Screens */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Bilder & Videos nie breiter als ihr Container */
img, video {
	max-width: 100%;
	height: auto;
}

/* iFrames (Google Maps etc.) nie breiter als ihr Container */
iframe {
	max-width: 100%;
}

/* Weißer Hintergrund im Info-Rahmen (z.B. Anfahrtsskizze), statt dem
   bläulichen Seitenhintergrund, der sonst durchscheint. Gilt für
   Desktop und Mobile gleichermaßen. */
div#Info {
	background-color: #ffffff;
}

/* Menü-Button für Handy/Tablet – auf Desktop unsichtbar */
#navToggle {
	display: none;
	width: 100%;
	padding: 0.7em;
	margin-bottom: 12px;
	background-color: #036799;
	color: #fff;
	border: none;
	border-radius: 2px;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

#navToggle:focus {
	outline: 2px solid #8BC4F9;
}

/* =========================================================
   TABLET / KLEINERE BILDSCHIRME  (<= 900px)
   ========================================================= */
@media (max-width: 900px) {

	body {
		margin: 15px;
	}

	div#Header {
		width: 100%;
	}

	div#Header h1 {
		font-size: 1.6em;
	}

	/* Inhalt nimmt volle Breite ein statt neben der Navi zu stehen */
	div#Inhalt {
		margin-left: 0 !important;
		width: 100%;
	}

	/* Navigation über volle Breite, nicht mehr angedockt */
	div#navi {
		float: none;
		width: 100%;
	}

	/* Info-Kasten (z.B. Startseite/Anfahrt) unter statt neben dem Inhalt */
	div#Info {
		float: none;
		width: 100%;
	}

	/* feste Foto-/Hintergrundbild-Boxen: an Bildschirmbreite anpassen */
	div#hof, div#natur, div#reittour {
		width: 100%;
		height: 65vw;
		max-height: 469px;
		background-size: cover;
		background-position: center;
	}

	/* Anfahrtsskizze: feste Größe wie am Desktop, in JEDER Ansicht
	   gleich groß – dadurch wird nichts zugeschnitten oder verzerrt.
	   Nur die Ausrichtung ändert sich: mittig statt am Rand. */
	div#anfahrt2 {
		float: none;
		margin: 0 auto;
	}

	/* #anfahrt1 ist mit 385px eventuell breiter als sehr schmale
	   Handys (< 400px) – vorsichtshalber nach unten begrenzen */
	div#anfahrt1 {
		max-width: 100%;
		margin: 0 auto;
	}

	/* Google-Maps-iFrame */
	iframe#GoogleMap {
		width: 100% !important;
		height: 350px;
	}

	/* Foto-Galerie (VisualLightBox) hat fest 704px Breite einprogrammiert */
	#vlightbox1, #vlightbox2 {
		width: 100% !important;
	}

	/* Preistabellen: nicht mehr nebeneinander, volle Breite,
	   bei Bedarf seitlich scrollbar statt zusammengequetscht */
	div#Pricelist, div#Kids, div#RidingPrices, div#RoomPrices {
		float: none;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	div#Pricelist table, div#Kids table,
	div#RidingPrices table, div#RoomPrices table {
		width: 100%;
	}

	/* Zellen dürfen umbrechen statt die Tabelle unnötig breit zu ziehen.
	   layout.css setzt für Desktop feste min-width-Werte auf th – die
	   müssen hier zurückgesetzt werden, sonst läuft die Tabelle über. */
	div#Pricelist td, div#Pricelist th,
	div#Kids td, div#Kids th,
	div#RidingPrices td, div#RidingPrices th,
	div#RoomPrices td, div#RoomPrices th {
		white-space: normal;
		word-break: normal;
		min-width: 0;
		max-width: none;
	}

	/* E-Mail-Icon und Partner-Logo nicht mehr freischwebend rechts */
	#email, #nke-partner {
		float: none;
		display: block;
		margin: 0 auto 12px;
	}

	div#Footer {
		max-width: 100%;
	}

	/* Landsichten-Logo im Footer verkleinern */
	div#Footer img {
		width: 150px !important;
		height: auto !important;
	}
}

/* =========================================================
   MOBILE NAVIGATION  (<= 700px) – Menü einklappbar
   ========================================================= */
@media (max-width: 700px) {

	/* Button bleibt beim Scrollen immer oben sichtbar */
	#navToggle {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		margin: 0;
		border-radius: 0;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}

	/* Platz oben schaffen, damit der fixierte Button den Inhalt
	   nicht verdeckt (Höhe des Buttons: ca. 50px) */
	body {
		padding-top: 52px;
	}

	ul#Navigation {
		display: none;
	}

	/* Wird per JS gesetzt, sobald der Button angeklickt wird.
	   Das Menü wird als fixiertes Overlay direkt unter dem Button
	   angezeigt – so ist es von jeder Scroll-Position aus erreichbar,
	   ohne dass man erst nach oben scrollen muss. */
	div#navi.nav-open ul#Navigation {
		display: block;
		position: fixed;
		top: 52px;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 10px 15px;
		background-color: #ECF4FC;
		overflow-y: auto;
		z-index: 999;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
	}

	ul#Navigation li {
		padding-bottom: 8px;
	}

	ul#Navigation a, div#Download a {
		height: auto;
		padding: 0.6em;
	}
}

/* =========================================================
   SCHMALE HANDYS  (<= 480px)
   ========================================================= */
@media (max-width: 480px) {

	body {
		margin: 10px;
	}

	div#Header h1 {
		font-size: 1.3em;
		text-align: center;
	}

	div#hell {
		height: 22px;
	}

	div#dunkel {
		height: 5px;
	}

	/* Tabellen-Spalten auf sehr kleinen Screens nicht unnötig breit */
	#Pricelist th, #Kids th, #RidingPrices th, #RoomPrices th {
		min-width: 110px;
	}
}