/* ======================================================= Body */

body{
  font-family: var(--NonSerifFont);
}

/*===================================================== */
/* Maps                                                 */
/*===================================================== */

/* ======================================================= Wrapper for each map */

.map-wrapper{
  position: relative;
  -webkit-box-shadow: 0px 0px 0.5vw 0.5vw rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 0px 0.5vw 0.5vw rgba(0,0,0,0.7);
  box-shadow: 0px 0px 0.5vw 0.5vw rgba(0,0,0,0.7);
  background-color: white;
  overflow: hidden;
  transition: 1s;
  /* border: 1px solid red; */
}
.map-wrapper > div{
  position: relative;
}

/* Baltikum-Tour */
div#map-wrapper-BAT, div#map-wrapper-BAT > div{z-index:  5; height: 55.80vw;}
div#map-wrapper-BAT.img-gallery-active{height: calc(55.80vw + 100px);}

/* Norwegen-Tour */
div#map-wrapper-NWT, div#map-wrapper-NWT > div{z-index:  5; height: 56.75vw;}
div#map-wrapper-NWT.img-gallery-active{height: calc(56.75vw + 100px);}

/* Zentralasien-Tour */
div#map-wrapper-BA, div#map-wrapper-BA > div{z-index:  5; height: 49.75vw;}
div#map-wrapper-VA, div#map-wrapper-VA > div{z-index: 10; height: 58.50vw;}
div#map-wrapper-NO, div#map-wrapper-NO > div{z-index: 15; height: 39.70vw;}
div#map-wrapper-ZA, div#map-wrapper-ZA > div{z-index: 20; height: 47.50vw;}
div#map-wrapper-AL, div#map-wrapper-AL > div{z-index: 30; height: 40.70vw;}
div#map-wrapper-CH, div#map-wrapper-CH > div{z-index: 35; height: 54.35vw;}
div#map-wrapper-SO, div#map-wrapper-SO > div{z-index: 38; height: 83.50vw;}
div#map-wrapper-OZ, div#map-wrapper-OZ > div{z-index: 40; height: 67.00vw;}
div#map-wrapper-OA, div#map-wrapper-OA > div{z-index: 42; height: 56.00vw;}
div#map-wrapper-OS, div#map-wrapper-OS > div{z-index: 43; height: 58.10vw;}
div#map-wrapper-UE, div#map-wrapper-UE > div{z-index: 45; height: 60.50vw;}
div#map-wrapper-BA.img-gallery-active{height: calc(49.75vw + 100px);}
div#map-wrapper-VA.img-gallery-active{height: calc(58.50vw + 100px);}
div#map-wrapper-NO.img-gallery-active{height: calc(39.70vw + 100px);}
div#map-wrapper-ZA.img-gallery-active{height: calc(47.50vw + 100px);}
div#map-wrapper-AL.img-gallery-active{height: calc(40.70vw + 100px);}
div#map-wrapper-CH.img-gallery-active{height: calc(54.35vw + 100px);}
div#map-wrapper-SO.img-gallery-active{height: calc(83.50vw + 100px);}          
div#map-wrapper-OZ.img-gallery-active{height: calc(67.00vw + 100px);}          
div#map-wrapper-OA.img-gallery-active{height: calc(56.00vw + 100px);} 
div#map-wrapper-OS.img-gallery-active{height: calc(58.10vw + 100px);}          

/* ======================================================= Map img */

img.map{
  width: 100vw;
  display: block;
  position: absolute;
  z-index: 0;

  /*https://stackoverflow.com/questions/37906602/blurry-downscaled-images-in-chrome*/
  /*will-change: transform;
  image-rendering: -webkit-optimize-contrast;*/
  transform: translateZ(0);

  /* Karte im Div zentrieren */
  /*margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;*/
}

/* ======================================================= SVG Route */

svg.route{
  position: absolute;
  top: 0px;
  width: 100vw;
  z-index: 1;

  /* Routen-SVG im Div zentrieren */
  /*margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;*/
}

path.route, path.manualRoute{
  /*stroke: #CC0000;*/
  stroke-width: 0.12px;
  fill: none;
  stroke: #AA0000;
  transition: 0.15s;
  /*filter: drop-shadow(0px 0.05px 0.07px #888);
  -webkit-filter: drop-shadow(0px 0.05px 0.07px #888);*/
}

path.long-non-cyc{
  stroke-width: 0.06px;
}

/*path.evenSegment{
  stroke: #880000;
}*/

path.markedRoute, path.reportIconMarkedRoute{
  stroke-width: 0.24px;
  stroke: var(--TourColor);
  /*filter: drop-shadow(0px 0px 0.1px #444);
  -webkit-filter: drop-shadow(0px 0px 0.1px #444);*/
}

path.activeRoute{
  stroke-width: 0.3px;/*0.24px;*/
  stroke: #AA0000;
}

