@import url("fontawesome-all.min.css");

/* ==========================================================================
   FONTS & BASICS
   ========================================================================== */

/* Lato Regular */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/lato-regular.woff2') format('woff2');
  font-display: swap;
}

/* Lato Italic */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../webfonts/lato-italic.woff2') format('woff2');
  font-display: swap;
}

/* Lato Bold */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/lato-bold.woff2') format('woff2');
  font-display: swap;
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

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

/* ==========================================================================
   CSS RESET (HTML5 UP "Read Only" Base)
   ========================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	background: #fff;
	-webkit-text-size-adjust: none;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
mark { background-color: transparent; color: inherit; }

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

/* ==========================================================================
   TYPOGRAPHY & BASIC ELEMENTS
   ========================================================================== */

body, input, select, textarea {
	color: #888;
	font-family: "Lato", sans-serif;
	font-size: 16pt;
	font-weight: 400;
	line-height: 1.75em;
}

a {
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	border-bottom: solid 1px #e4e4e4;
	color: inherit;
	text-decoration: none;
}

a:hover {
	border-bottom-color: transparent;
	color: #76a741 !important;
}

strong, b { color: #777; font-weight: 700; }
em, i { font-style: italic; }
p { margin: 0 0 2.25em 0; }

h1, h2, h3, h4, h5, h6 {
	color: #777;
	font-weight: 700;
	line-height: 1em;
	margin: 0 0 0.5625em 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	border: 0;
	color: inherit;
	text-decoration: none;
}

h2 { font-size: 2em; line-height: 1.5em; }
h3 { font-size: 1.75em; line-height: 1.5em; }
h4 { font-size: 1.25em; line-height: 1.5em; }
h5 { font-size: 0.9em; line-height: 1.5em; }
h6 { font-size: 0.7em; line-height: 1.5em; }

sub { font-size: 0.8em; position: relative; top: 0.5em; }
sup { font-size: 0.8em; position: relative; top: -0.5em; }

hr {
	border: 0;
	border-bottom: solid 2px #f4f4f4;
	margin: 2.25em 0;
}
hr.major { margin: 3.375em 0; }

blockquote {
	border-left: solid 8px #e4e4e4;
	font-style: italic;
	margin: 0 0 2.25em 0;
	padding: 0.5em 0 0.5em 2em;
}

code {
	background: #555;
	border-radius: 5px;
	color: #fff;
	font-family: "Source Code Pro", monospace;
	font-size: 0.9em;
	margin: 0 0.25em;
	padding: 0.25em 0.65em;
}

pre {
	font-family: "Source Code Pro", monospace;
	font-size: 0.9em;
	margin: 0 0 2.25em 0;
}
pre code {
	-webkit-overflow-scrolling: touch;
	display: block;
	line-height: 1.5em;
	overflow-x: auto;
	padding: 1em 1.5em;
}

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* ==========================================================================
   FLEXBOX GRID SYSTEM
   ========================================================================== */

.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
	margin-top: 0;
	margin-left: -2em;
}
.row > * { box-sizing: border-box; padding: 0 0 0 2em; }
.row.gtr-uniform { margin-top: -2em; }
.row.gtr-uniform > * { padding-top: 2em; }
.row.gtr-uniform > * > :last-child { margin-bottom: 0; }

