@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.faktenCont {
margin-top: 1rem;
margin-bottom: 1rem;
}
.faktenCont > span {
display: inline-block;
margin-bottom: 0.6rem;
padding: 0 0.5rem;
}
.faktenCont .fa-arrow-up {
transform: rotate(45deg);
}
.faktenCont .fa-arrow-down {
transform: rotate(-45deg);
}
.tourArticle > .imgPanoThumbWrapper {
position: relative;
margin-bottom: 20px;
}
#tourSummary > figure {
max-width: 300px;
display: inline-block;
vertical-align: top;
margin: 10px 0;
}
@media (min-width: 769px) {
#tourSummary > figure {
margin: 10px 15px;
}
}
#tourSummary > figure img {
width: 100%;
height: auto;
}
#tourSummary > figure + a,
.tourRatingSummaryText + a {
display: block;
font-size: 0.9rem;
font-weight: bold;
padding: 0.7em 0;
}
.tourRatingSummaryText + a {
font-weight: normal; 
}
.mapLegendWrap,
.tourSectionHead {
padding: 0.6em;
}
#tourSummary > .gridContainer {
margin-bottom: 20px;
}
#tourSummary > .gridContainer > * {
margin-left: -1px; 
margin-bottom: -1px; 
background-color: #e6eefa;
}
#tourSummary > .gridContainer > * > h3 {
padding: 0.6em;
}
#tourSummary > .gridContainer > * > p {
margin-left: 3%;
margin-right: 3%;
}
@media (min-width: 769px) {
#tourSummary > .gridContainer {
display: grid;
grid-template-columns: 60% 40%;
}
#tourSummary > .gridContainer > .lawinengefahr,
#tourSummary > .gridContainer > .wissenswertes, 
#tourSummary > .gridContainer > .anforderungen {
grid-column-start: 1;
grid-column-end: 3;
}
#tourSummary > .gridContainer > .lawinengefahr > p,
#tourSummary > .gridContainer > .wissenswertes > p, 
#tourSummary > .gridContainer > .anforderungen > p {
column-count: 2;
column-gap: 5%;
column-rule: 1px solid rgba(0, 0, 0, 0.2);
}
}
#tourDetails h2, 
#tourDetails h3 {
font-size: 1.2rem;
font-weight: bold;
line-height: 1.3;
}
#tourDetails h3 {
text-align: left;
}
#tourDetails h3 + p {
margin-top: 0; 
}
#tourDetails a + p {
margin-top: 3px; 
}
#tourDetails figure {
display: inline-block;
}
#tourDetails figure + h2,
#tourDetails figure + h3 { 
margin-top: 1rem;
}
#tourDetails .imgStandardThumbWrapper {
display: block;
position: relative;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 601px) {
#tourDetails .imgStandardThumbWrapper:nth-of-type(odd) {
float: left;
margin-right: 30px;
margin-bottom: 10px;
}
#tourDetails .imgStandardThumbWrapper:nth-of-type(even) {
float: right;
margin-left: 30px;
margin-bottom: 10px;
}
#tourDetails h2,
.tourSectionHead {
clear: both;
}
}
#tourRatingDetails {
max-width: 600px;
padding: 0.5rem;
margin: 0 auto;
}
#tourRatingDetails .skgText {
font-size: 0.85rem;
margin: 0; 
margin-bottom: 0.2em;
}
#tourRatingDetails .bergnameStd {
font-size: 1.2rem;
}
#tourRatingDetails .route {
font-size: 1rem;
font-weight: normal;
}
#tourRatingDetails .autor {
margin: 0 0 10px 0; 
font-size: 0.8rem;
}
.tourRatingItemCont {
display: flex;
margin: 0 auto 0.5rem auto;
width: max-content;
}
#tourRatingItemBlock .tourRatingItemCont:nth-child(5) {
margin-top: 1rem;
}
#tourRatingItemBlock .tourRatingItemCont:nth-child(5) .tourRatingItemText {
font-weight: bold;
}
.tourRatingItemText {
width: 120px;
text-align: left;
font-size: 1rem;
}
.tourRatingStarsCont > i {
color: #aaa;
}
.tourRatingStarsCont > i.fullStar {
color: rgb(255,140,0);
}
.tourRatingRateCont {
font-size: 1.4rem;
font-weight: bold;
letter-spacing: -0.03em;
}
.tourRatingRate {
font-size: 0.6em;
font-weight: normal;
vertical-align: middle;
}
.tourRatingSummaryText {
font-size: 0.9rem;
line-height: 1.5;
text-align: left;
padding-left: 5%;
padding-right: 5%;
}
@media (min-width: 769px) {
#tourRatingDetails .autor {
margin: 0 0 10px 0; 
}
.tourRatingRateCont {
font-size: 1.8rem;
}
}
#tourSummary > figure + a,
.tourSectionHead, 
#tourRatingDetails {
margin-bottom: 10px;
}
.graph {
font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
display: block;
margin: 0 auto 1em auto;
max-width: 100%;
height: auto;
overflow: visible;
}
.distance text,
.elevation text {
font-size: 1rem;
text-anchor: middle;
}
.distance text {
fill: #0a8810;
dominant-baseline: hanging;
}
.elevation text, 
.elevation line {
opacity: 0.35;
}
.elevation text {
dominant-baseline: middle;
}
.elevationProfileStroke,
.elevationProfile,
.distance line,
.elevation line {
vector-effect: non-scaling-stroke;
}
.elevationProfileStroke,
.elevationProfile,
.distance line {
stroke: #0a8810;
}
.elevation line {
stroke: #000;
}
.elevationProfileStroke  {
stroke: #f61516;
fill: transparent;
}
.distance line,
.elevation line {
stroke-width: .35;
}
.elevationProfile,
.distance line.mainLine,
.elevation line.mainLine {
stroke-width: .5;
}
.elevationProfileStroke {
stroke-width: 1.2;
}
@media (min-width: 769px) {
.elevationProfileStroke {
stroke-width: 1.5;
}
}
#elevationProfileGradientSummer .grassGreen {
stop-color: #66d46b;
}
#elevationProfileGradientWinter .rockGrey,
#elevationProfileGradientSummer .rockGrey {
stop-color: #ccc;
}
#elevationProfileGradientWinter .snowWhite {
stop-color: #fff;
}
.elevationProfile.summer {
fill: url(#elevationProfileGradientSummer);
}
.elevationProfile.winter {
fill: url(#elevationProfileGradientWinter);
}
.elevationProfileNegative {
fill: #fff;
}
.pointOfInterest text {
font-size: 1rem;
font-weight: 600;
text-anchor: middle;
fill: #000;
}
.pointOfInterest text tspan.height {
font-size: 0.8em;
font-weight: normal;
}
.pointOfInterest line {
stroke: #444;
stroke-dasharray: 3,5;
stroke-width: 1.2;
vector-effect: non-scaling-stroke;
}
.graph text.alignRight {
text-anchor: end;
}
.graph text.alignLeft {
text-anchor: start;
}
a.lbImgWrap {
display: inline-block;
position: relative; 
width: 300px;
height: 200px;
margin: 0.5em 0;
background-color: #a0a0a0;
}
a.lbImgWrap img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
#anker-wissenswertes,
#anker-StartBilder {
top: -3.5em;
}
#anker-StartBilder + p {
text-align: center;
margin: 0;
font-size: 0.9rem;
}
#anker-StartBilder + p::before {
content: "\005B" " ";
}
#anker-StartBilder + p::after {
content: " " "\005D";
}
@media (min-width: 401px) {
a.lbImgWrap {
margin: 0.5em;
}
}
@media (min-width: 769px) {
a.lbImgWrap {
width: 270px;
height: 180px;
}
}
#singleLightboxCloseButton,
.expandIconWrapper {
color: #fff;
position: absolute;
top: 0;
right: 0;
transform: translate(20%, -20%);
cursor: pointer;
width: 2.2rem;
height: 2.2rem;
border: 2px solid #fff;
border-radius: 50%;
background-color: #0a3157;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.imgPanoThumbWrapper.cursor,
.imgStandardThumbWrapper.cursor {
cursor: pointer;
}
#singleLightboxCloseButton {
z-index: 1002;
width: 3rem;
height: 3rem;
font-size: 1.5rem;
}
#singleLightbox {
display: none; 
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1001;
padding: 20px;
}
#singleLightbox.show {
display: flex;
}
#singleLightbox.hide {
display: none;
}
#singleLightbox.fadeIn {
animation: fadeIn 0.6s forwards;
}
#singleLightbox.fadeOut {
animation: fadeOut 0.6s forwards; 
}
#singleLightbox figure {
position: relative;
margin: auto auto auto auto;
opacity: 0;
}
#singleLightbox figure.fadeIn {
animation: fadeIn 1.4s 0.3s forwards;
}
#singleLightbox figure img{
width: 100%;
}
#singleLightbox figcaption {
font-size: 1rem;
padding: 0.5rem 0.8rem;
}
#mapCont {
position: relative;  
z-index: 1; 
margin: 0 auto;
}
#mapWrapper {
height: 400px;
}
#map { 
width: 100%;
height: 100%;
}
@media (min-width: 769px) {
#mapWrapper {
height: 600px;
}
}
.mapLegendWrap {
font-size: 0.8rem;
line-height: 1.3;
}
.mapLegend,
.mapCopyright {
padding: 0.2em;
}
@media (min-width: 769px) {
.mapLegend,
.mapCopyright {
float: left;
width: 50%;
}
}
.mapCopyright {
text-align: right;
}
.mapCopyright a {
text-decoration: underline;
}
.mapCopyright a:hover {
text-decoration: none;
color: #f0f0f0; 
}
.mapLegend {
text-align: left;
}
.mapLegend span {
display: inline-block;
border: 4px solid rgb(0,168,204);
background-color: #fff;
color: rgb(0,168,204);
font-weight: bold;
border-radius: 50%;
width: 1.6rem;
height: 1.6rem;
text-align: center;
vertical-align: top;
}
.mapLegend span:last-child {
border-color: rgb(128,128,128);
color: rgb(128,128,128);
}
#downloadForm #touWrapper .labelCheckbox {
font-weight: bold;
padding: 0.5rem 0.3em;
line-height: 1.5;
color: red;
}
p > span.hinweis {
color: blue;
}
@media print {
html {
font-size: 80%;
}
.tourArticle > .bergnameStd {
font-size: 2.2rem;
}
.backToTop,
.imgPanoThumbWrapper,
details#directory,
#tourSummary figure, 
#tourDetails figure, 
#tourRating, 
#tourReferral,  
#tourSummary > figure + a {
display: none !important;
}
.tourArticle:before {
content: "--- alpine-bergtouren.de ---";
display: block;
color: blue;
margin-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
}
#tourSummary table, 
#tourSummary .gridContainer {
page-break-inside: avoid; 
}
#tourSummary .gridContainer h3,
.tourSectionHead {
background-color: transparent;
color: #000;
}
}