@charset "UTF-8";

@font-face {
  font-family: 'font-glt';
  src: url('../fonts/aldo_pc.woff2') format('woff2'),
       url('../fonts/aldo_pc.woff')  format('woff');
}

:root { 
  --cassiopeia-color-primary: #860000;
  --cassiopeia-color-link: #950c0d;
  --link-color: #950c0d;
  --link-color-rgb: 149, 12, 12;
  --cassiopeia-color-hover: #a21413;
  --link-hover-color: #a21413;
  --link-hover-color-rgb: 162, 19, 19;
  --focus-ring-color: #86000040;

  --glt-color-light: #9acb52;
  --glt-color-dark: #860000;
  --glt-color-highlight: #ffea00;
  --glt-color-far: #4caf50;
  --glt-color-fir: #ffeb3b;
  --glt-color-glr: #f44336;
}

::selection {
  color: var(--gray-100);
  background-color: var(--glt-color-dark);
}

/************************/
/* || OVERRIDE TEMPLATE */
/************************/

body {
  background: var(--secondary-bg);
}

input {
  margin: 0;
}

.input-group {
  margin: 0.5em 0 1em;
}

.form-control:active,
.form-control:focus {
  box-shadow: 0 0 0 .25rem var(--focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--glt-color-dark);
  border-color: var(--glt-color-dark);
}

.form-check-input:active,
.form-check-input:focus {
  box-shadow: 0 0 0 .25rem var(--focus-ring-color);
}

.table>:not(caption)>*>* {
  padding: .5rem 1rem;
}
.table-group-divider {
  border-color: var(--border-color);
}

