/*
 * Base: fonts, reset, elements, forms, icons, utilities.
 * Element selectors and single classes only, so components can override
 * without !important.
 */

/* Fonts --------------------------------------------------------------- */

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../font/open-sans-v34-latin-regular.woff2") format("woff2"), url("../font/open-sans-v34-latin-regular.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../font/open-sans-v34-latin-italic.woff2") format("woff2"), url("../font/open-sans-v34-latin-italic.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../font/open-sans-v34-latin-700.woff2") format("woff2"), url("../font/open-sans-v34-latin-700.woff") format("woff");
}

@font-face {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	font-display: block;
	src: url("../font/fontello.woff?79248811") format("woff"), url("../font/fontello.ttf?79248811") format("truetype");
}

/* Reset --------------------------------------------------------------- */

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

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

body {
	margin: 0;
	overflow-x: hidden;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--color-text-soft);
	background: var(--color-page) linear-gradient(var(--color-page-top), var(--color-page)) no-repeat;
	background-size: 100% var(--page-fade-h);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote, form, fieldset {
	margin: 0;
	padding: 0;
}

fieldset {
	border: 0;
}

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

table {
	border-collapse: collapse;
}

::selection {
	color: var(--color-on-accent);
	background: var(--color-accent);
}

/* Type ---------------------------------------------------------------- */

h1, h2, h3 {
	color: var(--color-heading);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

h4 {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-text);
}

h5,
h6 {
	font-size: inherit;
	font-weight: var(--fw-bold);
	color: inherit;
}

h5 {
	text-transform: uppercase;
	letter-spacing: .03em;
}

h6 {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

strong, b {
	font-weight: var(--fw-bold);
}

hr {
	height: 0;
	margin: var(--space-3) 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

/* Links --------------------------------------------------------------- */

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-link-hover);
}

/* Links inside running text need more than colour (lists and tables: see .content) */
p a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Focus: visible for keyboard users. Browsers without :focus-visible drop
   the second rule and keep the ring for every focus, which is fine. */
:focus {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Forms --------------------------------------------------------------- */

label,
legend {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

label span,
legend span {
	font-weight: var(--fw-normal);
	color: var(--color-text-muted);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 10px;
	/* 16px keeps iOS Safari from zooming into the field */
	font: 16px/1.3 var(--font-sans);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(0, 127, 80, .15);
	outline: none;
}

textarea {
	min-height: 90px;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline;
	accent-color: var(--color-accent);
}

/* One button style. Icon buttons in the header reset it locally. */
button,
.button {
	display: inline-block;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	font: var(--fw-bold) var(--fs-base)/1.4 var(--font-sans);
	color: var(--color-on-accent);
	background: var(--color-button);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color var(--transition);
}

button:hover,
.button:hover {
	color: var(--color-on-accent);
	background: var(--color-button-hover);
}

/* Icons (Fontello) ---------------------------------------------------- */

[class^="icon-"]::before,
[class*=" icon-"]::before {
	display: inline-block;
	width: 1em;
	margin-right: .2em;
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	line-height: 1em;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	speak: never;
}

.icon-left::before { content: "\2190"; }
.icon-right::before { content: "\2192"; }
.icon-home::before { content: "\2302"; }
.icon-cancel-circle::before { content: "\2716"; }
.icon-facebook::before { content: "\e09c"; }
.icon-tag::before { content: "\e70c"; }
.icon-tags::before { content: "\e70d"; }
.icon-rss::before { content: "\e73a"; }
.icon-down-open::before { content: "\e75c"; }
.icon-left-open::before { content: "\e75d"; }
.icon-right-open::before { content: "\e75e"; }
.icon-up-open::before { content: "\e75f"; }
.icon-left-open-big::before { content: "\e765"; }
.icon-right-open-big::before { content: "\e766"; }
.icon-link-ext::before { content: "\f08e"; }
.icon-up-circled::before { content: "\f0aa"; }
.icon-food::before { content: "\f0f5"; }
/* These glyphs sit on emoji code points; the text-presentation selector
   (U+FE0E) keeps iOS from swapping in the colour emoji. */
.icon-picture::before { content: "\1f304\fe0e"; }
.icon-users::before { content: "\1f465\fe0e"; }
.icon-doc::before { content: "\1f4c4\fe0e"; }
.icon-calendar::before { content: "\1f4c5\fe0e"; }
.icon-book::before { content: "\1f4d5\fe0e"; }
.icon-phone::before { content: "\1f4de\fe0e"; }
.icon-search::before { content: "\1f50d\fe0e"; }
.icon-clock::before { content: "\1f554\fe0e"; }

/* Utilities ----------------------------------------------------------- */

.hidden {
	display: none !important;
}

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

.clear {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
}

.align_left { float: left; margin: 0 var(--space-3) var(--space-2) 0; }
.align_right { float: right; margin: 0 0 var(--space-2) var(--space-3); }
.align_center { text-align: center; }

/* Colour classes still used in content and templates */
.gruen,
.gruenhell { color: var(--color-heading); }
.textgrau { color: var(--color-text-soft); }
.hellgrau { color: var(--color-text-muted); }
.grau { color: var(--color-border); }
.black { color: var(--black) !important; }

.skip-link {
	position: absolute;
	top: var(--space-2);
	left: -9999px;
	z-index: 10000;
	padding: var(--space-2) var(--space-3);
	font-weight: var(--fw-bold);
	color: var(--color-link);
	background: var(--color-surface);
	box-shadow: var(--shadow-raised);
}

.skip-link:focus {
	left: var(--space-2);
}