@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}
body{
  min-height: 100vh;
}
/**************|Links Einstellungen|**********************/
.item .tab-content th tr .highlight{
    color:red;
    border:solid;
}
a{
  color: gray;
  text-decoration: none;
}
a:hover{
    color:#d9a68c;
}
/**********************content--container*********/
/********* Die Höhe zwischen Titelbild und Inhalt****/
#content{
    margin-top: 600px;
 }

/* die Klasse "wrapper" bildet einen 
 * unsichtbaren Rahmen. Die Breite 
 * des Rahmens ist 960px und immer 
 * mittig ausgerichtet,
 * sollte der Rahmen kleiner als
 * 960px sein, soll er 90% der 
 * vorhandenen Breite belegen.*/
.wrapper{
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}

/*Test Container*/
.container{
    margin:auto; /*zentriert den container*/
    background-color:white;
    width: 60%;
    min-width: 90%;/****|container Item-Breite|*****/
    display: flex;
    flex-direction:row;/**/
    flex-wrap: wrap; /*unsichtbarer Rahmen
    bei "wrap" gibt es Zeilenumbruch bei "no-wrap"
    keinen Umbruch*/

    justify-content: center;/*positionieren der items*/
}
.item{    
    background-color:#ebebeb; /*whitesmoke*/
    width: 600px;
    height: fit-content;
    margin: 20px;

}
#pfeil{
   color: red;
    font-size: 3rem;
    border: none;
}
.tab-content > tbody > tr > td > p{
    border: solid #d9a68c;
    font-size: 1rem;
    padding: 15px 15px;
}
/*********************************************************/
nav{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  height: 102px;  
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
  /*border: solid blue;                        ******************************SOLID**/
}
/********************************************<    outgesourct            >************************/
/*Banner   Bild im Hintergrund
.banner{
    width: 100%;
    height: 550px;
    z-index: 2;
    background:url(grafik/bilder/titel/rahmung.jpg);
    background-size:cover;  
}*/

#banner-text{
  width: 100%;
  margin: 0;
  /*margin-left: 0;*/
  margin-top: -300px;
  font-size: 1.3rem;
  text-align: center;
}
#banner-text-links{
    width: 100%;
    margin: 0;
    margin-left: 30px;
    margin-top: -300px;
    font-size: 1.3rem;
    text-align: left;
    text-shadow: 5px 5px 8px #f8f3eb;
    color: rgba(106, 112, 112, 0.9);
}
#banner-text h2{
    text-align: center;
    text-shadow: 2px 2px 8px #f3fafd;
    /*box-shadow: 0 1px 2px rgba(255,232,49,1.8);*/
    color: rgba(255, 207, 62, 0.9);
    font-size: 2.2em;
    line-height: 50pt;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: grey;
} 


