body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
/* Fonts */

/**
 * @license
 * MyFonts Webfont Build ID 3868360, 2020-02-18T11:41:15-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: JustLovely by Nicky Laatz
 * URL: https://www.myfonts.com/fonts/nicky-laatz/just-lovely/just-lovely/
 * Copyright: Copyright (c) 2016 by Nicky Laatz. All rights reserved.
 * Licensed pageviews: 20,000
 * 
 * 
 * 
 * © 2020 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3b06c8");

@font-face {
  font-family: "JustLovely";
  src: url(../../files/theme/fonts/3B06C8_0_0.eot);
  src:
    url(../../files/theme/fonts/3B06C8_0_0.eot?#iefix) format("embedded-opentype"),
    url(../../files/theme/fonts/3B06C8_0_0.woff2) format("woff2"),
    url(../../files/theme/fonts/3B06C8_0_0.woff) format("woff"),
    url(../../files/theme/fonts/3B06C8_0_0.ttf) format("truetype");
}

/* josefin-slab-600 - latin */
@font-face {
  font-family: "Josefin Slab";
  font-style: normal;
  font-weight: 600;
  src:
    local("Josefin Slab SemiBold"),
    local("JosefinSlab-SemiBold"),
    url(../../files/theme/fonts/josefin-slab-v10-latin-600.woff2) format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url(../../files/theme/fonts/josefin-slab-v10-latin-600.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* josefin-slab-600italic - latin */
@font-face {
  font-family: "Josefin Slab";
  font-style: italic;
  font-weight: 600;
  src:
    local("Josefin Slab SemiBold Italic"),
    local("JosefinSlab-SemiBoldItalic"),
    url(../../files/theme/fonts/josefin-slab-v10-latin-600italic.woff2) format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url(../../files/theme/fonts/josefin-slab-v10-latin-600italic.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* pompiere-regular - latin */
@font-face {
  font-family: "Pompiere";
  font-style: normal;
  font-weight: 400;
  src:
    local("Pompiere "),
    local("Pompiere-Regular"),
    url(../../files/theme/fonts/pompiere-v9-latin-regular.woff2) format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url(../../files/theme/fonts/pompiere-v9-latin-regular.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  height: 100%;
  width: 100%;
  background-image: url(../../files/theme/img/steinwand.jpg);
  background-repeat: repeat;
  font-size: 16px;
  line-height: 1.5;
  /* font-family: "Pompiere", serif; */
  font-family: Georgia, serif;
  font-weight: 400;
  hyphens: auto;
}

/* Anpassen Boxmodel */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Headlines */

#header h1 {
  font-family: "Josefin Slab", serif;
  font-size: 2.5rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 12px;
  text-align: center;
  color: #fff;
  margin-top: 60px;
}

h1,
h2,
h3 {
  hyphens: none;
}

h1 {
  font-family: "JustLovely", Georgia, serif;
  font-weight: normal;
  font-size: 5rem;
  line-height: 0.9;
  text-align: center;
  color: #446885;
  margin: 0.3em;
}

h2 {
  font-family: "Josefin Slab", serif;
  font-size: 1.75em;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin-bottom: 0.5em;
  text-align: center;
  color: #204582;
}

h3 {
  font-family: "Josefin Slab", serif;
  font-size: 1.4em;
  line-height: 1.3em;
  text-align: center;
  margin-bottom: 0.6em;
  color: #204582;
}

h4,
h5,
h6 {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0em;
}

/* Text & Typo */

#main .intro {
  font-family: "Josefin Slab", serif;
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
  color: #052d73;
  hyphens: none;
}

#main .biblio {
  font-family: "Josefin Slab", serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 2em 0 2em 0;
}

#main p.last {
  padding-bottom: 3em;
  background-image: url(../../files/theme/img/dekokringel3.png);
  background-size: 120px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.wichtig {
  color: #c61818;
}

.stern {
  color: #c61818;
  font-size: 0.75rem;
}

.background {
  margin: 0 -3.5rem;
  padding: 2rem 3.5rem 0 3.5rem;
  border-top: 4px dotted #aaa;
}

/* sonstige Abstände und Elemente */
p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0em;
  margin-bottom: 1em;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}

ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

/* li {
  margin-left: 2em;
} */

hr {
  border: 1px solid #292c37;
  margin: -1px 0;
}

/* Links */
#main a,
#main a:visited {
  color: #c61818;
  text-decoration: none;
  border-bottom: 1px dotted #c61818;
}

