@charset "utf-8";

/* Text, Farben */
@import url("text-YUJ7s46.css");

/* Variablen */
:root {
    --base-transition-effect: .15s ease-in-out;
    --base-transition: color var(--base-transition-effect), background-color var(--base-transition-effect), border-color var(--base-transition-effect), box-shadow var(--base-transition-effect), opacity var(--base-transition-effect);

    /* Breakpoints als Referenz; können nicht in Media Queries genutzt werden */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* Haupt-Elemente */
html, body {
    margin: 0;
    padding: 0;
    height: auto;
}

body {
    overflow-y: scroll;
}

.has-js .hide-js { display: none; }
.no-js .show-js { display: none; }
.d-none { display: none; }

a, .js-link, label {
    color: var(--SUNTEC-Blue);
    &:hover, &:active, &:focus {
        color: var(--SUNTEC-DarkBlue);
    }
}
a[href], .js-link, label {
    cursor: pointer;
}
a[href], .js-link {
    text-decoration: underline;
}
a[href]:hover, .js-link:hover {
    color: var(--SUNTEC-Blue);
}

/* Scroll-offset */
* {
    scroll-padding-top: 100px;
}
@media (min-width: 992px) {
    * {
        scroll-padding-top: 120px;
    }
}
@media (min-width: 1200px) {
    * {
        scroll-padding-top: 135px;
    }
}

/* Überschrift mit Sonne */
.sun {
    position: relative;
}
.sun:before {
    background: url("../images/global/suntec-sun-iGn85x2.svg") no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 3rem;
    left: -13px;
    top: -2px;
    aspect-ratio: 1;
    position: absolute;
    z-index: 1;
}
.sun h1 {
    position: relative;
    z-index: 2;
}
@media (min-width: 768px) {
    .sun:before {
        height: 4.25rem;
        left: -18px;
        top: -4px;
    }
}
@media (min-width: 992px) {
    .sun:before {
        height: 6.25rem;
        left: -22px;
        top: -4px;
    }
}

/* Icon/Headline/Text-Sets (Highlights */
.list-of-highlights {
    font-size: .75rem;
    line-height: 1rem;
}

/* Farben */
.bg-light-blue {
    background: var(--SUNTEC-LightBlue);
}
.bg-grey-blue {
    background: var(--SUNTEC-GreyBlue);
}
.bg-bright-yellow {
    background: var(--SUNTEC-BrightYellow);
}
.bg-lighter-yellow {
    background: var(--SUNTEC-LighterYellow);
}
.bg-blue-yellow-gradient {
    background: linear-gradient(286deg, rgba(254, 252, 148, 0.20) 38%, transparent 85%), var(--SUNTEC-LightBlue);
}
.text-highlight {
    color: var(--SUNTEC-Screamer);
}
.text-dark-blue {
    color: var(--SUNTEC-DarkBlue);
}
.text-yellow {
    color: var(--SUNTEC-Yellow);
}

/* Formulare */
.form-control {
    --bs-border-radius: 32px;
    --bs-body-bg: var(--SUNTEC-LightBlue);
    --bs-border-color: var(--SUNTEC-GreyBlue);
}
.form-floating > .form-control,
.form-floating > label {
    padding-inline: 1.75rem;
}
.form-floating > label {
    background-color: transparent; /* Prevent background color spillover */
}
.form-floating > label:after {
    background-color: transparent !important; /* Prevent background color spillover */
}
.form-floating > textarea.form-control {
    height: 150px;
    resize: none;
}

.range-slider {
    margin-inline: auto;
    width: 75%;
    .values {
        height: 1rem;
        position: relative;
        overflow: visible;
    }
    .values > span {
        position: absolute;
        transform: translateX(-50%);
    }
    .values > span:nth-child(1) { left: 0; }
    .values > span:nth-child(2) { left: 25%; }
    .values > span:nth-child(3) { left: 50%; }
    .values > span:nth-child(4) { left: 75%; }
    .values > span:nth-child(5) { left: 100%; }

    .noUi-target {
        background: var(--SUNTEC-LightBlue);
        box-shadow: none;
        border: none;
        border-radius: 25px;
    }
    .noUi-connect {
        background: var(--SUNTEC-Blue);
    }

    .noUi-handle {
        background: var(--SUNTEC-Blue);
        box-shadow: none;
        cursor: grab;
        border: none;
        border-radius: 30px;
        height: 30px !important;
        width: 30px !important;
    }

    .noUi-handle:before, .noUi-handle:after {
        content: "";
        display: none;
    }
}

/* Top-Navigation */
.headContactLine {
    color: var(--SUNTEC-DarkBlue);
    font-size: .75rem;

    a {
        color: inherit;
        text-decoration: none;
    }
}
@media (max-width: 991px) {
    header.sticky-top {
        max-height: 100vh;
        overflow-y: scroll;
    }
}
#mainNavigation {
    background: var(--SUNTEC-LightBlue);
    box-shadow: 0 2px 8px #EBE7F1;
    font-size: 1rem;
    transition: var(--base-transition);
    margin-bottom: 2rem;

    a {
        color: var(--SUNTEC-DarkBlue);
        text-decoration: none;
    }
    a:hover {
        color: var(--SUNTEC-Blue);
    }
    .nav-item.active > a {
        font-weight: bold;
    }
    .nav-item.highlight > a {
        color: var(--SUNTEC-Screamer);
    }
    .nav-item:last-child a {
        padding-inline-end: 0 !important;
    }

    .subMenu a {
        display: block;
    }
    .subMenu-toggle {
        cursor: default;
        text-align: center;
    }
    .subMenu-toggle:after {
        background: none;
        border: none;
        display: inline-block;
        content: "\f107"; /* angle-down */
        font: var(--fa-font-solid);
        font-size: .75rem;
        margin-left: .3rem;
        transition: transform ease-in-out 100ms;
        transform: rotate(0deg);
        vertical-align: 1px;
    }
    .subMenu-toggle:not(.collapsed):after {
        transform: rotate(-180deg);
    }
    @media (min-width: 992px) {
        .subMenu-item:hover .subMenu-toggle:after,
        .subMenu-item:focus .subMenu-toggle:after,
        .subMenu-item:active .subMenu-toggle:after {
            transform: rotate(-180deg);
        }
    }

    .navbar-brand img {
        max-height: 45px;
    }
    .navbar-toggler {
        border: 0;
        box-shadow: none;
    }
    .navbar-toggler-icon {
        background-image: none;
    }
    .navbar-toggler .navbar-toggler-icon:after {
        content: "\f00d"; /* xmark */
        color: var(--SUNTEC-Blue);
        font: var(--fa-font-solid);
        font-size: 1.5625rem;
        vertical-align: -8px;
    }
    .navbar-toggler.collapsed .navbar-toggler-icon:after {
        content: "\f0c9"; /* bars */
    }

    .navbar-nav {
        align-items: center;
    }

    .subMenu {
        background: none;
        border: none;
    }
    .subMenu-content {
        background: var(--SUNTEC-LightBlue);
        padding-block: 1.5rem;
        position: relative;
        overflow: hidden;

        h3 {
            font-size: 1.15rem;
            font-weight: 700;
        }

        p {
            font-size: .75rem;
            line-height: 1rem;
        }
    }

    /* Navigation sichtbar (Bildschirmgröße "XL") */
    @media (min-width: 992px) {
        .subMenu-toggle {
            text-align: start;
        }

        .subMenu {
            border-radius: 0;
            display: block;
            opacity: 0;
            padding-top: 1.375rem;
            pointer-events: none;
            position: absolute;
            left: 0;
            right: 0;
            transition: opacity linear 100ms;
        }

        .subMenu-item:hover .subMenu,
        .subMenu-item:focus .subMenu,
        .subMenu-item:active .subMenu,
        .subMenu-item.show {
            pointer-events: all;
            opacity: 1;
        }

        .subMenu-content:before {
            content: "";
            display: block;
            position: absolute;
            left: -8px;
            right: -8px;
            top: 0;
            pointer-events: none;
            height: calc(100% + 8px);
            box-shadow: 0 2px 8px inset #EBE7F1;
        }
    }
    @media (min-width: 992px) and (max-width: 1199px) {
        font-size: .9rem;

        .navbar-brand img {
            max-height: none;
            max-width: 130px;
        }

        .subMenu {
            padding-top: .8125rem;
        }
    }
    @media (min-width: 1200px) {
        .navbar-brand img {
            max-height: 60px;
            max-width: none;
        }
    }
}

