/* ============================================
   Subnavigation "Kressbronn entdecken"
   integriert als verschachteltes Untermenü
   unter dem Hauptnav-Punkt "Kressbronn"
   style.css bleibt unverändert
   ============================================ */

/* Grundzustand: Untermenü verborgen */
#navigation ul.sub-nav {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WICHTIG: style.css enthält die Regel
   "#navigation ul li.active a { background:...; color:#fff }"
   ohne direkten Nachkommen-Selektor (>). Da das äußere "Kressbronn"-<li>
   die Klasse "active" trägt, würde diese Regel auch ALLE Links im
   verschachtelten ul.sub-nav blau einfärben. Das wird hier zurückgesetzt
   und gezielt nur für das jeweils aktive Unterpunkt-<li> wieder gesetzt. */
#navigation ul.sub-nav li a {
	background: #fff !important;
	color: #085C98 !important;
	overflow: visible !important;
}

#navigation ul.sub-nav li {
	overflow: visible !important;
}

/* ============================================
   DESKTOP / TABLET (> 640px): Dropdown bei Hover
   ============================================ */
@media only screen and (min-width: 641px) {

	#navigation ul li {
		position: relative;
	}

	#navigation ul li:hover > ul.sub-nav {
		display: block;
	}

	#navigation ul.sub-nav {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 95;
		min-width: 220px;
		background: #fff;
		border: 2px solid #085C98;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.15);
		padding: 4px 0;
	}

	#navigation ul.sub-nav li {
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		height: 38px !important;
		overflow: visible !important;
	}

	#navigation ul.sub-nav li a {
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		font-weight: 500;
		color: #085C98 !important;
		padding: 0 14px !important;
		margin: 0 4px;
		height: 38px !important;
		line-height: 38px !important;
		border: 0;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
		text-decoration: none;
		white-space: nowrap;
		background: #fff !important;
		box-sizing: border-box;
		overflow: visible !important;
		transition: background 0.15s ease, color 0.15s ease;
	}

	#navigation ul.sub-nav li a:hover,
	#navigation ul.sub-nav li.active > a {
		background: #085C98 !important;
		color: #fff !important;
		text-decoration: none;
	}
}

/* ============================================
   MOBILE (<= 640px): eingerückte Unterpunkte
   im aufgeklappten Hauptmenü
   ============================================ */
@media only screen and (max-width: 640px) {

	/* style.css setzt #navigation ul { position:absolute; width:100% }
	   für das aufklappbare Hauptmenü. Das war bei 8 kurzen Punkten ok,
	   überlagert aber jetzt mit dem zusätzlichen Untermenü (8 weitere
	   Punkte) den nachfolgenden Seiteninhalt (Slider/Text), statt ihn
	   nach unten zu schieben. Daher: position:static, sodass das Menü
	   im normalen Fluss steht und der Inhalt darunter folgt. */
	#navigation ul {
		position: static !important;
		width: auto !important;
		top: auto !important;
		left: auto !important;
	}

	#navigation {
		height: auto !important;
		overflow: visible !important;
	}

	/* style.css: #navigation ul li.active a { background: url(nav-btn.png) repeat-x; ... }
	   Das Bild füllt die 30px Zeilenhöhe des Hauptmenüpunkts "Kressbronn"
	   nicht ganz aus (oben/unten bleibt ein weißer Rand). Hier mit
	   Vollfarbe ersetzt - betrifft nur den direkten Hauptmenüpunkt,
	   nicht die Unterpunkte im sub-nav. */
	#navigation > ul > li.active > a {
		background: #085C98 !important;
		border: 2px solid #085C98 !important;
	}

	/* Eltern-Listenpunkt mit Untermenü darf wachsen */
	#navigation ul li:has(ul.sub-nav) {
		height: auto;
		overflow: visible;
	}

	/* Untermenü immer zeigen, wenn Hauptmenü offen ist */
	#navigation ul li ul.sub-nav,
	#navigation ul ul.sub-nav {
		display: block !important;
		position: static !important;
	}

	#navigation ul.sub-nav li {
		float: none;
		height: auto !important;
		display: block !important;
		border-top: 1px solid rgba(255,255,255,0.5);
		background: transparent !important;
	}

	/* style.css blendet #navigation ul li.first aus (gedacht für das
	   erste Element der Hauptnav). functions.js setzt .first aber auch
	   auf das erste Element jedes verschachtelten Untermenüs - das muss
	   hier wieder sichtbar gemacht werden. */
	#navigation ul.sub-nav li.first {
		display: block !important;
	}

	#navigation ul.sub-nav li a {
		display: block !important;
		height: auto !important;
		line-height: 30px !important;
		font-size: 12px;
		padding-left: 36px !important;
		padding-right: 20px !important;
		border: 0;
		border-radius: 0;
		background-color: rgba(255,255,255,0.55) !important;
		background-image: none !important;
		color: #085C98 !important;
	}

	#navigation ul.sub-nav li.active > a {
		background-color: #085C98 !important;
		background-image: none !important;
		color: #fff !important;
	}
}

