/* Farbvariablen HikingChallenge */
/**************************/
:root {
    --text1: #FFFFFF; /*weiss*/
    --text2: black; /*schwarz*/
    --bg_boxen: #C48660; /*bräunlich*/
    --bg2: #E5E5E5; /*grau*/
  	--button-bar-bg: linear-gradient(145deg, #0b5d3b, #06402B);
    --linkerrand: linear-gradient(145deg, #0b5d3b, #06402B);
    --nav-background: linear-gradient(145deg, #0b5d3b, #06402B);
  	--nav-color: #FFFFFF; /* weiss */
    --bg3: #FFFFFF; /*weiss*/
    --border: #A52A2A; /*Erdbraun*/
    --Highlights: #FFD700; /*Gelb*/
    --Warnungen: #FF4500; /*Rot*/
    --Transparenz: 0.8; /*Transparenz*/
}

@media (min-width: 900px) {
  .galerie-item {flex: 0 0 calc(25% - 10px * 3 / 4); flex: 0 0 24%; flex: 0 0 calc(25% - 7.5px);}
}

body {font-family: 'Lato', sans-serif;}

/* Flex! */
/**************************/
.flex-container {width: 100%; display: flex; flex-wrap: wrap; gap: 20px; padding: 20px;}
.flex-item {flex: 1; min-height: 30px; font-style: 5em; border-radius: 10px; margin: 0px; padding: 0px; background: var(--nav-background);}
.flex-item:hover {transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); background: var(--nav-background);}
.flex-item h1 {color: #007a33; min-height: 50px; margin-top: 0px; border-radius: 10px; border: 1px solid #007a33; text-align: center; font-size: 15px; padding: 20px 0 20px 0; text-shadow: #26392f 0px 0 0px; background-color: #ffffff;}
.flex-item h2 {color: white; min-height: 1px; border-radius: 10px; border-bottom: 0px; text-align: center; font-size: 50px; padding: 5px 0 5px 0; background: var(--nav-background);}
.flex-item h3 {color: var(--text1); min-height: 1px; margin-top: 0px; border-radius: 10px; border-bottom: 0px; text-align: center; font-size: 24px; padding: 10px 0 10px 0; background-color: var(bg_boxen);}
.flex-item p {color: #FFFFFF; min-height: 1px; margin-top: 0px; border-radius: 0px; border-bottom: 0px; text-align: center; font-size: 12px; padding: 0px;}

/* SVG Filter */
/**************************/
.nav-links a:hover .custom-icon {transform: scale(1.1);}

/* Response fuer Eintraege */
/**************************/
.entry-response {min-height: 250px; border-radius: 10px; margin: 0px; padding: 0px; background: var(--nav-background); display: flex; align-items: center; justify-content: center; flex-direction: column;}
.entry-response i {color: white; font-size: 10em; padding: 5px 0 5px 0;}
.entry-response p {color: white;text-align: center; font-size: 2em; padding: 5px 0 5px 0;}
.entry-response hr {border: none; height: 2px; width: 100%; background-color: white; margin: 10px 0;}

/* Weiterempfehlungen */
/**************************/
.details-recom {color: var(--text1); min-height: 60px; width: 80%; overflow: auto; transition: height 0.3s ease; border-radius: 10px; padding: 10px; margin-left: 10%; background: var(--nav-background);}
.details-recom nav {position: relative; width: 30%; border-radius: 10px;}
.details-recom nav label {display: block; cursor: pointer; padding: 10px; background-color: white; color: var(--text2);}
.details-recom label[for="menu-toggle"] {border-radius: 10px;}
.details-recom nav input[type="checkbox"] {display: none;}
.details-recom nav ul {list-style: none; padding: 0; margin: 0; display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1;}
.details-recom nav input[type="checkbox"]:checked + label + ul {display: block;}
.details-recom nav ul li {display: block;}
.details-recom nav ul a {display: block; padding: 10px; text-decoration: none; color: #333;}
.details-recom h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color: var(--text2); padding:0; margin:0;}


/* Gender Auswahl */
/**************************/
.gender-option {display: inline-flex; flex-direction: column; align-items: center; padding: 5px 0px; width: 32%; cursor: pointer; background-color: #f9f9f9; transition: all 0.3s ease;}
.gender-option:hover {border-color: #007bff; background-color: #e6f2ff;}
.gender-option.selected {background-color: #007bff; color: white; border-color: #007bff;}
.gender-icon {font-size: 1.5em; margin-bottom: 5px;}
.gender-option.selected .gender-icon {color: white;}

/* Sign-Up */
/**************************/
.signup-title {width: 100%; height:33px; background: var(--nav-background); color: white; font-weight: 600; font-size: 25px; border-radius: 10px; margin-top: 20px; margin-bottom: 20px; padding-left: 10px;}
.input-container {position: relative; margin-bottom: 25px; width: 350px; background: var(--linkerrand); padding-left: 5px; border-radius: 5px; box-sizing: border-box;}
.input-container textarea {
    width: 100%; 
    padding: 10px; 
    border: 1px solid #f0f0f0; 
    border-left: none; 
    border-radius: 0 5px 5px 0; 
    font-size: 16px; 
    outline: none; 
    box-sizing: border-box; 
    padding-top: 15px; 
    background-color: #fff; 
    display: block;
    resize: vertical;}
.input-container select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 35px) center; 
    background-size: 12px;
    
    padding-right: 55px !important;
}

.input-container input[type="text"],
.input-container input[type="time"],
.input-container input[type="date"],
.input-container input[type="email"],
.input-container input[type="number"],
.input-container input[type="tel"],
.input-container input[type="hidden"],
.input-container input[type="submit"],
.input-container select {width: 100%; padding: 10px; backdrop-filter: blur(10px); border: 1px solid #f0f0f0; border-left: none; border-radius: 0 5px 5px 0; font-size: 16px; outline: none; box-sizing: border-box; padding-top: 15px; background-color: #fff; display: block; transition: background 0.4s ease, transform 0.2s ease; -webkit-backdrop-filter: blur(10px);}
.input-container label {position: absolute; top: -10px; left: 10px; font-size: 12px; color: #999; transition: all 0.2s ease; pointer-events: none; background-color: #fff; padding: 0 5px; z-index: 1; white-space: nowrap;}
.input-container input[type="text"]:focus + label {color: #337ab7;}
.input-container input[type="text"]::placeholder,
.input-container input[type="email"]::placeholder {color: #ccc;}
/*.input-container input:focus, textarea:focus {outline: none; border: 1px solid transparent; background-image: linear-gradient(#fff, #fff), var(--nav-background); background-origin: border-box; background-clip: padding-box, border-box; transition: background 0.3s ease;}*/
.input-container:focus-within {background: var(--nav-background); transform: scale(1.02);}

 input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*width: 200px;*/
    background-color: transparent;

    &:focus {
      outline-color: #f8b195;
    }
  }

  input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: rgb(246, 114, 128);
    background: -webkit-linear-gradient(
      left,
      rgba(246, 114, 128, 1) 0%,
      rgba(192, 108, 132, 1) 50%,
      rgba(53, 92, 125, 1) 100%
    );
    background: var(--nav-background);
    filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#f67280",
      endColorstr="#355c7d",
      GradientType=1
    );
  }

  input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    appearance: none;
    height: 3px;
    background: rgb(246, 114, 128);
    background: -moz-linear-gradient(
      left,
      rgba(246, 114, 128, 1) 0%,
      rgba(192, 108, 132, 1) 50%,
      rgba(53, 92, 125, 1) 100%
    );
    background: linear-gradient(
      to right,
      rgba(246, 114, 128, 1) 0%,
      rgba(192, 108, 132, 1) 50%,
      rgba(53, 92, 125, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#f67280",
      endColorstr="#355c7d",
      GradientType=1
    );
  }
  
  input[type="range"]::-ms-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 3px;
    background: rgb(246, 114, 128);
    background: -moz-linear-gradient(
      left,
      rgba(246, 114, 128, 1) 0%,
      rgba(192, 108, 132, 1) 50%,
      rgba(53, 92, 125, 1) 100%
    );
    background: -webkit-linear-gradient(
      left,
      rgba(246, 114, 128, 1) 0%,
      rgba(192, 108, 132, 1) 50%,
      rgba(53, 92, 125, 1) 100%
    );
    background: linear-gradient(
      to right,
      rgba(246, 114, 128, 1) 0%,
      rgba(192, 108, 132, 1) 50%,
      rgba(53, 92, 125, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#f67280",
      endColorstr="#355c7d",
      GradientType=1
    );
  }

  input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #007a33;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background: #ffffff
    url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png")
    center no-repeat opacity: 0.0;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
    
    &:active {
      cursor: grabbing;
    }
}


  input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #f8b195;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: relative;
    bottom: 8px;
    background: #222
      url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png")
      center no-repeat;
    background-size: 50%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    cursor: grab;
    
    &:active {
      cursor: grabbing;
    }
  }

  input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #f8b195;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: relative;
    bottom: 8px;
    background: #222
      url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png")
      center no-repeat;
    background-size: 50%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    cursor: grab;
    
    &:active {
      cursor: grabbing;
    }
  }
}

/* Tooltip */
/**************************/
.tooltip-wrapper {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; cursor: help;}
.tooltip-icon {display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--linkerrand); color: #FFFFFF; border-radius: 50%; font-size: 12px; font-weight: bold;}
.tooltip-text {visibility: hidden; width: 200px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 3; bottom: 125%; right: 0; opacity: 0; transition: opacity 0.3s; font-size: 11px; line-height: 1.4; box-shadow: 0px 4px 10px rgba(0,0,0,0.2);}
.tooltip-text::after {content: ""; position: absolute; top: 100%; right: 5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
.tooltip-wrapper:hover .tooltip-text {visibility: visible; opacity: 1;}
.input-container input {padding-right: 35px !important;}

a {text-decoration: none;}
#delight {color: var(--text1); min-height:250px; width: 25%; overflow: auto; border-radius: 10px; padding: 10px; margin-left: 5%; background-color: var(--bg_boxen); float: left;}
#details-top {color: var(--text1); min-height:100px; width: 80%; overflow: auto; border-radius: 10px; padding: 10px; margin-left: 10%; background: var(--nav-background);}
#details-title {color: var(--text1); width: 80%; min-height: 60px; overflow: none; border-radius: 10px; padding-left: 10px; margin-left: 10%; background: var(--nav-background);}
#cities-coa {position: absolute; top: 8%; left: 12%; z-index: 5;}
#cities-coa img {width: 125px; max-height: 100%;}
#cities-top {color: var(--text1); height: 90px; width: 80%; overflow: none; border-radius: 10px; position: absolute; top: 10%; left: 10%; padding-left: 12%; padding-top: 11px; background: var(--bg_boxen); z-index: 1;}
#cities-second {position: absolute; top: 33%; left: 10%; border: 1px solid; border-color: var(--bg_boxen); background-color: var(--bg2); min-height: 200px; width: 80%; border-radius: 10px 10px; padding: 10px;}
#details-second {border: 1px solid; border-color: var(--nav-background); background-color: var(--bg2);min-height: 200px; margin-left: 10%; width: 80%; border-radius: 10px 10px; padding: 10px;}
#leaders-top {color: var(--text1); min-height: 250px; width: 20%; overflow: auto; border-radius: 10px; padding: 10px; margin-left: 10%; background-color: var(--bg_boxen); float: left;}
#leaders-second {color: var(--text1); min-height: 250px; width: 45%; overflow: auto; border-radius: 10px; padding: 10px; margin-left: 10%; background: var(--bg_boxen); right: 10%;}
#wanderung-spacer {padding-left: 5%;}
#zweite_spalte {border: 1px solid; border-color: var(--bg_boxen); min-height: 66%; margin-left: 33%; width: 65%; border-radius: 10px 50px; padding: 13px;}
#textbox {width: 80%; height: 80%; margin-left: 10%;}
.inline-data {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-align:center; text-transform: uppercase; color: white; padding:0; margin:0;}
.whooosh {font-family:'Oswald', sans-serif; font-size:20px; font-weight:400; text-align:center; text-transform: uppercase; color: white; padding:0; margin:0;}
button[type="submit"] {
    background: var(--nav-background);
    color: var(--text1);
  	width: 50%;
  	margin-top: 30px;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
  	font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

button[type="submit"]:hover {transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); background: var(--nav-background);}

/* Navigationsmenu (only Desktop) */
/**************************/
.viertelkreis {display: none;}
.button-bar {display: none;}
.Logo-Class {margin-left: 20px;}
.navbar-nav li a, 
.navbar-nav li a i,
.navbar-right li a,
.navbar-right li a i {color: transparent; background-image: var(--button-bar-bg); -webkit-background-clip: text; background-clip: text;}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:hover i,
.navbar-right li a:hover,
.navbar-right li a:hover i {color: transparent !important; background-image: var(--button-bar-bg); -webkit-background-clip: text; background-clip: text;}
.navbar-right {margin-left: 200px;}
.navbar.navbar-default {display: flex; align-items: center; justify-content: space-between; position: -webkit-sticky; position: sticky; top: 0; height: 50px; z-index: 100; background: white; transition: all 0.3s ease-in-out;}
.navbar-nav li a {color: transparent; background-image: var(--button-bar-bg); -webkit-background-clip: text; background-clip: text;}
.navbar.navbar-default .navbar-brand {color: transparent; background-image: var(--button-bar-bg); -webkit-background-clip: text; background-clip: text;}
.navbar-brand {font-weight: 600; background-image: var(--button-bar-bg); -webkit-background-clip: text; background-clip: text; color: transparent; transition: font-size 0.3s ease-in-out, transform 0.3s ease-in-out; font-size: 1.5em;}
}

/* Hikes */
/**************************/
.pois {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); width: 250px; margin-right: 5%; margin-top: 5%; margin-bottom: 5%; display: inline-block; text-align: center; font-family: arial;}
.pois-center {width: 80%; margin-left: 10%; display: inline-block; text-align: center; font-family: arial;}
.poi-link {border: none; outline: 0; display: inline-block; padding: 8px; color: var(--text1); background-color: var(--bg_boxen); text-align: center; cursor: pointer; width: 100%; font-size: 18px;}
.poi_image {margin-left: 10%;}
.poi_image img {border-radius: 10px;}

/* Leaderbord */
/**************************/
.c-rank, .c-username, .c-km, .c-hikes, .c-up, .c-down {display: table-cell;}

/* Footer */
/**************************/
#bottom {border: 1px solid; border-color: var(--border); border-radius: 10px; color: var(--text1); text-decoration: none; width: 80%; min-height: 50px; font-size: 12px; padding: 10px; margin-left: 10%; border-top: 1px solid var(--border); background-color: var(--bg_boxen);}
#bottom h1{color: var(--text1); font-size: 50px; font-weight: normal; text-shadow: none;}
#social-content {height: 50px; width: 80%; overflow: none; border: 1px solid; border-radius: 10px; padding: 10px; background-color: var(--bg_boxen); margin-left: 10%; box-shadow: 0 5px 10px rgba(0,0,0,.5); color: var(--text1); text-decoration: none;}

/* Helpers */
/**************************/
.margin-top-10 {padding-top:10px;}
.margin-top-center {padding-top:10px; text-align: center;}
.margin-bot-10 {padding-bottom:10px;}
#mr_coffee {color: var(--logo-color); min-height:525px; width: 80%; overflow: auto; border-radius: 10px; padding: 10px; margin-left: 10%; margin-top: 2%; background: var(--bg3); box-shadow: 0 5px 10px rgba(0,0,0,.5);}

/* Typographie */
/**************************/
#hwf h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color: var(--text2); padding:0; margin:0;}
#hwf h2 {font-family: 'Oswald', sans-serif; font-size: 70px; color: #FFFFFF; letter-spacing: 4px; text-align: center; font-weight: 400; text-transform: uppercase; z-index: 10; opacity: .7;}
#hwf h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color: var(--text2);}
#hwf h4 {font-family:'Oswald', sans-serif; font-size:14px; text-align:center; padding: 0px; color: var(--text1);}
#hwf p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;}
#hwf weather {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color: var(--text2); padding:0; margin:0; text-align: center;}
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}

