nav {
  display: none;
}

body li {
  list-style-type: none;
}

body {
  font-family: "Catamaran", sans-serif;
  margin-left: auto;
  margin-right: auto;
  max-width: 90em;
  line-height: 135%;
	color: #333333;
}

header {
  background: #e4ebf2;
  border-color: #8a9da8;
}

#item_logo {
  display: block;
  padding: 0.2em;
  border: steelblue;
  border-radius: 0.2em;
  margin-left: auto;
  margin-right: auto;
  margin: 0.1em;
}


  #item_logo img {
    width: 50%;
  }

 #item_adresse {
   display: grid;
   grid-area: area_adresse;
  }

 #item_adresse li {
    color: maroon;
    line-height: 1em;
    font-size: 0.9em;
 }

 #hamburger summary {
  	list-style-type: "☰";
  	font-size: 1em;
    width: 1.2em;
    position: absolute;
    top: 1.5em;
    left: 14em;
    align-items: center;
    cursor: pointer;
    border: 0.05em solid;
    border-radius: 0.1em;
    padding: 0.2em;
    margin: 0.2em;
    background: lightsteelblue;
    border-color: black;
}

 #hamburger [open] summary {
	  list-style-type: "✖";
	  color: red;
    font-size: 1em;
    width: 0.6em;
    cursor: pointer;
    border: 0.05em solid;
    border-radius: 0.1em;
    padding: 0.2em;
    background: white;
    position: fixed;
    margin: 0.2em;
    top: 8em;
    left: 0.5em;
}

 #hamburger [open] {
        position: fixed;
        margin: 0.2em;
        top: 10em;
        left: 0.2em;
        padding: 1em;
        background: azure;
        border: 0.05em solid;
        border-radius: 0.2em;
        z-index: 5;
}

 #hamburger [open] a {
       background: white;
       padding: 0.2em;
       text-decoration: none;
       color: darkgreen;
}

 #hamburger [open] li {
       line-height: 2.5em;
}

article {
	grid-column: 1 / -1;
  background: var(--background-accent4);
  border-color: var(--border-accent4);
}

article #ohne_rand {
  border: none;
}

h5 {
  font-weight: normal;
  align: left;
}

.menu a:hover{
  color: white;
}

header li {
    font-size: 1em;
}

header,
section,
section {
	border-radius: 0em 0.5em 0.5em;
	border: thin solid;
  padding: 0.7em;
  margin: 0.3em;
}

article {
	/*border-radius: 0em 0.5em 0.5em;
	border: thin solid;*/
  padding: 0.1em;
  margin: 0.3em;
}


header {
	margin-right: auto;
  margin-left: auto;
}

figure {
  padding: 0.1em;
  margin: 0.1em;
  /*position: relative;*/
}

figure img  {
width: 95%;
display: block;
margin-left: auto;
margin-right: auto;
}

section img,
section img  {
  width: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#slogan{
  border: none;
  margin-top: auto;
  margin-bottom: auto;
  padding: 1em;
  background-color: white;
}

.accent1 {
  background: var(--background-accent1);
  border-color: var(--border-accent1);
}

.accent2 {
  background: var(--background-accent2);
  border-color: var(--border-accent2);
}

.accent3 {
  background: var(--background-accent3);
  border-color: var(--border-accent3);
}

.accent4 {
  background: var(--background-accent4);
  border-color: var(--border-accent4);
}

.plop_auf {
  text-transform:uppercase;
  color: black;
  text-decoration: none;
  display: block;
  text-align: center;
}

.plop_auf:hover {
  display: block;
  background: steelblue;
  color: white;
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

h1 {
  font-family: fantasy;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
  border-radius: 0px 0.5em 0.5em;
	border: thin solid;
  padding: 0.7em;
    /*text-align: right;*/
  margin: 0.3em;
}

footer li {
    font-size: 0.9em;
    list-style-type: none;
}

.zuletzt {
  text-align: center;
}

section.kleinesbild img{
  width: 50%;
}

@media screen and (min-width: 44em) {

  #item_adresse li {
     /*font-weight:bold;*/
     color: maroon;
     line-height: 1em;
     font-size: inherit;
  }

  #item_logo img {
    width: 65%;
  }

 #hamburger {
   display: none;
  }

  #item_logo {
    display: grid;
    grid-area: area_logo;
    align-content: center;
    /*margin-left: 5em;*/
  }

  #item_logo a {
    display: block;
    align-content: center;
    margin-right: auto;
  }

  #item_menu {
    grid-area: area_menu;
  }

  header {
    position: sticky;
    top: 0;
    /*background: rgb(223 172 32 /0.2);*/
    /*opacity: 0.8;*/
    display: grid;
    grid-template-areas:  "area_logo area_adresse"
                          "area_menu area_menu";
  }


  main,
  section,
  article,
  section p, li {
    font-size: 1.1em;
    line-height: 130%;
  }

  footer {
      /*display: flex;
      flex-direction: row;*/
      display: grid;
    	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
      gap: 0.1em;
    }

  nav {
    display: block;
    flex-direction: row;
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    overflow: hidden;
    padding: 0 0.8em 0 0.9em;
    /*background: rgb(195, 35, 45);*/
  }

  nav > ul > li {
    float: left;
    text-transform:uppercase;
    color: black;
   }

  nav > ul a {
    display: block;
    white-space: nowrap;
    padding: 1em;
    background: azure;
    text-decoration: none;
    color: black;
   }

  nav > ul > li > ul {
    display: none;
   }

  nav li a:hover{
    display: block;
    background: red;
    color: white;
   }

  nav > ul > li:hover > ul {
    display: block;
    position: absolute;
   }

  nav > ul > li > ul > li {
    position: relative;
   }


  nav ul > li > ul > li a {
    background: steelblue;
   /*color: rgb(255, 255, 255);*/
    color: white;
   }

   main {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
    }

    .wechselnd {
      display: none;
    }
}

@media screen and (min-width: 80em) {

  .wechselnd {
  display: inherit;
  }

  header {
    display: flex;
    flex-direction: row;
  }

  .menu {
    margin-top: 1em;
  }

  #item_logo img {
    width: 75%;
  }
}

:root {
	--background-accent1: cornsilk;
	--border-accent1: burlywood;
  --background-accent2: bisque;
  --border-accent2: brown;
  --background-accent3: #ebf5d7;
      /*helles grün ohne Name*/
  --border-accent3: #8db243;
      /*warmes grün ohne Name*/
  --background-accent4: azure;
  --border-accent4: midnightblue;
}