.container-header .grid-child {
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.back-to-top-link {
  box-shadow: var(--box-shadow);
  background-color: var(--glt-color-dark);
  color: var(--white);
  border-color: var(--border-color-translucent);
}

.back-to-top-link:hover,
.back-to-top-link:focus {
  border-color: var(--border-color-translucent);
}

.blog-item {
  min-width: 0;
  color: var(--body-color);
  word-wrap: break-word;
  background-color: var(--body-bg);
  border: var(--border-width) solid #dfe3e7;
  border-radius: var(--border-radius);
  background-clip: border-box;
  position: relative;
  box-shadow: var(--box-shadow-sm) !important;
}

.item-content {
  padding: 1rem;
  flex: auto;
}

/******************/
/* || Typographie */
/******************/

.display-1 {
  font-family: font-glt;
  color: var(--gray-100);
  text-shadow: 0.1rem 0.1rem 0.8rem rgba(0,0,0,0.6);
  line-height: 120px;
  font-size: clamp(3.5rem,10vw,5rem);
}

/*****************/
/* || Navigation */
/*****************/

.navbar {
  font-family: font-glt;
  --navbar-toggler-font-size: 1.5rem;
  --navbar-toggler-padding-y: .5rem;
  --navbar-toggler-focus-width: .1rem;
}

.menu-horizontal {
  justify-content: space-around;
}

.menu-social {
  justify-content: right;
}
.menu-social li {
  padding: 0 !important;
}

.menu-sub {
  justify-content: left;
}

.metismenu.mod-menu .metismenu-item {
  font-size: 1.4rem;
}

.navbar-collapse .metismenu.mod-menu .metismenu-item {
  margin: .25em 0;
}

.metismenu.mod-menu .metismenu-item>a {
  color: var(--body-color);
}

.metismenu.mod-menu .metismenu-item.active>a,
.metismenu.mod-menu .metismenu-item>a:hover {
  text-decoration: none;
}

.metismenu.mod-menu .metismenu-item.active,
.metismenu.mod-menu .metismenu-item.active>a,
.metismenu.mod-menu .metismenu-item:hover,
.metismenu.mod-menu .metismenu-item:hover>a {
  color: var(--gray-100);
  background: var(--glt-color-dark);
  border-radius: var(--border-radius);
}

.metismenu.mod-menu .metismenu-item .social-menu {
  font-size: 1.1rem;
}

.metismenu.mod-menu.menu-footer .metismenu-item {
  padding: .5em;
  font-size: .9rem;
}

.metismenu.mod-menu.menu-footer .metismenu-item,
.metismenu.mod-menu.menu-footer .metismenu-item>a {
  color: var(--tertiary-color);
}

.metismenu.mod-menu.menu-footer .metismenu-item.active,
.metismenu.mod-menu.menu-footer .metismenu-item.active>a,
.metismenu.mod-menu.menu-footer .metismenu-item:hover,
.metismenu.mod-menu.menu-footer .metismenu-item:hover>a {
  text-decoration: none;
  background: none;
  color: var(--body-color);
  border: none;
}

.metismenu.mod-menu.menu-horizontal.menu-footer {
  flex-direction: row;
  flex: 1;
  display: flex;
}

.metismenu.mod-menu.menu-horizontal.menu-footer.menu-social{
  flex-grow: inherit;
}

@media (width >= 768px) {
  .metismenu.mod-menu.menu-horizontal.glt-menu-track {
    display: flex;
    flex-direction: row;
  }
  
  .navbar .metismenu.mod-menu.menu-horizontal {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex;
    flex-basis: auto;
  }
  .navbar-collapse .metismenu.mod-menu .metismenu-item {
    margin: 0;
  }
}

@media (width <= 767.98px) {
  .metismenu.mod-menu.menu-horizontal.glt-menu-track {
    display: flex;
    flex: auto;
    flex-direction: row;
    margin: 1em .5em;
    height: fit-content;
  }
}

/* Navigation Mobile */

.container-top-mob {
  position: relative;
  grid-area: top-a;
  flex-direction: column-reverse;
}

.navbar-toggler {
  margin: .5em 1em;
}

/* TRACKMENU */

.metismenu.mod-menu.glt-menu-track .metismenu-item {
  flex-grow: 1;
  margin: 0 .5em;
  padding: 0;
  border: 1px solid var(--border-color-translucent);
  border-radius: var(--border-radius-lg);
  justify-content: center;
  font-weight: 500;
  box-shadow: 0.1rem 0.1rem 0.8rem rgba(0,0,0,0.25);
  transition: all 0.15s ease-in-out;
}

.metismenu.mod-menu.glt-menu-track .metismenu-item>a {
  display: flex;
  height: 100%;
  padding: .5em 1em;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.metismenu.mod-menu.glt-menu-track .metismenu-item:hover {
  box-shadow: 0.1rem 0.1rem 1rem rgba(0,0,0,0.4);
  transform: scale(1.01);
}

.metismenu.mod-menu.glt-menu-track .metismenu-item.active>a,
.metismenu.mod-menu.glt-menu-track .metismenu-item:hover>a {
  text-decoration: none;
  background: none;
  color: var(--body-color);
  border: none;
}

/* Familienrunde */
.metismenu.mod-menu.glt-menu-track li:nth-child(1) {
  background-color: var(--glt-color-far);
}
.metismenu.mod-menu.glt-menu-track li:nth-child(1)>a {
  color: color-mix(in oklab, var(--glt-color-far) 25%, var(--body-color));
}

/* Fitnessrunde */
.metismenu.mod-menu.glt-menu-track li:nth-child(2) {
  background-color: var(--glt-color-fir);
}
.metismenu.mod-menu.glt-menu-track li:nth-child(2)>a {
  color: color-mix(in oklab, var(--glt-color-fir) 25%, var(--body-color));
}

/* Grenzlandrunde */
.metismenu.mod-menu.glt-menu-track li:nth-child(3) {
  background-color: var(--glt-color-glr);
}
.metismenu.mod-menu.glt-menu-track li:nth-child(3)>a {
  color: color-mix(in oklab, var(--glt-color-glr) 25%, var(--body-color));
}

/* Überschrift */
.track-info h5 {
  padding: var(--card-title-spacer-y);
  border: 1px solid var(--border-color-translucent);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-sm);
}

.track-far h5 {
  background-color: var(--glt-color-far);
  color: color-mix(in oklab, var(--glt-color-far) 20%, var(--body-color));
}

.track-fir h5 {
  background-color: var(--glt-color-fir);
  color: color-mix(in oklab, var(--glt-color-fir) 20%, var(--body-color));
}

.track-glr h5 {
  background-color: var(--glt-color-glr);
  color: color-mix(in oklab, var(--glt-color-glr) 20%, var(--body-color));
}

/* Link */
.track-info a {
  color: var(--body-color);
  text-decoration: 1px underline dotted;
  text-underline-offset: .1rem;
  padding: .25rem;
}

.track-info a > i {
  color: var(--link-color);
}

.track-info a:hover {
  color: var(--gray-100);
  background: var(--link-color);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
}

.track-info a:hover > i {
  color: var(--gray-100);
}


/* GPX-Viewer */
div.JBcluster-icon > div {
  padding: 0 !important;
  height: 22px !important;
  color: #eaedf0;
  font-size: .7rem;
  font-weight: 200 !important;
}

#map_hp {
  padding: .5rem .5rem 0 0;
}

