/* Lightbox */
[hidden] {
	display: none;
}

dialog {
	position: relative;
}

dialog::backdrop {
  background-color: var(--color--hintergrund, #515659);
  opacity: 0.9;
}

#lightbox {
	border: thin solid #aaa;
	position: fixed;
  padding: 0;
  max-width: calc(100% - 6px);
  max-height: calc(100% - 4px);
}

#lightbox figure {
  margin: auto;
}

#lightbox img {
  display: block;
  margin: auto;
  max-height: calc(100vh - 6px);
}

#lightbox figcaption {
	font-style: italic;
	text-align: center;
}

#lightbox button {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	background: transparent;
	color: transparent;
  outline:0;
}

#lightbox button:nth-of-type(2),
#lightbox button:nth-of-type(3) {
  top: calc(50% - 2em);
  font-size: 1em;
  z-index: 2;
  height: 4em;
  width: 2em;
  padding: 0;
  color: var(--color--nav-transparent);
  background-color: var(--color--abdunkelung);
}

#lightbox button:nth-of-type(2) {
  left:0;
}

/* Galerie */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .5em;
  margin: 0 .5em;

  & img {
    height: min(36vh, 240px);
    min-width: max(20vh, 164px);
    max-width: min(40vh, 45vw);
    object-fit: cover;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    border-bottom: var(--color--text) solid .125em;
  }

  & .panorama { max-width: min(95vh, 94vw); }


  & figcaption {
    padding-bottom: .35em;
    max-width: min(40vh, 45vw);
    margin: auto;
  }

  & figure {
    border: var(--color--text) solid .125em;
    margin: 0 0 .5em;
  }
}