/*  STYLESHEETDATEI FÜR 
    huegelmarathon.de
    Created by Format Werbe GmbH
######################################## */


/* WEBFONTS ############################### */

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Book.eot');
    src: url('fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/Gotham-Book.woff2') format('woff2'),
        url('fonts/Gotham-Book.woff') format('woff'),
        url('fonts/Gotham-Book.ttf') format('truetype'),
        url('fonts/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Black';
    src: url('fonts/Gotham-Black.eot');
    src: url('fonts/Gotham-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Gotham-Black.woff2') format('woff2'),
        url('fonts/Gotham-Black.woff') format('woff'),
        url('fonts/Gotham-Black.ttf') format('truetype'),
        url('fonts/Gotham-Black.svg#Gotham-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* END WEBFONTS ########################### */


/* VARIABLEN ############################### */

:root {

/* FARBEN */

--phmBlau: #0D1542;
--hellblau: #00E1FF;
--phmdarkBack: #041120;
--phmtransBlau: rgba(10, 35, 64, .5)!important;
--phmGruen: #C8FF00;
--phmOrange: #FF5800;
--phmWeiss: #fff;
--phmTransWeiss: rgba(255,255,255, .3);
--phmFoocolor: #A2A2A2;
--transparent: transparent;
--button-background-color: #C8FF00;

--fb: #3b5998;
--x: #1da1f2;
--insta: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram Farbverlauf */


/* FONTS */

--phmfontNormal: 'Gotham';
--phmfontFett: 'Gotham Black';

/* SCHATTEN */

--phmTextschatten: 2px 1px 6px rgba(0,0,0,0.8);

/* FONTSIZES */


--startseiteH1: clamp(2rem, 0.5179rem + 2.3904vw, 5rem);
--font52: 52px;
--font42: 42px;
--font32: 32px;
--font22: 22px;

/* --font22: clamp(1.1875rem, 1.0949rem + 0.1494vw, 1.375rem); */
--font18: 18px;

--font100: 50px;
--font100: 100px;
--font250: 250px;
--font350: 350px;

}

/* END VARIABLEN ########################### */

/* GLOBALE KLASSEN ############################### */

html {
	scroll-behavior: smooth;
}

a.blind {
	display: none!important;
}

body {
    background-color: var(--phmBlau);
    font-family: var(--phmfontNormal);
    font-size: var(--font18)!important;
}

b, strong {
    font-family: var(--phmfontFett);
}

h1 {
    font-size: var(--font52);
    font-family: var(--phmfontFett);
    color: var(--phmWeiss)
}

h2 {
    font-size: var(--font42);
    font-family: var(--phmfontFett);
    color: var(--phmWeiss)
}

h2 span {
    font-family: var(--phmfontNormal);
    font-size: var(--font22);
}

.sp-slider-content-align-left h1 {
    font-family: var(--phmfontFett);
    font-size: var(--font52);
}

/* .sp-slider-content-align-left p {
    font-size: var(--font22);
} */

p.sppb-title-subheading {
    font-size: var(--font22)!important;
    color: var(--phmWeiss);
}


/* END GLOBALE KLASSEN ########################### */



/* HEADER ############################### */

header#sp-header {
    box-shadow: none;
    height: 142px;
    background-color: var(--transparent);
    position: absolute;
}

header#sp-header.header-sticky {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    max-height: 120px;
}

.page-header {
    display: none;
}

.sp-contact-info {
    display: inline;
}

ul.social-icons>li {
    display: inline-block;
    margin: 0 20px 0 0;
    line-height: 1.5;
}

/* END HEADER ########################### */

/* SIDEBAR #################################### */

/* Grundlegendes Styling für die Sidebar */
.sidebar {
    position: fixed; /* Sticky-Effekt */
    top: 50%; /* Zentriert vertikal */
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px 0 0;
    z-index: 1000;
}

/* Styling der Buttons */
.sidebar .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 10px 0 0 0;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Facebook-Button */
.sidebar .facebook,
.sidebar .facebook:hover {
    background-color: var(--fb);
    color: var(--phmWeiss);
}

