/* GasHai – static site stylesheet (look based on the former WordPress "Twenty Eleven" theme) */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 30px 37px;
	background: #e2e2e2;
	color: #373737;
	font: 300 15px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

a { color: #1982d1; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

strong, b { font-weight: bold; }

/* ---------- Page frame ---------- */
#page {
	max-width: 890px;
	margin: 0 auto;
	background: #fff;
}

/* ---------- Header / logo ---------- */
#branding {
	border-top: 2px solid #bbb;
}
#branding .logo { display: block; }
#branding .logo img { display: block; width: 100%; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Navigation bar ---------- */
#access {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	background: #222;
	background-image: linear-gradient(#252525, #0a0a0a);
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
	padding: 0 7.6%;
	font-size: 13px;
}
#access ul {
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
#access li a {
	display: block;
	color: #eee;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#access li a:hover, #access li a:focus {
	background: #efefef linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access li.current a { font-weight: bold; }

#access .lang {
	margin: 0;
	padding: 0.6em 0;
	display: flex;
	gap: 0.25em;
	font-size: 13px;
}
#access .lang a, #access .lang span {
	color: #eee;
	padding: 0.1em 0.5em;
	border-radius: 2px;
}
#access .lang span[aria-current] {
	background: #fff;
	color: #222;
	font-weight: bold;
}

/* ---------- Main content ---------- */
#main { padding: 1.625em 0 3em; }

article {
	margin: 0 7.6%;
}

.entry-title {
	color: #000;
	font-size: 36px;
	font-weight: bold;
	line-height: 1.33;
	margin: 0;
	padding: 15px 0 1.625em;
}

.entry-content h2 {
	color: #000;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	margin: 1.625em 0 0.5em;
}
.entry-content h2:first-child { margin-top: 0; }

.entry-content p { margin: 0 0 1.625em; }

.entry-content figure { margin: 0 0 1.625em; }

.center { text-align: center; }
.small { font-size: 75%; }
.lead-strong { font-size: 120%; font-weight: bold; }
.warn { color: #ff3366; }

/* Award line (text + Prix Inox badge) */
.award {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5em;
	flex-wrap: wrap;
	text-align: left;
}
.award img { flex: none; }

/* Two column block (hose side / bottle opener) */
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em 1.5em;
	margin: 0 0 1.625em;
}
.two-col p { margin: 0 0 0.75em; }

/* Image gallery ("Der GasHai kann noch mehr") */
.gallery figure { text-align: center; }
.gallery img { width: 400px; }
.gallery .caption { text-align: center; font-weight: bold; margin-bottom: 0.75em; }

/* ---------- Footer ---------- */
#colophon {
	border-top: 1px solid #ddd;
	padding: 1.2em 7.6%;
	font-size: 12px;
	color: #666;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5em 1.5em;
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
	body { padding: 0; }
	#branding { border-top: 0; }
	.entry-title { font-size: 28px; }
}

@media (max-width: 600px) {
	body { font-size: 15px; }
	#access { padding: 0 16px; }
	#access ul { margin-left: -0.6em; }
	#access li a { padding: 0 0.6em; line-height: 2.8em; }
	#access .lang { width: 100%; border-top: 1px solid #333; padding: 0.5em 0; }
	article { margin: 0 16px; }
	#colophon { padding: 1.2em 16px; }
	.entry-title { font-size: 24px; padding-top: 8px; padding-bottom: 1em; }
	.two-col { grid-template-columns: 1fr; }
	.award { flex-direction: column; text-align: center; }
}

@media print {
	body { background: #fff; padding: 0; }
	#access { display: none; }
}