.sc {color: #3b8595;}
.ny {color: #3d3c3a;}
.atw {color: #c48660;}

/* Section - Titel */
/**************************/
#hwf .title {background: #FFFFFF; padding: 60px; margin:0 auto; text-align:center;}
#hwf .title h1 {font-size:35px; letter-spacing:8px;}

/* Section - Block */
/**************************/
#hwf .block {background: #FFFFFF; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
#hwf .block-gray {background: #f2f2f2;padding: 60px;}
#hwf .block section p {margin-bottom: 20px; line-height: 1.6;}
#hwf .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--text2); opacity: 0.70;}

/* Section - Parallax */
/**************************/
#hwf .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://www.hikingchallenge.de/images/hikes.png); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
#hwf .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://www.harzwanderfuehrer.de/images/2.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#hwf .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#hwf .parallax-four {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://www.harzwanderfuehrer.de/images/3.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#hwf .parallax-contact {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://www.hikingchallenge.de/images/contact.png); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#hwf .parallax-impressum {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://www.hikingchallenge.de/images/impressum.png); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#hwf .parallax-hwfhc {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(https://www.harzwanderfuehrer.de/images/hwfhc.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}

/* Extras */
/**************************/
#hwf .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}

/* Media Queries */
/**************************/
@media screen and (max-width: 768px) {
    .scroll-progress-bar {display: none;}
    #hwf h1 {font-family:'Oswald', sans-serif; font-size:20px; font-weight:400; text-transform: uppercase; color: var(--text2); padding:0; margin:0;}
    #hwf h2 {font-family:'Oswald', sans-serif; font-size:25px; letter-spacing:8px; text-align:center; color: var(--text1); font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;}
    #hwf h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color: var(--text2);}
    #hwf p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;}
    #hwf weather {font-family:'Oswald', sans-serif; font-size:16px; font-weight:400; text-transform: uppercase; color: var(--text2); padding:0; margin:0; text-align: center;}
    .first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
	#hwf .block {background: #FFFFFF; padding: 60px; width:100%; margin:0 auto; text-align:justify;}
	#hwf .withlove {background: #FFFFFF; padding: 1px; width:100%; margin:0 auto; text-align:justify;}
    #hwf .title {background: var(--bg3); padding: 60px; margin:0 auto; text-align:center;}
    #hwf .title h1 {font-size:18px; letter-spacing:5px;}
    #hwf .title h3 {font-family:'Oswald', sans-serif; font-size:16px; line-height:0; font-weight:400; letter-spacing:5px; text-transform: uppercase; color: var(--text2);}
    #hwf input {border-style: solid; border-width: 1px; border-color: #c48660;}
    .leaderboard-table-container th:nth-child(5), 
    .leaderboard-table-container td:nth-child(5),
    .leaderboard-table-container th:nth-child(6), 
    .leaderboard-table-container td:nth-child(6) {display: none;}
    
    .leaderboard-table-container td {padding: 10px 8px; font-size: 0.9rem;}
    .podium-item {gap: 10px; width: 30% !important; min-width: 100px;}
    .first-place { height: 200px; }
    .second-place { height: 170px; }
    .third-place { height: 150px; }
  
/* Navigationsmenu */
/**************************/
.navbar {display: none !important;}
.Logo-Class {display: none !important;}
.button-bar {display: flex; flex-direction: column; justify-content: flex-end; position: fixed !important; bottom: 0 !important; width: 100%; height: 80px; padding-bottom: 8px; background-image: var(--button-bar-bg); z-index: 100; overflow: hidden; position: relative;}
.button-bar::before {content: ''; position: absolute; top: -50px; left: 0; width: 100%; height: 75px; background-color: white; border-radius: 0 0 40% 40%;}
.button-bar ul {list-style: none; display: flex; justify-content: space-around; margin: 0; padding: 0; height: auto; position: relative; z-index: 2;}
.button-bar a {color: white; text-decoration: none;}
.button-bar li > a:hover {color: var(--text1);}
.viertelkreis {position: fixed; top: 0; right: 0; width: 75px; height: 75px; opacity: var(--Transparenz); background-color: #007A33; border-bottom-left-radius: 100%; z-index: 1001; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: 1px; padding-bottom: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}
.viertelkreis h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color: var(--text1); margin-bottom: 25px; margin-right: 10px;}
.viertelkreis h1 a {color: var(--text1);}
.viertelkreis h1:hover a, .viertelkreis h1:hover i {color: var(--text1);}

/* Leaderbord */
/**************************/
.c-hikes, .c-up, .c-down {display: none;}
  
/* Sign-Up */
/**************************/
.signup-title {width: 100%; height:33px; background: var(--nav-background); color: white; font-weight: 600; font-size: 25px; border-radius: 5px; margin-top: 20px; margin-bottom: 20px; padding-left: 10px;}
.input-container {position: relative; margin-bottom: 25px; width: 100%; background: var(--linkerrand); padding-left: 5px; border-radius: 5px; box-sizing: border-box;}
.input-container input[type="text"],
.input-container input[type="date"],
.input-container input[type="email"],
.input-container input[type="tel"],
.input-container input[type="submit"],
.input-container select {width: 100%; padding: 10px; border: 1px solid #f0f0f0; border-left: none; border-radius: 0 5px 5px 0; font-size: 16px; outline: none; box-sizing: border-box; padding-top: 15px; background-color: #fff; display: block;}
.input-container label {position: absolute; top: -10px; left: 10px; font-size: 12px; color: #999; transition: all 0.2s ease; pointer-events: none; background-color: #fff; padding: 0 5px; z-index: 1; white-space: nowrap;}
.input-container input[type="text"]:focus + label {color: #337ab7;}
.input-container input[type="text"]::placeholder,
.input-container input[type="email"]::placeholder {color: #ccc;}
}