/***********vorübergehend***************/
nav2{
    width:100%;
    height: 100px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.untermenu{
  width:105%;
  position: fixed;
  margin-top:175px;
  margin-left: -52px;
  
  background-color: rgba(250, 250, 
        250, 0.8);
}
/*************************/

.navbar{
      /* Menu immer auf der gleichen Höhe*/
    position: fixed;/****************************vorübergehend*************************/
    top: 0;
    margin-left: 0;
    width: 100%;
    z-index: 0; 
    height: 0;
  /*transparenter bereich hinterdem logo*/
    background-color: rgba(250, 250, 250, 0.8); 
}

.lupe{  /**********************************************Lupe*******/
      position: relative;
      margin-left: 100px;
      display: none;    /********Lupe unsichtbar***********/
      z-index: 30;
  /*display: none;*/
}
nav .navbar{
  height: 100px; /*******Fläche hinter Logo fixiert und Hoheneinstellung*********/
  /*max-width: 1250px;******************************************/
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  /* background: red; */
  padding: 0 50px;
  /*border: solid yellow;                        *****************Gelb*************SOLID**/
}
.logo img{
        width: 80%;
}
.navbar .logo a{
  font-size: 30px;
  color: red;/********weiss**********/
  text-decoration: none;
  font-weight: 600;
  /*border: solid red;                        ******************************LOGO**/
}
nav .navbar .nav-links{
  line-height: 70px;
  height: 100%;
}
nav .navbar .links{         /**************rahmen um hauptmenu**********/
  display: flex;
  /*border: solid #f715ffd0;*/
}
nav .navbar .links li{      /**************rahmen einzeln um hauptmenu**********/
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px; 
}
/*******|Hauptmenu Einstellungen|********/
nav .navbar .links li a{ 
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  color:dimgray;
}
.links li:hover .htmlcss-arrow,
.links li:hover .hh-arrow,
.links li:hover .js-arrow,
.links li:hover .gemalt-arrow{
    transform: rotate(180deg);
    text-decoration: none;
  }
nav .navbar .links li a:hover{  /******Links hover farbig*****/
    
    color: rgba(163, 177, 177, 0.9);
}
nav .navbar .links li .arrow{
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: red;                 /*************************Pfeile*/
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{  /**************untermenu ganzer rahmen*****************/
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 30px;
  background: #fff;           /*******************************/
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu,
nav .navbar .links li:hover .hh-sub-menu,
nav .navbar .links li:hover .gemalt-sub-menu{/***<T>*****/
    display: block;
    text-decoration:none;
    
}
.navbar .links li .sub-menu li{  /*****************untermenu-textrahmen einzeln**************/
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  
}
 /*****submenutext-farbe*/
.navbar .links li .sub-menu a{
  color: gray;                               
  font-size: 15px;
  font-weight: 700;
}
.navbar .links li .sub-menu .more-arrow{  /******************Submenu-Pfeil******/
  line-height: 40px;
  color:red;
}
.navbar .links li .sub-menu .more-sub-menu{  /********************Submenu****/
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
/**********************<Für weitere Menus und Submenus müssen drei Stellen
 * angepasst werden 'li:hover' die Einstellungen zum 'arrow' an zwei weitere Stellen
 * wenn das Menu nur um einen weiteren Thema ohne 'more' ergänzt werden soll
 * dann reicht nur an einer Stelle (nav .navbar .links li:hover .hh-sub-menu)>****************/
.links li .sub-menu .more:hover .more-sub-menu{
  display: block; 
}


.navbar .nav-links .sidebar-logo{ 
  display: none;
}
.navbar .bx-menu{
  display: none;
}
/********************| h Selektoren |**************************/
.item h2, h3, h4{/**h4 zu h2 und h5 zu h3**/
    padding-top: 15px;
    margin-left: 20px;
    color:#d9a68c;
    font-size: 27px; 
    line-height: 23pt;
}
h2{
    color:#d9a68c;
    font-size: 20px;     
}


.item {
    font-size: 18px; 
    letter-spacing: 1px;
}
 h3 a{
    color: #d9a68c;
    font-size: 38px;
}
/**h4 zu h2 und h5 zu h3**/

.item p{
    line-height: 23px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
    padding-top: 10px;
    color: gray;
    justify-content: space-around;
    text-align: justify;
}
.item h4{/**h6 zu h4**/
  margin-left: 20px;
  color: gray;
  font-size: 14px;
}

strong{
    margin-left: 0;
    font-weight: 700;
    color: gray;
}
/****<><><><><><> rahmung <><><>******/
.item .rahmung{
    background-color: white;
   
}
/****<><><><><><> Container-Fuss <><><>******/
.container-fuss{
    justify-content: center;
    display: flex;
    width: 6%; 
    flex-wrap: wrap;
    border: solid #ebebeb;
    border-radius: 0;

}
.item-info-list{
    margin-left: 30px;
    margin-right: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 18px;
    letter-spacing: 0.3px;
    color: gray;
    line-height: 30px;
}
.container-fuss p{
    color: grey;
}
#content .container-fuss{
   /* background-color: #f6eeda;*/
    justify-content:space-between;
    width: 70%;
    margin:auto;
    padding: 30px;
}
.container-fuss ul{
    list-style: none;
}
.fuss-info-links li a{
     line-height: 30px;
}
.fuss-info li{
    color:gray;
    line-height: 30px;
}
.oeffnungszeiten li{
    color:gray;
    line-height: 30px;
}

.tab-content .info-klein{
    font-size: 8pt;
}
/*******|Tabelle|*********/


/*******|Tabelle|*********/
table.tab-content{
    margin-top: 15px;
    margin-left: 35px;
    width: 88%;
    margin-bottom: 20px;
    box-sizing: border-box;
    text-align: left;
    border-collapse: collapse;
    border-radius: 15px 15px 0 0;
    overflow: auto;
}
table.tab-content thead tr{
    background-color: #d9a68c;
    color: whitesmoke;
   
}
table.tab-content th,
table.tab-content td{
    padding: 12px 12px;
}
table.tab-content td{
     border-bottom: solid 1px #ccc;
    color: gray;
}
table.tab-content caption{
    color: gray;
    font-weight: 700;
    letter-spacing: 10px;
}
.navbar .more-arrow{visibility: hidden;}
/*****<><><><><><<<responsive Bilder>>><><><><>******/

/****<><><><><><> @media <><><>******/

@media (max-width:800px){
  .navbar .bx-menu{
    display: block;
}
.navbar .more-arrow{visibility: hidden;}
   #adresse{
        visibility: hidden;
    } 
/******|Die Fläche hinter der Menupunkte|*****/    
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 270px;
    width: 100%;
    background:  whitesmoke;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 200;
  }
/*****|Logo und der Wegclickkreuz|*******/    
.navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 27px;
      font-weight: 600;
    color: gray;
  }
    .sidebar-logo  i,
    .navbar .bx-menu{
      font-size: 30px;  /**** 'x' einstellungen*****/
      color: black;
    }
/*****|Hauptmenu wird blokiert|*******/    
  nav .navbar .links{
    display: block;
    margin-top: 20px;
  }
/****|Abstand zwischen Hauptmenupunkte|****/    
 nav .navbar .links li .arrow{
    line-height: 40px;
  }
    
nav .navbar .links li{
    display: block;
  }
/******|Verschiebt die jeweils untere Links nach znten 
 * bei Öffnen eines Links|******/    
nav .navbar .links li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
    
nav .navbar .links li .sub-menu li{
  border-bottom: none;
}

    /***|Submenu Einstellungen|****/
.navbar .links li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0; 
}