path.dashed{stroke-dasharray: 0.1,0.1;}

path.statSec-dist_unpaved_2,
path.statSec-scenic{
  display: none;
  fill: none;
  stroke-width: 0.5px;
  transition: 0.2s;
}
path.statSec-dist_unpaved_2{stroke: rgb(192, 133, 0);}
path.statSec-scenic.s{stroke: #70AD47;}
path.statSec-scenic.h{stroke: #3A7811;}

/* ======================================================= Overnight Points */

circle.overnightPoint{
  r: 0.175%;
  fill: #AA0000;
  transition: 0.1s;
}

circle.activeCircle{
  /*fill: var(--TourColor);*/
  r: 0.25%;
}

circle.activeIllustration{
  fill: #500;
}

/* ======================================================= Milestones */

text.milestoneText{
  position: absolute;
  font-size: 0.5pt;
  font-family: var(--SerifFont);
  fill: #AA0000;
  font-weight: bold;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
  transition: 0.2s;
}

text.green{
  fill: green;
}

/* ======================================================= Map Title */

div.map-title{
  font-family: var(--NonSerifFont);
  position: absolute;
  background-color: rgb(255, 255, 255, 0.8);
  color: var(--TourColor);
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  z-index: 5000;
  transition: 1s;
  left: 0px;
}

/* ======================================================= Podcast Ad Banner */

div#map-wrapper-PA{
  z-index: 0;
  height: 150px;
  position: relative;
  background-color: #F6D47F;
  display: block;
}

div#map-wrapper-PA > img{
  position: absolute;
  left: 10px;
  top: 10px;
  height: 130px;
}

a#PA-contentwrapper{
  display: block;
  position: absolute;
  padding-top: 20px;
  left: 150px;
  width: calc(100vw - 630px);
  height: calc(100% - 20px);
}

div.PA-descriptive-title{
  font-style: italic;
  margin-bottom: 10px;
}

div.PA-episode-banner{
  position: absolute;
  right: 200px;
  width: 300px;
  height: 150px;
  -webkit-mask-image: linear-gradient(70deg, transparent 50px, white 70px);
  mask-image: linear-gradient(70deg, transparent 50px, white 70px);
  background-size: 104% auto;
  background-position: center;
  background-repeat: no-repeat;
}

div#PA-episode-title{
  line-height: 25px;
  font-family: var(--NonSerifFont);
  font-size: 16pt;
  color: #555555;
  display: block;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div#PA-episode-subtitle{
  font-family: var(--NonSerifFont);
  color: #888888;
  font-size: 12pt;
  font-weight: 300;
  margin-top: 1px;
  margin-bottom: 1px;
  line-height: 20px;
}

div#PA-episode-subtitle span:not(.nocat){
  background-position: 0px -5px;
  background-size: auto 30px;
  background-repeat: no-repeat;
  padding-left: 25px;
  color: currentColor;
}
span.PA-subtitle-route{background-image: url("../../graphics/navigation/page-icons/MapIconBr.svg");}
span.PA-subtitle-bckgr{background-image: url("../../graphics/reports/cat-icons/background-b.svg");}
span.PA-subtitle-special{background-image: url("../../graphics/reports/cat-icons/special-b.svg");}
span.PA-subtitle-faq{background-image: url("../../graphics/navigation/page-icons/FaqIconBr.svg");}

div#PA-episode-no{
  position: absolute;
  right: 0px;
  top: 00px;
  height: 150px;
  z-index: -10;
  text-align: right;
  font-family: var(--NonSerifFont);
  color: rgb(100,100,100,0.5);
  color: rgb(256,256,256,0.3);
  letter-spacing: -0.04em;
  font-weight: bold;
  font-size: 180pt;
  line-height: 150px;
  overflow: hidden;
}

a#PA-contentwrapper img{
  height: 25px;
  vertical-align: text-bottom;
  margin-right: 5px;
}

a#PA-contentwrapper:hover {text-decoration: none;}
a#PA-contentwrapper:hover div#PA-episode-title{text-decoration: underline;}

div#PA-followwrapper{
  position: absolute;
  padding: 20px;
  width: 160px;
  right: 0px;
}

div#PA-followwrapper svg{
  height: 50px;
  margin-top: 10px;
}

div#PA-followwrapper a:hover{text-decoration: none;}
a#PA-follow-fb:hover svg{color: #1877F2;}
a#PA-follow-ig:hover svg path{fill: url("#instagram-colors");}
a#PA-follow-rss:hover svg{color: #F49C52;}

@media only screen and (max-width: 1200px) {
  a#PA-contentwrapper{width: calc(100vw - 380px);}
  div.PA-episode-banner{opacity: 15%;}
}
@media only screen and (max-width: 900px) {
  div#map-wrapper-PA{height: 225px;}
  div.PA-episode-banner{right: 0px;}
  a#PA-contentwrapper{width: calc(100vw - 170px);}
  div#PA-followwrapper{
    text-align: center;
    left: 0px;
    top: 150px;
    padding: 0px;
    height: 75px;
    width: 100%;
  }
  div#PA-followwrapper div{display: none;}
}

