/* Farbdefinition */
:root {
    /*--accentColor: #459f1e; /* grün */
    /* --accentColor: #74ba56; /* grün */
    --accentColor: #537a33; /* accessibility grün */
    /* --accentColor: #e28733; /* orange */
    /* --accentColor: #d33731; /* rot */
    /* --accentColor: #862058; /* lila */
    /* --accentColor: #5aabea; /* cyan */
    --accentColorContrast: #65d734; /* high contrast on blue background */
    --secondColor: #015272;
    --customColor1: #f49524;
    --customColor2: #00a3d3;
    --h1-fontSize: 2.5rem;
}

/* Barrierefreiheit Farbanpassung */
.header.original .mainmenu ul li a.active {
    color: var(--accentColor);
}
.header.cloned .mainmenu ul li a.active {
    color: #65d734;
}
.ausbauphasen .ce_iconbox .ce_iconbox_outside.padding .content {
    opacity: 1;
}
.ausbauphasen .ce_iconbox {
    text-align: left;
}
/* Barrierefreiheit Farbanpassung Ende */

/* Mainmenu */
.mainmenu li .impressum,
.mainmenu li .datenschutz,
.mainmenu li .kontakt,
.mainmenu li .barrierefreiheitserklaerung {
    display: none;
}

.mainmenu ul li {
    margin-left: 5px;
    margin-right: 5px;
}
/* Mainmenu Ende */

/* Mainmenu Highlight Button (Desktop) */
.header .mainmenu ul li a.highlight span {
    font-size: var(--menu-highlight-font-size);
    color: var(--menu-highlight-color);
    background-color: var(--secondColor);
    border-color: #fff !important;
    padding: 8px 8px 8px 8px;
}
/* Mainmenu Highlight Button (Desktop) Ende */

/* Highlight Menu-Button (mobile) */
#mmenu .mod_navigation ul li a.highlight {
    color: #555 !important;
    background-color: #fff !important;
    border: none !important;
    font-weight: var(--menu-highlight-font-weight);
    padding-left: 5px;
    font-size: 1.5rem;
    border-style: solid;
}
/* Highlight Menu-Button (mobile) Ende */

/* Button Adress-Check */
button.submit.CustomColor2 {
    background-color: var(--customColor2);
}
button.submit.CustomColor2:hover {
    background-color: color-mix(in srgb, var(--customColor2), transparent 20%);
    color: #fff;
}

/* Revolution Slider Text Abstand */
.tp-mask-wrap {
    padding-left: 40px;
}

/* Flipbox */
.ce_flipbox .ce_flipbox_frontside,
.ce_flipbox .ce_flipbox_backside {
    border-radius: 20px;
}

.ce_flipbox .ce_flipbox_frontside_inside,
.ce_flipbox .ce_flipbox_backside_inside {
    padding: 15px;
}

.ce_flipbox_backside_inside .hyperlink_txt {
    color: var(--accentColor);
    padding: 5px 10px;
    outline: 1px solid var(--accentColor);
}

.ce_flipbox_backside_inside .hyperlink_txt {
    border-radius: 5px;
}

.ce_flipbox_backside_inside a.hyperlink_txt:hover {
    color: var(--menu-highlight-color);
    background-color: var(--menu-highlight-bg-color);
    border-color: var(--menu-highlight-border-color) !important;
}
/* Flipbox Ende */

ul li {
    margin-bottom: 10px;
}

/* Formular Allgemein */
form fieldset {
    margin-bottom: 50px;
}

/* Formular Pflichtfelder */
/* form.style5 input.mandatory, form.style5 select.mandatory, form.style5 textarea.mandatory {border: 1px solid red !important;} */
/* Formular Pflichtfelder Ende */

/* Formular Liste */
.formular {
    list-style: none; /* Standard-Punkte entfernen */
    padding-left: 1.2em;
    margin: 0;
}
.formular li {
    position: relative;
    padding-left: 1em;
    margin: 0.3em 0;
}

.formular li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: #000;
}

#langer_erklaerungstext_container .list-item {
    margin-bottom: 20px;
}
h1.nutzungsvertrag {
    font-size: 1.5rem;
}
h2.nutzungsvertrag {
    font-size: 1.4rem;
    margin-bottom: 15px;
    margin-top: 45px;
}
h2.nutzungsvertrag.first {
    font-size: 1.4rem;
    margin-bottom: 15px;
    margin-top: 15px;
}
h3.nutzungsvertrag {
    font-size: 1.2rem;
}

abbr {
    background: #f4f4f4;
    border-bottom: none;
    cursor: pointer;
}

/* Formular Liste Ende */

.info::before {
    content: "\f05a"; /* Unicode des Icons im Font Awesome Font */
    font-family: "Font Awesome 5 Free"; /* oder "Font Awesome 6 Free" */
    font-weight: 900; /* z.B. Solid */
    margin-right: 0.3em; /* Abstand zwischen Icon und Text */
    margin-left: 20px;
    color: var(--accentColor);
}

/* Formular Checkbox */
.widget-checkbox .checkbox_container {
    border-radius: 20px;
}

form .checkbox_container span,
form .widget-radio span {
    overflow: hidden;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
}

