/*
 * Midori-PHP Haupt-Stylesheet
 * Inhaltsverzeichnis:
 * 1. Variablen & Schriftarten
 * 2. Reset & Basis-Stile
 * 3. Layout (Grid, Wrapper, Main)
 * 4. Typografie & Links
 * 5. Medien (Bilder, Logos)
 * 6. Komponenten (Buttons, Icons, Navigation, Karten)
 * 7. Spezifische Sektionen (Kontakt, Footer, Back-to-Top)
 * 8. Barrierefreiheit
 */

/* ==========================================================================
   1. Variablen & Schriftarten
   ========================================================================== */

:root {
	--primary-color: #38761d;
	--secondary-color: #e69138;
	--white: #fff;
	--black: #000;
	--star-color: gold;
	--text-color: #363636;
	--text-muted-color: #444;
	--border-color-light: #ddd;
	--background-light-gray: #f4f4f4;
	--background-focus-gray: #f8f8f8;
	--placeholder-color: #444;
	--alt-button-hover-color: #888;
	--white-70-percent: rgba(255, 255, 255, 0.7);
	--white-25-percent: rgba(255, 255, 255, 0.25);
	--black-75-percent: rgba(0, 0, 0, 0.75);
	--black-25-percent: rgba(0, 0, 0, 0.25);
}

@font-face {
	font-family: 'Font Awesome 5 Free';
	src: url('webfonts/fa-regular-400.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Font Awesome 5 Free';
	src: url('webfonts/fa-solid-900.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Font Awesome 5 Brands';
	src: url('webfonts/fa-brands-400.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Quantify';
	src: url('webfonts/Quantify.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Reset & Basis-Stile
   ========================================================================== */

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;
}

html {
	box-sizing: border-box;
}

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

body {
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif ;
	-webkit-text-size-adjust: none;
	background-color: var(--primary-color);
	background: linear-gradient(to top, var(--secondary-color), var(--primary-color));
}

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

body, input, textarea, select {
	font-weight: 300;
	color: var(--text-color);
	font-size: 15pt;
	line-height: 1.75em;
}

/* Responsive Schriftgrößen */
@media screen and (max-width: 1680px) {
	body, input, textarea, select { font-size: 14pt; }
}

@media screen and (max-width: 1280px) {
	body, input, textarea, select { font-size: 13pt; }
}

@media screen and (max-width: 736px) {
	body, input, textarea, select { font-size: 11pt; }
}

@media screen and (max-width: 360px) {
	body, input, textarea, select { font-size: 10pt; }
}

/* Formular-Resets */
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

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

/* Verschiedene Resets */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

/* ==========================================================================
   3. Layout (Grid, Wrapper, Main)
   ========================================================================== */

#wrapper {
	width: 45em;
	margin: 0 auto;
	min-height: 100vh;
	max-width: 100%;
	padding: 4em 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 1s ease-in-out;
}

body.is-preload #wrapper {
	opacity: 0;
}

@media screen and (max-width: 1280px) {
	#wrapper { padding: 3em 0; max-width: calc(100% - 6em); }
}

@media screen and (max-width: 980px) {
	#wrapper { padding: 1.5em 0; max-width: calc(100% - 8em); }
}

@media screen and (max-width: 736px) {
	#wrapper { padding: 1em 0; max-width: calc(100% - 2em); }
}

@media screen and (max-width: 360px) {
	#wrapper { padding: 1em 0; max-width: 100%; }
}

/* Grid-System */
.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
	margin-top: -1.25em;
	margin-left: -1.25em;
}

.row > * {
	box-sizing: border-box;
	padding: 1.25em 0 0 1.25em;
}

.row > .col-4 { width: 33.33333%; }
.row > .col-12 { width: 100%; }

@media screen and (max-width: 980px) {
	.row > .col-6-medium { width: 50%; }
}

@media screen and (max-width: 736px) {
	.row > .col-12-small { width: 100%; }
}

.row.aln-middle, .row.aln-bottom {
	align-items: center;
}

@media screen and (max-width: 1680px) {
	.row.aln-bottom { align-items: flex-end; }
}

/* Haupt-Container & Panels */
#main {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: var(--white);
	box-shadow: 0px 1px 0px 0px var(--black-25-percent);
	transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

#main > .panel {
	transition: opacity 0.25s ease-in-out;
	margin-bottom: 0;
	position: relative;
	padding: 3.5em 2.5em 2.5em 2.5em;
	width: 100%;
}