#main a:hover,
#main a:focus,
#main a:active {
  color: #c61818;
  outline: 0;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/** Navigation **/

/* Mobilmenü und Menübutton ausblenden */
header div.menubutton,
#nav-mobil {
  display: none;
}

#nav-main {
  background-color: #000000;
  background-image: url("../../files/theme/img/tafel-top.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  padding: 6rem 1rem 0.5rem 1rem;
  border: 10px solid #000;
  border-radius: 5px;
  box-shadow: inset 0px 0px 0px 2px #fff;
}

/* Untermenü standardmäßig ausblenden */
#nav-main ul ul {
  max-height: 0;
  overflow: hidden; /* Versteckt den überstehenden Inhalt, wenn die Höhe 0 ist */
  transition: max-height 1s ease-out;
}

/* Untermenü bei Hover einblenden */
#nav-main li:hover > ul {
  max-height: 300px;
}

#nav-main ul {
  margin: 0;
  padding: 0;
  hyphens: none;
}

#nav-main ul.level_1 {
  padding-bottom: 2rem;
}

#nav-main li {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0.5em;
  font-family: "Josefin Slab", serif;
  font-size: 1.2rem;
  line-height: 1.2;
}

/* #nav-main ul li.impressum,
#nav-main ul li.kontakt {
  line-height: 1.2;
} */

/* #nav-main ul li.kontakt {
padding-bottom: 1rem;
} */

#nav-main a,
#nav-main strong {
  display: block;
  text-decoration: none;
  color: #fff;
}

#nav-main a:hover,
#nav-main a:focus,
#nav-main strong.active,
#nav-main .trail {
  color: #ed5331;
}

/** Layout **/

#wrapper {
  width: 100%;
}

#header {
  background: url(../../files/theme/img/markise_web.png);
  background-repeat: repeat-x;
  -webkit-filter: drop-shadow(0px 4px 5px rgba(133, 128, 112, 0.75));
  filter: drop-shadow(0px 4px 5px rgba(133, 128, 112, 0.75));
  position: relative;
  height: 140px;
  width: 100%;
  z-index: 500;
}

#header .inside {
  margin: 0 auto 0 auto;
  text-align: center;
}

#container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 270px; /* Breite #left */
  padding-right: 270px; /* Breite #right */
}

#main {
  margin-top: -1.5em;
  margin-bottom: 6em;
  /* position: relative; */
}

#main .inside {
  position: relative;
  min-height: 650px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* shuffled Papers */

#main .inside .mod_article {
  background-color: #f8f7ea;
  border: 1px solid #ccc;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.1),
    1px 1px 3px rgba(0, 0, 0, 0.2);
  padding: 1.5rem 3.5rem 5rem 3.5rem;
  margin-bottom: 3em;
  /* transform: rotate(-1.5deg); */
  background-image: linear-gradient(
    to bottom,
    #ffe calc(1.5em - 1px),
    #eee calc(1.5em - 1px),
    #eee 1.5em,
    #fff 1.5em
  );
  background-position: 10% 14em;
  background-size: 100% 1.5em;
  background-repeat: repeat-y;
}

#main .inside .mod_article.short {
  padding-bottom: 2rem;
}

#main .inside .mod_article.second {
  transform: rotate(1deg);
}

#left {
  width: 270px;
  right: 270px;
}

#left .inside {
  margin: 2rem 2rem 0 0;
}

#right {
  width: 270px;
  /* left: 240px; */
  /* background-color: #00d8f8; */
}

#right .inside {
  margin: 2rem 0 0 2rem;
}

/*+ Seite Aktuell **/

