@import url(https://fonts.googleapis.com/css?family=Tangerine);

/* nachfolgendes in SHARED (zusätzlich zu shared_assets/css/style.css) noch nötig */
#div_rezeptzutaten {
	/* Fixed ZUTATEN-Liste */
	position: fixed;
	border-radius: 15px;
  	padding: 10px;
	top: 0;
	background-color:rgba(192,192,192,0.7);
	/* width: 100%; */
	height: auto;
  	z-index: 999;
}
.pos-portionen-fuerpersonen {
	position:absolute;
	top:0;
	left:0;
	background-color:red;
	font-size:1.1em;
	font-weight:bold;
	color:white;
	padding:5px;
	border:1px solid red;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
}
.pos-txt-auf-banner-headpic {
	position:absolute;
	bottom:0px;
	right:0px;
	text-shadow: 4px 4px 4px #000;
	color:white;
	font-family: 'Tangerine', serif;
	font-size:100px;
}
.rezepttitel, .rezeptzutaten, .rezeptzubereitung {
	font-family: 'Chicle', cursive;
	font-size:3em;
}
#rezeptzubereitungsschritte li:nth-child(odd) {  /* rezepte.php: Zubereitungsschritte<ul> */
	background: linear-gradient(135deg, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
}
#rezeptzubereitungsschritte li:nth-child(even) {  /* rezepte.php: Zubereitungsschritte<ul> */
	background: linear-gradient(135deg, #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%);
}

/*===================================================================================================================
							NAV MENU (nur HTML+CSS [100% Google Gemini, 2026.07.27])
===================================================================================================================*/
/* --- BASIS & DESKTOP STYLES --- */
.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f8f9fa; /* helles grau */
	border-bottom: 1px solid #e9ecef;
	padding: 10px 20px;
	font-family: sans-serif;
	position: relative; /* WICHTIG: Fix für Mobile-Chrome */
}
.nav-logo { color: #212529; font-weight: bold; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-links li { position: relative; }
.nav-links a, .submenu-label { display: block; padding: 15px 20px; color: #212529; text-decoration: none; cursor: pointer; }
.nav-links a:hover, .submenu-label:hover { background-color: #e9ecef; }

/* Verstecke alle Checkboxen im Code */
.menu-chk { display: none; }
.hamburger { display: none; }

/* Desktop-Hover für Ebene 1 und Ebene 2 */
.submenu-lvl1, .submenu-lvl2 {
	display: none;
	position: absolute;
	background-color: #ffffff;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Eleganter Schatten für Kontrast */
	border: 1px solid #dee2e6;
	list-style: none;
	padding: 0;
	min-width: 180px;
	z-index: 1000;
}
.submenu-lvl1 { top: 100%; left: 0; }
.submenu-lvl2 { top: 0; left: 100%; background-color: #f1f3f5; } /* Fliegt nach rechts aus */

/* Aktivierung bei Desktop-Hover */
.has-submenu:hover > .submenu-lvl1,
.has-submenu:hover > .submenu-lvl2 { display: block; }

@media (max-width: 768px) {
	.pos-portionen-fuerpersonen {
		font-size:0.7em;
	}
	.pos-txt-auf-banner-headpic {
		text-shadow: 3px 3px 3px #000;
		color:white;
		right:10px;
		font-size:45px;
	}
	
	/* ====================== NAV MENU (nur HTML+CSS [100% Google Gemini, 2026.07.27]) ============================== */
	.hamburger {
		display: block;
		color: #212529;
		font-size: 24px;
		cursor: pointer;
		user-select: none;
	}
  
	/* Hauptmenü-Verhalten */
	.nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #f8f9fa;
		border-bottom: 1px solid #e9ecef;
		z-index: 999;
	}
  
	/* Deaktiviere das Desktop-Hover auf Smartphones */
	.has-submenu:hover > .submenu-lvl1,
	.has-submenu:hover > .submenu-lvl2 { display: none; }

	/* Klick-Logik via Checkboxen (Akkordeon-Effekt nach unten aufeinanderfolgend) */
	/* Hauptmenü öffnen: Wenn die erste Checkbox aktiv ist, zeige die nav-links */
	.menu-chk#menu-toggle:checked ~ .nav-links {
		display: flex; 
	}
	/* UNIVERSELLE REGEL FÜR EBENE 1: Wenn IRGENDEINE gecheckte Checkbox vor einer .submenu-lvl1 steht, blende sie ein */
	.menu-chk:checked ~ .submenu-lvl1 { 
		display: block; 
	}
	/* UNIVERSELLE REGEL FÜR EBENE 2: Wenn IRGENDEINE gecheckte Checkbox vor einer .submenu-lvl2 steht, blende sie ein */
	.menu-chk:checked ~ .submenu-lvl2 { 
		display: block; 
	}

	/* Optische Anpassung für mobile Listen-Ebenen */	
	.submenu-lvl1, .submenu-lvl2 {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #e9ecef;
		border: none;
		box-shadow: none;
	}
	.submenu-lvl2 { background-color: #dee2e6; }
	.nav-links a, .submenu-label { padding: 12px 30px; }
	.submenu-lvl1 a, .submenu-lvl1 .submenu-label { padding-left: 45px; } /* Einrückung Ebene 1 */
	.submenu-lvl2 a { padding-left: 60px; } /* Einrückung Ebene 2 */
}