#main > .panel.inactive {
	opacity: 0;
}

@media screen and (max-width: 736px) {
	#main > .panel { padding: 2em 1.5em 1.5em 1.5em; }
}

/* Intro-Panel */
#main > .panel.intro {
	padding: 0;
	height: 20em;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#main > .panel.intro .pic {
	text-decoration: none;
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	width: 17em;
	height: 100%;
}

#main > .panel.intro .pic:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#main > .panel.intro .pic img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

#main > .panel.intro .pic .arrow {
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -1.375em;
	width: 2.75em;
	height: 2.75em;
	background: var(--black-75-percent);
	color: var(--white);
	text-align: center;
	line-height: 2.75em;
	font-size: 1.5em;
	z-index: 1;
	transition: width .15s ease-in-out, padding-right .15s ease-in-out;
}

#main > .panel.intro .pic .arrow:before {
	position: relative;
	padding-right: 0;
	top: 0.125em;
}

#main > .panel.intro .pic .arrow span {
	display: block;
	text-indent: -9999px;
}

#main > .panel.intro .pic:hover .arrow {
	width: 3em;
	padding-right: 0.25em;
}

#main > .panel.intro header {
	flex-grow: 1;
	flex-shrink: 1;
	padding: 3.5em 2.5em;
	margin-bottom: 0;
	width: 100%;
}

#main > .panel.intro header h1 {
	line-height: 1.25em;
	margin-bottom: 0;
}

#main > .panel.intro header p {
	letter-spacing: -0.015em;
	font-size: 1.25em;
	margin: 0.25em 0 0 0;
}

@media screen and (max-width: 980px) {
	#main > .panel.intro { flex-direction: column; height: auto; }
	#main > .panel.intro .pic { height: 25em; width: 100%; }
	#main > .panel.intro header { padding: 4em; text-align: center; }
}

@media screen and (max-width: 736px) {
	#main > .panel.intro .pic { height: 20em; }
	#main > .panel.intro header { padding: 2.75em 2em 2.5em 2em; }
	#main > .panel.intro header p { font-size: 1em; }
}

/* ==========================================================================
   4. Typografie & Links
   ========================================================================== */

strong, b, h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	color: var(--text-color);
}

h1 { font-size: 1.8em; letter-spacing: -0.015em; }
h2 { font-size: 1.35em; letter-spacing: -0.015em; }
h3, h4, h5, h6 { font-size: 1.1em; letter-spacing: -0.015em; }

@media screen and (max-width: 736px) {
	h1 { font-size: 1.4em; }
	h2 { font-size: 1.1em; }
	h3, h4, h5, h6 { font-size: 0.9em; }
}

p, ul, blockquote {
	margin-bottom: 2em;
}

header {
	margin: 0 0 1.5em 0;
}

header > p {
	margin: 0.5em 0 0 0;
	color: var(--text-muted-color);
}

@media screen and (max-width: 736px) {
	header { margin: 0 0 1em 0; }
}

section, article {
	margin-bottom: 3em;
}

section > :last-child, section:last-child,
article > :last-child, article:last-child {
	margin-bottom: 0;
}

blockquote {
	border-left: solid 0.5em var(--border-color-light);
	padding: 1em 0 1em 2em;
	font-style: italic;
}

em, i {
	font-style: italic;
}

hr {
	border: 0;
	border-top: solid 1px var(--border-color-light);
	padding: 1.5em 0 0 0;
	margin: 1.75em 0 0 0;
}

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

sub { top: 0.5em; }
sup { top: -0.5em; }

