@charset "UTF-8";
/* ---------------------------fonts */

/* montserrat-regular - latin-ext_latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('./fonts/montserrat-v14-latin-ext_latin-regular.woff2') format('woff2'), 
       url('./fonts/montserrat-v14-latin-ext_latin-regular.woff') format('woff'); 
}
/* montserrat-500 - latin-ext_latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('./fonts/montserrat-v14-latin-ext_latin-500.woff2') format('woff2'), 
       url('./fonts/montserrat-v14-latin-ext_latin-500.woff') format('woff'); 
}
/* montserrat-700 - latin-ext_latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('./fonts/montserrat-v14-latin-ext_latin-700.woff2') format('woff2'), 
       url('./fonts/montserrat-v14-latin-ext_latin-700.woff') format('woff'); 
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('./fonts/open-sans-v17-latin-regular.woff2') format('woff2'), 
       url('./fonts/open-sans-v17-latin-regular.woff') format('woff'); 
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('./fonts/open-sans-v17-latin-italic.woff2') format('woff2'), 
       url('./fonts/open-sans-v17-latin-italic.woff') format('woff'); 
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('./fonts/open-sans-v17-latin-700.woff2') format('woff2'), 
       url('./fonts/open-sans-v17-latin-700.woff') format('woff'); 
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('./fonts/open-sans-v17-latin-700italic.woff2') format('woff2'), 
       url('./fonts/open-sans-v17-latin-700italic.woff') format('woff'); 
}

/* nothing-you-could-do-regular - latin */
@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  src: local('Nothing You Could Do'), local('NothingYouCouldDo'),
       url('./fonts/nothing-you-could-do-v9-latin-regular.woff2') format('woff2'), 
       url('./fonts/nothing-you-could-do-v9-latin-regular.woff') format('woff'); 
}


/* -----------------------------generals */
:root {
    font-size: calc(12px + 0.25vw + 0.25vh);
    height: 100%;
    max-width: 100%;
    --grau: rgb(85,85,85);
    --blau: rgb(47,172,207);
    --orange: rgb(247,168,35);
    --dunkelblau: rgb(38, 138, 166);
    --hellgrau: #efefef;
    scroll-behavior: smooth;
}
@media screen and (min-width: 2000px) {
    :root {font-size: 20px};
}
* {
    border: 0;
    outline: none;
    vertical-align: baseline;
    box-sizing: border-box;
}
*:after, *:before {
    box-sizing: inherit;
    outline: 0;
}
.error { color: firebrick; font-weight: 700;}
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font: 1rem/1.4 "Open Sans", sans-serif;
    color: var(--grau);
    display: flex;
    flex-direction: column;
}
img { width: 100%; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, nav, .btn { font-family: "Montserrat", sans-serif; }
nav, .btn { font-weight: 500;}
h1 { font-size: 175%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }
a {text-decoration: none; color: inherit; }
a#back-top {
	display: inline-block;
	position: fixed;
	width: 2rem;
	height: 3rem;
	background: firebrick;
	text-align: center;
	bottom: 0;
	right: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
/* ----------------------struktur */
body > *:not(main) {flex: none;}
main { 
    flex: 1 0 auto; 
    padding: 1.5rem 0 2.5rem; 
}
/* ---------------------wrapper */
section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: .5rem 1rem;
}
/* ----------------------navigation */
nav {
    font-weight: 500;
}
nav > section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
img#logo { width: 440px; }
a#menuOpen {
    display: inline-block;
    margin-left: 2rem;
    font-size: 3rem;
    line-height: 0.8;
}
a#menuClose {
    display: block;
    font-size: 3rem;
    line-height: 0.8;
    padding-top: .75rem;
    padding-left: .75rem;
    margin-bottom: 1.5rem;
}
nav ul { list-style: none; }
nav ul li.active > a, nav ul li:hover > a { color: var(--blau); }

@media screen and (max-width: 1199px) {
    nav ul#menu {
        flex: none;
        position: fixed;
        margin: 0;
        padding: 0;
        top: 0;
        right: 0;
        height: 100%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
        background-color: white;
        z-index: 999;
        width: 0;
        max-width: 90%;
        overflow-x: hidden;
        transition: width .5s ease-out;
    }
    nav ul li { margin: .5rem 0 .5rem 2rem; }
    nav ul li a { 
        display: block;
        padding: .25rem 0;
    }
    nav ul li ul { padding-left: 0; }
    nav ul li ul li { margin: .5rem 0; }
    nav ul li ul li a::before {
        content: '\25B8';
        color: var(--orange);
        padding-right: .25rem;
    }
}

