/* ===================================================================== */
/* Karte                                                                 */
/* ===================================================================== */

div#uebersichtsKarte{
  position: relative;
  width: 100%;
  margin-top: 0px;
  height: 53.6839vw;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0) 30%), url(../../grafiken/radreisen/bannerkarte/KarteAllerReisen-Q50.jpg);
  background-size: cover;
}

/* ===================================================================== */
/* Logo-Bar                                                              */
/* ===================================================================== */

/* ======================================================= Wrapper der Tourlogo-Leiste */

div#logoBar{
  position: absolute;
  width: 100%;
  text-align: center;
}

/* ======================================================= Wrapper Logo-Description-Kombi */

a.tourDescriptionWrapper{
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-top: 2vw;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  z-index: 5;
  transition: 0.2s;
  border: 2px solid transparent;
  color: black;
}
/*div.tourDescriptionWrapper > a {color: black; } */                    /* Schriftfarbe bei Hover schwarz statt rot */
a.tourDescriptionWrapper:hover {border: 2px solid #AA0000;}      /* Hover */
a#BalDes:hover, a#NorDes:hover{border: 2px solid #EEA900;}
a.transButtonVen:hover ~ a#VenDes {border: 2px solid #AA0000;} /* Hover on transbarente Buttons über den Routen */
a.transButtonAlp:hover ~ a#AlpDes {border: 2px solid #AA0000;}
a.transButtonIst:hover ~ a#IstDes {border: 2px solid #AA0000;}
a.transButtonPra:hover ~ a#PraDes {border: 2px solid #AA0000;}
a.transButtonPar:hover ~ a#ParDes {border: 2px solid #AA0000;}
a.transButtonMon:hover ~ a#MonDes {border: 2px solid #AA0000;}
a.transButtonGui:hover ~ a#GuiDes {border: 2px solid #AA0000;}
a.transButtonChi:hover ~ a#ChiDes {border: 2px solid #AA0000;}
a.transButtonMar:hover ~ a#MarDes {border: 2px solid #AA0000;}
a.transButtonBal:hover ~ a#BalDes {border: 2px solid #EEA900;}
a.transButtonNor:hover ~ a#NorDes {border: 2px solid #EEA900;}

/* ======================================================= Tourlogo */

div.LogoWrapper{}  /* keine Eigenschaften, aber dennoch nötig für richtige Platzierung */
img.logo{width: 6vw; margin-top: 0.5vw;}

/* ======================================================= Tour-Description-Div */

div.tourDescription{
  font-size: 0.9vw;
  padding-bottom: 0.5vw;
}

img.ExtLinkAufDesc{
  width: 1.2vw;
}

/* ===================================================================== */
/* Inhalt der Karte                                                      */
/* ===================================================================== */

/* ======================================================= Transparente Buttons, die Routen anklickbar machen */

a.transButton{
  position: absolute;
  display: block;
  z-index: 5;
  /*border: 1px red solid;*/
}
a#transButtonVen1{height: 1.5vw;  width: 2.2vw;  left: 20.2vw;  top: 26.9vw;}            /* Venedig */
a#transButtonVen2{height: 1.4vw;  width: 2.2vw;  left: 21.2vw;  top: 28.1vw;}
a#transButtonAlp1{height: 2.0vw;  width: 1.2vw;  left: 19.4vw;  top: 28.5vw;}            /* Alpen */
a#transButtonAlp2{height: 1.0vw;  width: 2.5vw;  left: 19.4vw;  top: 29.6vw;}
a#transButtonIst1{height: 1.4vw;  width: 2.1vw;  left: 23.5vw;  top: 28.3vw;}            /* Istanbul */
a#transButtonIst2{height: 1.0vw;  width: 1.0vw;  left: 24.8vw;  top: 29.6vw;}
a#transButtonIst3{height: 1.0vw;  width: 2.8vw;  left: 25.6vw;  top: 30.3vw;}
a#transButtonIst4{height: 2.5vw;  width: 6.9vw;  left: 27.4vw;  top: 31.0vw;}
a#transButtonPra1{height: 2.8vw;  width: 2.1vw;  left: 23.4vw;  top: 23.1vw;}            /* Prag */
a#transButtonPar1{height: 3.1vw;  width: 4.1vw;  left: 17.1vw;  top: 23.5vw;}            /* Paris */
a#transButtonMon1{height: 3.1vw;  width: 4.1vw;  left: 80.2vw;  top: 25.3vw;}            /* Mongolei */
a#transButtonGui1{height: 2.3vw;  width: 2.5vw;  left: 85.4vw;  top: 44.4vw;}            /* Guilin */
a#transButtonChi1{height: 1.7vw;  width: 5.2vw;  left: 22.8vw;  top: 25.9vw;}            /* Chisinau */
a#transButtonChi2{height: 1.7vw;  width: 2.0vw;  left: 25.7vw;  top: 27.6vw;}
a#transButtonChi3{height: 1.2vw;  width: 5.0vw;  left: 26.0vw;  top: 29.0vw;}
a#transButtonChi4{height: 1.8vw;  width: 3.4vw;  left: 30.0vw;  top: 28.7vw;}
a#transButtonChi5{height: 2.3vw;  width: 2.4vw;  left: 33.0vw;  top: 27.2vw;}
a#transButtonMar1{height: 1.5vw;  width: 3.8vw;  left: 10.0vw;  top: 39.9vw;}            /* Marokko */
a#transButtonBal1{height: 2.2vw;  width: 3.0vw;  left: 28.6vw;  top: 17.5vw;}            /* Baltikum */
a#transButtonBal2{height: 3.6vw;  width: 1.5vw;  left: 30.5vw;  top: 14.0vw;}
a#transButtonNor1{height: 3.2vw;  width: 1.5vw;  left: 18.9vw;  top: 12.9vw;}            /* Norwegen */
a#transButtonNor2{height: 1.1vw;  width: 2.1vw;  left: 20.3vw;  top: 15.7vw;}
a#transButtonNor3{height: 1.0vw;  width: 0.8vw;  left: 21.6vw;  top: 16.5vw;}

/* ======================================================= Div zur Routenhervorhebung */

div.hoverRoute{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 53.6839vw;
  opacity: 0;
  transition: 0.2s;
  background-size: cover;
}
div#hoverRouteVen{background-image: url(../../grafiken/radreisen/bannerkarte/11VenHover.png);}
div#hoverRouteAlp{background-image: url(../../grafiken/radreisen/bannerkarte/12AlpHover.png);}
div#hoverRouteIst{background-image: url(../../grafiken/radreisen/bannerkarte/13IstHover.png);}
div#hoverRoutePra{background-image: url(../../grafiken/radreisen/bannerkarte/14PraHover.png);}
div#hoverRoutePar{background-image: url(../../grafiken/radreisen/bannerkarte/15ParHover.png);}
div#hoverRouteMon{background-image: url(../../grafiken/radreisen/bannerkarte/15MonHover.png);}
div#hoverRouteGui{background-image: url(../../grafiken/radreisen/bannerkarte/16GuiHover.png);}
div#hoverRouteChi{background-image: url(../../grafiken/radreisen/bannerkarte/16ChiHover.png);}
div#hoverRouteMar{background-image: url(../../grafiken/radreisen/bannerkarte/17MarHover.png);}
div#hoverRouteBal{background-image: url(../../grafiken/radreisen/bannerkarte/19BalHover.png);}
div#hoverRouteNor{background-image: url(../../grafiken/radreisen/bannerkarte/21NorHover.png);}
a.transButtonVen:hover ~ div#hoverRouteVen{opacity: 1;}     /* Venedig */
a#VenDes:hover         ~ div#hoverRouteVen{opacity: 1;}
a.transButtonAlp:hover ~ div#hoverRouteAlp{opacity: 1;}     /* Alpen */
a#AlpDes:hover         ~ div#hoverRouteAlp{opacity: 1;}
a.transButtonIst:hover ~ div#hoverRouteIst{opacity: 1;}     /* Istanbul */
a#IstDes:hover         ~ div#hoverRouteIst{opacity: 1;}
a.transButtonPra:hover ~ div#hoverRoutePra{opacity: 1;}     /* Prag */
a#PraDes:hover         ~ div#hoverRoutePra{opacity: 1;}
a.transButtonPar:hover ~ div#hoverRoutePar{opacity: 1;}     /* Paris */
a#ParDes:hover         ~ div#hoverRoutePar{opacity: 1;}
a.transButtonMon:hover ~ div#hoverRouteMon{opacity: 1;}     /* Mongolei */
a#MonDes:hover         ~ div#hoverRouteMon{opacity: 1;}
a.transButtonGui:hover ~ div#hoverRouteGui{opacity: 1;}     /* Guilin */
a#GuiDes:hover         ~ div#hoverRouteGui{opacity: 1;}
a.transButtonChi:hover ~ div#hoverRouteChi{opacity: 1;}     /* Chisinau */
a#ChiDes:hover         ~ div#hoverRouteChi{opacity: 1;}
a.transButtonMar:hover ~ div#hoverRouteMar{opacity: 1;}     /* Marokko */
a#MarDes:hover         ~ div#hoverRouteMar{opacity: 1;}
a.transButtonBal:hover ~ div#hoverRouteBal{opacity: 1;}     /* Baltikum */
a#BalDes:hover         ~ div#hoverRouteBal{opacity: 1;}
a.transButtonNor:hover ~ div#hoverRouteNor{opacity: 1;}     /* Norwegen */
a#NorDes:hover         ~ div#hoverRouteNor{opacity: 1;}

/* ===================================================================== */
/* Aktuell-Banner (nur bei breitem Viewpoint)                            */
/* ===================================================================== */

/* ======================================================= Ausblenden bei schmalem Viewpoint */

@media only screen and (max-width: 1300px) {
    div#aktuellWrapper  {display: none;}
}

/* ======================================================= Wrapper */

div#aktuellWrapper{
  position: absolute;
  left: 50vw;
  top: 15vw;
  width: 20vw;
  text-align: center;
}