.navbar .links li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
    
    /****|||Rotation||||****/
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow,
.links li:hover .hh-arrow{
  transform: rotate(0deg);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }
  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
/**************|||||||||Die Zeilen fixieren die Links im Hauptmenu
 * |||||||***********/    
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu,
nav .navbar .links li:hover .hh-sub-menu{
    display: none;
  }
.navbar .nav-links.show1 .links .htmlCss-sub-menu,
.navbar .nav-links.show3 .links .js-sub-menu,
.navbar .nav-links.show2 .links .more .more-sub-menu,
.navbar .nav-links.show4 .links .hh-sub-menu{
      display: block;
}
/* Neuer Menupunkt 'submenu' hinzugefügt
 * dafür wurden zwei Zeilen erweitert 
 * 1. Klasse .navbar -> .nav-links.links.show(zahl eintragen) ->
 * .hh-sub-menu
 * 2. .navbar .nav-links.show(zahl eintragen) .links .hh-arrow  ->*/    
    .navbar .nav-links.show1 .links .htmlcss-arrow,
    .navbar .nav-links.show3 .links .js-arrow,
    .navbar .nav-links.show4 .links .hh-arrow{
        transform: rotate(180deg);
}
    .navbar .nav-links.show2 .links .more-arrow{
      transform: rotate(90deg);
    }
.lupe{  /*************----------Lupe Bildschirmgrösse 800px-----------------*******/
  position: relative;
  margin-left: 100px;
  display: none;
  }
    /******************************************/
 
 }
@media (max-width:370px){
  nav .navbar .nav-links{
  max-width: 100%;

    } 
    /*Das Bild ist in der Klasse .logo das Element img 
     * bekommt die Atribute max-with und bekommt die 
     * Eigenschaften der Klasse .logo*/
    .logo img{
        max-width:100%;
    }
    #banner-text h1{
        text-align: center;
        color: rgba(60,60,60,0.8);
        font-size: 3em;
    }
    table.tab-content{
    margin-left: 30px;
    margin-right: 30px;
    width: 40%;
    margin-bottom: 20px;
    box-sizing: border-box;
    text-align: left;
    border-collapse: collapse;
    border-radius: 15px 15px 0 0;
    overflow: auto;
    }
    /******************************************/
     .navbar .more-arrow{visibility: hidden;}
}