/* Schriften lokal einbinden: */

@font-face {
  font-family: 'WorkSans';
  font-style: normal;
  font-weight: normal;
  src: url('../css/fonts/work-sans/WorkSans-Regular.ttf') format('truetype');
  src: url('../css/fonts/work-sans/WorkSans-Regular.woff') format('woff');
  src: url('../css/fonts/work-sans/WorkSans-Regular.woff2') format('woff2');
      }
@font-face {
  font-family: 'WorkSans';
  font-style: normal;
  font-weight: bold;
  src: url('../css/fonts/work-sans/WorkSans-Bold.ttf') format('truetype');
  src: url('../css/fonts/work-sans/WorkSans-Bold.woff') format('woff');
  src: url('../css/fonts/work-sans/WorkSans-Bold.woff2') format('woff2');
      }
/* Farben definieren: Einbinden durch var(--mkrrot) */
:root {
/*   --mkrrot: #932629; */
  --mkrrot: rgba(94,32,40,1);
  --borderbrown: rgba(121,94,80,1);
  --dunkelrot: #1A0000;
  --neon-rot: #FF5161;
  --neon-rot-glow: #D30302;
  --neon-weiss: #fefefe;
  --neon-weiss-glow: #ffffff;
  --neon-gelb: #ffdb4e;
  --neon-gelb-glow: #b48505;

}

* {
  margin: 0;
  padding: 0;
  /*box-sizing: border-box;*/
}


html {
  /*background: silver;*/
  background-image: url('../css/images/leinen-hell.jpg');
   font-family: 'WorkSans';
   font-weight: normal;
   font-style: normal;

}

body {
  hyphens: auto;
}

h1 {
  font-size: 2rem;
  color: var(--mkrrot);
  padding-bottom: 2rem;
  margin: 1rem;
}


.main-container{/*In der index.php Datei, unterhalb der Nav-Bar*/
  margin-top: 60px;
}

.containerHome {
  margin: auto;
  display: block;
  /* justify-content: left; */
  margin-top: 100px;
  max-width: 70rem;
    /* border-style: solid;
  border-color: red; */
}

.cls-zeitstrahl {
  position: fixed;
  top: 0rem;
  margin-left: 5.9rem;
  min-height: 100vh;
  width: .5rem;
  /* background-color: aqua;  */
  background-image: url("../css/images/leder-dunkel4.jpg");
  z-index: -1;
}
.zeitlinie{
  position: fixed;
  bottom: 0;
  left: 6.0rem;
  width: .5rem;
  height: 100%;
  /* background-color: var(--borderbrown);  */
  background-image: url("../css/images/leder-dunkel4.jpg");
  z-index: 1;
}
.vlinie{
  position: relative;
  top: 4rem;
  left: -0.2rem;
  width: 5rem;
  height: .5rem;
  background-color: var(--borderbrown);
  background-image: url("../css/images/leder-dunkel4.jpg");
  z-index: -2;
}

.eintrag-container{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* width: calc(95vw); */
  width: 100%;
  min-height: 10rem;
  /* border-style: solid;
  border-color: blue; */
}

.cls-termindatum {
  box-sizing: border-box;
  overflow: hidden;
  text-shadow: 
    1px -1px 0px #000,
    -1px 1px 0px #FFF5;
     /* 0px 0px 0px #ccc; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* color: grey; */
  /*background-color: var(--mkrrot);*/
  /* Hintergrundbild einfügen:*/
  background-image: url("../css/images/wax-seal-empty.svg");
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center center;
  /* Hintergrundbild Ende*/
  /* padding: 0.5 rem; */
  margin-left: 2rem;
  border-style: none;
  border-color: var(--borderbrown);
  border-width: 0rem;
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
}

.termininhalt {
  box-sizing: border-box;
  padding: .5rem;
  padding-left: .5rem;
  padding-right: .5rem;
  margin-left: -0.2rem;
  margin-right: 0.5rem;
  width: calc(100% - 14rem);
  background-image: url("../css/images/hgrund_termin.png");
  border: .5rem solid transparent;
  /* border-right: 0; */
  border-color: var(--borderbrown);
  /* border-image: url("../css/images/leder-dunkel4.jpg") 30 round; */
  border-radius: 2rem;
}
.termininhalt a {
  color: darkgrey;
  text-decoration: none;
}
.termininhalt a:hover {
  color: black;
  text-decoration: none;
}
.termininhalt a:visited {
  color: darkgray;
  text-decoration: none;
}

