/************************************************************************************
                                  Menue
*************************************************************************************/


:root {
  --menucolor: #E0E0E0;
  --trianglecolor: #9090af;
  --fontcolor: #0000af;
  --kaufboxcolor: #E0E0E0;              
  --untencolor: var(--menucolor);
  --headercolor: var(--fontcolor);
  font-family: Arial, Helvetica, sans-serif;
}

body {
 margin: 0;
}

nav a {
 color: var(--fontcolor);
 text-decoration: none;
}

nav a:hover {
  border-bottom: 1px dashed #000;
}

nav ul {
    position: absolute;               /* Kein Platz im übergeordneten Element reservieren */
    margin: 0em;
    list-style: none;
    padding: 0.5em;
    border: solid black 1px;
    box-shadow: 5px 5px 5px grey;
}

nav li {
    padding: 10px 20px;
    position: relative;
    white-space: nowrap;
    background: var(--menucolor);
    margin: 00px;
    font-weight: 700;
    color: var(--fontcolor);
}

nav::before {
 content: "Menu";
}

nav {
 display: inline-block;
 background: var(--menucolor);
 margin: 1em 0em 0em 0em;
 padding: 1em 1em 2em 1em;
 border: solid black 1px;
 font-weight: 700;
 box-shadow: 5px 5px 5px grey;
 color: var(--fontcolor);
 position:relative;
}

nav > ul {
 display: none;
 left:0;
 top:0%;
 background: var(--menucolor);
}

nav:hover > ul {
 display: inline-block;
}

/*
nav:active > ul {
 display: inline-block;
}*/

.pfeil::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--trianglecolor);
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
}

ul ul {
    display: none;
    margin: 0;
    left: 100%;
    top:0;
    background: var(--menucolor);
    border: solid black 1px;
}

li:hover > ul {
    display: block;
}

/*
li:active > ul {
    display: block;
}
*/

ul ul ul {
 top: 50%;
 left: -30%;
 z-index:100;
}


@media only screen and (min-width: 1000px) {

 nav {
  display: block;
  background: transparent;
  border: none;
  font-weight: 700;
  box-shadow: none;
  color: transparent;
  position:relative;
  top:0;
  left:0;
  margin: 0;
 }

  nav::before {
   content: '';
  }

  nav > ul {
   display: block;
   box-sizing: border-box;
   width: 100%;
  }

  nav::before {
   content: "";
  }

  nav li {
      display: inline-block;
      padding: 10px 20px;
      position: relative;
      white-space: nowrap;
      background: var(--menucolor);
      margin: 0;
  }

  nav > ul > li {
      padding: 5px 20px; /*menüzeile mit nicht so viel padding */
  }

  ul ul li {
    display: block;
  }


  nav ul .pfeil::before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--trianglecolor);
  }
  
  ul ul .pfeil::before {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--trianglecolor);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  ul ul {
    top: 100%;
    left: 0;
  }

  ul ul ul {
      top: 0;
      left: 100%;
  }
}

/************************************************************************************
                                  Normaler Inhalt
*************************************************************************************/


.head {
 display: flex;
 align-items: center;
 justify-content: space-evenly;
/* justify-content: space-between;*/
 flex-wrap: wrap;
}

.wkboxlinks {
 display:flex;
 align-items: stretch;
 flex-flow: column;
 padding: 0.2em;
 width: 13em;
 box-shadow: 5px 5px 5px grey;
 border: solid black 1px;
 margin: .5em;
}

.wkbox {
 position:relative;
 height: 4.5em;
 border: solid black 1px;
 padding: .5em;
 /*background-image: linear-gradient(white, #C0C0FF);*/
 background-color: var(--kaufboxcolor);
 text-align:center;
 margin: .1em;
}

.wkbox p {
 font-size: small;
 margin:0.2em;
}

.wkbox table {
 text-align:center;
}

.wkbox a {
 padding:0em;
 margin:0em;
}

.wktext {
 color: red;
 font-size: medium;
 font-weight: 700;
 text-align: center;
 padding:0.2em;
 margin:0.2em;
}

.wklinks {
 text-align:center;
 font-size: small;
 padding: .2em;
}

.wklinks a {
 padding: .2em;
}

.kopf {
 display: none;
}

@media only screen and (min-width: 1000px) {
 .kopf {
  display: inline;
 }
}

/* Mitte der Seite */

.mitte {
 margin: 1em;
}

.mitte h1 {
  color: var(--headercolor);
  text-align: center;
  margin-bottom: 0.3em;
}

.mitte h1+p {
  text-align: center;
  margin: 0em 0em 1em 0em;
  font-weight: bold;
}

.mitte h2 {
  color: var(--headercolor);
/*  margin-top: 1.5em;*/
}

@media only screen and (min-width: 820px) {
 .mitte {
  max-width: 800px;
  margin: auto;
 }
}

/************************************************************************************
                                  Artikeltabelle
*************************************************************************************/

.arttable {
 border: solid grey 1px;
 border-collapse: collapse;
 width: 100%;
 margin-bottom: 1em;
}

.arttable td {
 border: solid grey 1px;
 text-align:center;
 padding:0.5em;
}

.artimage {
 float: right;
}

@media only screen and (max-width: 600px) {
 .artimage {
  float: none;
  display:block;
  margin: auto;
 }
}


/************************************************************************************
                                  Unten
*************************************************************************************/
.unten {
 text-align: center;
 background: var(--menucolor);
}

.unten div {
 display: inline-block;
 flex-direction: row;
 width: 15em;
 vertical-align: top;
}