/* Footer */
footer {
    background-color: var(--SUNTEC-GreyBlue);
    color: var(--SUNTEC-DarkBlue);
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
}
footer:before {
    background: var(--main-secondary-color) no-repeat left top url("../images/global/bg-footer-wave-QZ9FtKo.svg");
    background-size: cover;
    content: "";
    display: block;
    height: 6.75vw;
    left: -2px;
    right: -2px;
    position: relative;
    pointer-events: none;
}
@media (max-width: 768px) {
    footer:before {
        background-image: url("../images/global/bg-mobile-footer-wave-9ciB4tB.svg");
        height: 13.3vw;
    }
}
footer .imprint-line {
    align-items: center;

    a {
        color: var(--SUNTEC-DarkBlue);
        display: inline-block;
        font-weight: 700;
        text-decoration: none;
        margin-block: .25rem;
        margin-inline: 1rem;
    }
    a:first-child {
        margin-inline-start: 0;
    }
}
footer .partners .col {
    img {
        aspect-ratio: calc(261/121);
        object-fit: contain;
        background-color: var(--main-secondary-color);
        padding: 1rem;
        width: 100%;
    }
}

/* Lade-Indikator */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } }

.spin {
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-delay: 0s;
}

/* Rahmen */
.border-ci {
    --bs-border-color: var(--SUNTEC-Blue);
    --bs-border-width: 2px;
}