.termintitel {
  font-weight: bold;
  font-size: 1.5rem;
}

.terminuntertitel {
  color: grey;
  font-size: .5rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}



.termintext {
  max-width: 50rem;
}

.cls-datum {
  color: white; 
  font-size: 1.3rem;
  font-weight: bold;


}
.cls-wochentag {
  color: white; 
  font-size: 2.8rem;
  font-weight: bold;
  margin-top: -0.4rem;
}
/*****************************************************/
/*                                                   */
/*               Smartphones:                        */
/*                                                   */
/*****************************************************/

@media(max-width:768px){
  .cls-termindatum {
    left: 1rem;
    padding: .25rem;
    border-width: .25rem;
    /* border-radius: 2rem 0 0 2rem; */
    border-radius: 5rem;
    width: 6rem;
    height: 6rem;
    margin-right: 1rem;
  }

  .cls-termindatum {
    margin-left: .5rem;
  }
  .cls-termin{
    font-size: 1rem;
  }
  .cls-wochentag{
    font-size: 1.5rem;
  }
  .cls-zeitstrahl{
    left: -2.5rem;
    width: .25rem;
  }
  .vlinie{
    top: 3rem;
    left: -3rem;
    width: 3rem;
    height: .25rem;
  }
  .termininhalt{
    width: calc(100vw - 8rem);
    margin-left: -3rem;
    margin-right: .5rem;
    border-width: .3rem;
  }
}


/****************************************/
/*                                      */
/* Formatierung der vergangenen Termine */
/*                                      */
/****************************************/

.cls-vergTerminContainer{
    display: flex;
    flex-direction: row;
    justify-content: right;
    width: calc(90vw+6rem);
}

.cls-vergTerminDatum {
  color: grey;
  background-color: var(--mkrrot);
  padding: .5rem;
  border-style: solid;
  border-color: brown;
  border-width: 0;
  border-radius: 2rem 0 0 2rem;
  text-align: center;
  width: 6rem;
  opacity: .6;
}

.cls-vergTerminTitel {
  font-weight: bold;
  font-size: 1.5rem;
}

.cls-vergTerminInhalt {
  padding: .5rem;
  width: calc(90vw - 6rem);
  background-image: url("../css/images/hgrund_termin.png");
  opacity: 0.6;
}
/*                                                                         */
/* Ende vergangene Termine */
/* */

/***************************************************************************/
/*                                                                         */
/* Seiten für statische Inhalte, insbesondere die Vorstellung der Gruppen: */
/*                                                                         */
/***************************************************************************/
.cls-container-pages {
  margin: auto;
  width: 90%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pageGruppen {
  max-width: 50rem;
  /*background-color: yellow;*/
  background-image: url("../css/images/hgrund_termin.png");
  border-radius: 2rem;
  padding: 1rem;
  margin: auto;
}

.pageGruppen h2{
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}
.pageGruppen p{
  margin-bottom: .5rem;
}
.pageGruppen a{
    -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  color: darkgrey;
}
.pageGruppen a:hover{
  color: var(--mkrrot);
}

.cls-GruppenTitel {
  color: var(--mkrrot);
  margin-bottom: .5rem;
}

/****************************************************/
/*                                                  */
/* Fußzeile mit Impressum und Datenschutzerklärung  */
/*                                                  */
/****************************************************/

footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  padding-bottom: 0rem;
  background-color: var(--borderbrown);
  background-image: url('images/leder-dunkel-bottombar.jpg');
  z-index: 3;
}

