/* Gesammte Webseite Eigenschaften */
body {
  padding: 0;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*Webseitenkopf*/
header {
  background-color: #0F3623;
}

/*Titelbild*/
#TeaserBild {
  width: 100%;
  height: 300px;
}

#TeaserBild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 800px) {
  #teaser {
    height: 600px;
  }

}

/* Logo mittig */
.mitte {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Navigationsleiste*/
nav {
  top: 0;
}

nav a {
  margin: 0;
}

/*Navbar container*/
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #0F3623;
  margin-bottom: 2vh;
}

/*Links inside the navbar*/
.navbar a {
  float: left;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

/*The dropdown container*/
.dropdown {
  float: left;
  overflow: hidden;
  z-index: 2;
}

/*Dropdown button*/
.dropbtn {
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size: inherit;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: rgb(0, 72, 0);
}

/*Dropdown content (hidden by default)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdwon*/
.dropdown-content a {
  float: none;
  color: black;
  padding: 1em;
  text-decoration: none;
  display: block;
  text-align: left;
}

/*Add a grey background color to dropdown links on hover*/
.dropdown-content a:hover {
  background-color: #ddd;
}

/*Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
}

.dropdown-content:hover {
  display: block;
}

.navbar a:hover,
.dropdown:hover,
.dropbtn:hover {
  text-decoration: underline;
}


/*Textsections*/
section {
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/*Aufzählungen*/
details {
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  content: none;
  cursor: pointer;
  box-shadow: 2px 2px 2px grey;
}

summary {
  position: relative;
  padding: 5px;
  text-decoration: none;
  color: black;
  font-weight: bolder;
  content: none;
  cursor: pointer;
}

/* Tabelle */
th,
tr,
td {
  border: thin solid;
}

table {
  padding: 3px;
  border-collapse: collapse;
}

/* Ausrichtung*/
.mittig {
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/*Model-viewer*/
model-viewer {
  height: 85vh;
  width: 80vw;
}

/*Polycam*/
iframe {
  height: 100%;
  width: 100%;
  max-height: 100vh;
  max-width: 100vw;
  min-height: 50vh;
  min-width: 70vw;
}

/* Überschriften*/
h2 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-top: 0em;
  padding-bottom: 0em;
}

h3 {
  margin-top: 0em;
  margin-bottom: 0em;
  padding-top: 0.5em;
  padding-bottom: 0em;
}

h4 {
  margin-top: 0.2em;
  margin-bottom: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  padding-left: 1em;
}

h5 {
  margin-top: 0em;
  margin-bottom: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  padding-left: 2em;
}

p {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  padding-left: 2em;
}

h1 a {
  color: whitesmoke;
  text-decoration: none;
}

h1 a:hover {
  text-decoration: underline;
}


address {
  text-decoration: none;
  color: black;
  font-style: normal;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



/* Adresszeile */
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 24px;
  padding-bottom: 24px;
}

footer ul li a {
  text-decoration: none;
  font-style: normal;
  color: black;
  padding: 24px;
}

footer ul li a {
  font-weight: 600;
}

footer ul li:hover {
  text-decoration: underline;
}







/*Bild popup*/

/*<section id="Test">
<p> ... basiert auf einem <a href="./poster.webp" class="popup"> Torus <span> <img src="./poster.webp" alt="Rotrandiger Baumschwamm" width="500px"></span> </a>, dessen Radien ...</p>
</section>*/
a.popup {
  text-decoration: none;
}

a.popup:hover {
  border: none;
}

a.popup img {
  border: none;
}

a.popup span {
  visibility: hidden;
}

a.popup:hover span {
  visibility: visible;
}

.Tabelle {
  position: absolute;
  margin-top: -300px;
  margin-left: -250px;
  visibility: hidden;
}

.Text {
  position: absolute;
  margin-top: -300px;
  margin-left: 0px;
  visibility: hidden;
}

.Text2 {
  position: absolute;
  margin-top: 0px;
  margin-left: 0px;
  visibility: hidden;
}

#responsiveimage {
  width: 35vw;
  height: auto;
}

section img {
  padding-left: 2em;
}

table thead td {
  padding: 1em;
}

table thead th {
  padding: 1em;
}

table tbody td {
  padding: 1em;
}

table tbody th {
  padding: 1em;
}




/*Bilduttons*/
#B1 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Zunderschwamm.webp);
  background-size: cover;
  background-position: center;
}

#B2 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Zunderschwamm_Querschnitt.webp);
  background-position: center;
  background-size: cover;
}

#B3 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/ZunderschwammAnWeide.webp);
  background-position: center;
  background-size: cover;
}

#B4 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/ZunderschwammAnBirke.webp);
  background-position: center;
  background-size: cover;
}

#B5 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Zunderschwamm_Kehr.webp);
  background-position: center;
  background-size: cover;
}

#B6 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Zunderschwamm_Braun_Birke.webp);
  background-position: center;
  background-size: cover;
}

#R1 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Rotrandiger_Baumschwamm.webp);
  background-position: center;
  background-size: cover;
}

#R2 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Rotrandiger_Baumschwamm_1.webp);
  background-position: center;
  background-size: cover;
}

#R3 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Rotrandiger_Baumschwamm_2.webp);
  background-position: center;
  background-size: cover;
}

#R4 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Rotrandiger_Baumschwamm_an_Buche.webp);
  background-position: center;
  background-size: cover;
}

#W1 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Wulstiger_Lackporling_Mensa.webp);
  background-position: center;
  background-size: cover;
}

#W2 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Wulstiger_Lackporling_an_Linde.webp);
  background-position: center;
  background-size: cover;
}

#G1 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/GemeinerFeuerschwamm.webp);
  background-position: center;
  background-size: cover;
}

#G2 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/GemeinerFeuerschwammAnWeide.webp);
  background-position: center;
  background-size: cover;
}

#G3 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Gemeiner_Feuerschwamm_PFK_2.webp);
  background-position: center;
  background-size: cover;
}

#G4 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Gemeiner_Feuerschwamm_PFK_2_Querschnitt.webp);
  background-position: center;
  background-size: cover;
}

#F1 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Flacher_Lackporling_Oberer_07_09_2023.webp);
  background-position: center;
  background-size: cover;
}

#F2 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Flacher_Lackporling_an_Buche.webp);
  background-position: center;
  background-size: cover;
}

#F3 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Flacher_Lackporling_an_Buche_1.webp);
  background-position: center;
  background-size: cover;
}

#F4 {
  cursor: pointer;
  width: 10vw;
  height: 10vh;
  border: none;
  background-image: url(/3D_Daten/Flacher_Lackporling_Querschnitt.webp);
  background-position: center;
  background-size: cover;
}