@charset "UTF-8";

div {position: relative; float: left; padding: 0px; margin: 0px;}

/*****************************************************
Rubrik OVERVIEW
******************************************************/
div.ov-content {position: relative;float: left;display: flex;flex-wrap: wrap;justify-content: center;padding: 0px;width: 100%;max-width: var(--width);}
div.ov {width: 100%; z-index: 3;}

div.ov-header {text-align: center; margin-top: 30px; width: 100%; max-width: var(--width); font-size: 60px; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 500; color: black; z-index: 2; animation: einblenden 1s; background: rgba(254, 252, 245, 0.9);}
@media(max-width:400px) {div.ov-header {font-size: 40px;}}

ul.ov {width: 100%; max-width: var(--width); background-color: var(--col-blue); background-size: cover;} 

li.ov-new {width: calc((100% - 120px) / 4); aspect-ratio: 1 / 1; height: auto;}
div.ov-new {margin: 2%; padding-top: 35%; height: calc(65% - 4%); width: calc(100% - 4%); text-align: center; color: var(--col-blue); background-color: var(--col-dis); font-size: 1.5em; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 500;}
div.ov-new:hover {background-color: var(--col-grey); color: var(--col-li);}

/* Overview Komoot für Touren */
ul.ov-komoot {width: 100%; max-width: var(--width); background-color: white; background-size: cover;}
li.ov-komoot-new {width: calc(100% - 3%); height: auto; border-top: 1px solid var(--col-dis); background-color: white; padding: 15px 0px; margin: 0px 1.5%;}
@media(max-width:400px) {li.ov-komoot-new {margin: 5px; width: calc(100% - 10px); aspect-ratio: auto;}}

div.ov-komoot-new {margin: 0px; padding: 1%; width: calc(100% - 2%); text-align: center; color: var(--col-blue); background-color: var(--col-dis); font-size: 1.5em; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 500;}
@media(max-width:400px) {div.ov-komoot-new {width: calc(100% - 10px); padding: 5px; margin: 0px;}}

li.ov-komoot {width: calc(100% - 3%); height: auto; border-top: 1px solid var(--col-dis); background-color: white; padding: 15px 0px; margin: 0px 1.5%;}
@media(max-width:400px) {li.ov-komoot {margin:0px; padding:10px; width:calc(100% - 20px);}}

div.ov-komoot-bild {width: 10%;}
@media(max-width:400px) {div.ov-komoot-bild {width:80px;}}

div.ov-komoot-bild img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center;}
div.ov-komoot-infos {width: calc(50% - 2%); padding: 0px 1%;}
@media(max-width:400px) {div.ov-komoot-infos {width:calc(100% - 100px);padding:0px 10px;height:87px;}}

div.ov-komoot-infos img {width: 18px; padding-right: 5%;}
@media(max-width:400px) {div.ov-komoot-infos img {width:15px;padding-right:3px;}}

div.ov-komoot-title {width: 100%; font-size: 20px; font-family: 'Oswald', sans-serif; font-weight: 500; color: black; text-align: left; height: 50px; max-height: 50px; text-overflow: ellipsis; overflow: hidden; line-height: 1.1;}
@media(max-width:400px) {div.ov-komoot-title {font-size:18px;padding-bottom:3px;line-height:1.1;text-overflow:ellipsis;overflow:hidden;max-height:40px;}}

div.ov-komoot-dauer {width: auto; padding-right: 5%; color: var(--col-lbl); font-size: 0.8rem; white-space: nowrap; overflow: hidden;}
@media(max-width:400px) {div.ov-komoot-dauer {width:60px;font-size:12px;padding:0px;padding-bottom:3px;}}

div.ov-komoot-km {width: auto; padding-right: 5%; color: var(--col-lbl); font-size: 0.8rem; white-space: nowrap; overflow: hidden;}
@media(max-width:400px) {div.ov-komoot-km {width:80px;font-size:12px;padding:0px;padding-bottom:3px;}}

div.ov-komoot-hm {width: auto; padding-right: 2%; color: var(--col-lbl); font-size: 0.8rem; white-space: nowrap; overflow: hidden;}
@media(max-width:400px) {div.ov-komoot-hm {width:80px;font-size:12px;padding:0px;padding-bottom:3px;}}

div.ov-komoot-date {width: 100%; padding-top: 3px; color: var(--col-lbl); font-size: 0.8rem; white-space: nowrap; overflow: hidden;}
@media(max-width:400px) {div.ov-komoot-date {width:200px;font-size:12px;padding:0px;padding-bottom:3px;}}

