@charset "UTF-8";

/* https://www.youtube.com/watch?v=8JRchWACddc */

/* body, html { margin: 0; padding: 0; width: 100%; height: 100%; color: #34efa7; }  */
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Roboto', sans-serif; color: #ffffff;}

/* gesamte Seite ohne Menüs */
#ud_slider { 
  position: absolute; 
  inset: 0;   /* neu */
  /* top: 0; left: 0;  */
  /* bottom: 0; right: 0;  */
  width:100%; 
  height:100%;  
  background: #000001; 
  font-family: 'Roboto', sans-serif; 
  overflow: hidden; 
  /* z-index: 0; */
}

/* Image Crossfade und 1/10 */
#ud_slider .ud_slide { 
  /* background-size: cover;  */
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*inset: 0; */  /* -> durch absolute Werte s.o. getauscht, da für firefox ev. problematisch */
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;

  /* inset: 0;  neu */
  /* display: none;  JS schaltet via slideDown/slideUp */

  /* neu */
  /* display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;              /* ← statt display:none */
  /* transition: opacity 1.5s ease-in-out;
  pointer-events: none;    inaktive Slides nicht klickbar */ 

  /* top: 0; 
  left: 0; 
  right: 0; 
  width: 100%; 
  height: 100%;  */
  /* display: none;    war früher display:none, jetzt opacity:0 und pointer-events:none */
} 

/* neu */
#ud_slider .ud_slide.active {
  /* display: block; */

  /* display: flex;
  justify-content: center;
  align-items: center; */

  opacity: 1;
  pointer-events: auto;
}

/* Hintergrund-Echo: füllt Screen, 50% Opacity */
#ud_slider .ud_slide .bg-echo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

/* Hauptbild: zentriert, natürliches Verhältnis */
#ud_slider .ud_slide .main-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Hintergrund-Echo: füllt den ganzen Screen */
/* #ud_slider .ud_slide::before {
  content: '';
  position: absolute;
      /* top: 0;
      left: 0;
      right: 0;
      bottom: 0; */
  /* inset: 0;
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  opacity: 0; */
      /* opacity: 0;  wird von der Animation gesteuert */
      /* animation: fadeSlide 6s ease-in-out forwards; */
  /* transition: opacity 1s ease-in-out;   neu */
      /* animation: fadeBg 12s ease-in-out forwards; */
/* } */ 

/* @keyframes fadeBg {
  0%     { opacity: 0; }
  12.5%  { opacity: 0.3; }
  87.5%  { opacity: 0.3; }
  100%   { opacity: 0; }
} */

/* neu: Animation für das Einblenden des Hintergrunds */
/* #ud_slider .ud_slide.active::before {
  opacity: 0.2;
} */

/* #ud_slider .ud_slide_bg { 
  background-size: cover !important; 
  position: absolute !important; 
  top: 0; 
  left: 0; 
  right: 0; 
  width: 200% !important; 
  height: 200% !important; 
  display: none;
} */

/* Hauptbild: zentriert, füllt max. 100% der Breite und Höhe */
/* #ud_slider .ud_slide img { */
  /* position: absolute;   neu: relative, damit es innerhalb des Slides bleibt */
  /* opacity: 0;  */    /* originally set to 0, now controlled by active class */
  /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; */


  /* display: block;               Bild wird als Block angezeigt */
  /* margin: 0 auto;    */
  /* width: 100%;                  Bild füllt die Breite */
  /* height: 100%;                 Bild füllt die Höhe */
              
  /* justify-content: center;      vertikal zentrieren */
  /* align-items: center;          horizontal zentrieren */
  /* max-width: 100%;              Bild darf nicht alles füllen */
  /* max-height: 100%;             Bild darf nicht alles füllen */
  /* object-fit: contain;          hält das Seitenverhältnis */
  /* opacity: 0; */
  /* transition: opacity 1s ease-in-out;   neu: sanftes Einblenden */
  /* vertical-align: middle; */
/* } */

/* neu: Bild wird eingeblendet, wenn der Slide aktiv ist */
/* #ud_slider .ud_slide.active img {
  opacity: 1;
} */

#ud_slider .ud_slide h3 { 
  background-color: rgba(190, 140, 0, 0.4); 
  color: #ffffff; 
  margin: 0; 
  padding: 7px; 
  padding-top: 2px; 
  border-radius: 3px 3px 3px 3px; 
  position: absolute; 
  left: -800px; 
  bottom: 102px; 
  font-size: 18px; 
  font-weight: 500; 
  letter-spacing: 0.5px; 
  z-index: 1;
}

#ud_slider .ud_slide h4 { 
  background-color: rgba(5, 3, 0, 0.6); 
  color: #ffffff; 
  margin: 0; 
  padding: 8px; 
  padding-bottom: 6px; 
  border-radius: 3px 3px 3px 3px; 
  position: absolute; 
  left: -800px; 
  bottom: 78px; 
  font-size: 15px; 
  font-weight: 100; 
  letter-spacing: 0.5px
}

.slider_img { 
  position: absolute; 
  top:0; 
  left:0;
}

/* progress bar */
#ud_slider #ud_load { position: absolute; left: 0; bottom: 0; background: rgba(150, 150, 150, 0.4); border-right: 7px solid rgba(255, 255, 255, 0.6); width: 0; height: 4px;}

/*  Image Crossfade  */
/* cf7 */
/* #cf7_controls {
  text-align:center;
}
#cf7_controls span {
  cursor:pointer;
}
#cf7 {
  position:relative;
  top: 0;
  left: 0;
  width:100%;
  margin:0 auto 10px;
}
#cf7 div img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#cf7 div img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
} */



