body{
  font-family: "Circular Std", Arial, Helvetica, sans-serif;
  padding: 7px;
  font-size: 15px;
  background-color: ghostwhite !important;
}


h1,h2,h3,p{
    font-size: 1em;
    margin: 0;
}


.red{
    color: red;
}

.gold{
    color: gold;
    color: black;
}

.inhalt-print{
  display: none;
}

.grid-container-stripe{
    grid-template-columns: 1fr;
    grid-template-rows: 10% 90%;
    gap: 0px;
    padding: 0px;
    display: none;
    }

.container-cover{
  display: none;
}



/* index (startseite) ------------------------------------- */
.container{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1;
}

  .grid-item-01{
  grid-row: span 8;
  grid-column: span 8;
  border: 10px solid black;
  font-size: 120px;
  font-weight: bold;
   letter-spacing: -7px;
   line-height: 0.8;
  padding: 5px;
 
  }

.grid-item-02{
    grid-row: span 2;
  grid-column: span 2;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-02:hover{
  border: 10px solid orangered;
  background-color: transparent;
}

.grid-item-03{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-03:hover{
  border: 10px solid orangered;
  background-color: transparent;
}

.grid-item-04{
  grid-row: span 3;
  grid-column:span 2;
  border: 10px solid blue;
  font-size: 300px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: blue;
}
.grid-item-04:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-05{
  grid-row: span 3;
  grid-column: span 3;
  border: 10px solid gold;
   font-size: 180px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-05:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-06{
  grid-row: span 2;
  grid-column:span 2;
  border: 10px solid blue;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: blue;
}
.grid-item-06:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-07{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-07:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-08{
  grid-row: span 3;
  grid-column:span 3;
  border: 10px solid blue;
  font-size: 130px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: blue;
}
.grid-item-08:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-09{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid gold;
   font-size: 130px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-09:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-010{
 grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
   background-color: black;
}
.grid-item-010:hover{
 background-color: transparent;
}

.grid-item-011{
  grid-row: span 2;
  grid-column: span 3;
  border: 0px solid gold;
   font-size: 130px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-011:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-012{
  grid-row: span 3;
  grid-column: span 3;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-012:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-013{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
   font-size: 190px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-013:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-014{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 60px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
   background-color: black;
}
.grid-item-014:hover{
 background-color: transparent;
}

.grid-item-015{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid orangered;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-015:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-017{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 200px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
   background-color: black;
}
.grid-item-017:hover{
 background-color: transparent;
}

.grid-item-018{
grid-row: span 3;
  grid-column: span 3;
  border: 10px solid blue;
   font-size: 170px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-018:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-019{
grid-row: span 4;
  grid-column: span 2;
  border: 10px solid orangered;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-019:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-020{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid black;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
   background-color: black;
}
.grid-item-020:hover{
 background-color: transparent;
}

.grid-item-021{
grid-row: span 4;
  grid-column: span 2;
  border: 10px solid gold;
   font-size: 130px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-021:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-022{
  grid-row: span 2;
  grid-column: span 2;
  border: 0px solid gold;
   font-size: 100px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-022:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-023{
  grid-row: span 1;
  grid-column: span 1;
  border: 0px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-023:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-024{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 150px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
   background-color: black;
}
.grid-item-024:hover{
 background-color: transparent;
}


/* 00 uebersicht texte ------------------------------------ */
.container-1{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1;
}

.grid-item-1{
  grid-row: span 8;
  grid-column: span 8;
  border: 10px solid black;
  font-size: 105px;
  font-weight: bold;
   letter-spacing: -6px;
   line-height: 0.85;
  padding: 5px;
  text-decoration: none;
}

.grid-item-2{
  grid-row: span 8;
  grid-column: span 6;
  border: 0px solid black;
font-size: 28px;
  font-weight: bold;
  line-height: 0.95;
  padding: 5px;
}

.grid-item-3{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-3:hover{
  background-color: transparent;
}

.grid-item-4{
  grid-row: span 1;
  grid-column:span 1;
  border: 10px solid black;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
   background-color: black;
}
.grid-item-4:hover{
  background-color: transparent;
}

.grid-item-5{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid blue;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-5:hover{
  background-color: transparent;
}

.grid-item-6{
  grid-row: span 2;
  grid-column:span 2;
  border: 10px solid orangered;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: orangered;
}
.grid-item-6:hover{
  background-color: transparent;
}

.grid-item-7{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-7:hover{
  background-color: transparent;
}

.grid-item-8{
  grid-row: span 2;
  grid-column:span 2;
  border: 10px solid gold;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: gold;
}
.grid-item-8:hover{
  background-color: transparent;
}

.grid-item-9{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-9:hover{
  background-color: transparent;
}

.grid-item-10{
 grid-row: span 1;
  grid-column: span 1;
  border: 10px solid black;
   font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-10:hover{
  background-color: transparent;
}

.grid-item-11{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid blue;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-11:hover{
  background-color: transparent;
}

.grid-item-12{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-12:hover{
  background-color: transparent;
}

.grid-item-13{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid black;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-13:hover{
  background-color: transparent;
}

.grid-item-14{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid black;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-14:hover{
  background-color: transparent;
}

.grid-item-15{
grid-row: span 2;
  grid-column: span 1;
  border: 10px solid orangered;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-15:hover{
  background-color: transparent;
}

.grid-item-16{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-16:hover{
  background-color: transparent;
}


.grid-item-17{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-17:hover{
  background-color: transparent;
}

.grid-item-18{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-18:hover{
  background-color: transparent;
}

.grid-item-19{
grid-row: span 2;
  grid-column: span 1;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-19:hover{
  background-color: transparent;
}

.grid-item-20{
grid-row: span 2;
  grid-column: span 1;
  border: 10px solid blue;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-20:hover{
  background-color: transparent;
}


.grid-item-21{
  grid-row: span 2;
  grid-column: span 2;
  background-color: transparent;
  border: 10px dotted pink;
}

.grid-item-22{
  grid-row: span 1;
  grid-column: span 1;
  background-color: transparent;
  border: 0px dotted pink;
}

/* 1 print aint dead yet ---------------------------------- */
.grid-container-1{
display: none;
}

.container-3{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-00c{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-00c:hover{
  background-color: black;
}

.grid-item-0c{
  grid-row: span 2;
  grid-column: span 7;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  line-height: 0.85;
   letter-spacing: -4px;
  padding: 5px;
}

.grid-item-1c{
  grid-row: span 1;
  grid-column: span 2;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1c:hover {
  color: gold;
  background-color: gold;
color: black;
  text-decoration: none;
}
.grid-item-1c:link, :visited, :active {
  text-decoration: none;
  color: black;
}


.grid-item-2c{
  grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-3c{
  grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
   font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4c{
  grid-row: span 4;
  grid-column:span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-5c{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-6c{
  grid-row: span 4;
  grid-column: span 8;
  border: 7px solid black;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -2px;
  padding: 5px;
}

.grid-item-7c{
  grid-row: span 4;
  grid-column: span 4;
  border: 7px solid black;
  font-size: 60px;
  font-weight: bold;
  line-height: 0.9;
  padding: 5px;
  letter-spacing: -1.5px;
}

.grid-item-8c{
   grid-row: span 2;
  grid-column: span 2;
  border: 10px solid orangered;
  font-size: 300px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-8c:hover{
  background-color: orangered;
}

.grid-item-9c{
   grid-row: span 6;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-10c{
  grid-row: span 9;
  grid-column: span 9;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-11c{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-11c:hover{
  background-color: blue;
}

/* 2 ordnung oder chaos ---------------------------------- */
.grid-container-2{
display: none;
}

.container-2{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0b{
  grid-row: span 3;
  grid-column: span 5;
  border: 10px solid black;
   font-size: 80px;
  font-weight: bold;
  line-height: 0.85;
   letter-spacing: -4px;
  padding: 5px;
}

.grid-item-1b{
  grid-row: span 1;
  grid-column: span 2;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1b:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1b:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-3b{
  grid-row: span 4;
  grid-column: span 3;
  border: 7px solid black;
   font-size: 30px;
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-4b{
  grid-row: span 4;
  grid-column:span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  padding: 5px;
  letter-spacing: -0.4px;
  line-height: 0.95;
}

.grid-item-5b{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid orangered;
  padding: 5px;
  font-size: 100px;
}
.grid-item-5b:hover{
  background-color: orangered;
}

.grid-item-6b{
  grid-row: span 7;
  grid-column: span 8;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-7b{
  grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8b{
   grid-row: span 7;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9b{
   grid-row: span 6;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-00b{
   grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
  font-size: 45px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-00b:hover{
  background-color: blue;
}

.grid-item-10b{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-10b:hover{
  background-color: black;
}

/* 3 linie fläche raum ----------------------------------- */
.grid-container-3{
display: none;
}

.container-4{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0d{
  grid-row: span 3;
  grid-column: span 4;
  border: 10px solid black;
   font-size: 80px;
  font-weight: bold;
  line-height: 0.93;
   letter-spacing: -2.5px;
  padding: 5px;
}

.grid-item-1d{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1d:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1d:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2d{
  grid-row: span 3;
  grid-column: span 6;
  border: 7px solid black;
font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-3d{
  grid-row: span 4;
  grid-column: span 6;
  border: 7px solid black;
   font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-4d{
  grid-row: span 3;
  grid-column:span 6;
  border: 7px solid black;
  font-size: 50px;
  font-weight: bold;
  line-height: 0.87;
  letter-spacing: -1px;
  padding: 5px;
}

.grid-item-5d{
  grid-row: span 7;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-6d{
  grid-row: span 4;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-7d{
  grid-row: span 3;
  grid-column: span 3;
  border: 10px solid blue;
  font-size: 60px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-7d:hover{
  background-color: blue;
}

.grid-item-8d{
   grid-row: span 3;
  grid-column: span 2;
  border: 10px solid orangered;
  font-size: 200px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-8d:hover{
  background-color: orangered;
}

.grid-item-9d{
   grid-row: span 5;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-10d{
 grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-10d:hover{
  background-color: black;
}

/* 4 grid and design philosophy --------------------------- */
.grid-container-4{
display: none;
}

.container-5{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0e{
  grid-row: span 5;
  grid-column: span 6;
  border: 10px solid black;
    font-size: 80px;
  font-weight: bold;
  line-height: 0.85;
   letter-spacing: -4px;
   padding: 5px;
}

.grid-item-1e{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-2e{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-3e{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
   font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-4e{
  grid-row: span 1;
  grid-column:span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-4e:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-4e:link, :visited, :active {
  text-decoration: none;
  color: black;
}


.grid-item-5e{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-6e{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-7e{
  grid-row: span 4;
  grid-column: span 1;
  border: 0px dotted pink;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8e{
   grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-9e{
   grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-10e{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-00e{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-11e{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-13e{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid orangered;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
}
.grid-item-13e:hover{
  background-color: orangered;
}

.grid-item-14e{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}
.grid-item-14e:hover{
  background-color: blue;
}

.grid-item-15e{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-15e:hover{
  background-color: black;
}

.grid-item-16e{
  grid-row: span 2;
  grid-column: span 1;
  border: 10px dotted pink;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-17e{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px dotted pink;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}



/* 5 flexible visual systems (working withput grids) ------ */
.grid-container-5{
  display: none;
}
.container-6{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-00f{
  grid-row: span 3;
  grid-column: span 2;
  border: 10px solid orangered;
  font-size: 25px;
  font-weight: bold;
}
.grid-item-00f:hover{
  background-color: orangered;
}

.grid-item-1f{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1f:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1f:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2f{
  grid-row: span 5;
  grid-column: span 3;
  border: 7px solid black;
font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-3f{
  grid-row: span 3;
  grid-column: span 3;
  border: 7px solid black;
   font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4f{
  grid-row: span 3;
  grid-column:span 5;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  padding: 5px;
  letter-spacing: -3.5px;
  line-height: 0.85;
}

.grid-item-5f{
  grid-row: span 5;
  grid-column: span 3;
  border: 7px solid black;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-6f{
  grid-row: span 3;
  grid-column: span 3;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7f{
  grid-row: span 4;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-8f{
   grid-row: span 1;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9f{
   grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-10f{
   grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-11f{
   grid-row: span 6;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-12f{
   grid-row: span 3;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-13f{
   grid-row: span 4;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-14f{
   grid-row: span 4;
  grid-column: span 9;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-15f{
   grid-row: span 1;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-16f{
   grid-row: span 7;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-17f{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 25px;
  font-weight: bold;
}
.grid-item-17f:hover{
  background-color: black;
}


.grid-item-18f{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
  font-size: 25px;
  font-weight: bold;
}
.grid-item-18f:hover{
  background-color: blue;
}


/* 6 bodies of color */
.grid-container-6{
  display: none;
}

.kapitel-1{
  display: none;
}

.kapitel-2{
  display: none;
}

.container-7{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1;
}

.grid-item-00g{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-00g:hover{
  background-color: black;
}

.grid-item-1g{
  grid-row: span 1;
  grid-column: span 2;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1g:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1g:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2g{
  grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-3g{
  grid-row: span 7;
  grid-column: span 5;
  border: 7px solid black;
   font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-4g{
  grid-row: span 3;
  grid-column:span 5;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  letter-spacing: -4px;
  padding: 5px;
  line-height: 0.85;
}

.grid-item-5g{
  grid-row: span 4;
  grid-column: span 3;
  border: 7px solid black;
  padding: 5px;
  font-size: 32px;
  letter-spacing: -0.4px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-6g{
  grid-row: span 6;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-7g{
  grid-row: span 7;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-8g{
   grid-row: span 9;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-9g{
   grid-row: span 7;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-10g{
   grid-row: span 2;
  grid-column: span 3;
  border: 10px solid orangered;
  font-size: 250px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-10g:hover{
  background-color: orangered;
}

.grid-item-11g{
   grid-row: span 4;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-12g{
   grid-row: span 2;
  grid-column: span 2;
  border: 10px solid blue;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-12g:hover{
  background-color: blue;
}


/* 7 designing books */
.grid-container-7{
  display: none;
}

.container-8{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0h{
  grid-row: span 2;
  grid-column: span 6;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  letter-spacing: -4px;
  padding: 5px;
  line-height: 0.85;
}

.grid-item-1h{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  line-height: 1;
}
.grid-item-1h:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1h:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2h{
  grid-row: span 8;
  grid-column: span 3;
  border: 7px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-3h{
  grid-row: span 4;
  grid-column: span 7;
  border: 7px solid black;
   font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-4h{
  grid-row: span 5;
  grid-column:span 5;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-5h{
  grid-row: span 8;
  grid-column: span 3;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-6h{
  grid-row: span 5;
  grid-column: span 8;
  border: 7px solid black;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -0.4px;
  line-height: 0.97;
  padding: 5px;
}

.grid-item-7h{
  grid-row: span 3;
  grid-column: span 2;
  border: 10px solid orangered;
  font-size: 180px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-7h:hover{
  background-color: orangered;
}

.grid-item-8h{
   grid-row: span 3;
  grid-column: span 2;
  border: 10px solid blue;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-8h:hover{
  background-color: blue;
}

.grid-item-9h{
   grid-row: span 8;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-10h{
  grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-11h{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-11h:hover{
  background-color: black;
}


/* 8 konzeptionelles buchgestalten ----------------------------------*/
.grid-container-8{
  display: none;
}

.container-9{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0i{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-0i:hover{
  background-color: black;
}

.grid-item-00i{
  grid-row: span 3;
  grid-column: span 3;
  border: 10px solid orangered;
  font-size: 300px;
  font-weight: bold;
}
.grid-item-00i:hover{
  background-color: orangered;
}

.grid-item-1i{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1i:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1i:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2i{
  grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.3px;
  padding: 5px;
}

.grid-item-3i{
  grid-row: span 7;
  grid-column: span 3;
  border: 7px solid black;
   font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4i{
  grid-row: span 3;
  grid-column:span 9;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  padding: 5px;
  line-height: 0.85;
  letter-spacing: -3px;
}

.grid-item-5i{
  grid-row: span 6;
  grid-column: span 3;
  border: 7px solid black;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-6i{
  grid-row: span 4;
  grid-column: span 3;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7i{
  grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8i{
   grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9i{
   grid-row: span 7;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-10i{
   grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-11i{
   grid-row: span 4;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-12i{
   grid-row: span 5;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-13i{
   grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-14i{
   grid-row: span 3;
  grid-column: span 10;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-15i{
   grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
  font-size: 45px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-15i:hover{
  background-color: blue;
}


/* 9 parenthese ------------------------------------------ */
.grid-container-9{
  display: none;
}

.container-10{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0j{
  grid-row: span 3;
  grid-column: span 6;
  border: 10px solid black;
  font-size: 80px;
  letter-spacing: -3px;
  font-weight: bold;
  line-height: 0.85;
  padding: 5px;
}

.grid-item-1j{
  grid-row: span 1;
  grid-column: span 2;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  line-height: 1;
}
.grid-item-1j:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1j:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2j{
  grid-row: span 3;
  grid-column: span 2;
  border: 7px solid black;
font-size: 40px;
  font-weight: bold;
  line-height: 0.93;
  letter-spacing: -0.7px;
  padding: 5px;
}

.grid-item-3j{
  grid-row: span 5;
  grid-column: span 6;
  border: 7px solid black;
   font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4j{
  grid-row: span 6;
  grid-column:span 5;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  padding: 5px;
}

.grid-item-5j{
  grid-row: span 1;
  grid-column: span 4;
  border: 10px solid orangered;
  font-size: 70px;
  padding: 5px;
}
.grid-item-5j:hover{
  background-color: orangered;
}

.grid-item-6j{
  grid-row: span 5;
  grid-column: span 8;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7j{
  grid-row: span 6;
  grid-column: span 3;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8j{
   grid-row: span 3;
  grid-column: span 3;
  border: 10px solid blue;
  font-size: 250px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-8j:hover{
  background-color: blue;
}

.grid-item-9j{
   grid-row: span 6;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}


/* 10 what happened to the book? ------------------------- */
.grid-container-10{
  display: none;
}

.container-11{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0k{
  grid-row: span 4;
  grid-column: span 5;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  line-height: 0.85;
  letter-spacing: -3px;
  padding: 5px;
}

.grid-item-1k{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-1k:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1k:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2k{
  grid-row: span 4;
  grid-column: span 4;
  border: 7px solid black;
font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-3k{
  grid-row: span 6;
  grid-column: span 3;
  border: 7px solid black;
   font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4k{
  grid-row: span 5;
  grid-column:span 5;
  border: 10px solid blue;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-4k:hover{
  background-color: blue;
}

.grid-item-5k{
  grid-row: span 4;
  grid-column: span 4;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-6k{
  grid-row: span 6;
  grid-column: span 3;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7k{
  grid-row: span 3;
  grid-column: span 3;
  border: 10px solid orangered;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-7k:hover{
  background-color: orangered;
}

.grid-item-8k{
   grid-row: span 8;
  grid-column: span 3;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9k{
   grid-row: span 7;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-10k{
  grid-row: span 10;
  grid-column: span 4;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}


/* 11 das ende einer last -------------------------------- */
.kapitel-3{
  display: none;
}

.grid-container-11{
  display: none;
}

.container-12{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-00l{
  grid-row: span 3;
  grid-column: span 2;
  border: 10px solid blue;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-00l:hover{
  background-color: blue;
}

.grid-item-1l{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1l:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1l:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2l{
  grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-3l{
  grid-row: span 6;
  grid-column: span 5;
  border: 7px solid black;
   font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4l{
  grid-row: span 4;
  grid-column:span 3;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  padding: 5px;
  line-height: 0.85;
  letter-spacing: -3px;
}

.grid-item-5l{
  grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-6l{
  grid-row: span 7;
  grid-column: span 4;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7l{
  grid-row: span 6;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8l{
   grid-row: span 4;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9l{
   grid-row: span 6;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-10l{
   grid-row: span 6;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-11l{
   grid-row: span 2;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-12l{
   grid-row: span 6;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-13l{
   grid-row: span 4;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-14l{
   grid-row: span 5;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-15l{
   grid-row: span 2;
  grid-column: span 3;
  border: 7px solid black;
  font-size: 40px;
  font-weight: bold;
  line-height: 0.9;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-16l{
   grid-row: span 7;
  grid-column: span 8;
  border: 10px solid orangered;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.05;
  padding: 5px;
}

.grid-item-17l{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 30px;
  font-weight: bold;
}
.grid-item-17l:hover{
  background-color: black;
}

.grid-item-18l{
  grid-row: span 3;
  grid-column: span 2;
  border: 10px solid orangered;
  font-size: 190px;
  font-weight: bold;
}
.grid-item-18l:hover{
  background-color: orangered;
}


/* 12 the whole earth catalog ----------------------------- */
  .grid-container-12{
      display: grid;
     margin: 5px;
     grid-template-columns: 1fr 0.5fr 0.5fr 1fr;
      grid-template-rows: minmax(20px, 50px);
     grid-gap: 0.5rem;
     font-weight: bold;
     line-height: 1.02;
     padding: 5px;
     display: none;
 }

.container-13{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-0m{
  grid-row: span 4;
  grid-column: span 5;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  line-height: 0.83;
  letter-spacing: -3px;
  padding: 5px;
}

.grid-item-1m{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  line-height: 1;
}
.grid-item-1m:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1m:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2m{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-3m{
  grid-row: span 8;
  grid-column: span 5;
  border: 7px solid black;
   font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4m{
  grid-row: span 8;
  grid-column:span 5;
  border: 7px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-5m{
  grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-6m{
  grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7m{
  grid-row: span 2;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 50px;
  font-weight: bold;
  line-height: 0.9;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-8m{
   grid-row: span 3;
  grid-column: span 2;
  border: 10px solid blue;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-8m:hover{
  background-color: blue;
}

.grid-item-9m{
   grid-row: span 8;
  grid-column: span 10;
  border: 7px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-10m{
  grid-row: span 5;
  grid-column: span 10;
  border: 7px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-11m{
   grid-row: span 1;
  grid-column: span 1;
  border: 10px solid orangered;
  font-size: 45px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-11m:hover{
  background-color: orangered;
}

.grid-item-12m{
   grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-12m:hover{
  background-color: black;
}

/* 13 stereotype ---------------------------------------- */
.grid-container-13{
  display: none;
}

.container-14{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-00n{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid blue;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-00n:hover{
  background-color: blue;
}

.grid-item-1n{
  grid-row: span 1;
  grid-column: span 3;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1n:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1n:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2n{
  grid-row: span 7;
  grid-column: span 4;
  border: 7px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 0.99;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-3n{
  grid-row: span 2;
  grid-column: span 6;
  border: 7px solid black;
   font-size: 40px;
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-4n{
  grid-row: span 2;
  grid-column:span 6;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  padding: 5px;
  line-height: 0.85;
  letter-spacing: -3px;
}

.grid-item-5n{
  grid-row: span 7;
  grid-column: span 5;
  border: 7px solid black;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-6n{
  grid-row: span 6;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7n{
  grid-row: span 7;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8n{
   grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9n{
   grid-row: span 7;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-10n{
   grid-row: span 6;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-11n{
   grid-row: span 16;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-12n{
   grid-row: span 6;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-13n{
   grid-row: span 7;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-15n{
   grid-row: span 1;
  grid-column: span 1;
  border: 10px solid orangered;
  font-size: 45px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-15n:hover{
  background-color: orangered;
}

.grid-item-17n{
   grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-17n:hover{
  background-color: black;
}

.grid-item-16n{
   grid-row: span 7;
  grid-column: span 5;
  border: 10px solid orangered;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.05;
  padding: 5px;
}

/* 14 learn to code vs code to learn -------------------- */
.kapitel-4{
  display: none;
}

.grid-container-14{
  display: none;
}

.container-15{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-00o{
  grid-row: span 4;
  grid-column: span 2;
  border: 10px solid blue;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-00o:hover{
  background-color: blue;
}

.grid-item-1o{
  grid-row: span 2,;
  grid-column: span 2;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1o:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1o:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2o{
  grid-row: span 6;
  grid-column: span 5;
  border: 7px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 0.99;
  letter-spacing: -0.3px;
  padding: 5px;
}

.grid-item-3o{
  grid-row: span 8;
  grid-column: span 6;
  border: 7px solid black;
   font-size: 23px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4o{
  grid-row: span 6;
  grid-column:span 5;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  padding: 5px;
  line-height: 0.85;
  letter-spacing: -4px;
}

.grid-item-5o{
  grid-row: span 3;
  grid-column: span 5;
  border: 7px solid black;
  padding: 5px;
  font-size: 40px;
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.6px;
}

.grid-item-6o{
  grid-row: span 5;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7o{
  grid-row: span 5;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8o{
   grid-row: span 7;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9o{
   grid-row: span 5;
  grid-column: span 8;
  border: 7px solid black;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-10o{
  grid-row: span 8;
  grid-column: span 5;
  border: 7px solid black;
  padding: 5px;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-11o{
  grid-row: span 8;
  grid-column: span 6;
  border: 7px solid black;
  padding: 5px;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-12o{
  grid-row: span 6;
  grid-column: span 7;
  border: 7px solid black;
  padding: 5px;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-13o{
  grid-row: span 9;
  grid-column: span 9;
  border: 7px solid black;
  padding: 5px;
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-14o{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid orangered;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-14o:hover{
  background-color: orangered;
}

.grid-item-15o{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-15o:hover{
  background-color: black;
}


/* 15 programming and graphic design --------------------- */
.grid-container-15{
  display: none;
}

.container-16{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1.05;
}

.grid-item-00p{
  grid-row: span 2;
  grid-column: span 8;
  border: 7px solid black;
  font-size: 40px;
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.6px;
  padding: 5px;
}

.grid-item-1p{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid gold;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
}
.grid-item-1p:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.grid-item-1p:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.grid-item-2p{
  grid-row: span 5;
  grid-column: span 4;
  border: 7px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.4px;
  padding: 5px;
}

.grid-item-3p{
  grid-row: span 7;
  grid-column: span 7;
  border: 7px solid black;
   font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-4p{
  grid-row: span 4;
  grid-column:span 8;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  padding: 5px;
  line-height: 0.85;
  letter-spacing: -4px;
}

.grid-item-5p{
  grid-row: span 7;
  grid-column: span 6;
  border: 7px solid black;
  padding: 5px;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
}

.grid-item-6p{
  grid-row: span 5;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-7p{
  grid-row: span 9;
  grid-column: span 5;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-8p{
   grid-row: span 8;
  grid-column: span 7;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-9p{
   grid-row: span 5;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-10p{
   grid-row: span 5;
  grid-column: span 3;
  border: 10px solid blue;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.05;
  padding: 5px;
}

.grid-item-11p{
   grid-row: span 8;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-12p{
   grid-row: span 4;
  grid-column: span 6;
  border: 7px solid black;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-13p{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-13p:hover{
  background-color: black;
}

.grid-item-14p{
  grid-row: span 2;
  grid-column: span 1;
  border: 10px solid orangered;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-14p:hover{
  background-color: orangered;
}

.grid-item-15p{
  grid-row: span 5;
  grid-column: span 2;
  border: 10px solid blue;
  font-size: 60px;
  font-weight: bold;
}
.grid-item-15p:hover{
  background-color: blue;
}

/* 16 impressum --------------------------------------------------- */
.impr-1{
    display: none;
}

.impr-2{
display: none;
}

.impr-3{
 display: none;
}


.container-impressum{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    font-size: 15px;
    line-height: 1;
}

.grid-item-a{
  grid-row: span 7;
  grid-column: span 6;
  border: 10px solid black;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}



.grid-item-b{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-b:hover {
  background-color: transparent;
}

.grid-item-c{
  grid-row: span 4;
  grid-column: span 4;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-c:hover{
  border: 10px solid orangered;
  background-color: transparent;
}

.grid-item-d{
  grid-row: span 2;
  grid-column:span 2;
  border: 7px solid black;
  font-size: 22.5px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
}


.grid-item-e{
  grid-row: span 3;
  grid-column: span 3;
  border: 10px solid gold;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-e:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-f{
  grid-row: span 1;
  grid-column:span 2;
  border: 10px solid blue;
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: blue;
  color: blue;
}
.grid-item-f:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-g{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-g:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-h{
  grid-row: span 2;
  grid-column:span 2;
  border: 7px solid black;
  font-size: 22.5px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
}


.grid-item-i{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-i:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-j{
 grid-row: span 1;
  grid-column: span 4;
  border: 7px solid black;
   font-size: 20.5px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}


.grid-item-k{
  grid-row: span 3;
  grid-column: span 2;
  border: 0px solid gold;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-k:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-l{
  grid-row: span 4;
  grid-column: span 3;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-l:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-m{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid blue;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
  color: blue;
}
.grid-item-m:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-n{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid black;
   font-size: 60px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-n:hover{
 background-color: black;
}

.grid-item-o{
grid-row: span 2;
  grid-column: span 2;
  border: 0px solid orangered;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-o:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-p{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 80px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-p:hover{
 background-color: transparent;
}



.grid-item-r{
grid-row: span 2;
  grid-column: span 3;
  border: 10px solid blue;
   font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
  color: blue;
}
.grid-item-r:hover{
 border: 10px solid blue;
 background-color: transparent;
}

.grid-item-s{
grid-row: span 3;
  grid-column: span 2;
  border: 10px solid orangered;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-s:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-t{
grid-row: span 1;
  grid-column: span 4;
  border: 7px solid black;
   font-size: 20.5px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}

.grid-item-u{
grid-row: span 3;
  grid-column: span 2;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-u:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-v{
  grid-row: span 2;
  grid-column: span 2;
  border: 0px solid gold;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-v:hover{
 border: 10px solid gold;
 background-color: transparent;
}

.grid-item-x{
  grid-row: span 2;
  grid-column: span 3;
  border: 0px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-x:hover{
 border: 10px solid orangered;
 background-color: transparent;
}

.grid-item-y{
grid-row: span 3;
  grid-column: span 1;
  border: 7px solid black;
   font-size: 13.5px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}



/* literaturliste ---------------------------------------------------- */
.anhang-print{
  display: none;
}

.anhang-2{
  display: none;
}

.container-lit{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 5px;
    font-size: 15px;
    line-height: 1;
}

.grid-item-1-lit{
  grid-row: span 2;
  grid-column: span 6;
  border: 10px solid black;
  font-size: 80px;
  font-weight: bold;
  letter-spacing: -3.5px;
  line-height: 1;
  padding: 5px;
}

.grid-item-2-lit{
  grid-row: span 11;
  grid-column: span 12;
  border: 0px solid black;
font-size: 22.5px;
  font-weight: bold;
  line-height: 1;
   letter-spacing: -0.7px;
  padding: 3px;
}
ul {
    list-style: square;
}

.grid-item-3-lit{
  grid-row: span 1;
  grid-column: span 1;
  border: 10px solid orangered;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: orangered;
}
.grid-item-3-lit:hover{
  background-color: transparent;
}

.grid-item-4-lit{
  grid-row: span 1;
  grid-column:span 1;
  border: 10px solid black;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: black;
}
.grid-item-4-lit:hover{
  background-color: transparent;
}

.grid-item-5-lit{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid blue;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-5-lit:hover{
  background-color: transparent;
}

.grid-item-6-lit{
  grid-row: span 2;
  grid-column:span 4;
  border: 10px solid orangered;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: orangered;
}
.grid-item-6-lit:hover{
  background-color: transparent;
}

.grid-item-7-lit{
grid-row: span 1;
  grid-column: span 2;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-7-lit:hover{
  background-color: transparent;
}

.grid-item-8-lit{
  grid-row: span 2;
  grid-column:span 1;
  border: 10px solid black;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background-color: black;
}
.grid-item-8-lit:hover{
  background-color: transparent;
}

.grid-item-9-lit{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-9-lit:hover{
  background-color: transparent;
}

.grid-item-10-lit{
 grid-row: span 2;
  grid-column: span 5;
  border: 10px solid black;
   font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}
.grid-item-10-lit:hover{
  background-color: transparent;
}

.grid-item-11-lit{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid blue;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: blue;
}
.grid-item-11-lit:hover{
  background-color: transparent;
}

.grid-item-12-lit{
  grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-12-lit:hover{
  background-color: transparent;
}

.grid-item-13-lit{
grid-row: span 1;
  grid-column: span 2;
  border: 10px solid black;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-13-lit:hover{
  background-color: transparent;
}

.grid-item-14-lit{
grid-row: span 1;
  grid-column: span 1;
  border: 10px solid black;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: black;
}
.grid-item-14-lit:hover{
  background-color: transparent;
}

.grid-item-15-lit{
grid-row: span 2;
  grid-column: span 2;
  border: 10px solid gold;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
  background-color: gold;
}
.grid-item-15-lit:hover{
  background-color: transparent;
}

.grid-item-16-lit{
grid-row: span 4;
  grid-column: span 1;
  border: 10px solid black;
   font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 5px;
}


/* navigation */
.button-home {
   grid-row: span 2;
  grid-column: span 2;
  border: 10px solid black;
  font-size: 150px;
  font-weight: bold;
}

 .button-home:hover {
  background-color: black;
 }

.button-home a:link {
  text-decoration: none;
  color: black;
}

.button-home a:visited {
  text-decoration: none;
  color: black;
}

.button-home a:active {
  text-decoration: none;
  color: black;
}

.transparent {
  opacity: 0%;
}

.transparent-2{
  opacity: 0%;
}

.grid-item-01{
  text-decoration: none;
}

.grid-item-01 a:link, a:visited, a:active {
  text-decoration: none;
  color: black;
}

.grid-item-01 a:hover {
  text-decoration: none;
color: orangered;
}

.grid-item-1{
  text-decoration: none;
}

.grid-item-1 a:link, a:visited, a:active {
  text-decoration: none;
  color: black;
}

.grid-item-1 a:hover {
  text-decoration: none;
color: black;
}


.button-red {
  text-decoration: none;
}

.button-red a:link, a:visited, a:active {
  text-decoration: none;
  color: black;
}

.button-red a:hover {
  color: orangered;
}

.button-gold{
  
}
.button-gold:hover {
  color: gold;
  background-color: gold;
 color: black;
  text-decoration: none;
}
.button-gold:link, :visited, :active {
  text-decoration: none;
  color: black;
}

.container-back{
  display: none;
}