/* ============================================
   Mobile: "Home" (erster Hauptmenü-Punkt) wieder
   sichtbar machen. style.css blendet #navigation
   ul li.first per display:none aus - das betraf
   ursprünglich nur "Home", war aber als generelle
   Regel formuliert (siehe auch Fix für
   ul.sub-nav li.first weiter oben).
   ============================================ */
@media only screen and (max-width: 640px) {
	#navigation > ul > li.first {
		display: block !important;
	}
}


/* ============================================
   Erweiterung v=11: zweites Untermenü
   "Aktivitäten" + EBC-Punkt
   ============================================ */

/* Desktop: "Echt Bodensee Card" braucht mehr Platz */
@media only screen and (min-width: 641px) {
	#navigation ul.sub-nav {
		min-width: 180px;
	}
}


/* ============================================
   Cookie-Banner
   ============================================ */
#cookie-banner {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #1a1a1a;
	color: #f0f0f0;
	z-index: 9999;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.35);
	box-sizing: border-box;
}

#cookie-banner .cookie-inner {
	max-width: 981px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

#cookie-banner p {
	margin: 0;
	flex: 1 1 300px;
	font-size: 13px;
	line-height: 1.5;
	color: #f0f0f0;
}

#cookie-banner p a {
	color: #7ab8e8;
	text-decoration: underline;
}

#cookie-banner .cookie-btns {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

#cookie-banner .cookie-btns button {
	padding: 8px 18px;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
}

#cookie-banner .btn-accept {
	background: #085C98;
	color: #fff;
}

#cookie-banner .btn-accept:hover {
	background: #064a7a;
}

#cookie-banner .btn-decline {
	background: #444;
	color: #f0f0f0;
}

#cookie-banner .btn-decline:hover {
	background: #555;
}

/* Cookie-Platzhalter */
.cookie-placeholder-box {
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 30px 20px;
	text-align: center;
	margin: 10px 0 20px 0;
}

.cookie-placeholder-box p {
	color: #555;
	font-size: 14px;
	margin-bottom: 14px;
}

.cookie-placeholder-box button {
	background: #085C98;
	color: #fff;
	border: none;
	padding: 9px 22px;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 3px;
	cursor: pointer;
}

.cookie-placeholder-box button:hover {
	background: #064a7a;
}

@media only screen and (max-width: 640px) {
	#cookie-banner .cookie-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	#cookie-banner .cookie-btns {
		width: 100%;
	}
	#cookie-banner .cookie-btns button {
		flex: 1;
	}
}

/* ============================================
   Mobile-Fixes v=13
   ============================================ */
@media only screen and (max-width: 640px) {

	/* Header: feste Höhe 180px aus style.css entfernen */
	#header {
		height: auto !important;
		min-height: 0 !important;
		padding-bottom: 0 !important;
	}
	#logo a {
		height: 80px !important;
		background-size: contain !important;
	}

	/* Cookie-Banner: an Viewport kleben, nie überstehen */
	#cookie-banner {
		width: 100vw !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		overflow: hidden !important;
		height: auto !important;
	}
	#cookie-banner .cookie-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
		padding: 12px 16px !important;
	}
	#cookie-banner p {
		flex: none !important;
		width: 100% !important;
	}
	#cookie-banner .cookie-btns {
		width: 100% !important;
		flex-direction: row !important;
	}
	#cookie-banner .cookie-btns button {
		flex: 1 !important;
	}

	/* Footer-Links: style.css setzt height:12px + width:310px – kaum antippbar */
	.footer-nav {
		width: 100% !important;
		height: auto !important;
	}
	.footer-nav ul {
		display: flex !important;
		flex-wrap: wrap !important;
		padding: 0 !important;
	}
	.footer-nav ul li {
		height: auto !important;
		float: none !important;
		font-size: 10px !important;
		padding: 0 4px !important;
	}
	.footer-nav ul li a {
		display: inline-block !important;
		padding: 8px 2px !important;
		line-height: 1.4 !important;
	}
}

/* Horizontales Scrollen durch überstehende Elemente (z.B. Header-Bild) verhindern */
@media only screen and (max-width: 640px) {
	html, body {
		overflow-x: hidden !important;
		max-width: 100% !important;
	}
}

/* Header-Logo auf Mobile: feste 942px-Breite überschreiben */
@media only screen and (max-width: 640px) {
	#logo {
		width: 100% !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
	}
	#logo a {
		width: 100% !important;
		height: 80px !important;
		background-size: contain !important;
		background-position: left center !important;
	}
}