/* Buttons */
.btn-ci {
    background: var(--SUNTEC-Screamer);
    border: none !important;
    border-radius: 32px;
    color: var(--SUNTEC-LighterYellow);
    padding: 6px 16px;
    font-weight: 700;
    text-decoration: none !important;
}
.btn-ci:hover, .btn-ci:focus {
    background: var(--SUNTEC-ScreamerHover) !important;
    color: var(--SUNTEC-LighterYellow) !important;
}
.btn-ci:active {
    background: var(--SUNTEC-ScreamerActive) !important;
    color: var(--SUNTEC-LighterYellow) !important;
}

.btn-ci-yellow {
    background: var(--SUNTEC-YellowSubtle);
    border: none !important;
    border-radius: 32px;
    color: var(--SUNTEC-DarkBlue);
    padding: 6px 16px;
    font-weight: 700;
    text-decoration: none !important;
}
.btn-ci-yellow:hover, .btn-ci-yellow:focus {
    background: var(--SUNTEC-Yellow) !important;
    color: var(--SUNTEC-DarkBlue) !important;
}
.btn-ci-yellow:active {
    background: var(--SUNTEC-Yellow) !important;
    color: var(--SUNTEC-DarkBlue) !important;
}

.btn-ci-blue {
    background: var(--SUNTEC-Blue);
    border: none !important;
    border-radius: 32px;
    color: var(--SUNTEC-LightBlue);
    padding: 6px 16px;
    font-weight: 700;
    text-decoration: none !important;
}
.btn-ci-blue:hover, .btn-ci-blue:focus {
    background: var(--SUNTEC-DarkBlue) !important;
    color: var(--SUNTEC-LightBlue) !important;
}
.btn-ci-blue:active {
    background: var(--SUNTEC-DarkBlue) !important;
    color: var(--SUNTEC-LightBlue) !important;
}