div.ov-komoot-tg {width: calc(20% - 2% - 2px); padding: 0px 1%; height: 100px; border-left: 1px solid var(--col-dis); border-right: 1px solid var(--col-dis);}
@media(max-width:400px) {div.ov-komoot-tg {width: calc(50% - 11px);padding: 0px 5px;border-left: 0px solid var(--col-dis);}}  

div.ov-komoot-tg-pic {width: 40px;}
div.ov-komoot-tg-pic img {width: 100%; border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; border: 3px solid white; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);}
div.ov-komoot-tg-date {width: calc(100% - 60px); padding-left: 20px; padding-top: 5px; font-size: 12px; color: var(--col-lbl);}
div.ov-komoot-tg-title {width: 100%; font-size: 14px; padding-bottom: 5px; font-family: 'Oswald', sans-serif; font-weight: 400; color: black; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left;}
div.ov-komoot-tg-kat {width: 100%; padding-top: 5px; font-size: 12px; color: var(--col-lbl); text-align: center;}

div.ov-komoot-hy {width: calc(20% - 2%); padding: 0px 1%; height: 100px;}
@media(max-width:400px) {div.ov-komoot-hy {width: calc(50% - 10px);padding: 0px 0px 0px 10px;}}

div.ov-komoot-hy-pic {width: 40px;}
div.ov-komoot-hy-pic img {width: 100%; border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; border: 3px solid white; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);}
div.ov-komoot-hy-title {width: 100%; font-size: 14px; padding-bottom: 5px; font-family: 'Oswald', sans-serif; font-weight: 400; color: black; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left;}
div.ov-komoot-hy-date {width: calc(100% - 60px); padding-left: 20px; padding-top: 5px; font-size: 12px; color: var(--col-lbl);}







li.ov {
  width:                calc((100% - 120px) / 4);
  height:               auto;
}
@media(max-width:400px) {li.ov {margin: 10px;width:calc(100% - 20px);}}

div.ov-bild {
  width:                100%;
}
div.ov-bild img {
  width:                100%;
  aspect-ratio:         2 / 1;
  object-fit:           cover;
  object-position:      top center;
}
div.ov-bild img.van {
  width:                100%;
  aspect-ratio:         4 / 3;
  object-fit:           cover;
  object-position:      top center;
}
div.ov-bild img.tour {
  width:                100%;
  aspect-ratio:         16 / 9;
  object-fit:           cover;
  object-position:      top center;
}
div.ov-title {
  width:                calc(100% - 20px);
  padding:              5px 10px 0px 10px;
  font-size:            22px;
  font-family:          'Oswald', sans-serif;
  text-transform:       uppercase;
  font-weight:          500;
  color:                black;
  text-align:           center;
  max-height:           70px;
  overflow:             hidden;
  text-overflow:        ellipsis;
  line-height:          1.1;
  height:               50px;
}
div.ov-date {
  width:                calc(100% - 20px);
  padding:              5px 10px 5px 10px;
  font-size:            14px;
  font-weight:          400;
  color:                black;
  text-align:           center;
}
div.ov-text {
  width:                calc(100% - 20px);
  padding:              5px 0px;
  margin:               0px 10px;
  font-size:            14px;
  font-weight:          300;
  border-top:           1px solid #a0a0a0;
  height:               80px;
  max-height:           80px;
  overflow:             hidden;
  text-overflow:        ellipsis;
}
@media(max-width:400px) {div.ov-text {font-size: 16px;height: auto;text-align:justify;hyphens:auto;}}
div.ov-preis {
  width:                calc(100% - 20px);
  padding:              5px 0px;
  margin:               0px 10px;
  font-size:            12px;
  font-weight:          300;
  text-align:           center;
  border-bottom:        1px solid #a0a0a0;
  height:               20px;
  max-height:           20px;
  overflow:             hidden;
  text-overflow:        ellipsis;
}
@media(max-width:400px) {div.ov-preis {font-size: 14px;height: auto;text-align:justify;hyphens:auto;}}

div.ov-cat {
  width:                100%;
  padding:              5px 0px 5px 0px;
  margin:               0px;
  height:               40px;
  font-size:            14px;
  font-weight:          400;
  color:                var(--col-blue);
  text-align:           center;
  font-family:          'Oswald', sans-serif;
  text-overflow:        ellipsis;
  overflow:             hidden;
}
@media(max-width:400px) {div.ov-cat {font-size: 16px;}}

div.ov-targets {
  width:                calc(100% - 20px);
  padding:              5px 0px;
  margin:               0px 10px;
  font-size:            14px;
  font-weight:          300;
  border-top:           1px solid #a0a0a0;
  height:               225px;
}
@media(max-width:400px) {div.ov-targets {height: auto;}}

.ov-targets-row {
    width:                100%;
  }
