/* 
    Created on : 25.08.2023, 01:22:43
    Author     : matthias
*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/* fondamento-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fondamento';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fondamento-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fondamento-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fondamento';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/fondamento-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  font-family: Arial, sans-serif;
  font-size: 100%;
}
@media screen and (max-width: 640px) {
  html {
    font-size: 75%;
  }
}
@media screen and (max-width: 480px) {
  html {
    font-size: 50%;
  }
}
@media screen and (max-width: 320px) {
  html {
    font-size: 40%;
  }
}
.content {
  min-height: 100vh;
}
.header {
  margin:     20px;
  text-align: center;
}
.header img {
  /*max-width: 156px;*/
}
.main {
  margin: 20px;
  text-align: center;
  font-size: 1.5rem;
}
.gallery {
  background-image:   url('images/Bösensell2017.jpg');
  background-position: center center;
  background-size:    100%;  /* war 'cover', funktioniert aber mit dem hover nicht. */
  width:              100vw;
  height:             40vw;
  display:            block;
  transition:         2s background-size ease-in-out;
}
.gallery:hover {
  background-size:    120%;
}
.gallery_new {
  width:              100vw;
  height:             50vw;
  overflow:           hidden;
  display:            block;
  /*transition:         5s background-size ease-in-out;*/
  position:           relative;
  background:         #999;
}
.gallery_new picture {
  position:           absolute;
  width:              100%;
  opacity:            0;
  transition:         2s opacity ease-in-out;
  /*z-index:            0;*/
}
.gallery_new picture.current {
  opacity:            1;
}
.gallery_new imagetitle {
  position:           absolute;
  bottom:             4vh;
  width:              100%;
  text-align:         center;
  color:              #fff;
  text-shadow:        2px 2px 3px #000, -2px 2px 3px #000, 2px -2px 3px #000, -2px -2px 3px #000;
  font-size:          1.5rem;
}
.gallery_new radioleiste {
  position:           absolute;
  bottom:             1vh;
  width:              100%;
  text-align:         center;
  color:              #fff;
  text-shadow:        2px 2px 3px #000, -2px 2px 3px #000, 2px -2px 3px #000, -2px -2px 3px #000;
  font-size:          1.5rem;
}
.gallery_new knopf {
  display:            inline-block;
  width:              1.0rem;
  height:             1.0rem;
  border:             1px solid #fff;
  margin:             0 10px;
  border-radius:      50%;
  cursor:             pointer;
}
.gallery_new knopf.current {
  background:         #900;
}
.gallery_new div {
  position:           absolute;
  display:            block;
  width:              25vw;
  height:             90%;
  cursor:             pointer;
}
.gallery_new div.weiter {
  right:              0;
}

.gallery_new div.zurueck {
  left:               0;
}
@media screen and (max-width: 640px) {
  .gallery {
    background-image:   url('images/Bösensell2017-640.jpg');
  }
}
h1 {
  font-size:          3.5rem;
  margin-top:         7vh;
  margin-bottom:      5vh;
  color:              #900;
  font-family:        'Fondamento', cursive;
  font-style:         italic;
  text-shadow:        3px 3px 5px #999;
}
h2 {
  font-size:          3.0rem;
  font-family:        'Fondamento', cursive;
  font-style:         italic;
  margin-bottom:      3vh;
}
h3 {
  font-size:          2.0rem;
  font-family:        'Fondamento', cursive;
  font-style:         italic;
  margin-bottom:      2vh;
}
p {
  font-size:          1.5rem;
  margin-bottom:      1.0rem;
}
@media screen and (max-width: 480px) {
  p {
    font-size:          2.0rem;
  }
}
div.termin,
div.bericht,
div.schrift {
  width:              1000px;
  margin-bottom:      5vh;
  margin-left:        auto;
  margin-right:       auto;
  text-align:         left;
  clear:              both;
}
img.detail {
  width:            100%;
}
img.detail.hochformat {
  width:            67%;
}
@media screen and (max-width: 1100px) {
  div.termin,
  div.bericht,
  div.schrift {
    width:            90vw;
  }
}
a.logo {
  position:           absolute;
  top:                1vh;
  right:              1vh;
  display:            inline-block;
}
a.logo object {
  height:             6.0rem;
}
menuitem {
  font-size:          1.5rem;
  margin:             0 1vw;
}
menuitem a {
  font-family:        'Fondamento', cursive;
  font-style:         italic;
  padding:            3px 1vw;
  color:              #900;
  text-decoration:    none;
}
menuitem a:hover {
  background:         #ff0;
  transition:         all 2s;
}
menuitem.current a {
  color:              #000;
}

#overlay {
  position:           fixed;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  opacity:            0;
  visibility:         hidden;
  /*transition:         opacity .35s, visibility .35s, height .35s;*/
  overflow:           hidden;
  background:         black;
  z-index:            -1;
}

#hamburger-input{
  display:            none;
}


#hamburger-menu h3 {
  color:              #900;
  font-size:          2.2rem;
}

/* Das Hamburger.Menü nur bei schmalen Bildschirmen, sonst das Menü  waagerecht unter der Überschrift */
@media screen and (max-width: 480px) {
  #hamburger-menu {
    position:         fixed;
    top:              10px;
    left:             20px;
    width:            30px;
    height:           30px;
    display:          inline;
    padding:          2px;
    margin:           0px;
    cursor:           pointer;
    background:       linear-gradient(
      to bottom, 
      #900, #900 18%, 
      transparent 18%, transparent 41%, 
      #900 41%, #900 59%, 
      transparent 59%, transparent 82%, 
      #900 82%, #900 100%
    );
    z-index:          1;
  }

  menuitem {
    line-height:      2.0rem;
  }

  menuitem a {
    font-family:      Arial, sans-serif;
    font-size:        2.0rem;
    font-style:       normal;
    display:          block;
    border:           1px solid #ccc;
  }

  #sidebar-menu {
    visibility:       hidden;
    position:         fixed;
    top:              0;
    left:             -250px;
    width:            200px;
    height:           100%;
    background-color: #eee;
    transition:       0.3s;
    padding:          0px 10px;
  }

  #hamburger-input:checked + #sidebar-menu {
    visibility:       visible;
    left:             0;
  }
  #hamburger-input:checked ~ #overlay {
    visibility:       visible;
    opacity:          0.4;
  }
}