/* Links */
.clean_link{
	text-decoration: none;
	color: inherit;
}

li a, p a {
	color: var(--primary-color) !important;
}

li a:hover, li a:active,
p a:hover, p a:active {
	color: var(--secondary-color) !important;
}

p a:focus-visible, li a:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* ==========================================================================
   5. Medien (Bilder, Logos)
   ========================================================================== */

.image {
	display: inline-block;
	height: auto;
}

.image img {
	display: block;
	width: 100%;
	height: auto;
}

.image.fit {
	display: block;
	width: 100%;
}

.image.featured {
	display: block;
	width: 100%;
	margin: 0 0 2em 0;
}

.image.left {
	float: left;
	margin: 0 2em 2em 0;
}

.image.centered {
	display: block;
	margin: 0 0 2em 0;
}

.image.centered img {
	margin: 0 auto;
	width: auto;
}

.content-image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 2em;
}

@media screen and (min-width: 737px) {
	.content-image {
		float: right;
		width: 33.333%;
		margin-left: 2em;
		margin-bottom: 1em;
	}
}

.header-logo {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-bottom: 1em;
}

/* ==========================================================================
   6. Komponenten (Buttons, Icons, Navigation, Karten)
   ========================================================================== */

/* Buttons */
button, .button {
	transition: background-color .25s ease-in-out;
	display: inline-block;
	background-color: var(--primary-color);
	color: var(--white) !important;
	border: 0;
	border-radius: 0.35em;
	outline: 0;
	padding: 0.7em 1.5em 0.7em 1.5em;
	text-decoration: none;
	cursor: pointer;
}

button:hover, .button:hover,
button:active, .button:active {
	background-color: var(--secondary-color);
}

button:focus-visible, .button:focus-visible {
	outline: 3px solid var(--secondary-color);
	outline-offset: 2px;
}

button.small, .button.small { font-size: 0.75em; }
button.large, .button.large { font-size: 1.25em; padding: 0.5em 1.25em 0.5em 1.25em; }

@media screen and (max-width: 736px) {
	button, .button { width: 100%; height: auto; }
}

/* Spezifisches Button-Override */
button {
	font-size: 17px;
	font-weight: bold;
	border-radius: 0.75em;
}

/* Icons */
.icon {
	text-decoration: none;
	position: relative;
}

.icon:before {
	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: 300;
}

.icon.solid:before { font-weight: 900; }
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }
.icon > .label { display: none; }

.fa-star { color: var(--star-color) !important; }
.fa-external-link-alt { font-size: 0.5em; vertical-align: text-top; }

/* Listen & Aktionen */
ul { list-style: disc; padding-left: 1em; }
ul li { padding-left: 0.5em; }
ol { list-style: decimal; padding-left: 1.25em; }
ol li { padding-left: 0.25em; }

ul.actions { list-style: none; padding-left: 0; }
ul.actions li {
	display: inline-block;
	padding-left: 0;
	margin: 0 0 0 0.5em;
}
ul.actions li:first-child { margin-left: 0; }

@media screen and (max-width: 736px) {
	ul.actions li { display: block; margin: 0.75em 0 0 0; }
	ul.actions li:first-child { margin-top: 0; }
}

/* Navigation */
#nav {
	text-align: center;
	height: 7.25em;
	cursor: default;
}

#nav a {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 0.9em;
	font-size: 2.5em;
	margin: 0 0.25em 0 0.25em;
	opacity: 0.35;
	color: var(--white-70-percent);
	transition: opacity .25s ease-in-out, color .25s ease-in-out;
}

#nav a.icon:before { padding-right: 0; }
#nav a:before { font-size: 0.8em; }

#nav a span {
	display: block;
	position: absolute;
	color: var(--white);
	top: -2.75em;
	font-size: 0.30em;
	font-family: 'Quantify', sans-serif;
	font-weight: 600;
	height: 2.25em;
	line-height: 2.25em;
	left: 50%;
	width: 5.5em;
	margin-left: -2.75em;
	transition: font-size .25s ease-in-out, opacity .25s ease-in-out;
}