/* Komponenten: Accordion */
.accordion {
    --bs-accordion-border-radius: 32px;
    --bs-accordion-inner-border-radius: var(--bs-accordion-border-radius);

    --bs-accordion-color: var(--SUNTEC-Blue);
    --bs-accordion-active-color: var(--bs-accordion-color);
    --bs-accordion-btn-color: var(--bs-accordion-color);

    --bs-accordion-bg: var(--SUNTEC-GreyBlue);
    --bs-accordion-active-bg: var(--bs-accordion-bg);
}
.accordion-item {
    border-radius: var(--bs-accordion-border-radius);
    margin-bottom: .75rem;
}
.accordion-item > .accordion-header .accordion-button {
    border-radius: var(--bs-accordion-border-radius);
    font-weight: 700;
}
.accordion-item > .accordion-header .accordion-button:after {
    background-image: url("../images/global/ArrowButton-NYmnkaw.svg");
}
.accordion-item:last-child {
    margin-bottom: 0;
}
.accordion .text-lg {
    font-size: 1.25rem;
    margin-inline-end: .5rem;
}

/* Accordion: FAQ */
#accordionFaq .accordion-item > .accordion-header .accordion-button:before {
    aspect-ratio: 1;
    background: url("../images/global/sun-e4BM5cj.svg") no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 1.5rem;
    margin-inline-end: .25rem;
}

/* Accordion: Stellen */
#accordionStellen .accordion-item > .accordion-header .accordion-button:before {
    content: "\f0ad"; /* wrench */
    font: var(--fa-font-solid);
    font-size: 1.25rem;
    color: var(--SUNTEC-GreyYellow);
    display: inline-block;
    margin-inline-end: .5rem;
}

/* Visuals */
.visual img,
.visual video {
    display: block;
    margin-inline: auto;
    max-height: 100vh;
    width: 100%;
}
@media (min-width: 1400px) {
    .visual img,
    .visual video {
        max-width: 1320px;
    }
}
.visual-clip {
    position: relative;
    overflow: hidden;
}
.visual-clip:after {
    background: no-repeat left top url("../images/global/bg-header-wave-white-4ooEKOL.svg");
    background-size: cover;
    content: "";
    display: block;
    height: 6.3vw;
    left: -2px;
    right: -2px;
    bottom: 0;
    position: absolute;
}
.visual-clip.bg-light-blue:after {
    background-image: url("../images/global/bg-header-wave-lightblue-PsCd89n.svg");
}
.visual-clip.bg-lighter-yellow:after {
    background-image: url("../images/global/bg-header-wave-lighteryellow-l7XCndJ.svg");
}
.visual-clip.bg-blue-yellow-gradient:after {
    background-image: url("../images/global/bg-header-wave-gradient-8TfYmRS.svg");
}
@media (max-width: 768px) {
    .visual-clip:after {
        background-image: url("../images/global/bg-mobile-header-wave-white-Er2aR0y.svg");
        height: 13.3vw;
    }
    .visual-clip.bg-light-blue:after {
        background-image: url("../images/global/bg-mobile-header-wave-lightblue-Yr8dUBx.svg");
    }
    .visual-clip.bg-lighter-yellow:after {
        background-image: url("../images/global/bg-mobile-header-wave-lighteryellow-tydT5g_.svg");
    }
    .visual-clip.bg-blue-yellow-gradient:after {
        background-image: url("../images/global/bg-mobile-header-wave-gradient-NnQr2aB.svg");
    }
}