/* ======================================================= Tooltip */

/* Used by both Tooltip types */

div.tooltip{
  padding: 5px;
  position: fixed;
  opacity: 0;
  z-index: 100000;
  transition: opacity 0.2s;
  font-weight: 300;
  font-size: 10pt;
  background-color: rgba(255, 255, 255, 0.95);
}

td#ttip-stat-fromTo img, div#ttip-rep-lang img{
  display: inline-block;
  height: 10px;
  margin-right: 4px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
}

/* Route Segment Tooltip */

div#ttip-stat, div#ttip-sec{
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
}

div#ttip-stat table{
  min-width: 200px;
  border-collapse: collapse;
}

div#ttip-stat-image{
  position: relative;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: 75px;
  background-size: cover;
  background-position: center;
}

td#ttip-stat-day{
  color: var(--TourColor);
  font-weight: 400;
}
td#ttip-stat-date{
  text-align: right;
  padding-left: 20px;
  font-weight: 400;
  color: var(--TourColor);
}
td#ttip-stat-fromTo{text-align: center;}
td#ttip-stat-stat{text-align: center;}

span#ttip-stat-statQuant{padding-right: 3px;}
span#ttip-stat-statNum{padding-left: 3px;}

img.weatherIcon{
  height: 20px;
  vertical-align: middle;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Report Tooltip */

div#ttip-rep{
  width: 250px;
  color: #555555;
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.2);
}
div#ttip-rep-banner{
  position: relative;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: 90px;
  background-size: cover;
  background-position: center;
}
div#ttip-rep-lang{
  display: inline-block;
}
p#ttip-rep-publication{
  float: right;
  text-align: right;
  font-size: 9pt;
}
div#ttip-rep-titles{
  position: relative;
  padding-top: 5px;
  text-align: left;
}
/*p#ttip-rep-subtitle{}*/
p#ttip-rep-title{
  font-size: 11pt;
  font-weight: 400;
  color: var(--TourColor);
}
p#ttip-rep-subtitle{
  overflow-x: hidden;
  text-overflow: ellipsis;
}
p#ttip-rep-subtitle span{
  background-position: 0px -5px;
  background-size: auto 140%;
  background-repeat: no-repeat;
  padding-left: 20px;
  color: currentColor;
  white-space: nowrap;
}

/* ======================================================= Collapse Cover */

div.collapse-cover{
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
  z-index: 9;
  opacity: 0.8;
  transition: 0.2s;
  display: none;
  z-index: 1000;
}

/* ======================================================= Stage Rectangulars on the Overview Map */

/* Whole svg element in which all borders, covers and paths are organized */
svg#stage-rects{
  position: absolute;
  z-index: 9;
  width: 100vw;
}

/* all semi-transparent covers */
path.stage-rect-cover, path.frame-cover{
  color: rgba(255,255,255,0.0);
  transition: 0.2s;
}
path.stage-rect-cover.active,
path.frame-cover.active{
  color: rgba(255,255,255,0.7);
}

/* The borders of the etappe map regions */
path.stage-rect-border{
  stroke: transparent;
  stroke-width: 0;
  transition: 0.2s;
  fill: transparent;
}
/* If the map regions are displayed */
path.stage-rect-border.preactive{
    stroke: var(--TourColor);
    stroke-width: 0.15;
}
/* If this stage rectangular is hovered */
path.stage-rect-border.active{
  stroke: var(--TourColor);
  stroke-width: 0.2;
  cursor: pointer;
}
/* If another stage rectangular is hovered */
path.stage-rect-border.passive{
  stroke-width: 0.1;
  stroke: #DDDDDD;
}

/* Etappe Names */
svg#stage-rects text{
  font-size: 1pt;
  font-family: var(--NonSerifFont);
  fill: var(--TourColor);
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white, -1px -1px white, -1px 1px white, 1px -1px white, 1px 1px white;
  opacity: 0;
  transition: 0.2s;
}
/* If the hover trigger is hovered */
svg#stage-rects text.preactive{opacity: 1;}
/* If this stage rectangular is hovered */
svg#stage-rects text.active{opacity: 1;}
/* If another stage rectangular is hovered */
svg#stage-rects text.passive{
  opacity: 1;
  fill: #DDDDDD;
}

/* ===================================================================== */
/* Bericht Icons                                                         */
/* ===================================================================== */

/* ======================================================= Allgemeine Icon-Eigenschaften */

a.MapIcon{
  position: absolute;
  display: block;
  height: 2vw;
  width: 1.492vw;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 8;
  /*border: 1px solid red;*/
}