#nav a span:hover, #nav a:hover span {
	opacity: 1.0;
	font-size: 0.60em;
}

#nav a:hover, #nav a.active {
	opacity: 1.0;
	color: var(--white);
}

#nav a:focus-visible {
	box-shadow: 0 0 0 3px var(--white);
	border-radius: 0.25em;
}

#nav a.active:after { border-bottom-width: 0.5em; }

@media screen and (max-width: 980px) {
	#nav a span { display: none; }
}

/* Review-Karten */
.review-card {
	display: flex;
	flex-direction: column;
	position: static;
}

.review-card details {
	background-color: var(--background-light-gray);
	border: 1px solid var(--border-color-light);
	border-radius: 0.5em;
	padding: 1.25em;
	box-shadow: 0 2px 5px var(--black-25-percent);
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.review-card details summary {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.25em;
	position: relative;
	font-weight: 300;
	transition: background-color 0.2s ease-in-out;
}

.review-card details summary:hover { background-color: var(--background-focus-gray); }
.review-card details summary::-webkit-details-marker { display: none; }

.review-card details summary::after {
	content: '\f078';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 1em;
	color: var(--primary-color);
	transition: transform 0.3s ease-in-out;
}

.review-card details[open] summary::after { content: '\f077'; }

.review-name { padding-right: 1em; font-size: 1.25em; }
.review-stars { white-space: nowrap; }

.review-card details p {
	padding: 0 1.25em 1.25em;
	font-style: italic;
}

@media screen and (max-width: 736px) {
	.review-card details summary { flex-direction: column; }
	.review-stars { order: -1; margin-bottom: 0.5em; }
}

/* ==========================================================================
   7. Spezifische Sektionen (Kontakt, Footer, Back-to-Top)
   ========================================================================== */

/* Kontakt-Sektion */
#kontakt ul {
	list-style: none;
	padding-left: 0;
}

ul.contact-icons {
	list-style: none;
	padding-left: 0;
}

ul.contact-icons li {
	padding: 0.5em 0;
	margin: 0;
	display: flex;
	align-items: flex-start;
}

ul.contact-icons li a {
	font-size: 1.2em;
	text-decoration: none;
	word-break: break-word;
	overflow-wrap: anywhere;
}

ul.contact-icons li a span {
	margin-right: 0.75em;
	width: 1.5em;
	text-align: center;
	display: inline-flex;
	justify-content: center;
	flex-shrink: 0;
}

/* Footer */
#footer {
	color: var(--white);
	text-align: center;
	padding: 2em 0 0 0;
	font-size: 0.75em;
}

#footer a {
	color: var(--white);
	transition: color .25s ease-in-out;
}

#footer a:hover { color: var(--white); }

#footer .copyright {
	list-style: none;
	padding-left: 0;
}

#footer .copyright li {
	display: inline-block;
	padding-left: 1em;
	margin-left: 1em;
	border-left: solid 1px var(--white-25-percent);
	line-height: 1;
}

#footer .copyright li:first-child {
	padding-left: 0;
	margin-left: 0;
	border-left: 0;
}

@media screen and (max-width: 736px) {
	#footer .copyright li { padding-left: 0.5em; margin-left: 0.5em; }
}

/* Back-to-Top Button */
#backToTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: var(--primary-color);
	color: var(--white);
	border: none;
	border-radius: 25px;
	padding: 10px 20px;
	width: 50px;
	height: 50px;
	font-size: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
	z-index: 1000;
}

#backToTop.visible {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   8. Barrierefreiheit
   ========================================================================== */

/* Barrierefreier Skip-Link: visuell verborgen, aber tastaturbedienbar. */
.skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus, .skip-link:active {
	position: fixed;
	left: 12px;
	top: 12px;
	width: auto;
	height: auto;
	padding: 8px 12px;
	background: var(--white);
	color: var(--black);
	z-index: 2000;
	box-shadow: 0 2px 6px var(--black-25-percent);
}