/* =========================================================
   bba bernhard – Stylesheet
   Stand: 05.11.2026
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, p, a, img, ol, ul, li, table, tr, td,
header, footer, nav, main, article, aside, section, figure, picture {
	margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- Farben ---------- */
:root {
	--gruen: #00ad00;
	--gruen-dunkel: #007f00;   /* für Text auf hellem Grund (besserer Kontrast) */
	--grau-hell: #efefef;
	--grau: #bababa;
	--grau-aktiv: #5d5d5d;     /* entspricht dem früheren grau.png (50 % Schwarz) auf #bababa */
	--text: #1a1a1a;
}

/* ---------- Grundlayout ---------- */
html { font-size: 100%; scroll-behavior: smooth; }
body {
	background-color: var(--grau-hell);
	color: var(--text);
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 0.94rem;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

.root { max-width: 960px; margin: 0 auto; }

/* Header-Bild: auf ALLEN Seiten volle Fensterbreite */
.site-header { width: 100%; padding: 0.5em 0; }
.site-header img { width: 100%; height: auto; aspect-ratio: 2208 / 480; object-fit: cover; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { color: var(--gruen); font-weight: bold; line-height: 1.25; padding-bottom: 0.5em; }
h1 { font-size: 1.7em; padding-top: 1em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }

.content > h2, .content > h3 { margin-top: 1.5em; }
.content > p, .content > ul, .content > table { margin-bottom: 1em; }

.content ul { margin-left: 1.6em; }
.content ul li { list-style-type: disc; padding-left: 0.2em; }
.content ul li::marker { color: var(--gruen); }

a { color: var(--gruen-dunkel); }
a:hover, a:focus { color: var(--gruen); }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

strong { font-weight: bold; }
em { font-style: italic; }

.brand-bba { color: var(--gruen); font-weight: bold; }

.content table td { padding: 0.15em 1.5em 0.15em 0; vertical-align: top; }

/* ---------- Raster ---------- */
[class*="col-"] { width: 100%; float: left; padding: 0.5em; }
.row::after { content: ""; clear: both; display: block; }
.clear { clear: both; }
.center { text-align: center; }

@media (min-width: 600px) {
	.col-1 { width: 8.33%; }  .col-2 { width: 16.66%; } .col-3 { width: 25%; }
	.col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; }
	.col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; }
	.col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; }
}

/* Zertifikate */
.zertifikate { display: flex; flex-wrap: wrap; gap: 2em; justify-content: flex-start; padding: 0.5em 0.5em 2em; }
.zertifikate img { width: 220px; max-width: 45%; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

/* ---------- Navigation ---------- */
.nav { background-color: var(--grau); position: relative; }
.nav a { display: block; color: #fff; text-decoration: none; padding: 10px; }
.nav a:hover, .nav a:focus { background-color: rgba(0,0,0,0.5); color: #fff; }
.nav .current a { background-color: rgba(0,0,0,0.5); color: var(--gruen); }

/* Menü-Schalter (nur mobil sichtbar). Checkbox bleibt per Tastatur erreichbar. */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.nav-label { display: none; color: #fff; padding: 10px; cursor: pointer; user-select: none; }
.nav-toggle:focus-visible + .nav-label { outline: 2px solid var(--gruen); outline-offset: -2px; }

/* Desktop: Menüpunkte nebeneinander, gleichmäßig verteilt */
@media (min-width: 800px) {
	.nav ul { display: flex; }
	.nav li { flex: 1 1 auto; border-right: 1px solid #fff; }
	.nav li:last-child { border-right: 0; }
	.nav a { text-align: center; padding: 4px 10px; white-space: nowrap; }
}

/* Mobil/Tablet: Aufklappmenü */
@media (max-width: 799px) {
	.nav { margin: 0 5px; }
	.nav-label { display: block; }
	.nav ul { display: none; }
	.nav-toggle:checked ~ ul { display: block; }
	.nav li { padding-left: 10px; }
	.nav a::before { content: "\203A\00a0"; }   /* › */
	.zertifikate { justify-content: center; }
}

main { padding: 0 5px; }

/* ---------- Footer ---------- */
.site-footer { background-color: var(--grau); color: #fff; padding: 1em; margin-top: 1em; }
.site-footer a { color: #fff; }
.site-footer a:hover, .site-footer a:focus { color: #fff; text-decoration: none; }
.site-footer address { font-style: normal; }
.site-footer .footer-legal { padding-top: 1em; }

@media (max-width: 1070px) {
	.site-footer [class*="col-"] { text-align: center; }
	.site-footer .spacer { display: none; }
}

/* ---------- Nach-oben-Button ---------- */
.back-to-top {
	display: none; width: 40px; height: 40px; text-indent: -9999px; overflow: hidden;
	position: fixed; z-index: 999; right: 30px; bottom: 30px; border-radius: 50%;
	background: var(--gruen) url("../images/up-arrow.png") no-repeat center 43%;
}
.back-to-top:hover, .back-to-top:focus { background-image: url("../images/up-arrow-2.png"); }
.back-to-top.is-visible { display: block; }

/* ---------- Druck ---------- */
@media print {
	.nav, .back-to-top, .site-header { display: none; }
	body { background: #fff; }
	.site-footer { background: #fff; color: #000; }
	.site-footer a { color: #000; }
}