.aktuell #main .media--left figure img {
  width: 140px;
  margin: 10px 20px 10px 0;
  border: 1px solid #ccc;
}

.aktuell #main .media--right figure img {
  width: 140px;
  margin: 10px 0 10px 20px;
  border: 1px solid #ccc;
}

.aktuell #main figure img {
  width: 100%;
  height: auto;
  border: 1px solid #999;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* .aktuell #main .mod_article {
  padding-top: 0;
} */

.aktuell #main .content-text {
  border-bottom: 1px dotted #446885;
  padding-top: 1.2em;
  hyphens: none;
}

.aktuell #main .noline {
  border: none;
}

.aktuell p.zitat {
  border-bottom: 1px dotted #446885;
  padding-bottom: 1.2em;
}

.aktuell p.last,
.aktuell #main .content-text.last {
  border: none;
}

.aktuell #main .content-image.last {
  padding-bottom: 3em;
  background-image: url(../../files/theme/img/dekokringel3.png);
  background-size: 120px;
  background-repeat: no-repeat;
  background-position: bottom;
}

/** abbildungen **/

#main figure figcaption,
#left figure figcaption,
#right figure figcaption {
  display: none;
}

.home #main figure {
  float: right;
}

#left .buch img,
#right .buch img,
#right .foto img {
  filter: drop-shadow(5px 7px 5px #666);
}

.home #left .buch img {
  /* Startseite, Buch links */
  position: absolute;
  width: 240px;
  transform: rotate(-4deg);
  margin-top: -2rem;
  margin-left: 3rem;
  z-index: 1000;
}

#right .foto img {
  /* Startseite, Autorinnenfoto */
  position: absolute;
  transform: rotate(-2deg);
  margin-top: -1rem;
  margin-left: -4rem;
  z-index: 1000;
}

.home #right .buch img {
  /* Startseite, Buch rechts */
  position: absolute;
  width: 240px;
  transform: rotate(3deg);
  margin-top: 28rem;
  margin-left: -4rem;
  z-index: 1000;
}

.sub #right .buch img {
  /* Unterseiten, Buch rechts */
  position: absolute;
  width: 240px;
  transform: rotate(-3deg);
  margin-top: 20rem;
  margin-left: -4rem;
  z-index: 1000;
}

.sub #right .buch2 img {
  /* Unterseiten, Buch 2 rechts */
  position: absolute;
  width: 240px;
  transform: rotate(2deg);
  margin-top: 70rem;
  margin-left: -4.5rem;
  z-index: 1000;
}

.sub #left .buch img {
  /* Unterseiten, Buch rechts */
  position: absolute;
  width: 240px;
  transform: rotate(-2.5deg);
  margin-top: 4rem;
  margin-left: 3rem;
  z-index: 1000;
}

/** Galerie **/

#main .content-gallery ul {
  /* margin-left: -2em;
  margin-right: -2em; */
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
  column-gap: 5%; /* Abstand zwischen den Items */
}

#main .content-gallery ul li {
  margin-bottom: 3em;
  width: calc(95% / 2); /* 100% - column-gap (Anzahl+Breite) */
}

.buecher #main figure figcaption {
  text-align: center;
  font-family: "Josefin Slab", serif;
  font-size: 1rem;
  line-height: 1.4;
  padding-top: 0;
  display: block;
}

#main .content-gallery ul li a {
  border: none;
}

#main .abstand-top {
  margin-top: 3em;
}

/** Newsletter An- und Abmeldung **/

/** Buttons **/
.button a,
button {
  display: table;
  font-size: 1rem;
  background-color: #9f111b;
  color: #fff;
  padding: 6px 10px;
  border: 1px solid #ed5331;
  border-radius: 5px;
  margin: 0 auto;
  width: 40%;
}

.button a:hover,
.button a:focus,
button:hover,
button:focus {
  background-color: #ed5331;
  border: 1px solid #9f111b;
}

button {
  cursor: pointer;
}

/** Formular **/
label {
  display: block;
}