/* Unterteilte Boxen */
.row-cols-divided-multiline-123,
.row-cols-divided-md {
    --row-divider-color: var(--SUNTEC-GreyBlue);
}
.bg-grey-blue .row-cols-divided-multiline-123,
.bg-grey-blue .row-cols-divided-md {
    --row-divider-color: var(--SUNTEC-LightBlue);
}
.row-cols-divided-md .col:not(:last-child) {
    border-bottom: 2px solid var(--row-divider-color);
    padding-bottom: 1rem;
}
@media (min-width: 768px) {
    .row-cols-divided-md .col:not(:last-child) {
        border-bottom: none;
        border-right: 2px solid var(--row-divider-color);
        padding-bottom: 0;
    }
}
@media (max-width: 768px) {
    .row-cols-divided-multiline-123 {
        .col {
            padding-block: 1rem 2rem;
        }
        .col:not(:last-child) {
            border-bottom: 2px solid var(--row-divider-color);
        }
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    .row-cols-divided-multiline-123 .col:nth-child(2n-1) {
        border-right: 2px solid var(--row-divider-color);
    }
}
@media (min-width: 992px) {
    .row-cols-divided-multiline-123 {
        .col:not(:nth-child(3)) {
            border-right: 2px solid var(--row-divider-color);
        }
    }
}

/* Tiles */
.tile-cols .col {
    width: auto;
}
.tile {
    aspect-ratio: calc(536 / 597);
    border-radius: 30px;
    position: relative;
    text-align: center;
    margin-inline: auto;
    width: calc(50vw - 1rem);
}
@media (min-width: 576px) {
    .tile {
        width: 250px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .tile {
        width: 220px;
    }
}
.tile a {
    background-color: rgba(24, 11, 60, .6);
    border-radius: 30px;
    color: var(--SUNTEC-LighterYellow);
    text-decoration: none;
    position: absolute;
    font-size: 1.35rem;
    font-weight: 300;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding-top: 50%;
    transition: background-color linear 200ms;
}
.tile a:hover {
    color: var(--SUNTEC-LighterYellow);
}
.tile:hover a {
    background-color: rgba(24, 11, 60, .3);
}

/* Sponsoring */
.sponsoring-logos {
    margin-inline: auto;
    .col {
        width: auto;

        a {
            background: var(--SUNTEC-LightBlue);
            border-radius: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            height: 150px;
            width: 150px;

            img {
                max-height: 100%;
            }
        }
    }
}
@media (min-width: 768px) {
    .sponsoring-logos {
        width: 75%;
    }
}

/* Counter */
.counter {
    background: url("../images/global/kreis-MFD8_eD.svg") no-repeat center center;
    background-size: contain;
    color: var(--SUNTEC-Blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: .75rem;
    line-height: 1.125rem;
    margin-block: .75rem;
    text-align: center;
    height: 200px;
    width: 50%;
    max-width: 250px;
}
@media (max-width: 767px) {
    .counter h2 {
        font-size: 2.75rem;
    }
}
@media (min-width: 992px) {
    .counter {
        width: 25%;
    }
}
.counter-content h2 {
    margin-bottom: 0;
}

/* Schritte */
.steps-number {
    color: var(--SUNTEC-GreyBlue);
    font-family: "Impact", sans-serif;
    font-size: 7.5rem;
    line-height: 7.5rem;
    margin-inline-end: 1rem;
}

/* Vertikale Pfeile */
.line-down,
.arrow-down {
    background: var(--SUNTEC-GreyBlue);
    color: var(--SUNTEC-GreyBlue);
    padding: 0;
    position: relative;
    min-height: 120px;
    width: 2px;
}
.arrow-down:after {
    content: "\f063"; /* arrow-down */
    font: var(--fa-font-solid);
    font-size: 1rem;
    display: block;
    position: absolute;
    bottom: -2px;
    left: -5px;
}

/* Diverse Pull-out-Bilder */
#solarwaerme, #solarstromspeicher, #wasserbehandlung {
    .move-up-container {
        margin-top: 5rem;
    }
    .move-up {
        margin-top: -3rem;
    }
}

/* Startseite */
#index .bg-mobile img {
    width: 100%;
}
@media (min-width: 992px) {
    #index .bg-suche {
        background: var(--SUNTEC-LightBlue) url("../images/start/webrecherche-solar@2x-fZoq59l.png") no-repeat bottom right;
        background-size: 50%;
        min-height: 550px;
    }
}

/* PV Privat */
#pv-privat {
    .pv-aufbau-container {
        margin-top: 5rem;
    }
    .pv-aufbau {
        margin-top: -3rem;
    }
}
@media (min-width: 992px) {
    #pv-privat .pv-aufbau {
        margin-top: -5rem;
    }
}