/* ======================================================= Auswahl der eigentlichen Icons */

/* Normal: Beige */
a.ArtIcon{background-image: url('../../graphics/navigation/page-icons/ArtIconBr.svg');}
a.PodIcon{background-image: url('../../graphics/navigation/page-icons/PodIconBr.svg');}
a.BilIcon{background-image: url('../../graphics/navigation/page-icons/BilIconBr.svg');}
a.ArtPodIcon{background-image: url('../../graphics/navigation/page-icons/ArtPodIconBr.svg');}
a.ArtBilIcon{background-image: url('../../graphics/navigation/page-icons/ArtBilIconBr.svg');}
a.PodBilIcon{background-image: url('../../graphics/navigation/page-icons/PodBilIconBr.svg');}
a.ArtVidIcon{background-image: url('../../graphics/navigation/page-icons/ArtVidIconBr.svg');}
a.BilVidIcon{background-image: url('../../graphics/navigation/page-icons/BilVidIconBr.svg');}
a.PodVidIcon{background-image: url('../../graphics/navigation/page-icons/PodVidIconBr.svg');}
a.ArtPodBilIcon{background-image: url('../../graphics/navigation/page-icons/ArtPodBilIconBr.svg');}
a.ArtBilVidIcon{background-image: url('../../graphics/navigation/page-icons/ArtBilVidIconBr.svg');}
a.ArtPodVidIcon{background-image: url('../../graphics/navigation/page-icons/ArtPodVidIconBr.svg');}
a.PodBilVidIcon{background-image: url('../../graphics/navigation/page-icons/PodBilVidIconBr.svg');}
a.ArtPodBilVidIcon{background-image: url('../../graphics/navigation/page-icons/ArtPodBilVidIconBr.svg');}

/* Hover: Rot */
a.ArtIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtIconRot.svg');}
a.PodIcon:Hover{background-image: url('../../graphics/navigation/page-icons/PodIconRot.svg');}
a.BilIcon:Hover{background-image: url('../../graphics/navigation/page-icons/BilIconRot.svg');}
a.ArtPodIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodIconRot.svg');}
a.ArtBilIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtBilIconRot.svg');}
a.PodBilIcon:Hover{background-image: url('../../graphics/navigation/page-icons/PodBilIconRot.svg');}
a.ArtVidIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtVidIconRot.svg');}
a.BilVidIcon:Hover{background-image: url('../../graphics/navigation/page-icons/BilVidIconRot.svg');}
a.PodVidIcon:Hover{background-image: url('../../graphics/navigation/page-icons/PodVidIconRot.svg');}
a.ArtPodBilIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodBilIconRot.svg');}
a.ArtBilVidIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtBilVidIconRot.svg');}
a.ArtPodVidIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodVidIconRot.svg');}
a.PodBilVidIcon:Hover{background-image: url('../../graphics/navigation/page-icons/PodBilVidIconRot.svg');}
a.ArtPodBilVidIcon:Hover{background-image: url('../../graphics/navigation/page-icons/ArtPodBilVidIconRot.svg');}


/* ======================================================= Positionen der Berichticons */

/* Balkan */
a#BA-002{left: 36.877vw; top: 32.228vw;}
a#BA-003{left: 46.725vw; top: 36.912vw;}
a#BA-004{left: 54.548vw; top: 48.194vw;}
a#BA-005{left: 91.515vw; top: 49.835vw;}
a#BA-006{left: 68.221vw; top: 40.273vw;}
/* PyMarkerNewBAIcon */

/* Vorderasien */
/* PyMarkerNewVAIcon */

/* Zentralasien */
/* PyMarkerNewZAIcon */

/*===================================================== */
/* Buttons auf Karten                                   */
/*===================================================== */

div.map-buttons{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 128px;
  transition: 0.2s;
  z-index: 11;
  /*border: 1px solid red;*/
}

.map-button, .route-coloring-panel{
  display: block;
  position: absolute;
  width: 115px;
  right: 0px;
  padding: 3px;
  font-size: 10pt;
  color: var(--TourColor) !important;
  /*text-align: center;*/
  background-color: rgba(255, 255, 255, 0.8);
  transition: 0.2s, right 0.2s linear 0.3s;
  /*border: 1px solid red;*/
  z-index: 11;
  cursor: pointer;
  border-radius: 2px;
}

/* Properties depending of number of buttons/button position */
.map-button-route-coloring{display: none;}
.map-button-gallery{display: none;}
.route-coloring-panel{display: none;}
div.map-buttons-1{height:  38px;}
div.map-buttons-2{height:  83px;}
div.map-buttons-3{height: 128px;}
.map-button-1{bottom:  0px; display: block;}
.map-button-2{bottom: 45px; display: block;}
.map-button-3{bottom: 90px; display: block;}
.route-coloring-panel-1{bottom:  48px; display: block;}
.route-coloring-panel-2{bottom:  93px; display: block;}
.route-coloring-panel-3{bottom: 138px; display: block;}

