/* 0) CSS-Variablen (Farben, Abstände) */
:root {
  --bg: #222;
  --text: #111827;
  --muted: #6b7280;
  --surface: #ffffff;
  --border: #e5e7eb;
  --hover: #f3f4f6;
  --accent: #2563eb;
  --accent-10: rgba(37, 99, 235, 0.10);
  --container: 1100px;
  --radius: 12px;
  --space: 1rem;
  --text-align: center;
}

/* 1) Base/Reset-Light */
*, *::before, *::after { box-sizing: border-box; }
html, body {height: 100%; margin: 0px; padding: 0px; }
body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
	display: flex;
	flex-direction: column;
}
img, svg, video { max-width: 100%; height: auto; }

/* 2) Layout-Helfer 
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }*/

/* 3) Header & Navigation */
		/* Hauptmenüleiste */
		.navbar {
			background-color: #333;
			position: fixed;
			top: 0;
			height: 60px;
			width: 100%;
			z-index: 3000;
			display: flex;
			justify-content: space-between; /* Links – Mitte – Rechts */
			align-items: center;
			padding: 0px;
		}
		
		.head_logo {
			height: 40px;
			width: auto;
			margin: 5px;
		}
		
		.center-logo {
			height: 40px;
			width: auto;
			position: absolute;    /* Fixiert mittig */
			left: 50%;
			transform: translateX(-50%);
		}
		
		
		/* Hamburger-Button (3 kurze Linien) */
		.menu-btn {
			font-size: 24px;
			color: lightgray;
			background: none;
			border: none;
			cursor: pointer;
			display: inline-block;
			margin-right: 15px; /* verschiebt den Button nach links */
		}
		
		/* Dropdown – Desktop default */
		.menu {
		  display: none;
		  position: absolute;
		  top: 100%;
		  right: 10px;
		  background-color: #333;
		  border-radius: 6px;
		  width: 220px;
		  box-shadow: 0 10px 20px rgba(0,0,0,.35);
		  overflow: hidden;
		  z-index: 3001;
		}
		.menu a {
		  color: white;
		  text-decoration: none;
		  display: block;
		  padding: 12px 14px;
		  border-bottom: 1px solid #444;
		}
		.menu a:last-child { border-bottom: none; }
		.menu.show { display: block; }

		/* Backdrop (zum Schließen durch Tippen außerhalb) */
		.menu-backdrop {
		  display: none;
		  position: fixed;
		  inset: 0;
		  background: rgba(0,0,0,.45);
		  z-index: 2000; /* knapp unter dem Menü */
		}
		.menu-backdrop.show { display: block; }

		/* MOBILE: Menü volle Breite */
		@media (max-width: 768px) {
		  .menu {
			left: 0;
			right: 0;
			width: 100%;
			border-radius: 0;
			border-top: 1px solid #444;
			padding: 6px 0;
		  }
		  .menu a {
			padding: 16px 20px;   /* größere Tap-Ziele */
			font-size: 16px;
		  }
		.center-logo {
			max-height: auto; 
			max-width: 20%;}
			
		.head_logo {
			height: auto;
			width: 20%;
			margin: 5px;}
		

			
		}
		
/* 4) Hauptbereich */
		.content {
			flex: 1;
			margin: 0px;
			padding: 10px;
			color: lightgray;
			padding-top: 80px;
			text-align: center-left;
		}
		
		
/* 5) Footer */
		.footer {
			/* NICHT mehr fixed! */
			position: staic;     /* oder weglassen */
			margin-top: auto;     /* schiebt den Footer ans Seitenende bei wenig Inhalt */
			text-align: center;
			color: lightgray;
			background-color: #333;
			padding: 0;
			height: auto;
			width: 100%;
		}
		
		
		/* Wenn der Button geklickt wird, Dropdown anzeigen */
		.show {
			display: block;
		}

/* 6) Utilities 
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
*/

/* 7) Seite-spezifische Defaults */
/* Bild-Anpassung 
        img {
            width: 100%;
            height: auto;
        }
.hero { margin-top: 2rem; }*/