.row.aln-left { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right { justify-content: flex-end; }
.row.aln-top { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }
.row > .imp { order: -1; }

.row > .col-1  { width: 8.33333%; }   .row > .off-1  { margin-left: 8.33333%; }
.row > .col-2  { width: 16.66667%; }  .row > .off-2  { margin-left: 16.66667%; }
.row > .col-3  { width: 25%; }        .row > .off-3  { margin-left: 25%; }
.row > .col-4  { width: 33.33333%; }  .row > .off-4  { margin-left: 33.33333%; }
.row > .col-5  { width: 41.66667%; }  .row > .off-5  { margin-left: 41.66667%; }
.row > .col-6  { width: 50%; }        .row > .off-6  { margin-left: 50%; }
.row > .col-7  { width: 58.33333%; }  .row > .off-7  { margin-left: 58.33333%; }
.row > .col-8  { width: 66.66667%; }  .row > .off-8  { margin-left: 66.66667%; }
.row > .col-9  { width: 75%; }        .row > .off-9  { margin-left: 75%; }
.row > .col-10 { width: 83.33333%; }  .row > .off-10 { margin-left: 83.33333%; }
.row > .col-11 { width: 91.66667%; }  .row > .off-11 { margin-left: 91.66667%; }
.row > .col-12 { width: 100%; }       .row > .off-12 { margin-left: 100%; }

.row.gtr-0 { margin-top: 0; margin-left: 0em; }
.row.gtr-0 > * { padding: 0 0 0 0em; }
.row.gtr-0.gtr-uniform { margin-top: 0em; }
.row.gtr-0.gtr-uniform > * { padding-top: 0em; }

.row.gtr-25 { margin-top: 0; margin-left: -0.5em; }
.row.gtr-25 > * { padding: 0 0 0 0.5em; }
.row.gtr-25.gtr-uniform { margin-top: -0.5em; }
.row.gtr-25.gtr-uniform > * { padding-top: 0.5em; }

.row.gtr-50 { margin-top: 0; margin-left: -1em; }
.row.gtr-50 > * { padding: 0 0 0 1em; }
.row.gtr-50.gtr-uniform { margin-top: -1em; }
.row.gtr-50.gtr-uniform > * { padding-top: 1em; }

.row.gtr-150 { margin-top: 0; margin-left: -3em; }
.row.gtr-150 > * { padding: 0 0 0 3em; }
.row.gtr-150.gtr-uniform { margin-top: -3em; }
.row.gtr-150.gtr-uniform > * { padding-top: 3em; }

.row.gtr-200 { margin-top: 0; margin-left: -4em; }
.row.gtr-200 > * { padding: 0 0 0 4em; }
.row.gtr-200.gtr-uniform { margin-top: -4em; }
.row.gtr-200.gtr-uniform > * { padding-top: 4em; }

/* ==========================================================================
   CONTAINERS & FORMS
   ========================================================================== */

.container { margin: 0 auto; max-width: calc(100% - 4.5em); width: 45em; }
.container.xsmall { width: 11.25em; }
.container.small { width: 22.5em; }
.container.medium { width: 33.75em; }
.container.large { width: 56.25em; }
.container.xlarge { width: 67.5em; }
.container.max { width: 100%; }

section.special, article.special { text-align: center; }

header p { color: #aaa; position: relative; margin: 0 0 1.6875em 0; }
header h2 + p { font-size: 1.25em; margin-top: -0.5em; line-height: 1.5em; }
header h3 + p { font-size: 1.1em; margin-top: -0.35em; line-height: 1.5em; }
header h4 + p, header h5 + p, header h6 + p { font-size: 0.9em; margin-top: -0.25em; line-height: 1.5em; }
header.major h2 { color: #76a741; font-size: 3.5em; }
header.major h2 + p { color: #777; font-size: 1.75em; font-weight: 700; margin-top: -0.75em; }

form { margin: 0 0 2.25em 0; }
label { color: #777; display: block; font-size: 0.9em; font-weight: 700; margin: 0 0 1.125em 0; }

input[type="text"], input[type="password"], input[type="email"], select, textarea {
	border-radius: 5px;
	border: solid 2px #e4e4e4;
	color: inherit;
	display: block;
	outline: 0;
	padding: 0 1em;
	text-decoration: none;
	width: 100%;
}
input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, select:invalid, textarea:invalid { box-shadow: none; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus { border-color: #76a741; }
input[type="text"], input[type="password"], input[type="email"], select { height: 2.75em; }
textarea { padding: 0.75em 1em; }

select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e4e4e4' /%3E%3C/svg%3E");
	background-size: 1.25em;
	background-repeat: no-repeat;
	background-position: calc(100% - 1em) center;
	padding-right: 2.75em;
	text-overflow: ellipsis;
}
select option { color: #777; background: #fff; }
select:focus::-ms-value { background-color: transparent; }
select::-ms-expand { display: none; }

input[type="checkbox"], input[type="radio"] {
	display: block;
	float: left;
	margin-right: -2em;
	opacity: 0;
	width: 1em;
	z-index: -1;
}
input[type="checkbox"] + label, input[type="radio"] + label {
	text-decoration: none;
	color: #888;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 400;
	padding-left: 2.4em;
	padding-right: 0.75em;
	position: relative;
}
input[type="checkbox"] + label:before, input[type="radio"] + label:before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	background: #fafafa;
	border-radius: 5px;
	border: solid 2px #e4e4e4;
	content: '';
	font-size: 0.8em;
	height: 2.0625em;
	left: 0;
	line-height: 2.0625em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 2.0625em;
}
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before {
	background: #989898;
	border-color: #989898;
	color: #ffffff;
	content: '\f00c';
}
input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before { border-color: #76a741; }
input[type="radio"] + label:before { border-radius: 100%; }

::-webkit-input-placeholder { color: #aaa !important; font-style: italic; opacity: 1.0; }
:-moz-placeholder { color: #aaa !important; font-style: italic; opacity: 1.0; }
::-moz-placeholder { color: #aaa !important; font-style: italic; opacity: 1.0; }
:-ms-input-placeholder { color: #aaa !important; font-style: italic; opacity: 1.0; }

/* ==========================================================================
   COMPONENTS (BOXES, IMAGES, TABLES, BUTTONS)
   ========================================================================== */

.box {
	border-radius: 5px;
	border: solid 2px #e4e4e4;
	margin-bottom: 2.25em;
	padding: 1.5em;
}
.box > :last-child, .box > :last-child > :last-child, .box > :last-child > :last-child > :last-child { margin-bottom: 0; }
.box.alt { border: 0; border-radius: 0; padding: 0; }

.icon { text-decoration: none; border-bottom: none; position: relative; }
.icon:before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: inherit;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}
.icon > .label { display: none; }
.icon.solid:before { font-weight: 900; }
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }

.image { border-radius: 5px; border: 0; display: inline-block; position: relative; }
.image img { border-radius: 5px; display: block; }
.image[data-position] img { object-fit: cover; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.image[data-position="top left"] img { object-position: top left; }
.image[data-position="top"] img { object-position: top; }
.image[data-position="top right"] img { object-position: top right; }
.image[data-position="right"] img { object-position: right; }
.image[data-position="bottom right"] img { object-position: bottom right; }
.image[data-position="bottom"] img { object-position: bottom; }
.image[data-position="bottom left"] img { object-position: bottom left; }
.image[data-position="left"] img { object-position: left; }
.image[data-position="center"] img { object-position: center; }
.image[data-position="25% 25%"] img { object-position: 25% 25%; }
.image[data-position="75% 25%"] img { object-position: 75% 25%; }
.image[data-position="75% 75%"] img { object-position: 75% 75%; }
.image[data-position="25% 75%"] img { object-position: 25% 75%; }

.image.left { float: left; margin: 0 2.5em 2em 0; top: 0.25em; }
.image.right { float: right; margin: 0 0 2em 2.5em; top: 0.25em; }
.image.fit { display: block; margin: 0 0 2.25em 0; width: 100%; }
.image.fit img { display: block; width: 100%; }
.image.avatar { border-radius: 100%; overflow: hidden; }
.image.avatar img { border-radius: 100%; display: block; width: 100%; }

ol { list-style: decimal; margin: 0 0 2.25em 0; padding-left: 1.25em; }
ol li { padding-left: 0.25em; }
ul { list-style: disc; margin: 0 0 2.25em 0; padding-left: 1em; }
ul li { padding-left: 0.5em; }
ul.alt { list-style: none; padding-left: 0; }
ul.alt li { border-top: solid 2px #f4f4f4; padding: 0.5em 0; }
ul.alt li:first-child { border-top: 0; padding-top: 0; }
dl { margin: 0 0 2.25em 0; }

ul.actions { display: flex; cursor: default; list-style: none; margin-left: -1.125em; padding-left: 0; }
ul.actions li { padding: 0 0 0 1.125em; vertical-align: middle; }
ul.actions.special { justify-content: center; width: 100%; margin-left: 0; }
ul.actions.special li:first-child { padding-left: 0; }
ul.actions.stacked { flex-direction: column; margin-left: 0; }
ul.actions.stacked li { padding: 1.125em 0 0 0; }
ul.actions.stacked li:first-child { padding-top: 0; }
ul.actions.fit { width: calc(100% + 1.125em); }
ul.actions.fit li { flex-grow: 1; flex-shrink: 1; width: 100%; }
ul.actions.fit li > * { width: 100%; }

ul.feature-icons { list-style: none; padding-left: 0; }
ul.feature-icons li { text-decoration: none; display: inline-block; margin: 0 0 1.6875em 0; padding: 0.35em 0 0 3.5em; position: relative; vertical-align: top; width: 48%; }
ul.feature-icons li:before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	background: #76a741;
	border-radius: 100%;
	color: #ffffff;
	display: block;
	height: 2.5em;
	left: 0;
	line-height: 2.5em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 2.5em;
}

ul.icons { cursor: default; list-style: none; padding-left: 0; }
ul.icons li { display: inline-block; padding: 0 1em 0 0; }
ul.icons li:last-child { padding-right: 0 !important; }
ul.icons li .icon:before { font-size: 1.25em; }

.table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; }
table { margin: 0 0 2.25em 0; width: 100%; }
table tbody tr { border: solid 2px #f4f4f4; border-left: 0; border-right: 0; }
table tbody tr:nth-child(2n + 1) { background-color: #fafafa; }
table td { padding: 0.75em 0.75em; }
table th { color: #777; font-size: 0.9em; font-weight: 700; padding: 0 0.75em 0.75em 0.75em; text-align: left; }
table thead { border-bottom: solid 4px #e4e4e4; }
table tfoot { border-top: solid 4px #e4e4e4; }
table.alt { border-collapse: separate; }
table.alt tbody tr td { border: solid 2px #e4e4e4; border-left-width: 0; border-top-width: 0; }
table.alt tbody tr td:first-child { border-left-width: 2px; }
table.alt tbody tr:first-child td { border-top-width: 2px; }
table.alt thead { border-bottom: 0; }
table.alt tfoot { border-top: 0; }

input[type="submit"], input[type="reset"], input[type="button"], .button {
	appearance: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	background-color: #989898;
	border-radius: 5px;
	border: 0;
	color: #ffffff !important;
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	height: 2.75em;
	line-height: 2.75em;
	padding: 0 1.5em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:hover { background-color: #a5a5a5; color: #ffffff !important; }
input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, .button:active { background-color: #8b8b8b; }
input[type="submit"].icon, input[type="reset"].icon, input[type="button"].icon, .button.icon { padding-left: 1.35em; }
input[type="submit"].icon:before, input[type="reset"].icon:before, input[type="button"].icon:before, .button.icon:before { margin-right: 0.5em; }
input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit, .button.fit { width: 100%; }
input[type="submit"].small, input[type="reset"].small, input[type="button"].small, .button.small { font-size: 0.8em; }
input[type="submit"].large, input[type="reset"].large, input[type="button"].large, .button.large { font-size: 1.35em; }

input[type="submit"].alt, input[type="reset"].alt, input[type="button"].alt, .button.alt { background-color: transparent; box-shadow: inset 0 0 0 2px #e4e4e4; color: #777 !important; }
input[type="submit"].alt:hover, input[type="reset"].alt:hover, input[type="button"].alt:hover, .button.alt:hover { background-color: #f4f4f4; color: #777 !important; }
input[type="submit"].alt:active, input[type="reset"].alt:active, input[type="button"].alt:active, .button.alt:active { background-color: #eaeaea; }
input[type="submit"].alt.icon:before, input[type="reset"].alt.icon:before, input[type="button"].alt.icon:before, .button.alt.icon:before { color: #aaa; }

input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, .button.primary { background-color: #76a741; color: #ffffff !important; }
input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover, .button.primary:hover { background-color: #A2C04D; }
input[type="submit"].primary:active, input[type="reset"].primary:active, input[type="button"].primary:active, .button.primary:active { background-color: #d1dc9b; }

input[type="submit"].disabled, input[type="submit"]:disabled, input[type="reset"].disabled, input[type="reset"]:disabled, input[type="button"].disabled, input[type="button"]:disabled, .button.disabled, .button:disabled {
	background-color: #888 !important;
	box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
	color: #fff !important;
	cursor: default;
	opacity: 0.25;
}

.features article { border-top: solid 3px #f4f4f4; margin-bottom: 2.25em; padding-top: 2.25em; }
.features article:first-child { border-top: 0; padding-top: 0; }
.features article .image { display: inline-block; padding-right: 2.5em; vertical-align: middle; width: 48%; }
.features article .image img { display: block; width: 100%; }
.features article .inner { display: inline-block; vertical-align: middle; width: 50%; }
.features article .inner > :last-child { margin-bottom: 0; }

/* ==========================================================================
   LAYOUT STRUCTURE (HEADER & WRAPPER)
   ========================================================================== */

#header {
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	background: #76a741;
	color: #d1dc9b;
	height: 100%;
	min-height: 100vh !important;
	overflow-y: auto;
	position: fixed;
	text-align: center;
	top: 0;
	width: 23em;
	right: 0;
	padding-bottom: 0 !important;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 { color: #ffffff; }
#header h1 a, #header h2 a, #header h3 a, #header h4 a, #header h5 a, #header h6 a { color: #ffffff; }
#header header p { color: #a2c04d; }
#header a { color: #d1dc9b; }
#header a:hover { color: #ffffff !important; }

#header > header {
	flex-shrink: 0;
	padding: 1.5em 0 1em 0 !important;
}
#header > header .avatar { display: block; margin: 0 auto 1em auto; width: 7em; }
#header > header h1 { font-size: 1.25em; margin: 0; }
#header > header p { color: #d1dc9b; font-style: italic; margin: 0.5em 0 0 0; }

#header > nav { flex-grow: 1; }
#header > nav ul { list-style: none; margin: 0; padding: 0; border-bottom: solid 1px #a2c04d; }
#header > nav ul li { border-top: solid 1px #a2c04d; display: block; padding: 0 !important; }
#header > nav ul li:first-child { border-top: 0; }
#header > nav ul li:last-child { margin-bottom: 0; }
#header > nav ul li a { border: 0; color: #ffffff !important; display: block; padding: 0.4em 0 !important; text-decoration: none; }
#header > nav ul li a.active { background: #fff; color: #76a741 !important; }

/* Submenu / Unterlisten-Struktur */
#nav ul li ul { margin: 0 0 0.5em 1.2em !important; }
#nav ul li ul li a { padding: 0.1em 0 !important; }

#header > footer {
	flex-shrink: 0;
	bottom: 0;
	left: 0;
	padding: 0 2em 3em 2em !important;
	width: 100%;
	margin-top: auto !important;
	text-align: center;
}
#header > footer .icons { margin: 0; }
#header > footer .icons li a { color: #a2c04d; }

#wrapper { background: #fff; padding-right: 23em; overflow: visible !important; }

#main > section { border-top: solid 6px #f4f4f4; position: relative !important; z-index: 10 !important; background: #ffffff !important; box-shadow: 0 -10px 20px rgba(0,0,0,0.05); }
#main > section > .container { padding: 6em 0 4em 0; }
#main > section:first-child { border-top: 0; }

#one, #two, #three, #four { position: relative !important; z-index: 0 !important; background: #ffffff !important; }

#footer { background: #fafafa; border-top: 0; color: #c0c0c0; overflow: hidden; padding: 4em 0 2em 0; text-align: center; }
#footer .copyright { line-height: 1em; list-style: none; padding: 0; }
#footer .copyright li { border-left: solid 1px #d4d4d4; display: inline-block; font-size: 0.8em; margin-left: 1em; padding-left: 1em; }
#footer .copyright li:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
#footer .copyright li a { color: inherit; }

#titleBar { display: none; }

/* ==========================================================================
   RESPONSIVE / MEDIA QUERIES
   ========================================================================== */

/* --- XLARGE (1680px) --- */
@media screen and (max-width: 1680px) {
    body, input, select, textarea { font-size: 13pt; }
    #header { width: 21em; }
    #header > header { padding: 2em; }
    #header > footer { padding: 1em; }
    #wrapper { padding-right: 21em; }
    #main > section > .container { padding: 4em 0 2em 0; }
}

/* --- LARGE (1280px) --- */
@media screen and (max-width: 1280px) {
    body, input, select, textarea { font-size: 11pt; }
    #header { width: 20em; }
    #wrapper { padding-right: 20em; }
}

/* --- MEDIUM (1024px) --- */
@media screen and (max-width: 1024px) {
    html, body { overflow-x: hidden; }
    body, input, select, textarea { font-size: 12pt; }
    .container { width: 100% !important; }
    .image.left, .image.right { max-width: 40%; }
    .image.left img, .image.right img { width: 100%; }
    .image.main { height: 20em; }
    
    /* --- Auf dem Tablet normale Bilder ÜBER den Text zwingen, zentrieren & auf 75% begrenzen --- */
    .row:not(#bilder .row) { 
        margin-left: 0 !important; 
        display: flex !important;
        flex-direction: column !important; /* Zwingt Elemente untereinander */
        align-items: center !important;    /* Zentriert die Elemente in der Reihe */
    }
    .row:not(#bilder .row) > * { 
        width: 100% !important; /* Text nutzt die volle Breite */
        padding-left: 0 !important; 
        margin-bottom: 1.5em; 
    }
    /* Gezielte Anpassung für die Bild-Spalten in den normalen Text-Reihen */
    .row:not(#bilder .row) > .col-4,
    .row:not(#bilder .row) > .col-4-tablet { 
        width: 75% !important;  /* Bild-Container wird auf 75% gesetzt */
        text-align: center;
    }
    .row:not(#bilder .row) > *:last-child { margin-bottom: 0; }
    
    /* --- Bildergalerie auf dem Tablet: Schön kompakt nebeneinander --- */
    #bilder .row {
        display: flex !important;
        flex-direction: row !important; /* Spalten nebeneinander lassen */
        flex-wrap: wrap !important;
        margin-left: -1em !important;
    }
    #bilder .row > * {
        width: 33.333% !important;   /* Zeigt 3 Galerie-Bilder nebeneinander auf dem Tablet */
        padding-left: 1em !important;
        margin-bottom: 1em !important;
    }
    #bilder .image.fit {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Ab hier läuft dein bestehender Code für das Header-Menü unverändert weiter */
    #header {
        backface-visibility: hidden;
        transition: transform 0.5s ease;
        display: block;
        height: 100%;
        overflow-y: auto;
        position: fixed;
        top: 0;
        width: 23em;
        z-index: 10002;
        transform: translateX(23em);
        right: 0;
    }
    #header > footer { bottom: auto; left: auto; margin: 0.5em 0 0 0; position: relative; right: auto; top: auto; }
    #wrapper { backface-visibility: hidden; transition: transform 0.5s ease; padding: 44px 0 1px 0; }
    
    #titleBar {
        backface-visibility: hidden;
        transition: transform 0.5s ease;
        display: block;
        height: 44px;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10001;
        background: #222;
        color: #fff;
        min-width: 320px;
    }
    #titleBar .title { color: #fff; display: block; font-weight: 700; height: 44px; line-height: 44px; padding: 0 1em; width: 100%; text-align: left; }
    #titleBar .title a { border: 0; text-decoration: none; }
    #titleBar .toggle { text-decoration: none; height: 4em; position: absolute; top: 0; width: 6em; border: 0; outline: 0; right: 0; }
    #titleBar .toggle:before {
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        background: #76a741;
        color: #ffffff;
        content: '\f0c9';
        display: block;
        font-size: 18px;
        height: 44px;
        line-height: 44px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 64px;
        right: 0;
    }
    
    body.header-visible #wrapper, body.header-visible #titleBar { transform: translateX(-23em); }
    body.header-visible #header { transform: translateX(0); }
}

/* --- SMALL (736px) & XSMALL (480px) GEMEINSAME REGELN --- */
@media screen and (max-width: 736px) {
    body, input, select, textarea { font-size: 12pt; }
    h1 br, h2 br, h3 br, h4 br, h5 br, h6 br, header br { display: none; }
    h2 { font-size: 1.75em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1em; }
    .image.left { margin: 0 1.5em 1em 0; }
    .image.right { margin: 0 0 1em 1.5em; }
    .image.main { height: 12em; }
    header.major h2 { font-size: 2.5em; }
    header.major h2 + p { font-size: 1.5em; }

    /* Kontaktformular Anpassungen */
    #kontakt .row { margin-left: -1em !important; margin-top: 0 !important; }
    #kontakt .row > * { padding-left: 1em !important; padding-top: 0.25em !important; }
    #kontakt label { margin-bottom: 0.25em !important; }
    #kontakt p { margin-bottom: 0.25em !important; }
    #kontakt input[type="text"], #kontakt input[type="email"], #kontakt select, #kontakt textarea { height: 2.5em; line-height: 1.4em; }
    #kontakt textarea { height: auto; padding: 0.5em 0.75em; }
    #kontakt input[type="checkbox"] + label, #kontakt input[type="radio"] + label { padding-left: 2.2em; margin-bottom: 0.5em; }
    #kontakt h4 { margin-bottom: 0.1em !important; }
    #kontakt .col-12 + .col-12 { margin-top: 0; }

    /* --- Auch auf dem Handy: Normale Bilder über den Text, zentriert & 75% --- */
    .row:not(#bilder .row) { margin-left: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .row:not(#bilder .row) > * { width: 100% !important; padding-left: 0 !important; margin-bottom: 1.5em; }
    .row:not(#bilder .row) > .col-4, .row:not(#bilder .row) > .col-4-tablet { width: 75% !important; text-align: center; }
    .row:not(#bilder .row) > *:last-child { margin-bottom: 0; }
    
    /* --- SPEZIELL FÜR DIE BILDER-GALERIE: 2 Spalten nebeneinander --- */
    #bilder .row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; margin-left: -1em !important; }
    #bilder .row > * { width: 50% !important; padding-left: 1em !important; margin-bottom: 1em !important; }
    #bilder .image.fit { margin: 0 !important; width: 100% !important; }
    
    /* --- Header & Navigation Mobile --- */
    #header { width: 17em; transform: translateX(17em); right: 0; }
    #header > header { padding: 1.2em 1em 0.5em 1em; }
    #header > header .avatar { margin: 0 auto 0.5em auto; width: 6em; }
    #header > header h1 { font-size: 1.2em; }
    #header > header p { margin: 1em 0 0 0; }
    
    #header > footer { padding: 0.5em 1em; padding-bottom: 6em !important; margin-top: 1em !important; }
    
    #main > section > .container { padding: 2em 0 0 0; }
    #footer .copyright li { border-left: 0; display: block; line-height: 1.75em; margin: 0.75em 0 0 0; padding-left: 0; }
    #footer .copyright li:first-child { margin-top: 0; }
    #titleBar .toggle { height: 4em; width: 6em; }
    #titleBar .toggle:before { font-size: 14px; width: 44px; }
    
    body.header-visible #wrapper, body.header-visible #titleBar { transform: translateX(-17em); }
    
    /* Scroll-to-Top Button Mobile */
    .scroll-to-top { display: block; position: fixed; bottom: 15px; right: 15px; width: 40px; height: 40px; background-color: #a2c04d; color: #ffffff !important; border-radius: 50%; text-align: center; line-height: 40px; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); text-decoration: none; border-bottom: none !important; }
    .scroll-to-top.visible { opacity: 1; visibility: visible; }
    .scroll-to-top:active { background-color: #5d8434; transform: scale(0.9); }
    @media (hover: hover) { .scroll-to-top:hover { background-color: #5d8434; transform: translateY(-5px); } }
    
    /* Lightbox Pfeile Mobile */
    .nav-arrow { font-size: 2rem; padding: 10px; }
    
    /* ATM Zertifikat Mobile */
    .zertifikat-wrapper a { width: 100px !important; height: 100px !important; }
}

/* --- XSMALL (480px) SPEZIAL-ERSTECKUNGEN --- */
@media screen and (max-width: 480px) {
    html, body { min-width: 320px; }
    .container { max-width: calc(100% - 3.375em); }
    
    ul.actions { margin: 0 0 2.25em 0; flex-direction: column; width: 100% !important; }
    ul.actions li { display: block; padding: 1.125em 0 0 0; text-align: center; width: 100%; flex-grow: 1; flex-shrink: 1; }
    ul.actions li:first-child { padding-top: 0; }
    ul.actions li > * { width: 100%; margin: 0 !important; }
    ul.actions li > *.icon:before { margin-left: -2em; }
    ul.actions.small li { padding: 0.5625em 0 0 0; }
    ul.actions.small li:first-child { padding-top: 0; }
    ul.actions:not(.fixed) li input[type="submit"], ul.actions:not(.fixed) li input[type="reset"], ul.actions:not(.fixed) li input[type="button"], ul.actions:not(.fixed) li button, ul.actions:not(.fixed) li .button { width: 100%; }
    ul.actions:not(.fixed) li input[type="submit"].icon:before, ul.actions:not(.fixed) li input[type="reset"].icon:before, ul.actions:not(.fixed) li input[type="button"].icon:before, ul.actions:not(.fixed) li button.icon:before, ul.actions:not(.fixed) li .button.icon:before { margin-left: -0.5rem; }
    
    ul.feature-icons li { display: block; width: 100%; }
    input[type="submit"], input[type="reset"], input[type="button"], .button { padding: 0; }
}

/* ==========================================================================
   CUSTOM ADJUSTMENTS & BUGFIXES (Quill, Sticky Banner, Lightbox, ATM Logo)
   ========================================================================== */

/* Typo-Korrekturen für Quill-Editor und Absätze */
p { margin-top: 0 !important; margin-bottom: 5px !important; }
.ql-editor p { margin-bottom: 2px; }

/* Sticky Image Main Banner */
.image.main {
	display: block !important;
	position: sticky !important;
	top: -17em !important;
	border-radius: 0 !important; 
	height: 20em !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 5 !important;
	overflow: hidden !important;
}
.image.main img {
	border-radius: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Globaler Bildschutz gegen Auswahlmenüs, Klicks für Lightbox erlaubt */
img {
    -webkit-touch-callout: none;
    user-select: none;
    pointer-events: auto !important;
}
.image.main img { pointer-events: none; }
.gallery-img { pointer-events: auto !important; cursor: pointer; }

/* Lightbox & Overlay */
#lightbox-overlay { z-index: 99999 !important; }
#lightbox-img { position: relative; z-index: 10001; }

.nav-close {
    position: absolute;
    top: 100px !important;
    right: 25px !important;
    color: #ffffff !important;
    font-size: 60px !important;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 100000 !important;
    text-shadow: 0 0 10px rgba(0,0,0,1);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}
.nav-close:hover { color: #fff; }

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    padding: 20px;
    user-select: none;
    transition: color 0.2s;
    z-index: 10002;
}
.nav-arrow:hover { color: #fff; }

/* Scroll-to-Top Button (Grundzustand) */
.scroll-to-top {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease;
}

/* Sidebar Logo & ATM Zertifikat Integration */
#header header a.logo-link, #header header a.logo-link:hover {
	text-decoration: none !important;
	border-bottom: none !important;
	background: none !important;
	color: inherit !important;
}

/* --- Haupt-Definition für das Zertifikat --- */
.zertifikat-wrapper a {
    display: block !important;
    width: 160px;   
    height: 160px;  
    margin: 0 auto;
    background-image: url('https://gruenes-herz-tierphysio.de/images/atm-absolvent-tierphysiotherapie-ausbildung-atm-akademie_v1.avif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    text-decoration: none !important;
    border: none !important;
}

.zertifikat-wrapper img, .zertifikat-wrapper noscript { display: none !important; }