.map-button{
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  cursor: pointer;
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.map-button:Hover{
	-webkit-box-shadow: 0px 0px 4px 2px var(--TourColor);
	-moz-box-shadow: 0px 0px 4px 2px var(--TourColor);
	box-shadow: 0px 0px 4px 2px var(--TourColor);
	text-decoration: none;
}

div.mapButtonActive, div.mapButtonActive:Hover{
	-webkit-box-shadow: 0px 0px 4px 3px var(--TourColor);
	-moz-box-shadow: 0px 0px 4px 3px var(--TourColor);
	box-shadow: 0px 0px 4px 3px var(--TourColor);
        background-color: rgba(255, 255, 255, 1);
}

.map-button p{
  margin-right: 38px;
  width: 129px;
  /*display: none;*/
  opacity: 0;
  transition: 0.0s;
  transition-delay: 0s;
}

.map-button > img{
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 33px;
}

div#map-button-stage-rects p{
  margin-top: 8px;
}

div.map-buttons:hover{width: 210px; /*163px*/}
div.map-buttons:hover .map-button{width: 204px; /*157px*/}
div.map-buttons:hover .map-button p{/*display: block;*/ opacity: 1;  transition: 0.2s; transition-delay: 0.15s;}
div.map-buttons.active{width: 210px; /*163px*/}
div.map-buttons.active .map-button{width: 204px; /*157px*/}
div.map-buttons.active .map-button p{display: block; opacity: 1;  transition: 0.2s; transition-delay: 0.15s;}

/* ======================================================= Route Coloring */

/* Panel */

div.route-coloring-panel{
  right: 10px;
  width: 210px; /*163px;*/
  max-height: 0px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.0);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.0);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.0);
  padding: 0px;
  cursor: auto;
  z-index: 10;
}

div.route-coloring-panel.active{
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
}