input,
textarea,
select {
  margin-top: 1.5em;
  margin-bottom: 1em;
  font-size: 1rem;
  padding: 0.7rem;
  border: 1px solid #999;
  border-radius: 5px;
  outline: 0;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  border: 1px solid #9f111b;
}

form span.mandatory {
  display: none;
}

.submit {
  margin-top: 0;
}

p.error {
  color: red;
  background: #f1f1f1;
  border: 2px solid red;
  padding: 0.5em;
  margin: 0 0 0.25em 0;
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* Media Queries */

@media screen and (max-width: 1100px) {
  #container {
    padding-left: 230px; /* Breite #left */
    padding-right: 230px; /* Breite #right */
  }
  #left {
    width: 230px;
    right: 230px;
  }

  #left .inside {
    margin-right: 1rem;
  }

  #right {
    width: 230px;
    /* left: 230px; */
  }

  #right .inside {
    margin-left: 1rem;
  }
}

@media screen and (max-width: 1000px) {
  #main .inside {
    font-size: 1rem;
  }

  #main .intro {
    font-size: 1.3rem;
  }

  .button a,
  button,
  input {
    font-size: 0.9rem;
  }

  #main .inside .mod_article {
    padding: 1.5rem 2rem 5rem 2rem;
  }

  #nav-main {
    width: 12em;
    padding: 6rem 0.5rem 1rem 0.5rem;
    border: 5px solid #000;
    margin-left: 1em;
  }

  .buecher #main figure figcaption {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  #main .content-gallery ul li {
    margin-bottom: 2em;
  }

  .home #left .buch img {
    /* Startseite, Buch links */
    margin-left: 1rem;
  }

  #right .foto img {
    /* Startseite, Autorinnenfoto */
    margin-left: -3rem;
  }

  .home #right .buch img {
    /* Startseite, Buch rechts */
    margin-left: -2rem;
  }

  .sub #right .buch img {
    /* Unterseiten, Buch rechts */
    margin-left: -1rem;
  }

  .sub #right .buch2 img {
    /* Unterseiten, Buch 2 rechts */
    margin-left: -1.5rem;
  }
}

@media screen and (max-width: 900px) {
  #header h1 {
    font-size: 2rem;
    margin-top: 70px;
  }

  h1 {
    font-size: 4rem;
    line-height: 0.8;
  }
  /* 
  #main .intro {
    font-size: 1.2rem;
  }
   */
  #main .inside .mod_article {
    padding: 1.5rem 1rem 3rem 1rem;
  }

  .buecher #main figure figcaption {
    font-size: 1rem;
    line-height: 1.3;
  }

  #main .content-gallery ul {
    justify-content: center;
    column-gap: 0; /* Abstand zwischen den Items */
  }

  #main .content-gallery ul li {
    width: 80%;
  }

  .home #left .buch img {
    /* Startseite, Buch links */
    margin-left: 0;
    margin-top: 1.5em;
  }

  #right .foto img {
    /* Startseite, Autorinnenfoto */
    margin-left: -1.5rem;
  }

  .home #right .buch img {
    /* Startseite, Buch rechts */
    margin-left: -1.5rem;
    margin-top: 31em;
  }
}

@media screen and (min-width: 801px) {
  /* #header #nav-mobil {
    display: none;
  } */

  .maxwidth800 {
    display: none; /* Nur-Mobil-Bilder ausblenden */
  }
}