/* Über uns */
#about .suntec-logo {
    width: 50%;
    max-width: 400px;
}
@media (min-width: 992px) {
    #about .suntec-logo {
        width: 100%;
    }
}
@media (max-width: 992px) {
    #about .move-up-container {
        margin-top: 7.5rem;
    }
    #about .move-up {
        margin-top: -5rem;
    }
}

.referenz-media {
    transition: transform ease-in-out 200ms;
}
.referenz-media:hover {
    transform: scale(105%);
}
.referenz-visual {
    img, video {
        border-radius: 30px;
        aspect-ratio: 1;
        object-fit: cover;
        width: 100%;
    }
}

/* Solarstromspeicher */
#solarstromspeicher {
    .move-up-container {
        margin-top: 5rem;
    }
    .move-up {
        margin-top: -3rem;
    }
    .stromspeicher img {
        width: 100%;
    }
    #unabhaengigkeitsrechner {
        width: 100%;
    }
}

/* Solarwärme */
#wasserbehandlung {
    .solarwaerme-systemaufbau img {
        object-fit: contain;
        object-position: top;
        height: 100%;
        width: auto;
    }
}

/* Wärmepumpe */
#waermepumpen,
#waermepumpen footer:before {
    background-color: var(--SUNTEC-LightBlue);
}

/* Gasheizung */
#gasheizung {
    .gasheizung-aufbau img {
        object-fit: contain;
        height: 100%;
        width: auto;
    }
}

/* News */
.news-entry {
    background: var(--SUNTEC-LightBlue);
    border: 1px solid var(--SUNTEC-Blue);
    border-radius: 15px;
}
.news-content {
    padding: .5rem .75rem;
}
.news-image {
    border-radius: 15px;
    padding-inline-end: 0;
    overflow: hidden;
}
.news-image a,
.news-image img {
    display: block;
}

/* Anstehende Events */
.next-event {
    padding-block: 1.5rem;
    border-bottom: 2px solid var(--SUNTEC-GreyYellow);
    img {
        border-radius: 15px;
        max-width: 100%;
    }
}

/* Veranstaltungen */
.event-item {
    aspect-ratio: 1;
    background-size: cover;
    border-radius: 25px;
    width: 100%;

    a {
        background-color: rgba(24, 11, 60, .6);
        border-radius: 25px;
        color: var(--SUNTEC-LighterYellow) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        height: 100%;
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-size: 1.35rem;
        font-weight: 300;
        transition: background-color linear 200ms;
    }
}
.event-item:hover a {
    background-color: rgba(24, 11, 60, .3);
}

.gallery {
    margin-left: -15px;
    .gallery-item {
        padding-left: 15px;
        padding-top: 15px;
    }
    img {
        border-radius: 25px;
        display: block;
        width: 100%;
    }
}
.file-upload-preview-image {
    position: relative;
    img {
        aspect-ratio: 1;
        object-fit: cover;
    }
    .delete {
        color: #fff;
        cursor: pointer;
        position: absolute;
        text-shadow: 0 0 1px rgba(0,0,0,.5);
        top: 30px;
        right: 15px;
    }
}

/* Holzpellets */
@media (min-width: 992px) {
    #pelletsheizung .bg-holzpellets {
        background: var(--main-secondary-color) url("../images/pelletsheizung-holzscheitkessel/holzpellets-sticks-brennstoff@2x-dUzCi68.png") no-repeat;
        background-position: calc(100% + 100px) bottom;
        background-size: 250px auto;
    }
}

/* Scheitholzkessel */
@media (min-width: 992px) {
    #scheitholzkessel .bg-brennholzstapel {
        background: var(--main-secondary-color) url("../images/pelletsheizung-holzscheitkessel/brennholzstapel-AXXnnEO.png") no-repeat;
        background-position: calc(100% + 100px) bottom;
        background-size: 300px auto;
    }
}

/* Kontakt */
.locationMap {
    border-radius: 10px;
    height: 400px;
    width: 100%;
}