/* ===================================================
   style_mobil.css – Mobile Responsive Styles
   Hartl Elektronik
   Immer NACH style.css einbinden
   =================================================== */

/* Box-Bild immer responsiv (alle Groessen) */
.box img {
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
}

/* Hamburger-Button: standardmaessig versteckt */
.hamburger {
	display: none;
	background-color: #315E88;
	border: none;
	cursor: pointer;
	padding: 8px 11px;
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 9999;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.hamburger span {
	display: block;
	width: 24px;
	height: 3px;
	background-color: #ffffff;
	margin: 5px 0;
	border-radius: 2px;
}


/* ===============================================
   A) SMARTPHONES HOCHFORMAT  (max. 560px)
   – einspaltig, Hamburger, Nav ausgeklappt
=============================================== */
@media only screen and (max-width: 560px) {

	.wrapper {
		width: 100% !important;
		border-left: none !important;
		border-right: none !important;
		overflow-x: hidden;
	}

	/* Kopfzeile */
	.upperhead {
		height: auto !important;
		padding: 6px 0 4px 0;
		text-align: center;
	}
	.tel {
		float: none !important;
		width: auto !important;
		margin: 0 auto !important;
		padding-left: 46px;
		padding-top: 14px;
		display: inline-block;
	}

	/* Underbanner: untereinander */
	.underbanner {
		height: auto !important;
		padding: 8px 10px !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.underbanner .column4,
	.underbanner .column5 {
		width: 100% !important;
		float: none !important;
		text-align: center !important;
		padding: 0 !important;
	}
	.underbanner form {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
	}
	.underbanner input[type="text"] {
		width: 100% !important;
		max-width: 260px;
		font-size: 16px;
		padding: 6px 8px;
		box-sizing: border-box;
	}
	.underbanner input[type="submit"] {
		padding: 6px 12px;
		font-size: 13px;
	}

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

	/* Linke Spalte: volle Breite, kein Float */
	.leftcolumn {
		width: 100% !important;
		float: none !important;
		padding: 0 !important;
	}

	/* Navigation: versteckt, per Klick oeffnen */
	#navvy {
		display: none;
		width: 100% !important;
	}
	#navvy.open {
		display: block !important;
	}
	ul#navvylist,
	ul#navvylist li {
		width: 244px !important;
	}
	#navvy .box {
		display: none;
	}

	/* Rechte Spalte: volle Breite */
	.rightcolumn {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 20px 12px 10px 12px !important;
	}

	h2 {
		width: 95% !important;
		font-size: 17px;
		padding-left: 15px !important;
	}
	.article {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.article p {
		font-size: 14px;
		line-height: 1.6;
	}
	.tabelle { padding-left: 10px !important; }
	.tabelle li { font-size: 13px; line-height: 1.8; }

	/* Footer */
	.footer { padding: 10px 5px; }
	.column1, .column2, .column3 {
		width: 100% !important;
		float: none !important;
		text-align: center !important;
		padding: 4px 0 !important;
	}
}


/* ===============================================
   B) SMARTPHONES QUERFORMAT + KLEINE TABLETS
      (561px - 900px)
   – Hamburger, Nav ausklappbar, Inhalt voll
=============================================== */
@media only screen and (min-width: 561px) and (max-width: 900px) {

	.wrapper {
		width: 100% !important;
		border-left: none !important;
		border-right: none !important;
		overflow-x: hidden;
	}

	/* Underbanner: nebeneinander */
	.underbanner {
		height: auto !important;
		padding: 4px 6px !important;
	}
	.underbanner .column4 { width: 60% !important; }
	.underbanner .column5 { width: 38% !important; }
	.underbanner input[type="text"] {
		font-size: 16px;
		width: 180px;
	}

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

	/* Linke Spalte: standardmaessig unsichtbar */
	.leftcolumn {
		width: 0 !important;
		min-width: 0 !important;
		padding: 0 !important;
		overflow: hidden;
		float: left !important;
		transition: width 0.2s ease;
	}
	/* Linke Spalte: eingeblendet wenn Menue offen */
	.leftcolumn.menu-open {
		width: 160px !important;
		padding-left: 5px !important;
		overflow: visible;
	}

	/* Navigation: versteckt */
	#navvy {
		display: none;
		width: 150px !important;
	}
	#navvy.open {
		display: block !important;
	}
	ul#navvylist,
	ul#navvylist li {
		width: 160px !important;
	}
	ul#navvylist li a {
		width: 110px !important;
	}
	ul#navvylist li a:hover {
		width: 90px !important;
	}
	#navvy .box {
		display: none;
	}

	/* Rechte Spalte: volle Breite wenn Menu zu */
	.rightcolumn {
		margin-left: 10px !important;
		margin-right: 5px !important;
		transition: margin-left 0.2s ease;
	}
	/* Rechte Spalte: schmaeler wenn Menu offen */
	.content.menu-open .rightcolumn {
		margin-left: 170px !important;
	}

	h2 { font-size: 16px; width: 95% !important; }
	.article {
		padding-left: 10px !important;
		padding-right: 8px !important;
	}
	.article p { font-size: 13px; line-height: 1.5; }
	.tabelle li { font-size: 12px; }

	/* Footer */
	.footer { padding: 8px 5px; }
	.column1, .column2, .column3 { width: 33% !important; }
}


/* ===============================================
   C) GROESSERE TABLETS  (901px - 1024px)
=============================================== */
@media only screen and (min-width: 901px) and (max-width: 1024px) {

	.wrapper {
		width: 100% !important;
		border-left: none !important;
		border-right: none !important;
	}
	.underbanner { height: auto !important; }
	.underbanner input[type="text"] { font-size: 16px; }

	.leftcolumn { width: 200px !important; }
	#navvy, ul#navvylist, ul#navvylist li { width: 200px !important; }
	ul#navvylist li a { width: 150px !important; }
	.box { width: 178px !important; }
	.rightcolumn { margin-left: 220px !important; }
}