/* X/Twitter-Button */
.sidebar .x,
.sidebar .x:hover {
    background-color: var(--x);
    color: var(--phmWeiss);
}

/* Instagram-Button */
.sidebar .instagram,
.sidebar .instagram:hover {
    background: var(--insta);
    color: var(--phmWeiss);
}

/* Kontakt-Button */
.sidebar .contact,
.sidebar .contact:hover {
    background: var(--hellblau);
    color: var(--phmWeiss);
}

/* Hover-Effekte */
.sidebar .button:hover {
    transform: scale(1.1);
}

/* Icons Styling */
.sidebar .button i {
    font-size: 20px;
    color: var(--weiss);
}

@media (max-width: 768px) {
    .sidebar {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%; /* Sidebar nimmt die gesamte Breite des Bildschirms ein */
        flex-direction: row; /* Buttons nebeneinander anordnen */
        justify-content: space-between; /* Buttons gleichmäßig verteilen */
        padding: 0;
        background-color: transparent; /* Hintergrund der Sidebar entfernen */
        box-shadow: none;
        border-radius: 0;
    }

    .sidebar a {
        width: 33.333%
    }

    .sidebar .button {
        width: 100%; /* Jeder Button nimmt ein Drittel der Breite ein */
        height: 50px; /* Höhe beibehalten */
        margin: 0; /* Abstände zwischen den Buttons entfernen */
        border-radius: 0; /* Abgerundete Ecken entfernen */
        box-shadow: none; /* Schatten entfernen */
    }

    .sidebar .button i {
        font-size: 18px;
    }
}



/* END SIDEBAR ################################ */

/* NAVIGATION ############################### */

header ul.sp-megamenu-parent li a,
header .sp-megamenu-parent>li:last-child>a {
    font-family: var(--phmfontFett);
    font-size: var(--font22);
    text-transform: uppercase;
    color: var(--phmWeiss);
    padding: 18px 25px;
    line-height: 1;
    margin-left: 2px;
}

header .sp-megamenu-parent>li.active>a,
header .sp-megamenu-parent>li:hover>a {
    font-family: var(--phmfontFett);
    font-size: var(--font22);
    text-transform: uppercase;
    color: var(--phmBlau);
    background-color: var(--phmGruen);
}

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    color: var(--phmBlau);
}

/* DROPDOWN */

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    padding: 0;
    margin-top: 2px;
    background-color: var(--transparent);
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a {
    padding: 10px 20px;
    width: 100%;
    display: block;
    background-color: var(--phmGruen);
    color: var(--phmBlau);
}

#sp-menu > div > nav > ul > li.sp-menu-item.sp-has-child.active > div > div > ul > li.sp-menu-item.current-item.active a,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a:hover {
    background-color: var(--phmBlau);
    color: var(--phmGruen);
}

body.ltr .sp-megamenu-parent>li.sp-has-child>a:after, body.ltr .sp-megamenu-parent>li.sp-has-child>span:after {
    /*display: none;*/
}


@media screen and (min-width: 1200px) and (max-width: 1399px) {
    header ul.sp-megamenu-parent li a, header .sp-megamenu-parent>li:last-child>a {
        padding: 18px 12px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    header ul.sp-megamenu-parent li a, header .sp-megamenu-parent>li:last-child>a {
        padding: 18px 5px;
        font-size: var(--font18);
    }
}

@media screen and (min-width: 500px) and (max-width: 991px) {

    #sp-header .logo {
        width: 20%;
    }
}

/* END /* NAVIGATION ############################### */

/* SLIDER ########################################## */

.sp-slider h1,
.sp-slider p {
    text-shadow: var(--phmTextschatten);
}

/* END SLIDER ###################################### */

/* ADDONS ############################### */

/* COUNTDOWN AUF STARTSEITE */

.phm__countdownEvent h3 {
    color: var(--phmWeiss);
    font-family: var(--phmfontFett);
}