@media screen and (min-width: 1200px) {
    nav {
        top: 0;
        left: 0;
        background-color: white;
        z-index: 99;
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    }
    a#menuOpen, a#menuClose {display: none;}
    nav ul {
        display: flex;
        margin-top: 0;
    }
    nav ul#menu > li {
        margin-left: 1rem;
        padding-bottom: .5rem;
        position: relative;
    }
    nav ul#menu li ul {
        position: absolute;
        left: -1rem;
        display: none;
        min-width: max-content;
        background-color: white;
        padding-left: 0;
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    }
    nav ul#menu li:hover ul { display: block; }
    nav ul#menu ul li { margin: .5rem 1rem; }
}
/* ---------------------header slider */
header > img.fade { width: 100%; }
.fade {
    animation-name: fade;
    animation-duration: 2s;
}
@keyframes fade {
    from {opacity: 0.1}
    to {opacity: 1}
}
/* footer */
#infofooter a:hover, footer a:hover { text-decoration: underline; }
#infofooter a:hover { color: var(--blau); }
#infofooter {
    background-color: var(--grau);
    color: white;
}
#infofooter > section {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
}
#infofooter .spalte {
    flex: 1 0 18rem;
    margin-right: 1rem;
}
#infofooter table {
    table-layout: auto;
    border-spacing: 0.25rem;
    width: 100%;
    text-align: left;
    margin-bottom: 1rem;
}
#infofooter th {
    font-size: 1.1rem;
    padding-bottom: .5rem;
}
#infofooter td {
    vertical-align: middle;
}
#infofooter img {
    width: 1.5rem;
    margin-top: .25rem;
}
footer {
    background-color: var(--blau);
    color: white;
    padding-bottom: 1rem;
}
footer > section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
footer > section > p { margin-right: 1rem; }
footer a.socialmedia {
    display: inline-block;
    margin: .5rem 1rem 0 0;
}
footer a.socialmedia img { width: 2.25rem; }
/* ----------------------------content */
/* allgemein und generell */
main { word-wrap: break-word; }
main h1 {
    color: var(--orange);
    line-height: 1.2;
}
main ul, main ol {
    padding-left: 1rem;
}
main a { color: var(--blau); }
main a:hover:not(.btn) {
    text-decoration: underline;
    color: var(--dunkelblau);
}
main .btn {
    display: inline-block;
    color: white;
    background-color: var(--blau);
    padding: .25rem .75rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    border: 0;
}
main .btn:hover { 
    background-color: var(--dunkelblau); 
    text-decoration: none;
}
/* unterschrift = handwriting font */
.handwritten { font: 2rem/1 "Nothing You Could Do", fantasy; }

/* youtube -video */
.video {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* formular */
main form input, main form textarea { font: inherit; }
main form { 
    display: flex;
    flex-wrap: wrap;
    background-color: var(--hellgrau);
}
main form fieldset {
    flex: 1 1 22rem;
    margin: 0 1rem;
    padding: 0;
}
main form input:not([type="submit"]):not([type="checkbox"]), main form textarea { 
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--grau);
/*    border-radius: .25rem;*/
    margin: 0;
    padding: .25rem .5rem;
}
main form input[type="checkbox"] {
    margin-right: .5rem;
}
main form textarea {height: 5rem;}
main form label { 
    margin-top: .5rem;
    display: block;
}
/* formular: honeypots ==> SPAM-Schutz */
main form input.hide-robot { display: none !important; }
/* cards */
.cards {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-bottom: 1rem;
}
@media screen and (min-width: 800px) {
    .cards { 
        grid-template-columns: repeat( 4, 1fr ); 
    }
}
main section .cards .card a { 
    color: inherit;
    display: inline-block;
    width: 100%;
    position: relative;
}
main section .cards .card a:hover { text-decoration: none; }
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.35);
    font-size: .85rem;
}
.card img {
    min-width: 100%;
    width: auto;
    height: auto;
    display: block;
}
.card div.editable {
    padding: 0 .5rem .5rem;
}
.card a.team > img.minilogo {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    min-width: 1rem;
    max-width: 3rem;
}

/* tabelle */
main table { border-collapse: collapse; }
main table.zebra tr:nth-child(even) { background-color: var(--hellgrau); }
main td { padding: .25rem .75rem .25rem .25rem; }
/* details */
details { margin-bottom: .5rem; }
details[open] summary { color: var(--orange); }
summary:hover { color: var(--blau); }
details > *:not(summary) {
    color: var(--dunkelblau);
}
/* google maps */
iframe#googlemap {
    width: 100%;
    max-width: 100%;
}
/* news */
article {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem 2rem;
}
article > * {
    margin-bottom: 1rem;
    padding: 0 1rem;
}
.newsimg {
    width: 33%;
    min-width: 18rem;
}
.newsimg > img { width: 100%; }
.newstxt { flex: 1 1 20rem; }
.newstxt :first-child {
    margin-top: 0;
    line-height: 1;
}
article > .newstxt { border-bottom: 1px solid var(--orange); }
/* galerie */
#gallery {
    columns: 10rem 4;
    column-gap: 1rem;
}
/*
#gallery figure {
    margin: 0;
}
*/
#gallery .thumbnail {
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.35);
}