/*************/
/* || BANNER */
/*************/

@keyframes slide {
  from {transform: translateX(0);}
  to   {transform: translateX(-100%);}
}

.bannergroup {
  display: inline-flex;
  width: max-content;
  animation: 50s slide infinite linear;
}

.banner:hover .bannergroup{
  animation-play-state: paused;
}

.banneritem {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  margin: .5rem;
  padding: .8rem;
  background: var(--gray-100);
  border: 1px solid var(--border-color-translucent);
  border-radius: var(--border-radius);
}

.banneritem > a img {
  max-height: 4rem;
}

.banner {
  overflow: hidden;
  white-space: nowrap;
}

.banner::before,
.banner::after {
  background: linear-gradient(to right, #fff 0%, var(--gray-100) 5%, #fff0 100%);
  content:"";
  height: 100%;
  width: 4rem;
  z-index: 10;
  position: absolute;
}

.banner::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}


/*************/
/* || HEADER */
/*************/

.container-header {
  height: 120px;
  background: var(--glt-color-light) url(../images/bg_glt.png) no-repeat;
  border-bottom: 0.2rem solid var(--gray-100);
  display: flex;
  margin-bottom: 2em;
}
.container-header p {
  padding: 0;
  margin: 0;
}

.glt-container {
  filter: drop-shadow(.2em 0 0.1rem rgba(0,0,0,.4));
}

.glt-header-date {
  flex: initial;
  height: calc(120px - 0.2rem);
  width: 10em;
  clip-path: polygon(0% 0, 85% 0%, 100% 100%, 0 100%);
  background: var(--glt-color-dark);
  color: var(--glt-color-highlight);
  font-size: 1.6rem;
  padding-left: 1em;
}
.glt-header-date span {
  display: table-cell;
  height: calc(120px - 0.2rem);
  vertical-align: middle;
}
.glt-header-date p {
  margin-bottom: 0.2rem;
}
.glt-header-date-wrap {
  filter: drop-shadow(.6em 0 0 rgba(0,0,0,.4));
}

.glt-header-site {
  flex: auto;
  text-align: center;
}

.glt-header-brand {
  flex: initial;
  height: 140px;
  width: 360px;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 0% 100%);
  border-radius: 0 0 0 4px;
  background: #fff url(../images/logo_glt.png) no-repeat;
  background-size: 140px;
  background-position-x: 40px;
}
.brand-lg {
  width: 200px;
  clip-path: polygon(15% 0, 100% 0, 100% 95%, 0% 100%);
}
.glt-header-brand-wrap {
  filter: drop-shadow(-.125rem .125rem .25rem rgba(0,0,0,.25));
}

