/* ================================================================
   Huppertz.net  -  zentrales Stylesheet (frameless Relaunch 2026)
   Farbschema der alten Seite: Petrol #009999 / #00848b, Dunkelblau #002e52
   ================================================================ */

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: #000000;
	font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

a       { color: #00848b; text-decoration: none; }
a:hover { color: #002e52; text-decoration: underline; }

/* ---------- Kopfbereich ---------- */

header.site-kopf {
	background: #ffffff;
	padding: 12px 20px 0 20px;
}

.kopf-innen {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.marke {
	font-style: italic;
	color: #009999;
	white-space: nowrap;
}
.marke a { color: #009999; }
.marke a:hover { color: #002e52; text-decoration: none; }
.marke .firma  { font-size: 24px; font-weight: bold; letter-spacing: 1px; }
.marke .claim  { font-size: 13px; margin-left: 8px; }

/* Hauptmenue als Text */
nav.hauptnav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
nav.hauptnav a {
	display: block;
	padding: 6px 14px;
	font-weight: bold;
	font-size: 15px;
	color: #00848b;
}
nav.hauptnav a:hover {
	color: #ffffff;
	background: #009999;
	text-decoration: none;
}
nav.hauptnav a.aktiv {
	color: #ffffff;
	background: #009999;
}

/* Petrolfarbene Linie unterm Kopf (ehem. Frame "linie") */
.kopflinie {
	height: 5px;
	background: linear-gradient(to right, #009999, #00848b 60%, #002e52);
	margin-top: 8px;
}

/* ---------- Unternavigation (Text statt GIF-Buttons) ---------- */

nav.subnav {
	max-width: 960px;
	margin: 0 auto;
	padding: 8px 20px 0 20px;
	font-size: 14px;
}
nav.subnav a       { color: #00848b; }
nav.subnav a:hover { color: #002e52; }
nav.subnav .aktiv  { color: #000000; font-weight: bold; }
nav.subnav .trenner { color: #009999; padding: 0 8px; }

/* ---------- Seitenaufbau: Seitenleiste + Inhalt ---------- */

.seite {
	max-width: 960px;
	margin: 0 auto;
	padding: 10px 20px 30px 20px;
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

aside.seitenleiste {
	flex: 0 0 160px;
	padding-top: 12px;
	font-size: 13px;
}
aside.seitenleiste img { max-width: 100%; height: auto; border: 0; }

.adresse {
	color: #00ac92;
	font-size: 12px;
	line-height: 1.35;
	font-weight: bold;
	font-style: italic;
	margin-top: 20px;
}
.adresse a { color: #00848b; }

main.inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Typografie im Inhalt ---------- */

main.inhalt h1 {
	color: #009999;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	margin: 12px 0 16px 0;
	line-height: 1.3;
}
main.inhalt h2 {
	color: #009999;
	font-size: 17px;
	font-style: italic;
	margin: 24px 0 10px 0;
}
main.inhalt ul { margin: 8px 0 16px 24px; padding: 0; }
main.inhalt li { margin-bottom: 4px; }
main.inhalt img { max-width: 100%; height: auto; border: 0; }

.bild-rechts { float: right; margin: 0 0 12px 20px; }
.bild-links  { float: left;  margin: 0 20px 12px 0; }
.clear { clear: both; }

.top-link { text-align: right; font-size: 13px; margin-top: 24px; }

/* Startseiten-Bildkomposition: bild1 + bild2 gehoeren zusammen (kein Abstand, kein Umbruch) */
.startbild {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	max-width: 450px; /* 203px + 247px Originalbreite */
	margin-bottom: 16px;
}
.startbild .sb-links  { flex: 0 0 45.1%; }  /* 203/450 */
.startbild .sb-rechts { flex: 0 0 54.9%; }  /* 247/450 */
.startbild img { display: block; width: 100%; height: auto; }
.startbild h1 { margin: 10px 0 0 0; }

/* zweispaltiger Text/Bild-Block */
.spalten {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 12px 0;
}
.spalten > div { flex: 1 1 260px; min-width: 220px; }

/* ---------- Fusszeile (ehem. Frame "unten") ---------- */

footer.fuss {
	background: #000000;
	margin-top: 20px;
}
.fuss-innen {
	max-width: 960px;
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 34px;
}
footer.fuss a {
	color: #ffffff;
	font-size: 13px;
	font-style: italic;
}
footer.fuss a:hover { color: #00ac92; text-decoration: none; }

/* ---------- Formular (Kontakt) ---------- */

.formular-tabelle { border-collapse: collapse; }
.formular-tabelle td { padding: 4px 10px 4px 0; vertical-align: top; font-size: 14px; }
.formular-tabelle input[type=text],
.formular-tabelle select,
.formular-tabelle textarea {
	font-family: inherit;
	font-size: 14px;
	padding: 3px 5px;
	border: 1px solid #009999;
}

/* ---------- Mobil ---------- */

@media (max-width: 700px) {
	.seite { flex-direction: column; }
	aside.seitenleiste { flex: 1 1 auto; }
	aside.seitenleiste img.logo { max-width: 124px; }
	.bild-rechts, .bild-links { float: none; margin: 12px 0; display: block; }
}