@media screen and (max-width: 800px) {
  #left,
  #right {
    display: none;
  }

  #container {
    padding-left: 0;
    padding-right: 0;
  }

  #main {
    margin-top: -2.8em;
    margin-bottom: 6em;
    width: 100%;
  }

  #main .inside {
    margin: 0 auto;
    padding: 0 2em;
  }

  #main .inside .mod_article {
    padding: 2.5rem 3rem 3rem 3rem;
  }

  #header {
    background: url(../../files/theme/img/markise_phone.png);
    background-repeat: repeat-x;
    background-size: 350px auto;
    z-index: 500;
  }

  #header .inside {
    padding: 0;
  }

  .maxwidth800 figure {
    margin-bottom: 2rem;
    text-align: center;
  }

  #header h1 {
    margin-top: 12px;
    font-size: 2rem;
  }

  .home #main h1 {
    font-size: 5rem;
    margin-top: 3em;
  }

  /* Mobilmenu */

  /* Styling Button */
  header div.menubutton {
    right: 1rem;
    top: 1.3rem;
    position: absolute;
    display: block;
    z-index: 10;
  }
  header div.menubutton img {
    width: 30px;
  }
  header div.menubutton a.hidenav {
    display: none;
  }

  /* Navigation einblenden */
  /* Grundzustand */
  #nav-mobil {
    display: none !important;
  }
  .menubutton .hidenav {
    display: none;
  }
  .menubutton .shownav {
    display: inline-block;
  }

  /* Aktiv-Zustand steuern über die Klasse am Body */
  body.menu-open #nav-mobil {
    display: block !important;
  }
  body.menu-open .menubutton .shownav {
    display: none;
  }
  body.menu-open .menubutton .hidenav {
    display: inline-block;
  }

  /* Styling Menu */

  #nav-mobil {
    top: -0.8em;
    right: 0;
    background-color: #ebdfad;
    position: relative;
    float: none;
    margin: 0;
    padding-bottom: 0;
  }

  #nav-mobil ul {
    margin-bottom: 0;
    font-family: "Josefin Slab";
    font-size: 1.2rem;
    line-height: 2;
    transition: 0.25s;
  }
  #nav-mobil ul li {
    width: 100%;
    float: none;
    margin-right: 0;
    padding-top: 0;
    /* padding-bottom: 15px; */
    text-align: center;
    border-bottom: 1px solid #b0821b;
  }
  #nav-mobil ul li:last-child {
    padding-bottom: 0.5em;
  }
  
  /* #nav-mobil ul.level_2 {
    font-family: Georgia, serif;
    font-size: 0.9rem;
  } */

  #nav-mobil ul li.vogue {
    border-top: 1px solid #b0821b;
  }
  #nav-mobil ul li.guggenheim {
    border-bottom: none;
  }
/* 
  #nav-mobil ul li.submenu {
    background-color: #f9f0cd;
  } */

  #nav-mobil ul li a,
  #nav-mobil ul li.active {
    font-weight: 300;
  }

  #nav-mobil ul li a {
    text-decoration: none;
    color: #000;
  }
  /* #nav-mobil ul li:first-child {
    border-top: 1px solid #b0821b;
  } */

  /* Galerie */

  #main .content-gallery ul {
    align-items: flex-end;
    column-gap: 5%; /* Abstand zwischen den Items */
  }

  #main .content-gallery ul li {
    margin-bottom: 3em;
    width: calc(95% / 2); /* 100% - column-gap (Anzahl+Breite) */
  }
}

@media screen and (max-width: 600px) {
  
  #header {
    background-size: 300px auto;
  }
  #header h1 {
    font-size: 1.5rem;
    letter-spacing: 8px;
  }
  #main {
    margin-top: -3.5em;
    margin-bottom: 6em;
    width: 100%;
  }

  .home #main h1 {
    font-size: 4rem;
    margin-top: 2em;
  }

  #main .inside {
    padding: 0;
  }

  #main .inside .mod_article {
    padding: 1em 2em 2em 2em;
  }

  #main .inside .mod_article.second {
    transform: rotate(0deg);
  }
  header div.menubutton {
    top: 1.1rem;
  }
  
  header div.menubutton img {
    width: 23px;
  }
  
  #nav-mobil {
    top: 0;
  }

  /* Galerie */

  #main .content-gallery ul {
    justify-content: center;
  }

  #main .content-gallery ul li {
    margin-bottom: 3em;
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 400px) {
  #main .inside .mod_article {
    padding: 1em;
  }
  
  #header h1 {
    font-size: 1.5rem;
    letter-spacing: 5px;
  }
  
  header div.menubutton {
    top: 1.3rem;
  }
  
  header div.menubutton img {
    width: 20px;
  }
}