:root{
  /*Ungenutzt*/
  --color-0: #FFFFFF;
  /*Dropdown und Hover*/
  --color-1: #F5BD8E;
  /*Navigation, Footer und Header*/
  --color-2: #8B2323;
  /*Main, Aktueller Link*/
  --color-3: #FDF5E6;
  /*Table Header*/
  --color-4: #462509;
  /*Schrift */
  --color-5: #5C5C5C;
  scroll-behavior: smooth;
}

/*  Allgemeine Styleeinstellungen, gültig immer auf der ganzen Seite */
body {
    font-size: 20px;
    color: var(--color-5);
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    margin: -10 -10 -10 -10;
    padding: 0 0 0 0;
    overflow-x: hidden;
    background-color: var(--color-3);
}
/* Festlegung des Margins für Überschriften */
h1  {
  margin: 0 0 20px 0;
}
/* Festlegung des Margins für Überschriften im Header */
.Header h1 {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 20px 0 0 0;
}
/* Einstellungen für Links */
a, a:link, a:visited, a:focus, a:hover, a:active{
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--color-5);
}
/* Einstellungen für Links in der Navigationsleiste */
a.nav:link, a.nav:visited, a.nav:focus a.active{
    background-color: var(--color-2);
    color: white;
    padding: 15px 0px;
    text-align: center;
    text-decoration: none;
    width: 17%;
    display: inline-block;
}
a.nav:hover{
    background-color: var(--color-3);
    color: var(--color-5);
}
a.current:link {
    background-color: var(--color-3);
    padding: 15px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: default;
    width: 17%;
    display: inline-block;
}
/* Optionen für den Link im Header */
a.Header:link{
    background-color: var(--color-2);
    padding: 0px 0px;
    width: 100%;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}
a.Header:hover{
    color: black;

}
a.menu:link {
    display: inline-block;
    padding: 5px 1px;
}
a.menu:visited {
    background-color: var(--color-3);
    display: inline-block;
    padding: 5px 0px;
}

/* Allgemeine Einstellungen für die Tabelle */
table, th, td {
    border-bottom: 2px solid var(--color-2);
    border-collapse: collapse;
    text-align: center;
    padding: 15px;
    margin: auto;
}
/* Festlegung der Breite der Tabelle */
table {
    width: 80%;
    font-size: 16px;
}
/* Festlegung der Breite der einzelnen Spalten */
td {
    width: 50%;
    text-align: left;
}

/* Einfärbung der Zeilen */
tr:nth-child(even) {
    background-color: var(--color-3);
}

tr:nth-child(odd) {
   background-color: var(--color-3);
}
/* Design der Tabellenüberschrift */
th {
    background-color: var(--color-3);
    color: var(--color-2);
}


/* Slideshow container */
.slideshowIndex-container {
  max-width: 1000px;
  position: relative;
  margin: auto;

}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}


.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 100px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.show {
  display: block;
}

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
  color: var(--color-5);
}

.btn:hover {
  background-color: var(--color-2);
  color: white;
}

.btn.active {
  background-color: var(--color-2);
  color: white;
}

#imgParty{
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}

.grid-container {
  display: grid;
  padding: 5px;
  min-height: 105vh;
}
.grid-container > div {
  text-align: center;
  padding: 0px 0;
  font-size: 20px;
}
.grid-header {
  position: -webkit-sticky;
  position: sticky;
  grid-column-start: 1;
  grid-column-end: 4;
  background-color: var(--color-2);
  z-index: 3;
}
.grid-navigation {
  font-size: 16px;
  background-color: var(--color-2);
}
.anchor {
  display:block;
}
.grid-main {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: var(--color-3);
}
.menu-nav {
  background-color: var(--color-3);
  position: sticky;
  position: -webkit-sticky;
  z-index: 1;
}
.content{
  padding: 40px 20px 20px 20px;
}
.grid-footer {
  grid-column-start: 1;
  grid-column-end: 4;
  padding-bottom: 0px;
  background-color: var(--color-2);
}

.open {
  /* background-color: var(--color-2); */
}

#open{
  /* display: none; */
  width: 49%;
  float: left;
  margin-bottom: 5px;
}
#closed{
  /* display: none; */
  width: 49%;
  float: left;
  margin-bottom: 5px;
}

