/* select the top-element in the document tree -> (html) */
		:root {
			/*max-width: 65em;   */
			margin: 0 auto;          
		}

    body {
      background-color: lightgrey;
      font-size: 12px; font-family: verdana, helvetica,sans-serif; line-height: 18px; color:#252115;
    }

    /* Fley-Container für Flex-Items: article, nav, aside  */
		main {
			min-height: 25em;
			display: flex;
      // background-color: grey;
		}

		header, article, nav, aside, footer {
			margin: 0.25em;
			padding: 0.5em;
			border: 1px solid #ccc;
			border-radius: 0.5em;
		}

		article {
      /* LightYellow;   */
			background: #f5f1da;     
      flex: 1 3 35em;
			order: 2;
		}

		nav {
			background: #ede7d1;
			flex: 0 2 14em;
			order: 1;
		}

		aside {
			background: yellowgreen;
			flex: 0 2 10em;
			order: 3;
		}

    header {
      background: 
        url(../images/log_vogt.png), 
        url(../images/back2.jpg) #000000;
      background-repeat: no-repeat, no-repeat;
      background-position: 
        left top, 
        left top;
      background-size: 
        150px auto,
       cover;   
			min-height: 10em; 
    }

		footer {
			min-height: 5em;
			background: Wheat;
		}

		@media all and (max-width: 35em) {
			main {
				flex-direction: column;
			}
      /* Änderung der Reihenfolge für Kinder in Folge lt. html*/
			main > * {
				order: 0;
			}




		}

    @media all and (min-width: 50em) {
    /* article wird 2.5x so breit wie die beiden asides */

    }

    nav ul {
        list-style-type: none;
        text-decoration: none;
        padding: 0.2em;
        display: inline-block;
        margin: 0 1em;
    }

    nav ul a {
        text-decoration: none;
    }

    nav ul li {
      padding-top: 0.5em;
    }


  h1,h2 {
    font-weight: normal;
  }


p,li  { 
        margin-bottom:1ex;     
      }





/* Auswahlseite   */

 .auswahl {
  display: flex;
  justify-content: center;
  gap: 2rem;       /* Flexibler Abstand */
  flex-wrap: wrap;
}

/* Spricht alle dl-Elemente im Container an */
.auswahl dl {
  margin: 0;
  text-align: center;
  max-width: 200px;
}

.auswahl img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
}

.auswahl dd {
  margin: 0;
  font-weight: 600;
}

/* Bonus: Ein kleiner Hover-Effekt für die Links */
.auswahl a {
  text-decoration: none;
  color: inherit;
}

.auswahl a:hover {
  text-decoration: underline;
}


/* Bücher    */

.buchliste dt {
  float:  left;
  margin-right: 3ex;
}
.buchliste dd {
  margin-top:  0ex;
  margin-bottom: 6ex;
  padding-top: 0;
}

.abstrakt ~ p {
  text-align:justify;
}


/* Tabelle Buchdetails   */
th, td {
    padding: 5px;
}

table.mbtablestyle {
        border-collapse: collapse;
        font-size: 100 %;
        border: 1px solid black;
}


table.mbtablestyle > table,  .mbtablestyle td, .mbtablestyle  th {
        padding: 1px 15px 1px 15px;
        border: 1px solid black;
}

table.mbtablestyle > thead {
        background-color: lightgray;
}



/*     PHP-Formulare        */

form {
   margin: 10px  10px;  
}

form label {
  display: inline-block;    /*  als Blockelement   */
  width: 11em;
  text-align: right;
  vertical-align: middle;
}

legend {
	font-weight: bold;
	font-size:  120%;
	color: #999;
}	

fieldset {
  margin-bottom: 5px;
}