@import "fonts.css";

*, ::after, ::before { box-sizing: border-box; }
html, body { height: 100%; }
html { font-family: "barlow-sc", sans-serif; font-size: 100%; line-height: 1.5; }
body { font-size: 1.1875rem; color: #353535; background-color: #fff; }
img { width: 100%; min-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: "barlow-c", sans-serif; color: #0569a4; margin: 0; margin-bottom: .4em; text-transform: uppercase; font-weight: normal; }
h1 { font-size: 1.263em; }
h2 { font-size: 1.158em; }
h3 { font-size: 1.053em; }
h1 a,h2 a,h3 a { text-decoration: none; }
p,
ul { margin: .5em 0; }
ul { padding-left: 1.5em; }
a { color: inherit; }
a, a img, img { outline : none; }
.blau { color: #0569a4; }

.media--right figure { margin-left: .5em; }
.media--left figure { margin-right: .5em; }
.grid-item { min-width: 0; }

.mitGalerie { display: flex; justify-content: space-between; }
.mitGalerie>div:first-child { width: 65%; }
.mitGalerie>div:last-child { width: 30%; }
.mitGalerie .content-gallery { max-width: 120px; }
.mitGalerie .content-gallery li { margin-bottom: .5em; }

#wrapper { background: #faf9f6; }
#container,
#header,
#footer { position: relative; width: 96%; max-width: 1440px; margin: 0 auto; border: 3px solid #fff; }
#header,
#footer { display: none; z-index: 1; background: #999986; color: #eee; }

#main { display: block; padding: 0; }
#main>div { font-size: clamp(1rem,1.44vw,1.1875rem); }

#main>div:first-child { display: none; }
#main .inside,
#main .mod_Merger2 { height: 100%; }
#Olinks .mod_Merger2>div,
#Mlinks .mod_Merger2>div,
#Ulinks .mod_Merger2>div,
#Mmitte .mod_Merger2>div { height: 100%; }
#Omitte,
#Umitte,
#Ulinks,
#Rechts { background: #eeece099; padding: 1em; }
#Umitte { background: #eeece033; }
#Ulinks { padding: 0; align-self: flex-end; align-self: flex-start;  }
#Omitte,
#Umitte { color: #a49e6d; }
#Rechts { background-color: #d4d3c9; line-height: 1.3; }
#Ulinks,
#Mmitte { display: none; }

#mmenu-switch { position: fixed; top: 1rem; left: 1rem; z-index: 2; background: #dddddd99; font-size: 1.5rem; padding: 0 .5rem .4rem .5rem; border-radius: 5px; }
#mmenu-switch a { text-decoration: none; }


.menu { font-family: "barlow-c"; }
.menu ul { display: flex; justify-content: space-around; padding-left: 0; list-style-type: none; }
.menu li a { text-decoration: none; }
.menu li.active a,
.menu li:hover a,
.menu li.trail a { color: #fff; transition: .3s; }
.menu strong,
#header .menu .trail>a { color: #fff; font-weight: 600; }
#neben .trail a { color: inherit; }
.menu ul.level_2 { position: absolute; display: block; max-height: 0; opacity: 0; overflow: hidden; padding: 0 .6em; margin-top: 0; margin-left: -.6em; background: #999986ee; color: #eee; color: #f6f6f6; border: 1px solid #fff; transition: .3s; }
.menu ul.level_2 a { color: #f6f6f6; }
.menu li:hover>ul.level_2 { max-height: 20em; opacity: 1; transition: .3s; } 
.menu li:hover a,
.menu ul.level_2 li:hover a { color: #fff; }

#neben ul { justify-content: flex-start; margin-left: 2em; }
#neben li { margin-right: 1em; }

.cover,
.cover figure,
#Mmitte div,
#Mmitte figure { height: 100%; }
.cover>figure img,
#Mmitte img { height: 100%; object-fit: cover; }

/* Logo oben links */
#Olinks .desktop,
#Mlinks { display: none; }
    
#slogan { height: 100%; display: flex; justify-content: flex-end; align-items: center; font-size: 1.2em; text-align: right; text-transform: uppercase; color: #ada87d; padding: .7em .7em; background-color: #fff; }
#slogan p { margin: 0; }

#Rechts>.inside>.mod_article>h2,
#Rechts>.inside>.mod_article>div { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #fff; } 
#Rechts>.inside>.mod_article>h2 { padding-bottom: .5em; text-transform: uppercase; border-bottom-width: 2px; }
#Rechts figure { min-width: 30%; }
#Rechts .media--right figure,
#Rechts .media--left figure { max-width: 30%; }

/* Formulare */
form button { color: #a49e6d; font-family: "barlow-sc"; font-size: 1.1875rem; padding: .5em 1em; }
.widget-text,
.widget-password { max-width: 10em; }
.widget-checkbox fieldset { border: none; padding-left: 0; margin-left: 0; }



@media (min-width: 630px) {
	#main { display: grid; grid-template-columns: 26% 74%; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-gap: .2rem; }
	#Rechts { grid-column: 3; grid-row: 1 / -1; grid-column: 1 / -1; grid-row: 4; }
	#Ulinks,
	#Mmitte { display: block; }
	#slogan { font-size: 1em; }
	#Olinks .mobil { display: none; }
	#Olinks .desktop,
	#Mlinks { display: block; }
}
@media (min-width: 992px) {
	#main { grid-template-columns: 3fr 8fr 3fr; grid-template-rows: auto auto 1fr; }
	#Rechts { grid-column: 3; grid-row: 1 / -1; }
	#Rechts>.inside { font-size: .8421em !important; }
	#header,
	#footer { display: block; }
	#haupt,
	#neben { display: block; }
	#mmenu-switch { display: none; }
	#slogan { font-size: 1.1em; }
}
@media (min-width: 1360px) {
	#slogan { font-size: 1.3em; }
}
@media (min-width: 1440px) {
	#main>div { font-size: 1.1875rem; }
}