/*
     CSS3 fuer NeuVaclav
*/

body {
  background-color: black;
  font-family: arial, sans-serif;
  color: gold;
}

/*
.vollbild2 {
  height: 100vh;
}

.vollbild1 {
  position: fixed;
  top: -50%;
  right: -50%;
  width: 200vw;
  height: 200vh;
}
*/

.hintergrund {
  position: fixed;
  top: -10vh;
  right: -48vw;
  width: 150vw;
  height: 120vh;
  background-image: url("images/Portrait_02b.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.8;
}

#kportrait1, kportrait2 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#kportrait1 {
  position: absolute;
  min-width: 50%;
  min-height: 50%;
}
#kportrait2 {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}


.kname, .kname1 {
  position: fixed;
  top: 2vh;
  right: 15vw;
  width: clamp(40vh,80vw,1200px); /*70vw; */
  opacity: 0.8;
}
.kname1 {
  opacity: 1;
}
.kname:hover {
  opacity: 0.8;
}
.kname img, .kname1 img {
  width: 100%;
  margin: auto;
}

.titel {
  position: fixed;
  top: 19vw;
  padding-left: 2px;
  opacity: 0.7;
  font-size: 6vw;
}
#vertitel {
  writing-mode: sideways-lr;
}



/* UI Buttons ********************************************* */
.trippel, .zurueck {
  position: fixed;
  background: black;
  border-radius: 20%;
  opacity: 0.5;
  cursor: pointer;
}
.trippel {
  bottom: 2vh;
  right:0;
  width: clamp(12vh,15vw,100px); /*15vw;*/
}
.zurueck {
  top: 3vw;
  right: 2vw;
  width: 11vw;
}
.trippel img, .zurueck img {
  width: 100%;
  margin: auto;
}
.trippel:hover, .zurueck:hover {
  opacity: 0.8;
}


/* Menu ********************************************* */
#menudialo {
  position: fixed;
  bottom: 5vh;
  right: 5vw; /*right:15vw; */
  width: clamp(30vh,60vw,60vh); /* 50vw; */
  height: 55vh;
  display: none;
  font-size: clamp(10px,5vw,4vh);
}

.dial01 {
  background-color: #00001a; /*black;*/
  opacity: 0.7;
  border-style: solid;
  border-width: 0.5vw;
  border-color: gold;
}

.menupunkt, .textpunkt, .leerzeile {
  /*font-size: 3.8vw;
  color: gold;      */
  padding-left: 5vw;
  opacity: 0.7;
}
.leerzeile {
  height: 2vh;
}
.textpunkt {
  height: 5vh;
  padding-top: 2vh;
  padding-bottom: 1.5vh;
}
.menupunkt {
  height: 5vh;
  cursor: pointer;
}
.menupunkt:hover {
  opacity: 1;
}

/* Pw Dialog ********************************************* */
#pwdialo {
  position: fixed;
  bottom: 20vh;
  right: 25vw;
  width: clamp(30vh,35vw,50vh); /*30vw; */
  height: clamp(15vh,20vw,30vh); /*30vh; */
  display: none;
  background-color: #660000;
  opacity: 0.9;
}
#pwtxt {
  position: relative;
  top: 5%;
  left: 5%;
  font-size: clamp(10px,2.5vw,3vh);
}
#pwform {
  font-size: clamp(10px,3vw,3vh);
  padding: 10% 10% 10% 10%;
}

input[type=text] {
  position: absolute;
  right: 10%;
  height: 10%;
  width: 40%;
}

input[type=submit] {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 35%;
  height: 20%;
  font-size: clamp(10px,3vw,3vh);
}
input[type=submit]:hover {
  background: orange;
}

/* Galerie ********************************************* */
.bilderconti {
  padding: 15vw 3vw;
}

ul {
  list-style: none;
}

.bild-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bild-gallery > li {
  position: relative;
  flex: 1 1 auto;
  height: 40vw; 
  max-height: 50vh;
  cursor: pointer;
}
.bild-gallery li img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  border-radius: 5px;
}

.overlay, .overlay1, .bigoverlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
  border-radius: 5px;
  background: black;
  opacity: 0;
}
.overlay {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  display: none;
}
.overlay:hover {
  opacity: 0.6;
}
.overlay1 {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 60%;
}
.bigoverlay {
  bottom: 0;
  left: 0;
  width: 100%;
}

#grossdiv, #grossbild, #overlay1 {
  display: none;
}
#grossbild {
  height: 100%;
  opacity: 1;
  object-fit: contain;
}
#overlay1 {
  opacity: 0.6;
}

table {
  font-size: clamp(10px,4vw,4vh);
}
td {
  padding: 0px 10px;
}