.sppb-countdown-number {
    font-size: var(--font42);
    font-family: var(--phmfontFett);
}

/* END */

/* ACCORDION ############################ */

.sppb-panel .sppb-panel-title {
    font-size: var(--font18);
    font-family: var(--phmfontNormal);
    letter-spacing: .2px;
}

/* END ACCORDION ######################## */

/* END TOUREN ########################### */

.phm__backDark .sppb-row-container .sppb-row.sppb-no-gutter {
    background-color: var(--phmdarkBack);
}

.phm__backGruen .sppb-row-container .sppb-row.sppb-no-gutter {
    background-color: var(--phmGruen);
}

.phm__backGruen .sppb-row.sppb-no-gutter h3,
.phm__backDark .sppb-row.sppb-no-gutter h3 {
    font-size: var(--font32);
    font-family: var(--phmfontFett);
}

a.sppb-btn-custom:hover {
    scale: 1.03;
    transition: .6s;
}

/* TOUREN ############################### */

/* PRESSE ############################### */

.phm__presseDownloads .mod_osdownloadsfiles ul {
    padding: 0!important;
}

.mod_osdownloadsfiles ul li:nth-child(odd) {
    padding: 20px;
}

.mod_osdownloadsfiles ul li:nth-child(even) {
    background-color: var(--phmTransWeiss);
    padding: 20px;
}

.mod_osdownloadsfiles ul li:hover:nth-child(odd),
.mod_osdownloadsfiles ul li:hover:nth-child(even) {
    background-color: var(--phmWeiss);
}

.phm__presseDownloads .mod_osdownloadsfiles ul li:hover h4 {
    color: var(--phmBlau);
}

.phm__presseDownloads .mod_osdownloadsfiles ul h4 {
    font-family: var(--phmfontFett);
    font-size: var(--font22);
    color: var(--phmWeiss);

}

.phm__presseDownloads .mod_osdownloadsfiles ul p {
    color: var(--phmWeiss);
}

.btn_download a {
    background-color: var(--phmBlau);
    color: var(--phmWeiss);
    text-transform: uppercase;
    border-radius: 0;
}

.btn_download a:hover {
    background-color: var(--phmBlau);
    color: var(--phmWeiss);
    scale: 1.03!important;
}


/* END PRESSE ########################### */

/* TOUREN HEADER ############################### */

.phm__tourenKilometer p {
    font-size: var(--font350);
    font-family: var(--phmfontFett);
    color: var(--phmTransWeiss);
}

.phm__tourenTitel h1 {
    font-size: var(--font100);
    text-transform: uppercase;
    font-family: var(--phmfontFett);
}

.sppb-sp-slider-text {
    display: block;
}

p.phm__kilometer {
    font-size: 250px;
    font-family: var(--phmfontFett);
    position: absolute;
    z-index: 0;
    margin-top: -225px;
    margin-left: -5px;
}

/* END TOUREN HEADER ########################### */

/* TOUREN SEITEN ############################### */

.phm__streckenFakten p strong {
    width: 160px;
    display: inline-block;
}

/* END TOUREN SEITEN ########################### */

/* Ergebnislisten ############################### */

.RRPublish > div.Tiles > div > div {
    background-color: var(--phmOrange);
}

/* END Ergebnislisten ########################### */

/* ERGEBNISARCHIV ############################### */

.menu {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}

.menu li {
  flex: 0 0 calc(33.33% - 0px); /* 10px Abstand zwischen den Elementen */
  list-style: none;
  padding: 10px; /* Platzierung der Elemente */
  box-sizing: border-box;
  text-align: center; /* Optional, um den Text zu zentrieren */
}

 .phm_resultsNav .menu li a {
    background-color: var(--phmGruen);
    color: var(--phmBlau);
    display: block;
    width: 100%;
    padding: 18px;
}

.phm_resultsNav .menu li a:hover,
.phm_resultsNav .menu li.current.active a {
    background-color: var(--hellblau);
    color: var(--phmWeiss);
    display: block;
    width: 100%;
    padding: 18px;
}