#openclosed{
  /* display: none; */
}

.showopenclosed{
  display: block;
  /* background-color: var(--color-2);
  color: var(--color-1); */
}

.statusopenclosed{
  background-color: var(--color-2);
  color: var(--color-1);
}

/* Div Container Eigenschaften unabhängig der Bildschirmgröße oder der Druckvorschau */
#impressum{
  text-align: left;
}

#FooterTimes{
  float: left;
  padding-left: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  color: white;
}

#FooterText{
  float: right;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 20px;
  color: white;
}

/* Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #iexplorer{
    display: block !important;
    position: relative;
    height: 15%;
    background-color: red;
    text-align: center;
    padding-top: 1em;
    font-size: 2em;
    color: white;
  }
  #iexplorer * {
    display: inline;
  }
  #iexplorer a {
    color: lightgray;
  }
  #FooterTimes{
    color: black;
  }
  #FooterText{
    color: black;
  }
  .grid-container {
    color: #5C5C5C;
    position: absolute;
    width: 100%;
    background-color: #8B2323;
  }
  .grid-header {
    background-color: #8B2323;
    /* position:  absolute; */
    width: 100%;
    /* top: 100; */
  }
  .grid-navigation {
    background-color: #8B2323;
  }
  .content{
    background-color: #FDF5E6;
    /* position: static; */

  }
  .grid-footer {
    background-color: #8B2323;
    /* position: static; */
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 75px auto 75px;
  }
  .grid-header{
    top: 0;
  }
  .grid-navigation{
    font-size: 14;
  }
  .anchor{
    padding-top:150px;
    margin-top:-150px;
  }
  .menu-nav{
    top: 110px;
    margin-top: -6;
    margin-left: -21;
    margin-right: -21;
    font-size: 12;
  }
  .grid-footer {
    position: sticky;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 10;
  }
  #FooterText{
      font-size: 10;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
  .grid-container {
    grid-template-columns: auto 90% auto;
    grid-template-rows: 110px auto 120px;
  }
  .grid-header{
    top: 0;
  }
  .anchor{
    padding-top:90px;
    margin-top:-90px;
  }
  .menu-nav{
    top: 110px;
    margin-top: -6;
  }
  .content{
    padding: 50px 20px 20px 20px;
  }
  .grid-footer {
    position: sticky;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 16;
  }
  #FooterText{
      font-size: 16;
  }
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)
{
  .grid-container {
    grid-template-columns: auto 90% auto;
    grid-template-rows: 115px auto 125px;
  }
  .grid-header{
    top: 0;
  }
  .anchor{
    padding-top:180px;
    margin-top:-180px;
  }
  .menu-nav{
    top: 149px;
    margin-top: -6;
  }
  .content{
    padding: 50px 20px 20px 20px;
  }
  .grid-footer {
    position: sticky;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 16;
  }
  #FooterText{
      font-size: 16;
  }
}

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
  .grid-container {
    grid-template-columns: auto 80% auto;
  }
  #FooterTimes{
      font-size: 18;
  }
  #FooterText{
      font-size: 18;
  }
  .dropdown {
      position: absolute;
  }
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: var(--color-2);
      min-width: 450px;
      height: 620px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      left: 400;
      top: -500;
      z-index: 999;
      text-align: center;

  }
  .dropdown:hover .dropdown-content {
      display: inline-block;
      color: white;
  }

  .contentparty {

  position: inherit;
  background-color: var(--color-2);
  min-width: 650px;
  height: 620px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  /*left: 500;
  top: 200; */
  z-index: 999;
  text-align: center;
  color: white;
}

}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
  .grid-container {
    grid-template-columns: auto 70% auto;
  }
  #FooterTimes{
      font-size: 18;
  }
  #FooterText{
      font-size: 18;
  }
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 114px auto 125px;
  }
  .grid-header{
    top: -65;
  }
  .anchor{
    padding-top:90px;
    margin-top:-90px;
  }
  .menu-nav{
    top: 45px;
    margin-top: 0;
  }
  .grid-footer {
    position: relative;
    bottom: 0;
  }
  table{
    font-size: 16;
  }
  #FooterTimes{
      font-size: 18;
  }
  #FooterText{
      font-size: 18;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 110px auto 65px;
  }
  .grid-header{
    top: -70;
  }
  .anchor{
    padding-top:70px;
    margin-top:-70px;
  }
  .menu-nav{
    top: 40px;
    margin-top: 0;
    font-size: 11px;
  }
  .grid-footer {
    position: sticky;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 10;
  }
  #FooterText{
      font-size: 10;
  }
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 115px auto 125px;
  }
  .grid-header{
    top: -64;
  }
  .anchor{
    padding-top:90px;
    margin-top:-90px;
  }
  .menu-nav{
    top: 50px;
    margin-top: 0;
  }
  .grid-footer {
    position: relative;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 18;
  }
  #FooterText{
      font-size: 18;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 110px auto 85px;
  }
  .grid-header{
    top: 0;
  }
  .anchor{
    padding-top:140px;
    margin-top:-140px;
  }
  .menu-nav{
    top: 110px;
    margin-top: 0;
  }
  .grid-footer {
    position: sticky;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 12;
  }
  #FooterText{
      font-size: 12;
  }
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 115px auto 125px;
  }
  .grid-header{
    top: -70;
  }
  .anchor{
    padding-top:100px;
    margin-top:-100px;
  }
  .menu-nav{
    top: 45px;
    margin-top: 0;
  }
  .grid-footer {
    position: relative;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 18;
  }
  #FooterText{
      font-size: 18;
  }
}