.container-social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-left: 190px;
  padding: 1em .5em 0 0;
}

.search label {
  display: none;
}

.search {
  margin-bottom: .5em;
}

.social-buttons {
  display: flex;
  justify-content: flex-end;
  height: 50px;
}
.social-facebook a::before{
  content: '\F344';
}


/***********/
/* || TABS */
/***********/

.glt-stat {
  padding: 1rem;
}
.glt-stat i:first-child {
  color: var(--green);
}

.tabbed figure { 
  display: block; 
  margin-left: 0; 
  clear: both;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure > div {
  padding: 1.5rem 0;
  width: 100%;
}

.tabbed nav {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.tabbed nav label {
  display: flex;
  flex: 1;
  justify-content: center;
  border-bottom: 3px solid transparent;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 3rem;
}

#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3 { display: block; }

nav label:hover {
  border-color: var(--glt-color-dark);
  color: var(--glt-color-dark);
  cursor: pointer;
}
nav label:active {
  border-color: var(--glt-color-dark);
  color: var(--glt-color-dark);
}

.tab-far:hover,
.tab-fir:hover,
.tab-glr:hover {
  background-color: var(--light);
}

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"] {
  position: relative;
  border-color: var(--glt-color-dark);
  color: var(--glt-color-dark);
}

#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: -3px;
}


/*************/
/* || FOOTER */
/*************/

.footer {
  color: var(--tertiary-color);
  background-color: var(--tertiary-bg);
  background-image: none;
  border-top: 1px solid var(--border-color-translucent);
  box-shadow: 0 -.25rem 1rem #00000013;
}

.footer div:nth-child(2) {
  padding-top: 0;
}

.footer .grid-child {
  padding: .5rem;
}

.footer .glt-copyright {
  width: 100%;
  padding: 1em;
  border-top: 1px solid var(--border-color);
  text-align: right;
}

@media (width <= 991.98px) {
  .footer .grid-child {
    flex-direction: row;
  }
}

/*****************/
/* || Datatables */
/*****************/

input.dt-input {
  width: calc(100% - 1rem);
  color: var(--body-color);
  border: var(--border-width) solid #ced4da;
  border-radius: var(--border-radius);
  background-clip: padding-box;
  padding: .6rem 1rem;
  margin: .5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
}

input.dt-input:active,
input.dt-input:focus {
  color: var(--body-color);
  background-color: var(--body-bg);
  border-color: #8893aa;
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--focus-ring-color);
}

.dt-length {
  float: left;
  font-size: .9rem;
  line-height: 1.5rem;
}

.dt-length select {
  color: var(--body-color);
  background-color: var(--body-bg);
  border: var(--border-width) solid #ced4da;
  border-radius: var(--border-radius);
  background-clip: padding-box;
  padding: .25rem;
  margin: 0 .5rem;
}

.dt-length select:active,
.dt-length select:focus {
  border-color: #8893aa;
  outline: 0;
}

.dt-info {
  float: right;
  font-size: .9rem;
  line-height: 1.5rem;
  margin-right: .5rem;
}

.dt-paging {
  float: right;
  font-size: .9rem;
  line-height: 1.5rem;
}

.dt-paging>nav {
  border: none;
}

.dt-paging button {
  background: none;
  border: none;
  line-height: 1.5rem;
  margin: 0 .25rem;
  padding: 0 .5rem;
  font-size: 1.2rem;
}

.dt-paging button:hover {
  font-weight: 600;
  transform: scale(1.2);
}

button.dt-paging-button.first,
button.dt-paging-button.last {
  display: none;
}

/**************/
/* || Gallery */
/**************/

.gal span {
  font-size: 1.2rem;
  font-weight: 500;
}

.gal .card:hover {
  box-shadow: var(--box-shadow) !important;
  border-color: var(--border-color-translucent);
}

.gal .card:hover>.gal-img img {
  transform: scale(1.02);
} 