@media (max-width: 768px) {
  .menu li {
    flex: 0 0 100%; /* Auf Mobilgeräten die volle Breite nutzen */
  }
}

/* END ERGEBNISARCHIV ########################### */

/* IMPRESSIONEN ################################# */

ul.osgalery-cat-tabs {
    display: none;
}

#phm__impressionenNavigation ul.menu li a {
    background-color: var(--phmGruen);
    color: var(--phmBlau);
    display: block;
    padding: 10px 0;
    scale: 1;
    transition: .6s;
}

#phm__impressionenNavigation ul.menu li a:hover {
    color: var(--phmGruen);
    background-color: var(--phmWeiss);
    display: block;
    padding: 10px 0;
    scale: 1.03;
    transition: .6s;
}

/* END IMPRESSIONEN ############################# */

/* FOOTER ############################### */

#sp-footer {
    color: var(--phmFoocolor);
}

.phm_fooNav1 ul li {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 0;
}

/* END FOOTER ########################### */

/* KONTAKT CONVERTFORMS ############################### */

.convertforms .cf-content-wrap, .convertforms .cf-form-wrap {
    padding: 0!important;
}

input[type="text"]:not(.form-control), 
input[type="email"]:not(.form-control), 
.convertforms textarea.cf-input,
input[type="url"]:not(.form-control), 
input[type="date"]:not(.form-control), 
input[type="password"]:not(.form-control), 
input[type="search"]:not(.form-control), 
input[type="tel"]:not(.form-control), 
input[type="number"]:not(.form-control), 
select:not(.form-select):not(.form-control) {
    border-radius: 0;
    border: 0;
}

.convertforms p,
.convertforms label.cf-label {
    color: var(--phmFoocolor);
}

#cf1 > div.cf-form-wrap.cf-col-16 > div.cf-fields > div:nth-child(4) > div > div > p > a {
    text-decoration: underline;
}

#cf1 > div.cf-form-wrap.cf-col-16 > div.cf-fields > div:nth-child(4) > div > div > p > a:hover {
    text-decoration: none;
}

.convertforms .cf-input {
    font-size: 18px!important;
}

.captcha-equation,
.cf-control-input-desc {
    color: var(--phmWeiss)!important;
}

/* END KONTAKT CONVERTFORMS ########################### */

/* ACYMAILING ######################################### */

#acym_wrapper .acym__front__archive .acym__front__archive__title {
    font-size: var(--font52);
    font-family: var(--phmfontFett);
    color: var(--phmWeiss);
}

.acym__front__archive__raw a {
    background-color: var(--phmGruen)!important;
    /*color: var(--phmWeiss)!important;*/
    display: block;
    padding: 10px 20px;
    scale: 1;
    transition: .3s;
}

#acym_wrapper a:focus, 
#acym_wrapper a:hover {
    scale: 1.01;
    transition: .3s;
}

#acym_wrapper .acym__front__archive .acym__front__archive__newsletter_sending-date {
    padding: 5px 20px;
    background-color: var(--phmdarkBack);
    margin-bottom: 5px;
}

#acym_wrapper p {
    color: var(--phmWeiss);
}

#acym_wrapper .pagination .pagination_container {
    box-shadow: none;
}

#acym_wrapper .pagination .pagination_container .pagination-previous {
    color: var(--phmWeiss);
}

/* END ACYMAILING ##################################### */

/* OFFCANVAS MENU ############################### */

.offcanvas-overlay {
    background: rgba(10, 35, 64, 0.5);
}

#offcanvas-toggler {
    background-color: var(--phmGruen);
    transform: translateY(-25%);
    top: 29%;
    width: 49px;
    height: 49px;
    margin-top: 8px;
    margin-left: 0!important;
}

#offcanvas-toggler:hover {
    background-color: var(--phmOrange)!important;
}

.burger-icon {
    width: 25px;
    cursor: pointer;
    top: 12px;
    position: absolute;
    left: 13px;
}