/* Revolution Slider */
.shadow .ce_revolutionslider .hyperlink_txt {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.shadow .ce_revolutionslider_text {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/* Formular Nutzungsvertrag "Toggle Kleingedrucktes" */

/* zugeklappt */
#langer_erklaerungstext_container.begrenzt {
    margin-top: 20px;
    height: 140px;
    overflow: hidden;
    position: relative;
    transition: height 0.4s ease-out;

    /* Erstellt eine Maske, die oben transparent (sichtbar) ist
       und über 50px nach unten zu 100% Schwarz (ausgeblendet) verläuft.
       (Linearer Verlauf: Transparent = Sichtbar, Schwarz = Ausgeblendet)
    */

    /* 1. Transparent (voll sichtbar) bis 100px Höhe */
    /* 2. Verblassen von 100px bis 150px Höhe */
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 80px,
        rgba(0, 0, 0, 0) 120px
    );

    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 80px,
        rgba(0, 0, 0, 0) 120px
    );
}

/* aufgeklappt */

#langer_erklaerungstext_container.aufgeklappt {
    height: auto !important;

    /* WICHTIG: Die Maske im aufgeklappten Zustand entfernen */
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Toggle-Button */
.toggle_erklaerung {
    margin-bottom: 20px;
}
/* a#toggle_erklaerung_button {margin-left:  10px; padding: 5px 15px; background-color: var(--accentColor); color:  #fff; border-radius: 999px;} */
#toggle_erklaerung_button {
    color: var(--accentColor);
}

/* Login Formular  - andere Formulare in style.css */
.mod_login input,
.mod_login select,
.mod_login textarea {
    background-color: rgb(247, 247, 247);
    border-color: rgb(247, 247, 247);
    font-size: 0.9rem;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.submit_button .submit {
    display: inline-block;
    padding: 15px 20px;
    height: 48px;
    cursor: pointer;
    transition: all 0.2s ease-out 0s;
    width: auto;
    background: var(--accentColor);
    color: #fff;
    border-radius: 40px;
    min-width: 140px;
    text-align: center;
    position: relative;
    -webkit-appearance: none;
}

.link_reset_pwd {
    margin-top: 20px;
}
.mod_login i.ti-close {
    display: none;
}
.mod_login_top i.ti-lock {
    padding-right: 8px;
}
/* Login Formular Ende */

/* Iconboxen Ablauf Ausbauprojekt */
.ce_iconbox.ablauf_ausbauprojekt {
    text-align: left;
}
.ce_iconbox.ablauf_ausbauprojekt .ce_iconbox_outside {
    min-height: 500px;
}
.ablauf_ausbauprojekt .ce_iconbox_inside,
.ablauf_hausanschluss .ce_iconbox_inside {
    padding: 20px;
}
.ce_iconbox.ablauf_hausanschluss .ce_iconbox_outside {
    min-height: 400px;
}
.ablauf_ausbauprojekt .image_container {
    position: absolute !important;
    right: 20px !important;
    top: 450px !important;
}

.image_container img {
    border-radius: 20px;
}

.rounded-5 {
    border-radius: 5px;
}
.rounded-10 {
    border-radius: 10px;
}
.rounded-20 {
    border-radius: 20px;
}

.ce_accordionSingle {
    font-size: 0.85rem;
}
.ce_accordion.style2 .toggler {
    font-size: 0.95rem;
}

/* Pop-Up */
.ce_popup_content {
    padding: 40px;
}

/* Accessibility Widget */
.acc_contrast .header .mainmenu ul li a.highlight span {
    color: var(--highContrastColor);
}
.acc_contrast .ce_flipbox,
.acc_contrast .ce_flipbox a {
    color: #fff !important;
}
.acc_contrast .ce_flipbox_backside_inside .hyperlink_txt {
    color: #fff;
    padding: 5px 10px;
    outline: 1px solid #fff;
}

/* Footer und Bottom*/
#footer,
#footer a {
    color: rgba(255, 255, 255, 0.8);
}
#footer a:hover:not(.ce_hyperlink a) {
    color: var(--accentColorContrast);
}
#bottom .inside,
#bottom .inside a {
    color: rgba(255, 255, 255, 0.8);
}
#bottom .inside a:hover {
    color: var(--accentColorContrast);
    border-bottom: 1px solid;
}

/* Buttons */
.header .mainmenu ul li a.highlight span,
.ce_hyperlink a,
a.btn {
    border-radius: 5px;
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1024px) {
    .ce_flipbox {
        height: 700px !important;
    }
    .ce_flipbox a {
        font-size: 80%;
    }
}

@media only screen and (max-width: 767px) {
    /*.header {background: #fff !important;}*/
    /*.tp-parallax-wrap {display: none !important;} /* Revolution Slider Text auf Mobile deaktiviert */
    .no_mobile {
        display: none !important;
    }
    .ce_revolutionslider {
        display: none;
    }
    .no_mobile {
        display: none;
    }
    .autogrid_row.gutter_l > div {
        padding-left: 0px;
        padding-right: 0px;
    }

    .mmenu_trigger .burger .burger_lines,
    .mmenu_trigger .burger .burger_lines:after,
    .mmenu_trigger .burger .burger_lines:before {
        background-color: var(--secondColor);
        height: 2px;
    }

    .mmenu_trigger {
        color: var(--secondColor);
    }

    .cloned .mmenu_trigger .burger .burger_lines,
    .cloned .mmenu_trigger .burger .burger_lines:after,
    .cloned .mmenu_trigger .burger .burger_lines:before {
        background-color: #fff;
        height: 2px;
    }

    .cloned .mmenu_trigger {
        color: #fff;
    }
}