nav {
  display: none;
}

body li {
  list-style-type: none;
  font-size: 0.8em;
}

body ol {
/*  margin-left: 0;*/
padding-left: 0.2em;

}

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;
}

aside li {
    list-style-type: decimal;
}

#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: 20%;
  border-color: green;
}

  #item_kirche {
      display: grid;
      grid-area: area_kirche;
      align-content: center;
    }

  #item_plan {
      display: grid;
      grid-area: area_plan;
      align-content: center;
      }

  #item_escape {
      display: grid;
      grid-area: area_escape;
      align-content: center;
        }

  #item_beginn {
            display: grid;
            grid-area: area_beginn;
            align-content: center;
              }


 #hamburger summary {
  	list-style-type: "☰";
  	font-size: 1em;
    width: 1em;
    position: absolute;
    top: 2em;
    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;
  /*grid-row: span 2;*/
  background: #F0FFFF;
  border-color: #0154CD;
}width:

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

table {
   width: 100%;
   table-layout: fixed; /* Bessere Kontrolle über Spaltenbreiten */
   border-collapse: collapse;
 }
 table td {
  border: 1px solid black;
  /* padding: 8px;*/
  padding: 0.6em;
   text-align: left;
   font-size: 1.2em;
   font-weight: bolder;
 }

 table th {
   font-size: 1.2em;
   font-weight: bolder;
 }
 /* Individuelle Spaltenbreiten definieren */
 .col-1 { width: 20%; }  /* Schmale Spalte */
 .col-2 { width: 80%; }  /* Breite Spalte */



.menu a:hover{
  color: white;
}

header li {
    font-size: 1em;
}

header,
article,
section,
aside {
	border-radius: 0em 0.5em 0.5em;
	border: thin solid;
  padding: 0.7em;
  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 {
  background-color: #F0FFF0;
  background: #FFF8DC;
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
}

.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;
  /*display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));*/
  gap: 0.1em;
  /*text-align: right;*/
  margin: 1em;
}

footer li {
    font-size: 0.9em;
}

.zuletzt {
  text-align: center;
}

aside.kleinesbild img{
  width: 50%;
}

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

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

  #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;
    display: grid;
    grid-template-areas:  "area_logo area_adresse"
                          "area_menu area_menu";
  }

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

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

  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;
  }

  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: white;
   }

   main {
     display: grid;
     /*grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));*/
     grid-template-columns: repeat(2, 1fr);
     grid-template-areas:  "area_beginn area_beginn"
                           "area_plan area_plan"
                           "area_kirche area_escape";
    }


    .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%;
  }

  main {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));*/
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:  "area_beginn area_beginn area_beginn area_beginn"
    "area_kirche area_plan area_plan area_escape";