/* ============================================================
   Responsive Styles — HFP Homepage
   Nur @media Breakpoints, keine Desktop-Änderungen
   ============================================================ */

/* --- Hamburger Button (nur mobil sichtbar) --- */
.hamburger {
	display: none;
	background: #333;
	border: none;
	border-radius: 8px;
	padding: 10px 12px;
	cursor: pointer;
	margin: 6px 8px;
	touch-action: manipulation;
}

.hamburger span {
	display: block;
	width: 24px;
	height: 3px;
	background: #fff;
	margin: 4px 0;
	border-radius: 2px;
	transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Tablet (max 768px) --- */
@media screen and (max-width: 768px) {

	/* Hamburger zeigen */
	.hamburger {
		display: block;
	}

	/* Hauptcontainer */
	#main {
		width: 100%;
		left: 0;
		margin-left: 0;
		top: 10px;
		padding: 0 8px;
		box-sizing: border-box;
	}

	/* Header-Bild */
	.header_img {
		width: 100%;
		height: auto;
		border-radius: 10px;
	}

	/* Header: relativieren für absolute Kinder */
	#header {
		position: relative;
		overflow: hidden;
	}

	/* HFP-Label über dem Header */
	#hfp-label {
		position: relative;
		right: auto;
		top: auto;
		text-align: center;
		font-size: 22px;
		padding: 10px 0;
	}

	/* Theme-Switcher & Logout-Box im Header */
	#topbar-admin {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: 4px;
		padding: 4px 8px;
	}

	/* Navigationsmenü: versteckt bis Klick auf Hamburger */
	#cssmenu, #admin-menu {
		display: none;
		width: 100% !important;
		border-radius: 10px;
	}

	#cssmenu.open, #admin-menu.open {
		display: block;
	}

	#cssmenu > ul, #admin-menu > ul {
		width: 100%;
	}

	/* Sub-Menüs auf Mobile: Klick statt Hover */
	#cssmenu ul ul, #admin-menu ul ul {
		display: none;
		width: 100%;
		position: static;
		border: none;
		background: #444;
	}

	#cssmenu ul li.has-sub.open > ul, #admin-menu ul li.has-sub.open > ul,
	#cssmenu ul li.has-sub:hover > ul, #admin-menu ul li.has-sub:hover > ul {
		display: block;
	}

	#cssmenu ul ul li a, #admin-menu ul ul li a {
		padding-left: 40px;
	}

	/* Content-Bereich */
	#content_main {
		position: static;
		width: 100% !important;
		left: auto;
		top: auto;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 12px;
		margin-top: 10px;
	}

	/* Logout & Username */
	#logout-box a {
		position: static;
		display: inline-block;
		margin: 5px 0;
	}

	#username {
		position: static;
		display: block;
		margin: 5px 0;
		color: white;
	}

	/* Sponsoren-Box */
	#sponsoren {
		position: relative;
		width: 100%;
		right: auto;
		top: auto;
		margin-top: 10px;
		box-sizing: border-box;
	}

	/* Tabellen: horizontal scrollbar */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	/* Formulare */
	textarea,
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	select {
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* Verhindert Zoom bei Fokus auf iOS */
	}

	textarea {
		width: 100% !important;
		cols: auto;
	}

	/* Bilder: max. Breite */
	img {
		max-width: 100%;
		height: auto;
	}

	/* Meldung-Zusatzinfo */
	.meldung_zusatzinfo {
		position: relative;
		width: 100%;
		right: auto;
		margin-top: 10px;
		box-sizing: border-box;
	}

	/* Footer */
	#footer {
		border-radius: 10px;
		margin-top: 10px;
		padding: 8px;
		font-size: 12px;
	}
}

/* --- Smartphone (max 480px) --- */
@media screen and (max-width: 480px) {

	/* Header-Bild kleiner */
	.header_img {
		border-radius: 10px;
	}

	/* HFP-Label noch kleiner */
	#hfp-label {
		font-size: 18px;
	}

	/* Menü-Punkte größer zum Tippen */
	#cssmenu a {
		padding: 14px 15px;
		font-size: 13px;
	}

	/* Content noch schmaler */
	#content_main {
		padding: 8px;
		border-radius: 8px;
	}

	/* Tabellen-Schrift kleiner */
	table {
		font-size: 13px;
	}

	/* Admin-Bereich: Buttons volle Breite */
	#content_main input[type="submit"],
	#content_main input[type="button"],
	#content_main button {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		margin-bottom: 8px;
		box-sizing: border-box;
	}

	/* Login-Formular */
	#slick-login input[type="text"],
	#slick-login input[type="password"] {
		width: 100% !important;
		font-size: 16px;
		padding: 12px;
		box-sizing: border-box;
	}
}