.ov-targets-bild {
  width:               45px;
}
.ov-targets-bild img {
  width:               100%;
  border-radius:        50%;
  aspect-ratio:         1 / 1;
  object-fit:           cover;
  object-position:      center center;
  border:               3px solid white;
  box-shadow:           0px 2px 5px 0px rgba(0,0,0,0.5);
}
.ov-targets-text {
  width:                calc(100% - 20px - 45px);
  padding:              5px 0px 0px 20px;
}
.ov-targets-text-title {
  width:                100%;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  overflow:             hidden;
}
@media(max-width:400px) {.ov-targets-text-title {font-size: 16px;}}

.ov-targets-text-cat {
  width:                100%;
  color:                var(--col-lbl);
  text-overflow:        ellipsis;
  white-space:          nowrap;
  overflow:             hidden;
}



/*****************************************************
Rubrik VIEW
******************************************************/
div.content-view {position: relative; float: left; display: flex; flex-wrap: wrap; justify-content: center; padding: 0px; width: 100%; max-width: var(--width);}
ul.view {width: 100%; max-width: var(--width); background-color: transparent; background-size: cover;}
li.view {width: 100%; height: auto; background-color: transparent; margin: 0px; padding: 0px; margin: 10px 0px;}

.view-hy-row        {position: relative; float: left; width:100%;padding: 0px;margin: 0px; height: 80px;}
.view-hy-cell       {position: relative; float: left; width:275px;height:58px;padding: 10px 10px 5px 10px;margin: 0px 0px 0px 0px;background-color: var(--col-blau3);}
.view-hy-cell-blank {position: relative; float: left; width:275px;height:58px;padding: 10px 10px 5px 10px;margin: 0px 0px 0px 0px;background-color: transparent;}
.view-hy-bild       {position: relative; float: left; width:calc(100px);padding-right:20px;}
.view-hy-bild img   {width: calc(100% - 10px); border-radius: 5%; aspect-ratio: 4 / 2; object-fit: cover; object-position: top center; border: 3px solid white; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);}
.view-hy-title      {position: relative; float: left; width:155px;font-size: 20px;font-family: 'Oswald', sans-serif; font-weight: 500; color: white; text-align: left; line-height: 1.2; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.view-hy-date       {position: relative; float: left; width:155px;padding-top: 3px; color: whitesmoke; font-size: 0.8rem; white-space: nowrap; overflow: hidden;} 

.view-hy-sub        {position: relative; float: left; width:35px;height:80px;padding: 0px;margin: 0px;}
.view-hy-sub img    {width:35px;height:80px;}



.view-tg-cell       {position: relative; float: left; width:380px;height:58px;padding: 10px 10px 5px 10px;margin: 0px;background-color: var(--col-blau2);}
.view-tg-cell-blank {position: relative; float: left; width:380px;height:58px;padding: 10px 10px 5px 10px;margin: 0px;background-color: transparent;}
.view-tg-bild       {position: relative; float: left; width:calc(100px);padding-right:20px;}
.view-tg-bild img   {width: calc(100% - 10px); border-radius: 5%; aspect-ratio: 4 / 2; object-fit: scale-down; object-position: center center; border: 3px solid white; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);background-color:white;}
.view-tg-title      {position: relative; float: left; width:260px;font-size: 20px;font-family: 'Oswald', sans-serif; font-weight: 500; color: white; text-align: left; line-height: 1.2; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.view-tg-date       {position: relative; float: left; width:260px;padding-top: 3px; color: whitesmoke; font-size: 0.8rem; white-space: nowrap; overflow: hidden;} 

.view-tu-cell       {position: relative; float: left; width:400px;height:58px;padding: 10px 10px 5px 10px;margin: 0px;background-color: var(--col-blau1);}
.view-tu-cell-blank {position: relative; float: left; width:400px;height:58px;padding: 10px 10px 5px 10px;margin: 0px;background-color: transparent;}
.view-tu-bild       {position: relative; float: left; width:calc(50px);padding-right:20px;}
.view-tu-bild img   {width: calc(100% - 10px); border-radius: 5%; aspect-ratio: 1; object-fit: scale-down; object-position: center center; border: 3px solid white; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);background-color:white;}
.view-tu-title      {position: relative; float: left; width:330px;font-size: 20px;font-family: 'Oswald', sans-serif; font-weight: 500; color: white; text-align: left; line-height: 1.2; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.view-tu-date       {position: relative; float: left; width:330px;padding-top: 3px; color: whitesmoke; font-size: 0.8rem; white-space: nowrap; overflow: hidden;} 





@keyframes einblenden {
	0%   {transform: scale(50%); opacity: 0;}
	100% {transform: scale(100%); opacity: 1;}
}