footer a{
  text-decoration: none;
  color: whitesmoke;
  font-size: .8rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

footer a:hover{
  color: whitesmoke;
  scale: 1.2;
}
/* footer a:visited{
  color: darkgrey;
} */
/**************************************/
/*                                    */
/*          Neue NavBar oben:         */
/*                                    */
/**************************************/

.header {
  /*position: sticky;*/
  background-color: grey;
}

li {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

.navbar {
  position: fixed;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background-image: url('../css/images/leder-dunkel-navbar.jpg');
  z-index: 1000;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  margin-right: 5vw;
  align-items: center;
  gap: 1.5rem;
  z-index: 1;
}

.nav-link {
  transition: 0.7s ease;
}
.nav-sublink{
  transition: 0.7s ease;
  padding: 0 2rem;
}

.nav-link:hover{
  color:white;
  scale: 1.2;
}
.nav-sublink:hover{
  color:white;
  scale: 1.2;
}



.nav-item {
  display: flex;
  align-items: center;
  min-height: 50px;
}


/* Submenü für die Gruppen; */
.nav-subitem {
  display: flex;
  align-items: center;
  background-color: none;
  min-height: 50px;
  margin-left: .5rem;
  width: 100%;
}

.nav-submenu{
  display: none;
  flex-direction: column;
}

.dropbutton {
  transition: 0.7s ease;
  background-color: inherit;
  border: none;
  outline: none;
  font-size: inherit;
  color: white;
  height:70px;
}
.dropbutton:hover {
  color:whitesmoke;
  scale: 1.2;
}


/*Hamburger Menü auf der rechten Seite */
.hamburger{
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: white;
}
/* Dropdown Container: zum Positionieren des Dropdown-Inhalts */
.dropButton {
  display: flex;
}

/* Dropdown Icon: Das kleine Dreieck */
.dropIcon{
  transform: translateY(-1px);
  padding-right: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.rotated-dropIcon {
  padding-right: 5px;
  -webkit-transform: translateY(3px) rotate(90deg) ;
          transform: translateY(3px) rotate(90deg) ;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.dropdown {
  background-color: none;

  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}
.dropdown:hover ul{
  display: block;
}
.dropdown-content {
  position: absolute;
  right: 0;
  display: block;
  min-width: 15rem;
  border-radius: 0 .5rem;
  /*background-color: lightgray;*/
  background-image: url('../css/images/leder-dunkel3.jpg');
  z-index: 1000;
}



@media(max-width:768px){
  .hamburger{
      display:block;
      margin-right: 10vw;
  }

  .hamburger.active .bar:nth-child(2){
      opacity: 0;
  }
  .hamburger.active .bar:nth-child(1){
      transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3){
      transform: translateY(-8px) rotate(-45deg);
  }
  .nav-menu{
      position:fixed;
      left: 100%;
      top:70px;
      gap: 0;
      flex-direction: column;
      /*background-color: gray;*/
      background-image: url('../css/images/leder-dunkel3.jpg');
      width: 100%;
      text-align: center;
      transition: 0.3s;

  }
  .nav-item{
      margin: 1rem 0;
  }

  .nav-menu.active{
      left: 0;
  }

  .nav-subitem{
        margin: 0;
    }

  .nav-submenu.active{
    left: 0;
}
.dropdown-content {
  position: relative;
  display: flex;
  justify-content: center;  
  width: 100vw;
  z-index: 1000;
}
.nav-subitem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  /*background-color: lightgray;*/
  min-height: 50px;
  margin-left: auto;
  width: 100vw;
}
}


/* Animierter Schriftzug, nur wenn der Bildschirm breit genug ist. */
.topanim{
  display: block;
  margin-left: 1rem;
  margin-top: 5pt;
}
.svgtopanim{
  width: 200;
  height: auto;
}
.logoClass{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media(min-width:810px){
  .topanim{
    display: block;
  }
  .svgtopanim{
    width: 300;
    height: auto;
  }
}

/*****************************/
/* Dunkles Theme einrichten: */
/*****************************/


@media (prefers-color-scheme: dark) {
  html{
  background-color: black;
  background-image: none;
  }

  .termininhalt{
    background-image: none;
    background-color: var(--dunkelrot);
    border-color: var(--neon-gelb);
    box-shadow: 0 0 20px var(--neon-gelb-glow),
    inset 0 0 20px var(--neon-gelb-glow); /* Glow-Effekt */
    color: lightblue;
  }
  .cls-termindatum{
    background-image: none;
    background-color: var(--dunkelrot);
    border-style: solid;
    border-width: .2rem;
    border-color: var(--neon-gelb);
    box-shadow: 0 0 20px var(--neon-gelb),
    inset 0 0 20px var(--neon-gelb); /* Glow-Effekt */
    border-width: .2rem;
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
  }
  /* .cls-datum, .cls-wochentag{
    color: var(--neon-weiss);
      text-shadow:
        1px 1px 0 #000000, 
        -1px 1px 0 #000000,
        1px -1px 0 #000000,
        -1px -1px 0 #000000,
        0 0 5px var(--neon-weiss-glow),  
        0 0 10px var(--neon-weiss-glow),
        0 0 15px var(--neon-weiss-glow);
  } */
  .termintitel, .terminuntertitel {
    color: whitesmoke;
  }

  .vlinie{
    background-image: none;
    background-color: var(--neon-gelb);
    border-color: var(--neon-gelb);
    border-width: .1rem;
    border-top-style: solid;
    border-bottom-style: solid;
    box-shadow: 0 0 20px var(--neon-rot-glow);
    top: 2.8rem;
    /* background-image: url('images/leder-dunkel4-dark.jpg'); */
  }
  .cls-zeitstrahl{
    background-image: none;
    margin-left: 4.7rem;
    background-color: var(--neon-gelb);
    /* background-image: url('images/leder-dunkel4-dark.jpg'); */
  }
  .navbar {
    background-image: url('../css/images/leder-dunkel-navbar-dark.jpg');
  }

  footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: whitesmoke;
    padding-bottom: 1rem;
    background-color: var(--borderbrown);
    background-image: url('images/leder-dunkel-bottombar-dark.jpg');
    z-index: 3;
  }
 .termininhalt a {
  color: var(--neon-gelb);
        text-shadow:
        1px 1px 0 #000000, 
        -1px 1px 0 #000000,
        1px -1px 0 #000000,
        -1px -1px 0 #000000,
        0 0 5px var(--neon-gelb-glow),  
        0 0 10px var(--neon-gelb-glow),
        0 0 15px var(--neon-gelb-glow);
}
 .termininhalt a:visited {
  color: var(--neon-gelb);
        text-shadow:
        1px 1px 0 #000000, 
        -1px 1px 0 #000000,
        1px -1px 0 #000000,
        -1px -1px 0 #000000,
        0 0 5px var(--neon-gelb-glow),  
        0 0 10px var(--neon-gelb-glow),
        0 0 15px var(--neon-gelb-glow);
}
  .bar {
    border-style: solid;
    border-width: 0;
    background-color: var(--neon-gelb);
    border-color: var(--neon-gelb);
    box-shadow: 0 0 30px var(--neon-gelb);
  }
  .dropdown-content{
  /*background-color: lightgray;*/
  background-image: url('../css/images/leder-dunkel4-dark.jpg');
}
.pageGruppen {
  color: whitesmoke;
  background-image: none;
  background-color: var(--dunkelrot);
  /* background-image: url("../css/images/hgrund_termin.png"); */
  border-style: solid;
  border-color: var(--neon-gelb);
      box-shadow: 0 0 20px var(--neon-gelb),
    inset 0 0 20px var(--neon-gelb); /* Glow-Effekt */
}
.pageGruppen a{
  color: var(--neon-gelb);
}

.pageGruppen a:hover{
  color: var(--neon-rot);
}


.cls-GruppenTitel {
  color: var(--neon-gelb);
          text-shadow:
        1px 1px 0 #000000, 
        -1px 1px 0 #000000,
        1px -1px 0 #000000,
        -1px -1px 0 #000000,
        0 0 5px var(--neon-gelb-glow),  
        0 0 10px var(--neon-gelb-glow),
        0 0 15px var(--neon-gelb-glow);
}




  @media(max-width:768px){
    .cls-zeitstrahl{
      margin-left: 6rem;
    }
      .nav-menu{
  /*background-color: lightgray;*/
  background-image: url('../css/images/leder-dunkel4-dark.jpg');
  }
  .termininhalt{
    border-width: .2rem;
  }
  }
}

@media (prefers-color-scheme: light) {
  html {background-color: white;}
}