a:link {
    text-decoration: none;
    color: rgba(240, 240, 240, 0.7);
}

a:visited {
    text-decoration: none;
    color: rgba(240, 240, 240, 0.7);
}

a:hover {
    text-decoration: none;
    color: rgba(240, 240, 240, 0.7);

}

a:active {
    text-decoration: none;
    color: rgba(240, 240, 240, 0.7);
}

/* MENU */

.hidden {
  visibility: hidden;
  padding-left: 20px;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.hidden:hover {
  visibility: visible;
}

.about {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: lighter;
  color: #fff;
  display: none;

  background: rgba(30, 30, 30, 0.7);
  border: 4px solid #000;
  border-radius: 25px 25px 25px 25px;
  position: absolute;
  top: 25%;
  left: 25%;
  right: 25%;
  width: 50%;
  padding: 30px;

}

.contact {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: lighter;
  color: #fff;
  display: none;

  background: rgba(30, 30, 30, 0.7);
  border: 4px solid #000;
  border-radius: 25px 25px 25px 25px;
  position: absolute;
  top: 25%;
  left: 25%;
  right: 25%;
  width: 50%;
  padding: 30px;

}

.impressum {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: lighter;
  text-align: center;
  color: #fff;
  display: none;

  background: rgba(30, 30, 30, 0.7);
  border: 2px solid #000;
  border-radius: 25px 25px 25px 25px;
  position: absolute;
  top: 10%;
  left: 25%;
  right: 25%;
  width: 50%;
  padding: 30px;
}

h5 {margin: 0; padding: 0; margin-bottom: 0; padding-top: 0;}
a {margin: 0; padding: 0; margin-bottom: 0; padding-top: 0;}

.a_underlined {text-decoration: underline; padding: 0; margin: 0; font-weight: lighter; display: inline-block;}

#a_impressum_in { font-size: 12px;}

.impressum_h1 {font-size: 16px; font-weight: 500; margin-bottom: 30px;}
.impressum_h2 {font-weight: 400; margin: 0px; padding: 0;}
.impressum_h3 {font-size: 14px; font-weight: 200; margin: 1px; margin-bottom: 10px;}




#menu-selector { position: relative; top: 15px; left: 27px; font-size: 52px; font-weight: 200; letter-spacing: 0.5px; font-family: 'Roboto', sans-serif;
      color: rgba(230, 230, 230, 0.7); text-align: left; line-height: 7px; padding-left: 10px; display: inline-block;}
#menu-selector:hover {color: rgba(20, 230, 230, 0.7);}

#menu-selector:hover ~ .hidden {visibility: visible;}

#menu-1 { position: relative; top: 0px; font-size: 52px; font-weight: 200; letter-spacing: 0.5px; font-family: 'Roboto', sans-serif;
      color: rgba(230, 230, 230, 0.7);}

#copyright { background-color: rgba(1, 0, 0, 0.5); margin: 20; padding: 4px; font-size: 10px; font-weight: 200;
      letter-spacing: 0.5px; font-family: 'Roboto', sans-serif; color: #dddddd; text-align: center; position: absolute;
      top: 97%; left: 43%; z-index: 1; }


nav { position: absolute; top: 30px; left: 50px; font-size: 24px; font-weight: 200; letter-spacing: 0.5px;
      font-family: 'Roboto', sans-serif; color: rgba(230, 230, 230, 0.8); text-align: left;}

nav div ul { margin: 0; padding: 0; float:left; font-size: 24px; font-weight: 200; letter-spacing: 0.5px;
        text-align: left; }  /* box-shadow: 0px 0px 5px 0px #111; */

nav div ul li { position: relative; border-right: 1px solid #444; list-style: none; float:left; font-size: 18px;
        font-weight: 200; letter-spacing: 0.5px; text-align: center; background: rgba(20, 20, 20, 0.5); padding: 10px;
        padding-top: 5px; padding-bottom: 5px; width:100px;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -webkit-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;}
nav div ul li:hover { background: rgba(210, 150, 0, 0.5); color: #FFF;}
nav div ul li:hover #menu1-bold { font-weight: 400; color: #FFF;}
nav div ul li:first-child { border-radius: 4px 0 0 4px;}
nav div ul li:last-child { border-radius: 0 4px 4px 0; border-right: 0px solid #444;}

nav div ul li:hover ul { height: auto; opacity: 1;}

nav div ul li ul { height: 0; overflow: hidden; opacity: 0; position: absolute; top: 32px; left: 0; font-size: 10px;
    font-weight: 200; letter-spacing: 0.5px;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;}
nav div ul li ul li {border: none; border-radius: 0px 0px 0px 0px;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;}

  nav div ul li ul li:first-child { border-radius: 4px 4px 0 0;}
  nav div ul li ul li:last-child { border-radius: 0 0 4px 4px; border-right: 0px solid #444;}

nav div ul li ul li:hover {
    background: rgba(180, 130, 0, 0.3);
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;}

nav div ul li ul li:hover div a { font-weight: 300; color: #fff}

#menu-2 {font-size: 12px; font-weight: 200;
      letter-spacing: 0.5px; font-family: 'Roboto', sans-serif; color: #ffffff; }

#pageOfAllPage {font-size: 14px; font-weight: 200; text-align: center;
      position: absolute;
      bottom: 5%;
      right: 5%;
    }
.pageOfAllPage_black {color: #000;}

#deg45 {font-size: 24px; font-weight: 100;
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  }