/* ========

Stylesheet - Radreise

Juni 2018  / Jan. 2021
Autor: Andrea Pietsch

============ */


body {
   /* background: #dfdfdf;   /*   #99CC00; grün background-image: url(HP-Bilder/HG1.jpg);  */
    background-image: url(hg_2.jpg);  
    background-position: top;    
    background-attachment: fixed;     
    padding: 10px;    
    margin: 0px 20px 20px 20px;
}
       
    
.wgnavi                     /* Reisebericht - Navi links */
    {
    margin-left: 160px;
    }

.wggalerie          /* Galerie mit hover */
    {
    margin-left: 140px;
    margin-right: 140px;
    }

body, input, button, p, a  {
    font-family:  Calibri, Arial, Verdana, Tahoma;
    font-size: 14pt;
}

figure {          /* Galerie */
    margin: 10px;
}
                     
/* Links */
a {
 color: #3f3f3f; 
 font-weight: bold;
 text-decoration: none;
 outline: none;
}

a:hover, 
a:focus {
 font-weight: bold;
 border-bottom: 1px solid #7f7f7f;
 text-decoration: none;
 color: #7f7f7f;
}

a:visited {
 font-weight: normal;
 color: #5f5f5f;
}

p {
    padding: 0; 
    margin: 0;
    margin-bottom: 10px;
}

p.kl {
    font-size: 12pt;
    text-align: center;
    margin: 0;
    padding-bottom: 5px;
}

form {
    padding: 0;
    margin: 0;
}

button {
    margin-bottom: 10px;    
}

.ind {                /* navigation - alt*/
    display: block;
    width: 170px;
}

.bur {                /* Button Radweg */
    display: block;
    width: 120px;
}

h3 {
    font-size: 150%;
    font-weight: bold;
    padding: 5px;
    margin: 0;
}

h4 {
    font-size: 110%;
    font-weight: bold;
    padding: 2px;
    margin: 0;
}

h5 {
    font-size: 102%;
    font-weight: bold;
    padding: 1px;
    margin: 0;
}

fieldset {
    border: none;             
/*  border: 1px solid #606060;  */
}
 
.finav {                     /* Fieldset Navigation - alt */
   /* border: 1px solid #606060;  /*none;*/
  /*  width: 100px; 
    width: 90%;      */
    margin: 5px;
    float: left;
    border: 1px solid #606060;  
    text-align: center;
    height: 500px;
    
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
}

.firad {                     /* Fieldset Navigation Radreise */
   /* border: 1px solid #606060;  /*none;*/
  /*  width: 100px; 
    width: 90%;      */
    margin: 5px;
    float: left;
    position: fixed; 
   /* border: 1px solid #606060;    */
    text-align: center;
}

.finaquer {                    /* löschen? */
    width: 98%;  
    text-align: right;
    background-color: rgba(96, 96, 96, 0.3);
  /*
    border: 1px solid #606060;    
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    margin-bottom: 10px;        */
    position: sticky;
    top: 10px;
}


.finatop {                       /* löschen */
    margin-top: 150px;
}
   

.i1 {                   /* Fieldset übergeordnet Startseite */
    width: 90%;
    padding-left: 5%;
}

.start {                 /* Fieldset klein Startseite */
    margin: 5px;
    padding: 15px;
    float: left; 
    border: 1px solid #606060;  
    text-align: left;
    width: 40%;
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
}

.startli {                /* Bild Startseite */
    width: 250px;
    margin-right: 15px;
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    float: left; 
}

.startre {                /* Bild Startseite */
    width: 250px;
    margin-right: 15px;
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    float: right; 
}

/* Bildergröße */
.klein {              /* Bilder im Text */
    width: 300px; 
   /* margin-top: 20px;  */
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    
}

.etp {              /* Bilder im Text * Höhenprofil Saale-Radweg*/
    width: 500px; 
   /* margin-top: 20px;  */
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    
}

.kurz {              /* Bilder im Text hochkant*/
    height: 300px;
   /* margin-top: 20px;  */
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
}

.kk {              /* Bilder im Index */
    width: 150px;
   /* margin-top: 20px;  */
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
}

.tkl {              /* Bilder in Tourenübersicht */
    width: 200px;
    margin-right: 20px;   
   /* margin-top: 20px;    */
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060; 
    float: left;  
}

.fotour {
    margin: 5px;
    padding: 5px;  
    float: left;  
    width: 58%;
}
p.tx {
    padding-top: 15px; 
}

.txtour {          /* Hinweis Touren-Startseite */
    margin: 5px;
    padding: 15px;  
    float: right;  
    width: 35%;
    border: 1px solid #606060;  
  /*  vertical-align: top;   */
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    }
    
.fbk {           /* Hinweis Friesenbrücke 2014_ER Ems-Radweg */
    margin: 0 3px 3px 5px;
    padding: 10px;  
    float: right;  
    width: 290px;
    border: 1px solid #606060;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    }

.kq {              /* Bilder im Index Radreisen*/
    width: 120px;
    border: 2px solid #fff;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    float: left;
}

.im {
    border: 1px solid #dfdfdf;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    margin-top: 10px;
}

.links {           /* Fieldset - links */
  /*  text-align: left; 
    width: 60%;  1000px; */ 
    margin: 5px 10px 5px 0px;
    float: left;
}

.rechts {           /* Fieldset - rechts */
  /*  text-align: left; 
    width: 60%;  1000px; */ 
    margin: 5px 0px 5px 10px;
    float: right;
}
 
/* Bilder im Text */
u.hoimg a { 
    position:relative;  
    font-weight: normal;
    text-decoration: underline;
    color: #3f3f3f;  
    }                   
             
u.hoimg a span {
    position:absolute;
    visibility: hidden; 
    top: 20px;
    left: -200px;
    z-index: 1;
    }     
             
u.hoimg a:hover span { 
    visibility: visible;
    padding: 2px;
    top: 20px;
    left: -200px;
    z-index: 1;
  }
             
/* Bilder-Galerien */
.fikl {    
   width: 305px;         /* 205 * 205 */
    height: 275px;        
    margin: 1;    
    float: left;  
    text-align: center; 
  /*  border: 2px solid #fff;      */
    z-index: 1;  
    }    
         
  /*  border: 1px solid #606060; */ 
.gklein {   
    width: 300px;  /* alt: 200 */
    border: 2px solid #fff;   
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060; 
    z-index: 50;
}



.gkurz {   
    height: 250px;      /* alt: 170 */
    border: 2px solid #fff;   
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060;
    z-index: 2; 
}
/*
.gklein:hover {
    width: 500px;
    border: 2px solid #fff;   
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060; 
    z-index: 500;
    top: 20px;
    left: -200px;
    display: block;
}
.gkurz:hover {   
    height: 400px;
    border: 2px solid #fff;   
    border-radius: .3em;
    box-shadow: 5px 5px 5px #606060; 
    z-index: 10;
    top: 20px;
    left: -200px; 
                           
}   */