/* Google Pixel 2 ----------- */
@media only screen and (min-device-width: 411px) and (max-device-height: 731px) and (orientation : landscape){
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 114px auto 125px;
  }
  .grid-header{
    top: -65;
  }
  .anchor{
    padding-top:150px;
    margin-top:-150px;
  }
  .menu-nav{
    top: 45px;
    margin-top: 0;
  }
  .grid-footer {
    position: relative;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 18;
  }
  #FooterText{
      font-size: 18;
  }
}

@media only screen and (min-device-width: 411px) and (max-device-height: 731px) and (orientation : portrait){
/* Styles */
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 110px auto 85px;
  }
  .grid-header{
    top: 0;
  }
  .anchor{
    padding-top:140px;
    margin-top:-140px;
  }
  .menu-nav{
    top: 110px;
    margin-top: 0;
  }
  .grid-footer {
    position: sticky;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 12;
  }
  #FooterText{
      font-size: 12;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 114px auto 105px;
  }
  .grid-header{
    top: -70;
  }
  .anchor{
    padding-top:90px;
    margin-top:-90px;
  }
  .menu-nav{
    top: 44px;
    margin-top: 0;
  }
  .grid-footer {
    position: relative;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 18;
  }
  #FooterText{
      font-size: 18;
  }
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .grid-container {
    grid-template-columns: auto 100% auto;
    grid-template-rows: 110px auto 65px;
  }
  .grid-header{
    top:  0;
  }
  .anchor{
    padding-top:150px;
    margin-top:-150px;
  }
  .menu-nav{
    top: 110px;
    margin-top: 0;
  }
  .grid-footer {
    position: sticky;
    bottom: 0;
  }
  #FooterTimes{
      font-size: 10;
  }
  #FooterText{
      font-size: 10;
  }
}
/* Styleeinstellungen für den Ausdruck der Seite */
@media print {
  .grid-navigation {
    /* display: none; */
  }
  .grid-footer {
    /* position: sticky; */
    bottom: 0;
  }
  body{
    color: black;
  }
}
/* Styleeinstellungen für die Anzeige der Seite */
@media screen {


  /* Create three equal columns that floats next to each other */
  .partypicture {
    /* float: left; */
    width: 70%;
    margin: 0 auto;
    display: block; /* Show all elements by default */
  }
  .showPicture {
    display: none;
  }
  .partyBtn{
    display: none;
  }
  .showBtn{
    display: block;
  }

  .btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: white;
    cursor: pointer;
    color: var(--color-5);
  }

  .btn:hover {
    background-color: var(--color-2);
    color: white;
  }

  .btn.active {
    background-color: var(--color-2);
    color: white;
  }

  #imgParty{
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  }
}