@import url("fonts.css");

:root {
  --padding-main: 3%;
  --padding-article: 1em;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { font-family: "Bitter"; font-style: normal; font-weight: 400; font-size: 100%; line-height: 1.5; }
body { font-size: 1.125rem; color: #ffffffee; }

h1,h2,h3,h4 { font-family: "Barlow"; font-weight: 600; letter-spacing: .05em; color: #fff; }

h2 { font-size: 2em; }
h3 { font-size: 1.3em; font-weight: 400; }

.bildbreite50 figure { max-width: 45%; }

#main ul { padding-inline-start: 1em; }
#main ul>li { list-style-type: "•"; padding-left: .5em; }
#main ol>li { padding-left: .2em; }
#main ol>ul>li { margin-bottom: .2em; }

.kleiner { font-size: .8em; }

.syndication { display: flex; width: 6em; justify-content: space-between; background: #eee; padding: .3em; border: #999 2px solid; box-shadow: 3px 3px 10px #00000011; }
.syndication>a>img { width: 1.2em; }

.back20 { background: #ffffff20; }

.media--right>figure { padding-left: 1em; }

.mod_article { padding: var(--padding-article); }

#wrapper { width: 100%; max-width: 100%; }

#header,
#footer { background-color: rgb(0, 114, 179); }

#header>.inside,
#hmenu>.inside,
#main>.inside,
#footer>.inside { position: relative; max-width: 1440px; margin: 0 auto; padding: 1em var(--padding-main); }

#header>.inside,
#hmenu>.inside,
#footer>.inside { padding-left: calc(var(--padding-main) + var(--padding-article)); padding-right: calc(var(--padding-main) + var(--padding-article)); }

#header>.inside { padding-top: 2em; }
#header .content-image { display: flex; justify-content: space-between; align-items: center; }
#header figure { max-width: 17%; }

#container { background-image: none; }
#container { background-image: repeating-conic-gradient(transparent 0 15deg, #ffffff0a 16deg 29deg), linear-gradient(225deg, #00ccff, rgb(0, 114, 179)); background-repeat: no-repeat; background-size: cover; background-color: rgb(0, 114, 179); }
#container .mod_article figure { padding-bottom: 2em; }

#main>.inside {  }
#main>.inside>div { position: relative; padding-bottom: 1em; margin-bottom: .5em; z-index: 2; }

#hmenu { font-family: "Barlow"; font-size: 1.1em; background-color: #1980ba; }
#hmenu>.inside { padding-top: .5em; padding-bottom: .5em; }
.menu,
#footer { font-family: "Barlow"; }
#hauptmenu>ul { font-size: 1.444em; font-weight: 600; letter-spacing: .02em; display: flex; justify-content: space-between; }
#hauptmenu>ul { margin-top: 0; margin-bottom: 0; }
#hauptmenu li.submenu>ul { position: absolute; opacity: 0; visibility: hidden; #height: 0; font-size: .857em; background-color: #1980ba; padding: .5em 1em 1em; margin-left: -1em; border-radius: .3em; box-shadow: 5px 5px 15px #17355766; transition: .5s; z-index: 1000; }
#hauptmenu li.submenu:hover>ul { visibility: visible; opacity: 1; #height: auto; transition: .5s; }

#hauptmenu .level_2 { background-color: #1980ba; }
##hmenu nav ul { display: flex; }
##hmenu nav li { margin-right: 2em; }
##hmenu nav li:last-child { margin-right: 0; }


#ueberschrift h2 { margin-bottom: 0; }
#ueberschrift h3 { margin-top: .5em; }

#portrait { width: 75%; margin: -3em 0 auto auto; z-index: 1 !important; }
#portrait figure { }
#portrait figure img { width: 100%; }
#portrait figcaption { font-family: "Barlow"; text-align: center; font-size: 1.75em; padding-top: .1em; }

#ziele { font-family: "Barlow"; font-weight: 500; font-size: 1.5em; }

#footer>.inside { display: flex; justify-content: space-between; align-items: flex-end; }



@media (max-width: 2400px) {
  html { font-size: .9vw; }
}
@media (max-width: 2000px) {
  html { font-size: 1vw; }
}
@media (max-width: 1800px) {
  html { font-size: 1.2vw; }
}
@media (max-width: 1400px) {
  html { font-size: 1.4vw; }
}
@media (max-width: 1200px) {
  html { font-size: 1.5vw; }
}
@media (max-width: 960px) {
  html { font-size: 1.6vw; }
  #header { border-bottom: .1em solid #173557; }
  #header>.inside { padding-top: 3em; }
  #container { margin-top: 0 !important; }
  #switch { display: block; }
  #hmenu { display: none; }
  .dreispaltig li { width: 48%; }
}
@media (max-width: 850px) {
  html { font-size: 2vw; }
}
@media (max-width: 720px) {
  html { font-size: 2.2vw; }
}
@media (max-width: 650px) {
  html { font-size: 2.6vw; }
}
@media (max-width: 560px) {
  html { font-size: 3vw; }
  .dreispaltig li { width: 100%; }
}