/* hubert-hofherr.de – Stylesheet
   Desktop (ab 1000px Breite): Layout unverändert gegenüber der Originalseite.
   Darunter: gestapeltes, responsives Layout (siehe @media am Ende). */

html {
	height: 100%;
	max-height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	overflow: hidden;
	color: #000000;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #000000;
	background-color: #000e16;
	margin: 0px;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	padding: 0;
	background-image: url(../img/LederHG.png);
	border: 0;
}
p {
	margin: 0.1em 0;
	padding: 0;
}

#sitebereich { position: fixed; left: 50%; margin-left: -500px; top: 0px; width: 1000px; height: 100%; z-index: 1; }

#logo       { position: absolute; left: 5px;   top: 0px;   width: 491px; height: 309px; background-image: url(../img/Logo.png);   z-index: 20; }
#hubert     { position: absolute; left: 700px; top: 10px;  width: 251px; height: 292px; background-image: url(../img/Hubert.png); z-index: 20; }
#leder1     { position: absolute; left: 40px;  top: 300px; display: block; width: 935px; height: 50px; background-image: url(../img/Leder1.png); z-index: 18; }
#ledermitte { position: absolute; left: 40px;  top: 350px; bottom: 65px; width: 935px; z-index: 18; }
#leder2     { position: absolute; width: 935px; height: 100%; background-image: url(../img/Leder2.png); background-repeat: repeat-y; z-index: 18; }
#leder3     { position: absolute; left: 40px;  bottom: 15px; width: 935px; height: 50px; background-image: url(../img/Leder3.png); z-index: 18; }
#menu       { position: absolute; left: 120px; top: 220px; width: 480px; height: 66px; z-index: 20; }
#main       { position: absolute; left: 100px; top: 345px; width: 830px; bottom: 53px; overflow-y: auto; z-index: 25; }

.menutxt     { font-family: Verdana, Arial, Helvetica, sans-serif; color: #bdb7a2; font-size: 12px; }
.headertxt   { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003978; font-size: 20px; }
.tabelletop  { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 11px; }
.tabellenorm { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 12px; }
.b01         { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003978; font-size: 12px; }

a, a:active, a:focus { outline: 0; direction: ltr; text-decoration: none; color: #003978; }
a:hover { outline: 0; direction: ltr; text-decoration: none; color: #FF3300; }

a.link2, a.link2:active, a.link2:focus { outline: 0; direction: ltr; text-decoration: none; color: #bdb7a2; }
a.link2:hover { outline: 0; direction: ltr; font-weight: bold; text-decoration: none; color: #ffffff; }

a.link1, a.link1:active, a.link1:focus { outline: 0; direction: ltr; text-decoration: none; color: #a82229; }
a.link1:hover { outline: 0; direction: ltr; font-weight: bold; text-decoration: none; color: #ffffff; }

a.shoplink, a.shoplink:active, a.shoplink:focus { color: #003978; }
a.shoplink:hover { color: #FF3300; }

/* Kontaktformular */
.formfehler { color: #a82229; }
.hp-feld { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------
   Responsives Layout für Bildschirme unter 1000px (Tablet, Smartphone)
   ------------------------------------------------------------------ */
@media (max-width: 999px) {
	html, body { overflow: visible; height: auto; max-height: none; }
	body { -webkit-text-size-adjust: 100%; }

	#sitebereich {
		position: static; width: auto; height: auto; margin: 0;
		padding: 0 0 20px 0;
	}

	/* Kopfbereich: Logo links, Foto rechts, beide skaliert */
	#logo, #hubert {
		position: static; display: inline-block; vertical-align: top;
		background-size: contain; background-repeat: no-repeat;
	}
	#logo   { width: 62%; height: 0; padding-bottom: 39%; margin: 8px 0 0 2%; }
	#hubert { width: 30%; height: 0; padding-bottom: 35%; margin: 8px 2% 0 0; float: right; }

	/* Menü als umbrechende Liste */
	#menu { position: static; width: auto; height: auto; clear: both; padding: 10px 16px 6px 16px; }
	#menu table { width: 100% !important; }
	#menu tr, #menu td { display: inline; }
	#menu td { width: auto !important; height: auto !important; }
	#menu a { display: inline-block; padding: 6px 10px; font-size: 14px; }
	#menu td { font-size: 0; }
	#menu td a { font-size: 14px; }

	/* Lederrahmen als ein Block mit Hintergrund */
	#leder1, #leder3 { display: none; }
	#ledermitte {
		position: static; width: auto; margin: 0 8px;
		background-image: url(../img/Leder2.png); background-repeat: repeat-y;
		background-size: 100% auto;
		border-radius: 6px; overflow: hidden;
	}
	#leder2 { display: none; }
	#main {
		position: static; width: auto; margin: 0 8px; padding: 14px 16px 24px 16px;
		overflow: visible; box-sizing: border-box;
		background: #c8c1a3 url(../img/Leder2.png) repeat-y center top;
		background-size: 100% auto;
		border: 1px solid #333; border-radius: 6px;
		margin-top: 10px;
	}

	/* Inhaltstabellen fließend */
	#main table { width: 100% !important; max-width: 100%; }
	#main td { width: auto !important; }
	#main img, #main video { max-width: 100% !important; height: auto !important; }
	#main .headertxt { font-size: 18px; }
	#main .tabellenorm, #main .menutxt { font-size: 13px; line-height: 1.4; }

	/* Tourneeplan: Zeilen gestapelt */
	.tourtab tr.tabelletop { display: none; }
	.tourtab tr, .tourtab td { display: block; }
	.tourtab td { height: auto !important; padding: 1px 0; }
	.tourtab tr { padding: 6px 0; }
	.tourtab td:first-child span { font-weight: bold; }
	.tourtab td.ticket:empty { display: none; }

	/* Diskographie / Videos: Cover bzw. Video über dem Text */
	.diskotab tr.tabelletop, .videotab tr.tabelletop { display: none; }
	.diskotab tr, .diskotab td, .videotab tr, .videotab td { display: block; text-align: left !important; }
	.diskotab td, .videotab td { height: auto !important; padding: 2px 0; }
	.diskotab tr, .videotab tr { padding: 8px 0; }
	.videotab video { width: 100% !important; }

	/* Formular */
	.formtab, .formtab tr, .formtab td, .formtab table, .formtab tbody { display: block; width: 100% !important; }
	.formtab tr { height: auto !important; margin: 0 0 8px 0; }
	.formtab td { height: auto !important; padding: 2px 0; }
	.formtab td:empty, .formtab td:has(> br:only-child) { display: none; }
	.formtab td div[align="center"] { display: inline; }
	.formtab td.tabellenorm br { display: none; }
	.formtab input.field, .formtab textarea.field { width: 100%; box-sizing: border-box; font-size: 16px; }
	.formtab input[name="plz"] { width: 30%; }
	.formtab div[align="right"] { text-align: left; }
}
@media (max-width: 480px) {
	#logo   { width: 64%; padding-bottom: 40%; }
	#hubert { width: 32%; padding-bottom: 37%; }
	#menu a { padding: 6px 7px; font-size: 13px; }
}