div.route-coloring-panel > div{
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
div.panel-separator{
  position: relative;
  width: calc(100% - 10px);
  left: 5px;
  height: 2px;
  background-color: rgba(220, 220, 220);
}

div.route-coloring-panel > div > p{
  color: black;
  margin-left: 5px;
  margin-bottom: 5px;
}

/* Marked Sections */

span.statSec-dist_unpaved_2,
span.statSec-scenic,
span.statSec-noMarking{
  display: inline-block;
  margin-right: 5px;
  height: 10px;
  width: 10px;
}
span.statSec-dist_unpaved_2{background-color: rgb(192, 133, 0);}
span.statSec-scenic{background-image: linear-gradient(to right, #70AD47 50%, #3A7811 50%);}

/* Overnight Stays */

table.overnight-stays{
  margin-left: 35px;
  margin-top: 5px;
  color: rgba(230, 230, 230);
  transition: 0.2s;
}
table.overnight-stays td{
  text-align: center;
}
table.overnight-stays svg{
  height: 1.15vw;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  fill: rgba(230, 230, 230);
  transition: 0.2s;
}
table.overnight-stays.active{color: rgba(180, 180, 180);}
table.overnight-stays.active svg{fill: #500;}
table.overnight-stays span{
  padding-left: 25px;
}

/* Radio Buttons and Check Boxes */

div.radio-buttons{
  max-height: 185px;
  overflow: auto;
}

div.radio-buttons p{
  margin-left: 5px;
  padding: 0.5px;
  cursor: pointer;
  color: rgba(180, 180, 180);
}
div.radio-buttons p span.bull{
  opacity: 0;
  transition: 0.2s;
  color: var(--TourColor);
}
div.radio-buttons p:Hover,
div.radio-buttons p.active,
div.radio-buttons p.active span.bull{
  opacity: 1;
  color: var(--TourColor);
}

/* Farb-Skala */

p.color-scale-u, p.color-scale-l{
  position: absolute;
  opacity: 0;
  transition: 0.2s;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  right: 32px; /*18px;*/
}
p.color-scale-u{top: 6px;}
p.color-scale-l{bottom: 4px;}

div.color-scale{
  position: absolute;
  top: 5px;
  right: 20px; /*6px;*/
  width: 10px;
  height: calc(100% - 7px);
  /*border: 1px solid red;*/
  background-image: url("../../graphics/home/RouteAppearance/scale-red.svg");
  background-size: 100% 100%;
  opacity: 0;
  transition: 0.2s;
}
div.scale-w_cldg{background-image: url("../../graphics/home/RouteAppearance/scale-w_cldg.svg");}
div.scale-w_prec{background-image: url("../../graphics/home/RouteAppearance/scale-w_prec.svg");}
div.scale-w_temp{background-image: url("../../graphics/home/RouteAppearance/scale-w_temp.svg");}
div.scale-w_wind{background-image: url("../../graphics/home/RouteAppearance/scale-w_wind.svg");}

/* ======================================================= Karten-Bildergalerie (Button und Circles) */

circle.imageCircle{
  cursor: pointer;
  r: 0.27%;
  fill: #AA000033;
  stroke: #AA0000;
  stroke-width: 0.1%;
  opacity: 1;
  transition: 0.2s;
}
circle.imageCircle:hover, circle.imgCircleActive{
  stroke: var(--TourColor);
  fill: #EEA90055;
  stroke-width: 0.25%;
}

circle.imageCircleInactive{
  r: 0%;
  stroke-width: 0%;
  opacity: 0;
}

path.connPath{
  stroke-width: 0.12px;
  fill: none;
  stroke: var(--TourColor);
  /*-webkit-filter: drop-shadow(0px 0.05px 0.07px #888);*/
}
path.connPathInactive{display: none;}

div.connArrw{
  width: 25px;
  height: 25px;
  position: absolute;
  top: -32px;
  border-radius: 2px;
  background-image: url('../../graphics/navigation/arrows/down.svg'), url('../../graphics/navigation/arrows/down.svg');
  background-color: white;
  background-size: 80%;
  background-position-x: 40%;
  background-position-y: 15%, 85%;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 0px 3px 2px var(--TourColor);
  -moz-box-shadow: 0px 0px 3px 2px var(--TourColor);
  box-shadow: 0px 0px 3px 2px var(--TourColor);
}
div.connArrwInactive{display: none;}

/* ======================================================= Map Image Gallery */

div.mapGalleryWrapper{
  position: absolute;
  bottom: -100px;
  width: 100%;
  height: 100px;
  background-color: white;
  text-align: center;
  transition: 1s box-shadow;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
  z-index: 2;
}
div.mapGalleryWrapperFixed{
  position: fixed;
  bottom: 0;
  z-index: 10000;
  /*transition: 0s;*/
}
div.mapGalleryWrapperActive{
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
}

div.mapGalleryArrow{
  position: absolute;
  top: 0px;
  height: 100px;
  width: 107px;
  color: var(--TourColor);
}
div.mapGalleryLeftArrow{
  left: 0px;
  background-image: linear-gradient(to right, white 40%, transparent);
  text-align: left;
  padding-left: 15px;
}
div.mapGalleryRightArrow{
  right: 0px;
  background-image: linear-gradient(to left, white 40%, transparent);
  text-align: right;
  padding-right: 15px;
}

div.mapGalleryArrow svg{
  margin-top: 40px;
  height: 20px;
  transition: 0.1s;
  color: #DDDDDD;
}
div.mapGalleryArrowActive{cursor: pointer;}
div.mapGalleryArrowActive svg{color: var(--TourColor);}
div.mapGalleryArrowActive:hover svg{
  margin-top: 35px;
  height: 30px;
}

div.mapGalleryCloseX{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 20px;
  padding-right: 5px;
  color: var(--TourColor);
  cursor: pointer;
}
div.mapGalleryCloseX svg{
  height: 10px;
  margin-top: 5px;
  transition: 0.1s;
}
div.mapGalleryCloseX:hover svg{
  height: 15px;
}

div.mapGalleryImage{
  display: block;
  position: absolute;
  width: 113px;
  height: 75px;
  margin: 4px;
  margin-top: 12.5px;
  background-color: #404040;
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
  transition: 0.2s;
  cursor: pointer;
}

div.mapGalleryImageActive{
  -webkit-box-shadow: 0px 0px 4px 3px var(--TourColor);
  -moz-box-shadow: 0px 0px 4px 3px var(--TourColor);
  box-shadow: 0px 0px 4px 3px var(--TourColor);
}
div.mapGalleryImage:hover{
  -webkit-box-shadow: 0px 0px 4px 4px var(--TourColor);
  -moz-box-shadow: 0px 0px 4px 4px var(--TourColor);
  box-shadow: 0px 0px 4px 4px var(--TourColor);
}

div.mapGalleryImage div{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

div.mapGalleryVideo{
  background-image: url('../../graphics/reports/video-tape-grey.svg'), url('../../graphics/reports/video-tape-grey.svg');
  background-size: auto 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}

div.mapGalleryVideo div{
  position: absolute;
  width: 83px;
  height: 71px;
  left: 15px;
  top: 2px;
}

/*===================================================== */
/* Navigation buttons                                   */
/*===================================================== */

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

/* Wrapper for 2 or 4 navigation buttons */
div.navi{
  position: absolute;
  left: 0vw;
  width: 10vw;
  bottom: 1vw;
  transition: 0.2s linear 0.3s;
  /*border: 1px solid green;*/
}
div.navi-2{height: 9vw;} /* 2 buttons */
div.navi-4{height: 18vw;} /* 4 buttons */

div.navi.small{
  position: relative;
  height: 360px;
  left: 0;
  right: 0;
  bottom: 0;
  transition: none;
  margin-left: auto;
  margin-right: auto;
  width: 450px;
  /*border: 1px solid blue;*/
}
div.navi-2.small{
  height: 180px;
}

div.navi:not(.small):hover{width: 25.0vw;}

/* ======================================================= Navi Boards Background Image */

div.navi img{
  position: absolute;
  display: block;
  top: -0.25vw;
  width: 34vw;
  left: -24vw;
  transition: 0.2s;
  z-index: 28;
}

div.navi.small img{
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

div.navi:not(.small):hover img{left: -15vw;}

/* ======================================================= Navi Icons */

div.navi-icon{
  position: absolute;
  left: 0.5vw;
  width: 4.5vw;
  height: 4.5vw;
  z-index: 3000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.2s;
  /*border: 1px solid blue;*/
}
div.navi-icon-reports{
  top: 0.25vw;
  background-image: url('../../graphics/navigation/page-icons/ArtPodBilVidIconBr.svg');
}
div.navi-icon-photos{
  top: 0.25vw;
  background-image: url('../../graphics/navigation/page-icons/BilIconBr.svg');
}
div.navi-icon-article{
  top: 0.25vw;
  background-image: url('../../graphics/navigation/page-icons/ArtIconBr.svg');
}
div.navi-icon-statistics{
  top: 4.75vw;
  background-image: url('../../graphics/navigation/page-icons/StatIconBr.svg');
}
div.navi-icon-gear{
  top: 9.25vw;
  background-image: url('../../graphics/navigation/page-icons/AusrIconBr.svg');
}
div.navi-icon-faq{
  top: 13.75vw;
  background-image: url('../../graphics/navigation/page-icons/FaqIconBr.svg');
}

div.navi.small div.navi-icon{
  left: 30px;
  width: 80px;
  height: 80px;
  z-index: 3000;
}
div.navi.small div.navi-icon-reports{top: 25px;}
div.navi.small div.navi-icon-photos{top: 25px;}
div.navi.small div.navi-icon-statistics{top: 100px;}
div.navi.small div.navi-icon-gear{top: 180px;}
div.navi.small div.navi-icon-faq{top: 255px;}

a.navi-link-reports:hover ~ div.navi-icon-reports{background-image: url('../../graphics/navigation/page-icons/ArtPodBilVidIconRot.svg');}
a.navi-link-photos:hover ~ div.navi-icon-photos{background-image: url('../../graphics/navigation/page-icons/BilIconRot.svg');}
a.navi-link-statistics:hover ~ div.navi-icon-statistics{background-image: url('../../graphics/navigation/page-icons/StatIconRot.svg');}
a.navi-link-gear:hover ~ div.navi-icon-gear{background-image: url('../../graphics/navigation/page-icons/AusrIconRot.svg');}
a.navi-link-faq:hover ~ div.navi-icon-faq{background-image: url('../../graphics/navigation/page-icons/FaqIconRot.svg');}

/* ======================================================== Navi Texts */

div.navi-text{
  position: absolute;
  /*display: none;*/
  visibility: hidden;
  width: 20vw;
  left: 5.2vw;
  font-family: var(--SeitentitelFont);
  font-style: italic;
  font-weight: 400;
  font-size: 2.5vw;
  z-index: 3000;
  transition-delay: 0s;
  line-height: 4.0vw;
  /*border: 1px solid red;*/
}
div.navi-text-reports{top: 0.4vw;}
div.navi-text-photos{top: 0.4vw;}
div.navi-text-statistics{top: 4.9vw;}
div.navi-text-gear{top: 9.4vw;}
div.navi-text-faq{top: 13.9vw;}

div.navi.small div.navi-text{
  visibility: visible;
  width: 340px;
  left: 110px;
  font-weight: 600;
  font-size: 30pt;
  line-height: 85px;
}

div.navi.small div.navi-text-reports{top: 25px;}
div.navi.small div.navi-text-photos{top: 25px;}
div.navi.small div.navi-text-statistics{top: 100px;}
div.navi.small div.navi-text-gear{top: 180px;}
div.navi.small div.navi-text-faq{top: 255px;}

div.navi:not(.small):hover div.navi-text{visibility: visible; transition: visibility 0.2s; transition-delay: 0.2s;}

a.navi-link-reports:hover ~ div.navi-text-reports{text-shadow: 1px 1px 2.5px rgb(92,66,0,1);}
a.navi-link-photos:hover ~ div.navi-text-photos{text-shadow: 1px 1px 2.5px rgb(92,66,0,1);}
a.navi-link-statistics:hover ~ div.navi-text-statistics{text-shadow: 1px 1px 2.5px rgb(92,66,0,1);}
a.navi-link-gear:hover ~ div.navi-text-gear{text-shadow: 1px 1px 2.5px rgb(92,66,0,1);}
a.navi-link-faq:hover ~ div.navi-text-faq{text-shadow: 1px 1px 2.5px rgb(92,66,0,1);}

/* ======================================================= Navi Links */

div.navi a{
  display: block;
  position: absolute;
  height: 4.5vw;
  left: -1vw;
  width: 11vw;
  z-index: 4000;
  /*border: 1px solid red;*/
}
a.navi-link-reports{top: 0.0vw;}
a.navi-link-photos{top: 0.0vw;}
a.navi-link-statistics{top: 4.5vw;}
a.navi-link-gear{top: 9.0vw;}
a.navi-link-faq{top: 13.5vw;}

div.navi.small a{
  height: auto;
  left: 10px;
  width: 420px;
  z-index: 4000;
}
div.navi.small a.navi-link-reports{height: 80px; top: 25px;}
div.navi.small a.navi-link-photos{height: 80px; top: 25px;}
div.navi.small a.navi-link-statistics{height: 80px; top: 105px;}
div.navi.small a.navi-link-gear{height: 78px; top: 185px;}
div.navi.small a.navi-link-faq{height: 70px; top: 265px;}

div.navi:not(.small):hover a{width: 26.0vw;}

/* ======================================================= About this tour */

div#about-buttons{
  position: absolute;
  top: 22vw;
  right: 6vw;
  height: 12.5vw;
  width: 22vw;
  line-height: normal;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
}
div#about-buttons div{
  visibility: visible;
}

div#about-buttons p {
  position: absolute;
  top: 0.5vw;
  left: 0.5vw;
  font-family: var(--SeitentitelFont);
  font-size: 2.35vw;
}

div#about-buttons a{
  position: absolute;
  width: 18vw;
  height: 2.5vw;
  left: 0.25vw;
  z-index: 5000;
}
a#navi-link-article-1{top: 3.5vw;}
a#navi-link-article-2{top: 6.5vw;}
div#about-buttons a.navi-link-faq{top: 9.5vw;}

div#about-buttons div.navi-icon{width: 2.5vw; height: 2.5vw;}
div#navi-icon-article-1{top: 3.5vw;}
div#navi-icon-article-2{top: 6.5vw;}
div#about-buttons div.navi-icon-faq{top: 9.5vw;}
a#navi-link-article-1:hover ~ div#navi-icon-article-1{background-image: url('../../graphics/navigation/page-icons/ArtIconRot.svg');}
a#navi-link-article-2:hover ~ div#navi-icon-article-2{background-image: url('../../graphics/navigation/page-icons/ArtIconRot.svg');}

div#about-buttons div.navi-text{left: 3.2vw;}
div#navi-text-article-1{top: 3.8vw;}
div#navi-text-article-2{top: 6.8vw;}
div#about-buttons div.navi-text-faq{top: 10.2vw;}
div#about-buttons div.navi-text{
  font-size: 0.75vw;
  color: #888;
  font-family: var(--NonSerifFont);
  line-height: 1;
}
a#navi-link-article-1:hover ~ div#navi-text-article-1 span{text-decoration: underline;}
a#navi-link-article-2:hover ~ div#navi-text-article-2 span{text-decoration: underline;}
div#about-buttons a.navi-link-faq:hover ~ div.navi-text-faq span{text-decoration: underline;}
div#about-buttons div.navi-text span{
  font-size: 1.25vw;
  color: var(--TourColor);
  text-shadow: none;
  font-style: normal;
}