.gal-img {
  display: flex;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.gal-img>img {
  align-self: center;
  transition: all 0.2s linear;
}

.gal-img-feature {
  max-height: 30rem;
}
.gal-img-md {
  max-height: 20rem;
}
.gal-img-sm {
  max-height: 15rem;
}

/****************************/
/* || Sponsoren - Tag Cloud */
/****************************/
ul.tagcloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding-left: 0;
  line-height: 2.5rem;
}

ul.tagcloud li {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  padding: .25rem .55rem;
  position: relative;
}

ul.tagcloud li[data-weight="1"] {--size: 1;}
ul.tagcloud li[data-weight="2"] {--size: 2;}
ul.tagcloud li[data-weight="3"] {--size: 3;}
ul.tagcloud li[data-weight="4"] {--size: 4;}
ul.tagcloud li[data-weight="5"] {--size: 5;}
ul.tagcloud li[data-weight="6"] {--size: 6;}
ul.tagcloud li[data-weight="7"] {--size: 7;}
ul.tagcloud li[data-weight="8"] {--size: 8;}
ul.tagcloud li[data-weight="9"] {--size: 9;}

ul.tagcloud li {
  --size: 4;
  font-size: calc(var(--size) * .25rem + .5rem);
  opacity: calc((15 - (9 - var(--size))) / 15);
  border-radius: var(--border-radius);
  transition: all .2s ease-in;
}

ul.tagcloud li:hover {
  opacity: 1;
  transform: scale(1.05);
  color: var(--light);
  background-color: var(--glt-color-dark);
}


/***************/
/* || TIMELINE */
/***************/

.tm_timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.tm_timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ff00ff;
  left: 20%;
  margin-left: -6px;
}

.tm_timeline > li {
  position: relative;
}

.tm_timeline > li .tm_icon {
  position: absolute;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  background: var(--glt-color-dark);
  color: var(--gray-100);
  box-shadow: var(--box-shadow-lg);
  top: 0;
  left: 20%;
}

.tm_timeline > li .tm_label {
  background: #f0f1f3;
}

.tm_timeline > li .tm_label:after {
  border-right-color: #f0f1f3;
}

.tm_timeline > li .tm_time {
  display: block;
  width: 23%;
  padding-right: 70px;
  position: absolute;
}

.tm_timeline > li .tm_time span {
  display: block;
  text-align: right;
}

.tm_time span:first-child {
  font-size: 1.5rem;
  font-weight: 600;
}

.tm_time span:last-child {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--secondary-text-emphasis);
}


/**************/
/* || OFFLINE */
/**************/

.outer {
  z-index: 10;
  min-height: 50vh;
}

.offline-site {
  background: var(--glt-color-light) url(../images/bg_glt.png) no-repeat;
  z-index: -1;
}

.offline-header {
  z-index: 20;
  background: var(--glt-color-dark);
  width: 100%;
  height: 3.2rem;
  text-align: center;
  border-bottom: 0.2rem solid var(--gray-100);
}

.offline-header h2 {
  color: var(--glt-color-highlight);
  line-height: 3.2rem;
  margin: 0;
}

.offline-card {
  max-width: 25em;
}

#offline-logo {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 3rem auto 0;
  background: var(--gray-100) url(../images/logo_glt.png) no-repeat;
  background-size: 160px;
  background-position: center;
  border: 0.5rem solid var(--glt-color-dark);
  border-radius: 100px;
  box-shadow: 0 0 0.8rem #00000088;
}

#offline-logo span {
  position: absolute;
  display: block;
  z-index:-1;
  width: 666px;
  height: 666px;
  top: -233px;
  left: -233px;
  background: url(../images/bg_highlight.png) 0 0 no-repeat;
  animation: rotateinfinite 120s infinite linear;
}

@keyframes rotateinfinite {
  0%   {transform: rotate(0deg);  }
  100% {transform: rotate(350deg);}
}