body.ltr .close-offcanvas {
    width: 49px;
    height: 49px;
    background-color: var(--phmBlau);
}

.offcanvas-active .burger-icon>span {
    background-color: var(--phmWeiss);
}

#offcanvas-toggler > div > span,
#offcanvas-toggler.active .burger-icon>span {
    background-color: var(--phmBlau);
}

#offcanvas-toggler > div > span:nth-child(2) {
    max-width: 100%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(2) {
    max-width: 70%;
    transition: .3s;
}

#offcanvas-toggler > div > span:nth-child(3) {
    max-width: 70%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(3) {
    max-width: 50%;
    transition: .3s;
}

.offcanvas-menu {
    background-color: var(--phmGruen);
    border-left: 3px solid --phmBlau;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a, 
.offcanvas-menu .offcanvas-inner ul.menu>li>span {
    color: var(--phmBlau)!important;
    opacity: 1!important;
    text-transform: uppercase;
    padding-bottom: 15px;
    font-size: 24px;
    text-decoration: none;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a.hm__linkNone {
    display: none;
}

.offcanvas-menu .offcanvas-inner ul.menu li.current a {
    color: var(--phmBlau)!important;
    font-family: var(--phmfontFett);
}

.offcanvas-menu .offcanvas-inner ul.menu>li li a,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent .menu-toggler,
body > div.offcanvas-menu.border-menu > div.offcanvas-inner > div.sp-module > div > ul > li.menu-deeper.menu-parent.menu-parent-open > ul > li.menu-deeper.menu-parent.menu-parent-open > a {
    color: var(--phmBlau);
}

/* END OFFCANVAS MENU ########################### */

/* TIMING UND LISTEN ############################### */

.RRPublish div.ListHeaderFooter {
    background-color: var(--phmWeiss);
    min-width: 100%!important;
}

/* END TIMING UND LISTEN ########################### */

/* GLOBAL ############################### */

/* END GLOBAL ########################### */

/* GLOBAL ############################### */

/* END GLOBAL ########################### */

/* GLOBAL ############################### */

/* END GLOBAL ########################### */

/* GLOBAL ############################### */

/* END GLOBAL ########################### */

/* MEDIA QUERIES ###################################### */

@media screen and (min-width: 1000) and (max-width: 1199px) {

.phm__tourenKilometer p {
    font-size: var(--font250);
    font-family: var(--phmfontFett);
    color: var(--phmTransWeiss);
}

.phm__tourenTitel h1 {
    font-size: var(--font50);
    text-transform: uppercase;
    font-family: var(--phmfontFett);
}

}

/* END TOUREN HEADER ########################### */

/* END TOURENSLIDER ############################ */

@media (max-width: 575.98px) {

    #sp-header .logo,
    .logo-image-phone {
        height: 90px!important;
    }


    .sp-contact-info {
        display: inline;
    }

    ul.social-icons>li {
        margin-right: 20px;
    }


    h1, h2 {
        font-size: var(--font32);
        hyphens: auto;
    }

    body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
    right: -100px;
    width: 100%;
    }

    .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent li.menu-parent .menu-toggler {
    right: -104px;
    width: 100%;
    }

}













/* Anmeldung */


.RRRegStart div.RRRegStart_Registrations > div {
    background: var(--phmBlau);
}
.RRRegStart div.RRRegStart_divContestsV2 {
    color: white;
}
.RRRegStart div.RRRegStart_divContestsV2 > div > div > div:nth-child(5) > table > tbody > tr > td {
    color: white;
}
.RRRegStart {
    background-color: transparent;
}
.RRRegStart div.RRRegStart_Registrations > div {
    border: 1px solid transparent;
}

.RRPublish > div.Tiles > div > div > div {
    background-color: var(--hellblau);
    color: #000;
}
.RRPublish > div.Tiles > div > table tr:hover {
    background-color: transparent;
}
.RRPublish > div.Tile:hover {
    background-color: #ddff62;
}

.RRRegStart div.RRRegStart_Registrations h1 {
    display: none;
}