/*===================================================== */
/* Ein- und Ausschalten der Elemente                    */
/*===================================================== */

/* Etappennamenschriftgröße in Abhängigkeit der Viewpointbreite  */
@media only screen and (max-width: 1200px) {
	div.map-title{
		font-size: 15pt;
		box-shadow: 0px 0px 4px 4px rgb(255, 255, 255, 0.8);
		margin-top: 10px;
		margin-left: 10px;
	}
	div.map-wrapper.collapsed{height: 40px !important; cursor: pointer;}
}
@media only screen and (min-width: 1201px) {
	div.map-title{
		font-size: 25pt;
		box-shadow: 0px 0px 5px 8px rgb(255, 255, 255, 0.8);
		margin-top: 20px;
		margin-left: 20px;
	}
	div.map-wrapper.collapsed{height: 75px !important; cursor: pointer;}
}

div.collapse-cover.collapsed{display: block;}
div.map-wrapper.collapsed:hover div.collapse-cover.collapsed{opacity: 0;}

/* ======================================================= Nach Viewportbreite */

/* Ein-/ausblenden in Abhängigkeit der Viewpointbreite */
@media only screen and (max-width: 700px) {
	div.navi:not(.small){display: none;}
}
@media only screen and (min-width: 701px) {
	div.navi.small{display: none;}
}
@media only screen and (max-width: 1300px) {
	div.map-button-route-coloring{display: none;}
	div.route-coloring-panel{display: none;}
}