/* ======================================================= Schriftzug "Aktuell"  */

 p#aktuellTitel{
  font-size: 2vw;
  font-style: italic;
  font-weight: bold;
  color: var(--ZenAsienHaupt);
}

/* ======================================================= Eigentlicher Banner (als Link-Block definiert)  */

a#aktuellButton{
  display: block;
  background-color: rgb(238,169,0,0.8);
  padding: 2vw;
  -webkit-box-shadow: 1px 1px 8px 2px rgba(0,0,0,0.7);
  -moz-box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.7);
  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.7);
  transition: 0.2s;
  /* zur Textfarbe siehe unten im Abschnitt "Text-Design" */
}
a#aktuellButton:hover {
  background-color: var(--ZenAsienHaupt);
}

/* ======================================================= Logo  */

img#logoAktuell{
  width: 13vw;
}

img.ExtLinkAktuell{
  position: relative;
  width: 10%;
  top: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* ======================================================= Text-Design */

a#aktuellButton{color: black;}
span#StartZiel{font-size: 1.5vw;}
span#WebsiteLinkText{
  font-size: 1.5vw;
  color: white;
  font-weight: bold;
  transition: 0.2s;
}
span#WebsiteLinkText:hover{
  text-decoration: underline;
}
a#aktuellButton:hover > span#WebsiteLinkText{
  color: white;
}

/* ===================================================================== */
/* Link-Anker                                                            */
/* ===================================================================== */

/*div#linkAnchor{
  position: relative;
  top: 42vw;
}*/

div#linkAnchor{
  position: absolute;
  bottom: 60px;
  left: 0px;
  /*border: 1px solid red;
  height: 5px;
  width: 5px;
  z-index: 5000;*/
}