/* Standard Format */
   body { background-image: url(../exptextb.jpg); overflow: auto; max-width: 100%; height: 900px; top: 0px; bottom: 0px; margin: 0; padding: 0 }

   .img-100 {
	max-width: 100%; height: auto   
   }
  
  .box {
   max-width: 100%; 
   height: auto;  
   overflow-y: hidden;
   overflow-x: auto;
  }
    
  .box1 {
   max-width: 100%; 
   height: 360px;
   overflow-y: auto;
   overflow-x: hidden;
  }
  
  .spanDarkGray {
   color: #474747;	
  }
      
  .groesse18 {
   font-weight: bold;
   font-size:  17px; 	
  }
  
  .groesse22 {
   font-weight: bold;  
   font-size: 21px; 
   color: red;	
  }

   /* Hier Bildgröße ändern */
  .fra1 { width: 550px; height: 320px; border: thin black solid }
  
   /* Hier Größe des Unterschriftbalken ändern */
  .fra2 { width: 552px; height: 20px; font-family: Arial; font-size: 12px; color: white; background-color: #2b5500; border: thin black solid }; 
  
   /* Hier Größe/Farbe der Koordinaten-Anzeigen-Unterschrift ändern */
  .fra3 { width: 300px; text-align: center; background-color:transparent; font-family: Arial, Helvetica, Sans-Serif; font-size: 12px; color: black;}   
	 
  /* Bildrahmen */
  .fra5 { width: 550px; top: 10px; height: 360px; border: medium maroon solid }
  
  /* Hier Bildgröße ändern */    
  .img0 { border: thin black solid; max-width: 100%; height: 100%; }      
    
  /* Hier Bildgröße ändern */    
  .img1Box { border: thin yellow solid; width: 380px; height: 235px; }
  
  .img1 { border: thin blue solid; width: 380px; height: 235px; }
  
  /* Bildgröße für burg.gif etc. */ 
  .img2 { width: 20px; height: 15px; }  
  
  .img3 { background-image: url('../burgnavi.png') }
  
  .img4 { width: 550px; height: 320px; top: 50px }  
  
  .img5 { float: left; width: 100px; height: 100px } 
  
  .imgfig { max-width: 200px; height: 20px; }
  .imgfig1 { max-width: 520px; height: 130px; }

  .TopHead1 { margin-left: 175px }
  .TopHead { margin-left: 35px }
   
  .txt { color: green; font-size: medium; font-weight: bold; text-align: center; };
  
  .hr1 {border-top: 1px; width: 950px; height: 1px; text-align: center; color: black }      
    
  .image {
   border-width: 1px;
   border-style: solid;
   border-color: black;
  }

  .style1 {	margin-bottom: 0px; color: #663300; } 
    
  .style2 { float: left; width: 40px; height: 22px; } 
     
  .style3 { text-align: right; float: left; width: 130px; height: 22px; }
  
  .style4 { font-weight: 900; color: red; }
  
  .style5 { font-weight: 500; color: red; }
          
  .KopfCenter { position: absolute; left: 220px; width: 904px; height: 150px; }
  
  .beschriftung { position: relative; }
  
  .beschriftung img { display: block; }
   
  .beschriftung span {
   position: absolute;
   bottom: 15px;
   left: 3px;
   width: 130px;
   color:  white;
   text-align: center;
   height: 60px;
   line-height:30px;
   background: #404040; /* Fallback IE 6-8 */
   background-color: rgba(40, 40, 40, 0.7);
  }
  
  #pic_posi {
    max-width: 550px;
    height: 370px;
    /*margin: 70px auto;*/
    border: thin black solid; 
  } 
    
  .Pic_Anz{ position: relative; max-width: 130px; height: 60px; }
  
  .Pic_Anz img { width: 130px; height: 60px; display: block; }
   
  .Pic_Anz span {
   position: absolute;
   bottom: 9px;
   top: 11px;  
   left: 2px;
   width: 130px;
   color:  white;
   text-align: center;
   height: 60px;
   line-height: 30px;
   background: #404040; /* Fallback IE 6-8 */
   background-color: rgba(40, 40, 40, 0.7);
   border: thin white solid; 
  }
  
  .BildTitel {
   width: 550px; 	
   height: 340px; 
   top: 100px; 
   position: relative;
   border: 5px solid red;
   text-align: center;
  }
  
  .BildTitel span {
    background-color: #2b5500;
	position: absolute;
	width: 100%;
    line-height: 2em;
    text-align: center;
  } 
  
  .BildTitel img {
 	display: block;
  }  
  
  .parent {
    line-height: 40px;        
    text-align: center;
  }

  .child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
    color: white; 
    background-color: #2b5500;  
  }
  
  .child_strich {
    display: inline-block;
    vertical-align: middle;
    line-height: 1px;
    background-color: green; 
    border-bottom: thin green solid;
  }
      
  /* 3 Bilder nebeneinander im Header platzieren */
  .img3erbox { 
    float: left;         /* Rechts aneinanderreihen */
    width: 100px;        /* Zwischenraum */
    padding-top: 1px;    /* Abstand Oben */
    padding-left: 15px; /* Abstand Links */
    margin: 3px;  
  }  
  
  /* Hier Bildgröße ändern */    
  .GeschichtsBild { float: left; margin-top: 20px; margin-right: 15px; margin-bottom: 10px; }  
  .FBild {max-width: 100%; height: auto; }
  
  figure {
   position: relative;
   margin-right: 25px;
   margin-left: 0px;
   margin-top: 25px;
   margin-bottom: 8px;     
  }
  
  figure img {
   display: block;
  }
  
  figcaption {
   max-width: 100%; 
   text-align: center;
  }
   
  pic{
   width: 100%;
   height: auto; 	
  } 
 
  .iframe-container {
   overflow: hidden;
   /* 16:9 aspect ratio */
   padding-top: 56.25%;
   position: relative;
  }

  .iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }  
 
  .videobereich {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
   }

   .videoextern {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
   }
  
  #Bild {
    width: 360px; 
    height: 215px; 
  }  
  
  #Center {
   width: 1345px;
   height:  900px;
   margin: 0px auto;
   overflow: hidden;
   overflow-x: hidden;
  }  
  
  #CenterII {
   width: 1345px;
   height: auto; 
   margin: 0px auto;
   overflow-x: hidden;
  }  
  
  /* Vorgaben für Banner1 */  
  #Banner1 {
   width: 17%; 
   height: 150px;
   /*float: right;*/
   font-family: Arial, Helvetica, Sans-Serif;
   font-size: 12px;
   display: inline-block;  
   margin: 0px auto;
   margin-top: 1px; 
   border-bottom: thin green solid;
  }   
  	
  /* Vorgaben für Banner2 */
  #Banner2 {
   width: 83%;  
   height: 150px; 
   float: right; 
   font-family: Arial, Helvetica, Sans-Serif ;
   font-size: 12px;
   display: inline;
   margin-top: 1px; 
   border-bottom: thin green solid; 
  }
    
  #TitelText {
   width: 100%; 	
   height: auto; 	
  }   
  
  #bild1 {
   width: 190px; 	
   height: auto;  
  } 
    
  #bild2 {
   width: 190px;
   height: auto;  	
  } 
  
  #bild3 {
   width: 190px;
   height: auto; 
  } 
    
  #GBild {
   width: 360px;
   height: 215px;
  } 
    
  #figBild {
   width: 550px;
   height: 330px;
  }
        
  #foto {
   width: 100%;
   height: 100%; 
  } 
  
  #ibiza {
   width: 100%;
   height: 100%; 
  }
     
  #Bundeslaender {
   width: 17%;
   height:750px;
   float: left;
   text-align: center; 
   border-left: thin green solid;
   border-right: thin green solid; 
  }
  
  #HilfsFrame {
   width: 82%;
   height: 750px; 
   float: right;  
   text-align: center;    
   /*border-left: thin green solid;  */
   border-right: thin green solid;
   /*overflow: scroll; */
  }
    
  /* Vorgaben für Haupt-Seite */
  #HauptFrame {
   width: 82%; 
   height: 750px;
   margin: 0px auto;
  }
  
  #HiFrame {
   width: 82%;
   height: 750px;
   float: right;
   text-align:center; 
   /*border-left:thin green solid; */ 
   border-right: thin green solid;
  }  
  
  #HaFrame {
   width: 90%;
   height: 750px;
   float: right;
   margin: 0px auto;
  }
    
  #HilfsFrameII {
   width: 82%;
   height: 750px; 
   float: right;  
   text-align: center;    
   border-right: thin green solid;
  }

  #HauptFrameII {
   width: 82%;
   height: 750px;
   margin: 0px auto;
  }
  
  .Line {
   width: 87%;
   height: 15px; 
   margin: 30px auto;
  }

  #LineGreen {
   max-width: 87%;
   height: 11px; 
  }
   
  #EndLine {
   width: 900px;
  }
  
  #Schriftzug {
   width: 750px;
  }
  
  #strichab {
   width: 900px;
  }
  
  /*Grüne Linie */
  .linie_IE {
   width: 100%;  
   height: 3px;
   margin-top: 5px;  
   background-image: linear-gradient(to right, #ccc, green, #ccc);
  }    
    
  .flex-container {
   display: flex;
   justify-content: center;
  } 
  
  .flex-container > div {
   max-width: 470px;
   text-align: center;
   margin-right: 10px; 
   line-height: 15px;
  }
  
  .flex-container > span {
   max-width: 470px;
   text-align: center;
   line-height: 15px;
  }
  
  .flex-contibox {
   display: flex;
   justify-content: left;
  } 
      
  .flex-items {
    max-width: 900px;
    text-align: left;
  }
    
  .flex-items-t {
   max-width: 900px;  
   text-align: left;  
   display: flex;
   flex-wrap: wrap; 
   justify-content: left;
  }
   
  .flex-boxmr {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;	
  }   
  
  .flexbox-itemsmr-l {
   max-width: 530px;
   width: 530px; 
   text-align: center;
   margin-left: 120px; 
  }
  
  .flexbox-itemsmr-r {
   max-width: 530px;
   text-align: left;
  }

  .flex-box-mr {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;	
  }   
        
  .flexbox-items-mr {
   max-width: 1090px;
   text-align: center;
  }

  .flex-conti {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;  
   text-align: center;
   
  }

  .flex-item-left {
   padding: 10px;
   flex: 50%;
  }

  .flex-item-right {
   padding: 10px; 
   flex: 50%;
  }
  
  .SuchKopf {
   margin-left: 0px; 	
  }

    
    
  
  @media only screen and (max-width: 1023px), (min-device-width: 480px) and (max-device-width: 1024px) {
                 
   #Center { 
    width: 100%;
    height: auto;
    overflow-x: hidden;
   }
   
   #CenterII { 
    width: 100%;
    height: 900px;
    overflow-x: hidden;
   }
  
   #Banner1 {
    width: 100%;
    height: auto;
   }
   
   #Banner2 {
    width: 100%;
    height: auto;
    float: right;
   }
      
   #TitelText {
    width: 100%;
    height: auto;   
    visibility: visible;  		
   }
      
   #TitelBlock {
    width: 100%;	
    height: auto; 
   }
   
   #BildBlock1 {
    width: 100%;
    height: auto;
   } 
    
   #BildBlock2
   {
    width: 100%; 
    height: auto; 
   } 
  
   #BildBlock3 {
    width: 100%; 	
    height: auto;
   } 

   #bild1 {
    width: 100%;
    height: auto;
   } 
    
   #bild2 {
    width: 100%; 
    height: auto; 
   } 
  
   #bild3 {
    width: 100%; 	
    height: auto;
   } 
   
   #text1 {
	width: 100%;
    height: auto; 
   }
   
   #text2 {
	width: 100%;
    height: auto; 	
   }

   #text3 {
	width: 100%;
    height: auto; 	
   }

   #GBild {
    width: 100%;
    height: auto;
   } 
         
   #figBild {
    width: 100%;
    height: auto;
   }
        
   #foto {
    width: 100%;
    height: 100%;	
   } 
      
   #ibiza {
   width: 100%;
   height: 100%; 
  }
   
  .FotoContainer {
	width: 100%;
	height: auto;
  }

   
   #Bundeslaender { 
    width: 100%;
    height: auto;
    border-right: 0px; 
   }
   
   #HilfsFrame {  
    width: 100%;
    height: auto;
    float:  right;
    text-align: center;
    border: thin transparent solid;
   }
   
   #HauptFrame {
    width: 100%;
    height: auto;
    /*margin-bottom: 50px;  */
    margin: 10px auto;
   }
   
   #HiFrame {
    width: 100%;
    height: auto;
    float: right;
    text-align: center;	
   }  
  
   #HaFrame {
    width: 100%;
    height: auto;
    float: right;
    text-align:center; 
   }
      
   #HilfsFrameII {
   width: 100%;
   height: auto; 
   float: right;  
   text-align: center;    
   border-right: thin green solid;
  }
   
   #HauptFrameII {
    width: 100%;
    height: auto;
    margin: 10px auto; 	
   }  
   
   #LineGreen {
     width: 85%;
     height: 11px; 
   }
   
   #EndLine {
    width: 100%; 	
   }   
      
   .Line {
    max-width: 87%;
    height: 15px; 
    margin: 10px auto;
   }
      
   #Schriftzug {
    width: 100%; 	
   }
    
   #FBild {
    width: 100%;
    height: auto; 
   }
   
   .flex-boxmr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;	
   }   

   .flexbox-itemsmr-l {
    text-align: center;
    margin-left: -20px; 
   }
   
   .flexbox-itemsmr-r {
    max-width: 100px;
    text-align: left;
    margin-left: -20px; 
   }
         
   .flex-contibox {
    display: flex;
    justify-content: left;
    margin-left: 10px; 
   } 

   .SuchKopf {
    display: flex;
    justify-content: left; 
    margin-left: 10px; 	
   }
   
   .box1 {
    height: auto;  
   }
   	
  }
   
  
  /* Linke Navispalte platzieren */
  .img2erbox            /* 2 Div nebeneinander platzieren */
  {                     /* 1. Div links */           
   float: left;         /* Rechts aneinanderreihen */
   margin: 0px;
  }
    
  /* 2 Schaltflächen nebeneinander im Footer platzieren */
  .input2erbox            /* 3 Div nebeneinander mittig platzieren */
  {
   float: left;         /* Rechts aneinanderreihen */
   width: 40px;         /* Zwischenraum */
   padding-top: 0px;    /* Abstand Oben */
   padding-left: 290px; /* Abstand Links */
  }   
 

  .Box1Round
  {
   border: 1px solid green;
   background-color: white;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;  
  }
   
     
  .ButtonRund
  {
   border: 1px solid green;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;  
  }
  
  /* Class für MR Schaltfläche */  
  .MaroonFett
  {
   border: 2px maroon solid;
   -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: black;
   cursor: pointer; font-weight: 300; background-color: transparent; font-size: medium;
  }
  
  .disabled1 {
    opacity: 0.6;
    pointer-events: none;
  } 
  
  .disabled2 {
   opacity: 1.6; 
   pointer-events: auto;
  } 

  .links {
   text-align: left;
  }
      
  /* Die unten aufgeführte Reihenfolge muß so eingehalten werden */
  a:link { color: #663300; } 
  a:visited { color: #663300; }
  a:focus { color: green; }
  a:hover { color: green; }
  a:active { color: green; }
   
  a.code_red:link{color: red;}
  a.code_red:visited { color: red; }
  a.code_red:focus { color: red; }
  a.code_red:hover { color: red; }
  a.code_red:active { color: red; }
    
  a.running:link { text-decoration: underline; background-color: transparent; color: red; }
  a.unningr:visited { text-decoration: none; background-color: transparent; color: red; }
  a.running:hover { text-decoration: none; background-color: transparent; color: red; }
  a.running:active { text-decoration: none ; background-color: transparent; color: red; }

  a.outdoor:link { text-decoration: none; background-color: transparent; color: green; }
  a.outdoor:visited { text-decoration: none; background-color: transparent; color: green; }
  a.outdoor:hover { text-decoration: none; background-color: transparent; color: red; }
  a.outdoor:active { text-decoration: none; background-color: transparent; color: green; }
  
  a.auftour:link { text-decoration: blink; background-color: transparent; color: maroon; }
  a.auftour:visited { text-decoration: none; background-color: transparent; color: maroon; }
  a.auftour:hover { text-decoration: none; background-color: transparent; color: red; }
  a.auftour:active { text-decoration: none ; background-color: transparent; color: maroon; }
  
  a.visiting:link { text-decoration: none; background-color: transparent; color:  blue; }
  a.visiting:visited { text-decoration: none; background-color: transparent; color: blue; }
  a.visiting:hover { text-decoration: none; background-color: transparent; color: red; }
  a.visiting:active { text-decoration: none; background-color: transparent; color: blue; }
  
  a.voyage:link { text-decoration: none; background-color: transparent; color: purple; }
  a.voyage:visited { text-decoration: none; background-color: transparent; color: purple; }
  a.voyage:hover { text-decoration: none; background-color: transparent; color: red; }
  a.voyage:active { text-decoration: none; background-color: transparent; color: purple; }
  
  a.travel:link { text-decoration: none; background-color: transparent; color: black; }
  a.travel:visited { text-decoration: none; background-color: transparent; color: black; }
  a.travel:hover { text-decoration: none; background-color: transparent; color: red; }
  a.travel:active { text-decoration: none; background-color: transparent; color: black; }
  
  a.wandern:link { text-decoration: none; background-color: transparent; color: olive; }
  a.wandern:visited { text-decoration: none; background-color: transparent; color: olive; }
  a.wandern:hover { text-decoration: none; background-color: transparent; color: red; }
  a.wandern:active { text-decoration: none; background-color: transparent; color: olive; };