/* ============================================= */
/* ============== SOLARSENSE MAIN ============== */
/* ============================================= */
/* Project: SolarSense GmbH                      */
/* Updated: 2026-02-16                            */
/*                                                */
/* Colors  → colors.css                           */
/* Fonts   → fonts.css                            */
/* Layout, components, utilities → this file      */
/* ============================================= */


/* ============================================= */
/* =========== BOOTSTRAP OVERRIDES ============= */
/* ============================================= */

html {
    background-color: var(--color-white);
}

.accordion-item {
    border: 0 !important;
    border-bottom: 1px solid var(--color-white) !important;
}

.accordion-button:not(.collapsed) {
    background: var(--color-white) !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border: none !important;
}

.accordion-button::after {
    background-image: url('/uploads/Icons/open-container.svg') !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('/uploads/Icons/close-container.svg') !important;
}

:focus-visible {
    outline: none !important;
}

.form-control:focus {
    outline: 0;
    box-shadow: none !important;
    border-color: var(--color-white) !important;
}


/* ============================================= */
/* ============= FORMIE OVERRIDES ============== */
/* ============================================= */

/* Field spacing */
.fui-row {
    margin-bottom: 0.25rem !important;
}

.fui-field {
    margin-bottom: 0 !important;
}

/* Inputs */
.fui-input,
.fui-select,
textarea.fui-input {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 !important;
    padding: 0.875rem 0 !important;
    color: var(--color-white) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    transition: border-color 0.3s ease !important;
    width: 100% !important;
}

.fui-input:focus,
.fui-select:focus,
textarea.fui-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-bottom-color: var(--color-white) !important;
}

/* Placeholders */
.fui-input::placeholder,
textarea.fui-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
}

/* Textarea */
textarea.fui-input {
    min-height: 80px !important;
    resize: vertical !important;
}

/* Labels (hidden but accessible) */
.fui-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 0 !important;
}

/* Error states */
.fui-field.fui-error .fui-input,
.fui-field.fui-error textarea.fui-input {
    border-bottom-color: #ff6b6b !important;
}

.fui-error-message {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: #ff6b6b !important;
    margin-top: 0.25rem !important;
}

/* Alert messages */
.fui-alert {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    padding: 1rem !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 1rem !important;
}

.fui-alert-success {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--color-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.fui-alert-error {
    background: rgba(255, 107, 107, 0.1) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255, 107, 107, 0.2) !important;
}

/* Submit button */
.fui-btn-wrapper {
    margin-top: 1.5rem !important;
}

.fui-submit {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 0.75rem 2.5rem !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important;
}

.fui-submit:hover {
    background-color: var(--color-light-gray) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Required asterisk */
.fui-required {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Checkbox styling */
.fui-checkbox-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
}

/* Loading spinner */
.fui-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Dark background form variant (for contact modal sidebar) */
.contact-modal-sidebar .fui-input,
.contact-modal-sidebar textarea.fui-input {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

.contact-modal-sidebar .fui-input::placeholder,
.contact-modal-sidebar textarea.fui-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}


/* ============================================= */
/* ============ LAYOUT UTILITIES =============== */
/* ============================================= */

.max-width {
    max-width: 1440px;
}

.max-width-lg {
    max-width: 1920px;
}

.vh-30 {
    min-height: 30vh;
}

.vh-50 {
    height: 50vh;
}

.vh-70 {
    min-height: 70vh;
}

.vh-100-homepage {
    height: calc(100vh - 90px);
}

.mt-n5 {
    margin-top: -6rem !important;
}


/* ============================================= */
/* =========== BACKGROUND UTILITIES ============ */
/* ============================================= */

.background-cover { background-size: cover; }
.background-contain { background-size: contain; }
.background-no-repeat { background-repeat: no-repeat; }
.background-position-center { background-position: center center; }
.background-position-bottom { background-position: center bottom; }
.background-position-center-right { background-position: center right; }
.background-position-top-center { background-position: top center; }
.background-position-top-right { background-position: top right; }
.background-attachment-fixed { background-attachment: fixed; }


/* ============================================= */
/* ========== INTERACTION UTILITIES ============ */
/* ============================================= */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

.image-hover:hover .image-scale {
    transform: scale(1.05);
    transition: var(--transition-base);
}

.image-scale {
    transform: scale(1);
    transition: var(--transition-base);
}


/* ============================================= */
/* ============ TEXT UTILITIES ================= */
/* ============================================= */

.multiline-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: pre-wrap;
}


/* ============================================= */
/* ========== SCROLL MARGIN TARGETS ============ */
/* ============================================= */

#intro,
#partner {
    scroll-margin-top: 108px;
}

#team,
#partner,
#kunden,
#bewerben,
#geschichte {
    scroll-margin-top: 96px;
}


/* ============================================= */
/* ============== BUTTONS ===================== */
/* ============================================= */

.button-orange,
.button-white {
    transition: var(--transition-base);
    border-radius: var(--radius-sm);
}

.button-orange:hover {
    background-color: var(--color-dark-orange);
    transform: scale(1.05);
}

.button-white:hover {
    background-color: var(--color-light-gray);
    transform: scale(1.05);
}


/* ============================================= */
/* ============== SEPARATORS ================== */
/* ============================================= */

.orange-separator {
    width: 10rem;
    border: 5px solid var(--color-orange);
}

.orange-full-separator {
    border: 5px solid var(--color-orange);
}

.gray-full-separator {
    border-top: 10px solid var(--color-dark-gray);
}

.stellen-border {
    width: 10rem;
    border-bottom: 1px solid var(--color-light-gray);
}

.footer-separator {
    border-bottom: 1px solid var(--color-dark-orange);
}


/* ============================================= */
/* ================ HEADER ==================== */
/* ============================================= */

.header-color {
    background-color: rgba(227, 154, 36, 0.58);
}

.hamburger-menu-mobile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.354' height='16.968' viewBox='0 0 24.354 16.968'%3E%3Crect width='2.968' height='24.354' rx='1.484' transform='translate(24.354) rotate(90)' fill='%23fff'/%3E%3Crect width='2.968' height='24.354' rx='1.484' transform='translate(24.354 7) rotate(90)' fill='%23fff'/%3E%3Crect width='2.968' height='24.354' rx='1.484' transform='translate(24.354 14) rotate(90)' fill='%23fff'/%3E%3C/svg%3E");
    width: 2.5rem;
    height: 2rem;
}

.close-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cpath d='m585,514c9.5,9.3,14.9,22.1,15,35.4.1,13.3-5.2,26.1-14.6,35.6s-22.2,14.7-35.6,14.6c-13.3-.1-26.1-5.4-35.4-15l-214.7-214.6L85.1,585.1c-12.7,12.4-31,17.2-48.1,12.6C19.9,593,6.5,579.6,1.7,562.5c-4.6-17.1.1-35.4,12.6-48.1L229,299.7,14.3,85.1C1.9,72.5-2.9,54.1,1.7,37,6.4,19.9,19.8,6.5,36.9,1.8c17.1-4.6,35.4.1,48.1,12.6l214.7,214.6L514.3,14.4c12.7-12.5,31-17.3,48.2-12.7,17.2,4.6,30.6,18.1,35.2,35.2,4.6,17.2-.2,35.5-12.7,48.2L370.4,299.7,585,514.3Z' fill='%23fff'/%3E%3C/svg%3E");
    width: 2.5rem;
    height: 2.5rem;
}

.logo {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 955.69 282.91'%3E%3Cdefs%3E%3Cstyle%3E .cls-1, .cls-2 %7B fill: %23fff; %7D .cls-2, .cls-3 %7B fill-rule: evenodd; %7D .cls-4, .cls-3 %7B fill: %23f49602; %7D %3C/style%3E%3C/defs%3E%3Cg id='Farbig'%3E%3Cg id='Logo'%3E%3Cg id='d'%3E%3Cg id='e'%3E%3Cpath class='cls-1' d='M549.17,120.27c-4.56,0-7.88.82-9.95,2.47-2.1,1.64-3.15,4.37-3.15,8.16v1.9c0,3.8,1.05,6.52,3.15,8.16s5.41,2.47,9.95,2.47h47.45c3.66,0,6.94.34,9.89,1.02s5.44,1.79,7.51,3.34c2.04,1.56,3.63,3.57,4.71,6.04s1.62,5.47,1.62,9.07v5.58c0,3.57-.54,6.6-1.62,9.07s-2.64,4.48-4.71,6.04c-2.04,1.56-4.56,2.69-7.51,3.34-2.95.68-6.24,1.02-9.89,1.02h-68.48c-1.79,0-2.69-.91-2.69-2.69v-5.16c0-1.87.91-2.81,2.69-2.81h67.15c4.56,0,7.85-.82,9.89-2.47s3.09-4.37,3.09-8.16v-2.01c0-3.8-1.02-6.52-3.09-8.16-2.04-1.64-5.36-2.47-9.89-2.47h-47.57c-3.66,0-6.94-.34-9.84-1.02-2.92-.68-5.39-1.79-7.46-3.34-2.04-1.56-3.63-3.57-4.71-6.04s-1.62-5.47-1.62-9.07v-5.47c0-3.57.54-6.6,1.62-9.07s2.64-4.48,4.71-6.04c2.04-1.56,4.54-2.69,7.46-3.34,2.92-.68,6.18-1.02,9.84-1.02h67.61c1.87,0,2.81.91,2.81,2.69v5.16c0,1.87-.94,2.81-2.81,2.81h-66.16,0ZM689.17,129.79c10.15,0,15.22,5.1,15.22,15.34v3.26c0,10.23-5.07,15.34-15.22,15.34h-46.88v5.05c0,2.98.85,5.33,2.58,7.06s4.05,2.58,7.06,2.58h47.79c1.64,0,2.47.79,2.47,2.35v4.82c0,1.64-.82,2.47-2.47,2.47h-50.94c-5.22,0-9.44-1.59-12.64-4.76s-4.82-7.4-4.82-12.7v-23.27c0-5.3,1.62-9.52,4.82-12.7s7.43-4.76,12.64-4.76h40.39v-.06h0ZM642.29,154.09h44.22c2.52,0,4.34-.57,5.39-1.67s1.56-2.86,1.56-5.27v-.79c0-2.38-.51-4.14-1.56-5.27s-2.83-1.67-5.39-1.67h-34.58c-2.98,0-5.33.85-7.06,2.58s-2.58,4.05-2.58,7.06v5.05h0ZM715.71,147.26c0-5.3,1.62-9.52,4.82-12.7s7.43-4.76,12.64-4.76h37.39c5.3,0,9.55,1.59,12.76,4.76s4.82,7.4,4.82,12.7v38.27c0,1.64-.82,2.47-2.47,2.47h-6.15c-1.64,0-2.47-.82-2.47-2.47v-36.48c0-2.98-.85-5.33-2.52-7.06s-4-2.58-7-2.58h-31.24c-2.98,0-5.33.85-7,2.58s-2.52,4.05-2.52,7.06v36.48c0,1.64-.82,2.47-2.47,2.47h-6.15c-1.64,0-2.47-.82-2.47-2.47v-38.27h.03,0ZM803.01,187.99c-1.64,0-2.47-.82-2.47-2.47v-4.82c0-1.56.82-2.35,2.47-2.35h50.82c2.52,0,4.34-.57,5.39-1.67s1.56-2.86,1.56-5.27v-.79c0-2.38-.51-4.14-1.56-5.27-1.05-1.11-2.83-1.67-5.39-1.67h-39.17c-10.15,0-15.22-5.1-15.22-15.34v-3.26c0-10.23,5.07-15.34,15.22-15.34h52.38c1.64,0,2.47.82,2.47,2.47v4.82c0,1.56-.82,2.35-2.47,2.35h-49.69c-2.52,0-4.34.57-5.39,1.67s-1.56,2.86-1.56,5.27v.79c0,2.38.51,4.14,1.56,5.27,1.05,1.11,2.83,1.67,5.39,1.67h39.06c10.23,0,15.34,5.1,15.34,15.34v3.26c0,10.23-5.1,15.34-15.34,15.34h-53.4,0ZM940.46,129.79c10.15,0,15.22,5.1,15.22,15.34v3.26c0,10.23-5.07,15.34-15.22,15.34h-46.88v5.05c0,2.98.85,5.33,2.58,7.06s4.05,2.58,7.06,2.58h47.79c1.64,0,2.47.79,2.47,2.35v4.82c0,1.64-.82,2.47-2.47,2.47h-50.94c-5.22,0-9.44-1.59-12.64-4.76s-4.82-7.4-4.82-12.7v-23.27c0-5.3,1.62-9.52,4.82-12.7s7.43-4.76,12.64-4.76h40.39v-.06h0ZM893.58,154.09h44.22c2.55,0,4.34-.57,5.39-1.67s1.56-2.86,1.56-5.27v-.79c0-2.38-.51-4.14-1.56-5.27s-2.83-1.67-5.39-1.67h-34.58c-2.98,0-5.33.85-7.06,2.58s-2.58,4.05-2.58,7.06v5.05h0Z'/%3E%3Cpath class='cls-4' d='M198.1,104.65c1.76,0,2.61.88,2.61,2.61v11.31c0,1.76-.88,2.61-2.61,2.61h-59.64c-2.3,0-3.94.6-4.88,1.79-.96,1.19-1.42,2.81-1.42,4.88v4.05c0,4.45,2.07,6.66,6.18,6.66h44.65c6.92,0,12.1,1.76,15.59,5.3s5.24,8.59,5.24,15.17v9.52c0,5.78-1.7,10.49-5.13,14.06-3.4,3.57-8.73,5.36-15.96,5.36h-65.96c-1.81,0-2.75-.88-2.75-2.61v-11.31c0-1.76.91-2.61,2.75-2.61h62.5c2.3,0,3.94-.6,4.88-1.79.96-1.19,1.42-2.81,1.42-4.88v-4.88c0-4.45-2.07-6.66-6.18-6.66h-44.65c-6.92,0-12.1-1.76-15.59-5.3s-5.24-8.59-5.24-15.17v-8.7c0-5.78,1.7-10.49,5.13-14.06,3.4-3.57,8.73-5.36,15.96-5.36h63.1,0ZM277.98,122.62c5.33,0,9.81.45,13.46,1.36s6.58,2.35,8.76,4.28c2.18,1.96,3.74,4.45,4.71,7.51s1.42,6.72,1.42,11v17.15c0,4.28-.48,7.97-1.42,11-.96,3.06-2.52,5.56-4.71,7.51s-5.1,3.34-8.76,4.22-8.14,1.3-13.46,1.3h-33.68c-5.39,0-9.89-.43-13.52-1.3-3.6-.88-6.52-2.27-8.7-4.22s-3.74-4.45-4.71-7.51-1.42-6.72-1.42-11v-17.15c0-4.28.48-7.97,1.42-11,.96-3.06,2.52-5.56,4.71-7.51s5.07-3.37,8.7-4.28c3.6-.91,8.11-1.36,13.52-1.36,0,0,33.68,0,33.68,0ZM233,160.95c0,2.55.2,4.65.6,6.32s1.11,3,2.1,4,2.32,1.7,4,2.15c1.67.43,3.77.65,6.32.65h30.36c2.61,0,4.76-.23,6.43-.65s3-1.16,4-2.15,1.67-2.32,2.07-4,.6-3.77.6-6.32v-11.31c0-2.47-.2-4.54-.6-6.18-.4-1.67-1.08-3-2.07-4.05-.99-1.02-2.32-1.76-4-2.15s-3.8-.6-6.43-.6h-30.36c-2.55,0-4.65.2-6.32.6s-3,1.11-4,2.15c-.99,1.02-1.7,2.38-2.1,4.05s-.6,3.74-.6,6.18v11.31h0ZM334.79,98.7c1.76,0,2.61.88,2.61,2.61v84.05c0,1.76-.88,2.61-2.61,2.61h-11.68c-1.76,0-2.61-.88-2.61-2.61v-84.05c0-1.76.88-2.61,2.61-2.61,0,0,11.68,0,11.68,0ZM405.37,122.62c5.33,0,9.81.45,13.46,1.36s6.58,2.35,8.76,4.28c2.18,1.96,3.74,4.45,4.71,7.51s1.42,6.72,1.42,11v31.66c0,1.9-.14,3.46-.43,4.71-.28,1.22-.77,2.21-1.42,2.92-.68.71-1.56,1.22-2.66,1.5s-2.55.43-4.28.43h-56.66c-3.49,0-6.41-.34-8.76-1.02s-4.22-1.7-5.64-3.03c-1.42-1.36-2.44-3.09-3.03-5.24s-.88-4.68-.88-7.63v-5.73c0-2.47.28-4.65.88-6.6s1.62-3.6,3.03-4.93c1.42-1.36,3.32-2.35,5.64-3.03,2.35-.68,5.24-1.02,8.76-1.02h48.44v-2.27c0-1.9-.2-3.54-.6-4.88-.4-1.36-1.08-2.44-2.01-3.26-.96-.82-2.27-1.45-3.94-1.84s-3.8-.6-6.43-.6h-49.75c-1.42,0-2.15-.71-2.15-2.15v-10.01c0-1.42.71-2.15,2.15-2.15h51.42l-.03.03h0ZM413.22,174.89c1.28,0,2.15-.31,2.66-.91s.77-1.64.77-3.15v-10.49h-43.57c-2.47,0-4.2.48-5.19,1.47s-1.47,2.44-1.47,4.34v2.49c0,2.15.48,3.71,1.47,4.71s2.72,1.5,5.19,1.5h40.11l.03.03h0ZM507.73,122.62c1.42,0,2.15.71,2.15,2.15v10.01c0,1.42-.71,2.15-2.15,2.15h-31.66c-2.55,0-4.65.23-6.32.65s-3,1.16-4,2.15-1.67,2.35-2.07,4.05-.6,3.8-.6,6.24v35.35c0,1.76-.88,2.61-2.61,2.61h-11.68c-1.81,0-2.75-.88-2.75-2.61v-38.58c0-4.28.48-7.97,1.42-11,.96-3.06,2.52-5.56,4.71-7.51s5.07-3.37,8.7-4.28c3.6-.91,8.11-1.36,13.52-1.36h33.34v-.03h0Z'/%3E%3Cpath class='cls-2' d='M180.9,277.99c-76.68,20.52-155.45-25-175.97-101.65-14.23-53.15,3.29-107.29,40.9-142.36C16.49,68.23,3.96,115.88,16.52,162.7c20.21,75.46,97.74,120.27,173.22,100.06,37.05-9.92,66.7-33.68,84.9-64.2-17.18,37.79-50.48,67.86-93.71,79.45l-.03-.03h0Z'/%3E%3Cpath class='cls-2' d='M153.71,254.49c-59.44,3.94-115.34-34.44-131.33-94.17C4.19,92.38,44.52,22.56,112.47,4.36,126.3.65,140.19-.63,153.71.28c-8.16.54-16.41,1.87-24.63,4.08C61.13,22.56,20.8,92.38,39,160.32c14.49,54.11,61.74,90.74,114.72,94.19v-.03Z'/%3E%3Cpath class='cls-3' d='M59.35,184.45c-5.13-8.84-9.18-18.51-11.96-28.86C30.46,92.32,67.99,27.32,131.26,10.37c58.62-15.7,118.74,15.42,140.71,70.38-26.22-45.21-80.33-69.19-133.26-55.02-63.27,16.92-100.83,81.95-83.88,145.22,1.25,4.65,2.75,9.13,4.48,13.49h.03Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    height: 4rem;
    width: 13.25rem;
}

.arrow-bottom-home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'%3E%3Cpath d='m770.86,487.47c1.21-1.18,2.48-2.24,3.9-3.16,1.39-.95,2.86-1.71,4.4-2.36,1.54-.65,3.16-1.12,4.78-1.45,1.65-.32,3.3-.5,4.99-.5.83,0,1.68.06,2.51.12.83.09,1.65.21,2.48.38.83.15,1.63.36,2.42.59.8.27,1.59.53,2.36.86.77.32,1.54.68,2.27,1.06.74.41,1.45.83,2.13,1.3.71.47,1.39.95,2.04,1.48.65.53,1.27,1.09,1.86,1.68.59.59,1.15,1.21,1.68,1.86s1,1.33,1.48,2.04c.47.68.89,1.39,1.3,2.13.38.74.74,1.5,1.06,2.27.32.77.59,1.57.86,2.36.23.8.44,1.59.59,2.42.18.83.3,1.65.38,2.48.06.83.12,1.68.12,2.51,0,1.68-.18,3.34-.5,4.99-.32,1.63-.8,3.25-1.45,4.78-.65,1.54-1.42,3.01-2.36,4.4-.91,1.42-1.98,2.69-3.16,3.9l-188.93,188.93c-.59.59-1.21,1.15-1.86,1.68s-1.33,1-2.04,1.48c-.68.47-1.39.89-2.13,1.3-.74.38-1.5.74-2.27,1.06-.77.32-1.57.59-2.36.86-.8.23-1.59.44-2.42.59-.83.18-1.65.3-2.48.38-.83.06-1.68.12-2.51.12s-1.68-.06-2.51-.12c-.83-.09-1.65-.21-2.48-.38-.83-.15-1.63-.36-2.42-.59-.8-.27-1.59-.53-2.36-.86-.77-.32-1.54-.68-2.27-1.06-.74-.41-1.45-.83-2.13-1.3-.71-.47-1.39-.95-2.04-1.48-.65-.53-1.27-1.09-1.86-1.68l-188.93-188.93c-1.18-1.21-2.24-2.48-3.16-3.9-.95-1.39-1.71-2.86-2.36-4.4-.65-1.54-1.12-3.16-1.45-4.78-.32-1.65-.5-3.3-.5-4.99,0-.83.06-1.68.12-2.51.09-.83.21-1.65.38-2.48.15-.83.36-1.63.59-2.42.27-.8.53-1.59.86-2.36.32-.77.68-1.54,1.06-2.27.41-.74.83-1.45,1.3-2.13.47-.71.95-1.39,1.48-2.04s1.09-1.27,1.68-1.86,1.21-1.15,1.86-1.68,1.33-1,2.04-1.48c.68-.47,1.39-.89,2.13-1.3.74-.38,1.5-.74,2.27-1.06.77-.32,1.57-.59,2.36-.86.8-.23,1.59-.44,2.42-.59.83-.18,1.65-.3,2.48-.38.83-.06,1.68-.12,2.51-.12,1.68,0,3.34.18,4.99.5,1.63.32,3.22.8,4.78,1.45,1.54.65,3.01,1.42,4.4,2.36,1.42.91,2.69,1.98,3.9,3.16l170.86,170.89,170.86-170.89Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
    width: 100px;
    height: 100px;
}

.main-header {
    transition: var(--transition-base);
}

.main-header.active {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(227, 154, 36, 0.08);
}

.navigation-container{
    transition: var(--transition-base);
}

.main-header.active .navigation-container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    transition: var(--transition-base);
}

.header-solid .main-header {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(227, 154, 36, 0.08);
}

.header-solid .main-header .navigation-container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ============================================= */
/* ============ NAVIGATION ===================== */
/* ============================================= */

.nav-link-hover {
    transition: var(--transition-fast);
    position: relative;
}

.nav-link-hover:hover,
.nav-link-hover.active {
    opacity: 0.8;
}

.offcanvas-nav-link {
    transition: var(--transition-fast);
}

.offcanvas-nav-link:hover {
    opacity: 0.8;
}

.nav-link-hover {
    transition: var(--transition-fast);
    position: relative;
}

/* ============================================= */
/* ============ OFF-CANVAS MENU ================ */
/* ============================================= */

#offcanvasMenu {
    background: var(--color-black) !important;
    width: 100% !important;
    max-width: 100vw;
}

.offcanvas-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-fast);
}

.offcanvas-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.offcanvas-link {
    display: block;
    font-family: 'Abel', sans-serif;
    font-size: 1.5rem !important;
    color: var(--color-white);
    text-decoration: none;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: var(--transition-fast);
}

.offcanvas-link:hover,
.offcanvas-link-active {
    color: var(--color-orange);
}

.offcanvas-sublinks {
    padding: 0 0 0.5rem 1rem;
}

.offcanvas-sublink {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: var(--transition-fast);
}

.offcanvas-sublink:hover {
    color: var(--color-orange);
}

.offcanvas-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.offcanvas-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: var(--transition-fast);
}

.offcanvas-contact-link:hover {
    color: var(--color-orange);
}

/* Override Bootstrap backdrop */
.offcanvas-backdrop.show {
    opacity: 0.5;
}

.nav-link-hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-orange);
    border-radius: 100px;
    transition: var(--transition-fast);
}

.nav-link-hover:hover {
    color: var(--color-orange) !important;
}

.nav-link-hover:hover::after {
    width: 60%;
}

.nav-link-hover.active {
    color: var(--color-orange) !important;
}

.nav-link-hover.active::after {
    width: 60%;
}

/* ============================================= */
/* ============ NAV DROPDOWN =================== */
/* ============================================= */

.nav-dropdown-chevron {
    transition: var(--transition-fast);
    opacity: 0.7;
}

.nav-dropdown-wrapper:hover .nav-dropdown-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 180px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    transform: translateX(-50%) translateY(16px);
    z-index: 10;
}

.nav-dropdown-wrapper:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(8px);
}

.nav-dropdown-link {
    display: block;
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.nav-dropdown-link:hover {
    color: var(--color-orange);
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================= */
/* ================ FOOTER ==================== */
/* ============================================= */

.footer-text p,
.footer-text a {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: var(--color-medium-gray) !important;
}

.footer-text a:hover {
    color: var(--color-orange) !important;
}

.footer-bottom-border {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-link {
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-white) !important;
}

.footer-text,
.footer-text p,
.footer-text a,
.footer-text span {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: var(--color-medium-gray) !important;
}

.footer-text a:hover {
    color: var(--color-orange) !important;
}

/* ============================================= */
/* ============ GALLERY SLIDER ================= */
/* ============================================= */

.gallery-slide-inner {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.gallery-slide-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
    transition: var(--transition-slow);
}

.gallery-slider .splide__slide.is-active .gallery-slide-image {
    transform: scale(1);
}

.gallery-slider .splide__slide:not(.is-active) .gallery-slide-inner {
    opacity: 0.4;
    transform: scale(0.95);
    transition: var(--transition-base);
}

.gallery-slider .splide__slide.is-active .gallery-slide-inner {
    opacity: 1;
    transform: scale(1);
    transition: var(--transition-base);
}

.gallery-slider .splide__arrow {
    background: var(--color-white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    opacity: 1;
    border: none;
}

.gallery-slider .splide__arrow svg {
    width: 20px;
    height: 20px;
    fill: var(--color-black);
}

.gallery-slider .splide__arrow:hover {
    background: var(--color-orange);
}

.gallery-slider .splide__arrow:hover svg {
    fill: var(--color-white);
}

@media (max-width: 768px) {
    .gallery-slide-image {
        height: 280px;
    }
    .gallery-slider .splide__pagination__page {
        background: var(--color-border);
    }
    .gallery-slider .splide__pagination__page.is-active {
        background: var(--color-orange);
    }
}

/* ============================================= */
/* =============== HOMEPAGE ==================== */
/* ============================================= */

.video-container video {
    object-fit: cover;
}

.homepage-dienstleistung .gray-full-separator {
    transition: var(--transition-base);
}

.homepage-dienstleistung:hover .gray-full-separator {
    margin-top: 0 !important;
    transition: var(--transition-base);
}

.dienstleistungen-container,
.dienstleistungen-container-home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.service-bereich {
    min-height: 450px;
    transition: var(--transition-base);
}

.service-bereich:hover {
    background-color: #d8d8d8;
}

.unternehmen-partner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.hero-stat-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.orange-stat-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 226 173 / 53%);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.whatsapp-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='98' height='98' viewBox='0 0 98 98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_16150_230)'%3E%3Cpath d='M83.3 0H14.7C6.58141 0 0 6.58141 0 14.7V83.3C0 91.4186 6.58141 98 14.7 98H83.3C91.4186 98 98 91.4186 98 83.3V14.7C98 6.58141 91.4186 0 83.3 0Z' fill='%2325D366'/%3E%3Cpath d='M58.9531 52.2539C58.3789 51.8711 57.8047 51.6797 57.2304 52.4453L54.9336 55.5078C54.3594 55.8906 53.9765 56.082 53.2109 55.6992C50.3398 54.168 46.3203 52.4453 42.875 46.7031C42.6836 45.9375 43.0664 45.5547 43.4492 45.1719L45.1719 42.4922C45.5547 42.1094 45.3633 41.7266 45.1719 41.3437L42.875 35.793C42.3008 34.2617 41.7265 34.4531 41.1523 34.4531H39.6211C39.2383 34.4531 38.4726 34.6445 37.707 35.4102C33.4961 39.6211 35.2187 45.5547 38.2812 49.3828C38.8554 50.1484 42.6836 57.0391 50.914 60.6758C57.039 63.3555 58.3789 62.9727 60.1015 62.5898C62.207 62.3984 64.3125 60.6758 65.2695 58.9531C65.4609 58.3789 66.4179 55.8906 65.6523 55.5078' fill='white'/%3E%3Cpath d='M20.2316 78.7445L23.5812 63.2406C15.7718 49.8996 19.8871 32.5965 33.0558 24.232C46.5117 15.6953 64.4082 19.7148 72.9449 33.1707C81.4816 46.6266 77.4621 64.523 64.0062 73.0598C55.3929 78.5148 44.5593 79.0316 35.5058 74.457L20.2316 78.7445ZM36.0992 69.0977L36.9988 69.5953C44.655 73.8062 53.9765 73.5191 61.3457 68.8488C72.4855 61.7859 75.7968 46.9711 68.7339 35.8312C61.6711 24.6914 46.8562 21.3801 35.7164 28.443C24.5765 35.5059 21.2652 50.3207 28.3281 61.4605L28.864 62.3219L26.8351 71.7199L36.0992 69.1168V69.0977Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_16150_230'%3E%3Crect width='98' height='98' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    height: 100px;
    width: 100px;
    position: fixed;
    bottom: 3rem !important;
    right: 3rem !important;
}

/* ============================================= */
/* ============ TEAM CARDS A =================== */
/* ============================================= */

.team-card-a {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 340px;
}

.team-card-a-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.team-card-a:hover .team-card-a-image {
    transform: scale(1.05);
}

.team-card-a-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
}

.team-card-a-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
}

.team-card-a-name {
    color: var(--color-white);
    font-size: 1.0625rem;
}

.team-card-a-role {
    color: var(--color-orange);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.125rem;
}

@media (max-width: 768px) {
    .team-card-a {
        height: 280px;
    }
}

.team-card-a-contact {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
    opacity: 1;
    transition: var(--transition-base);
}

.team-card-a-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(0 0 0 / 35%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: var(--transition-fast);
}

.team-card-a-icon:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
}

/* ============================================= */
/* ============ PARTNER CARDS ================== */
/* ============================================= */

.partner-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 2rem;
    min-height: 140px;
    transition: var(--transition-base);
}

.partner-card:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.partner-logo {
    max-width: 70%;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition-base);
}

.partner-card:hover .partner-logo {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================= */
/* ============== TIMELINE ===================== */
/* ============================================= */

.timeline {
    position: relative;
    padding-left: 2.5rem;
}

.timeline-line {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.timeline-item {
    position: relative;
    padding-bottom: 2.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -2.5rem;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-orange);
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-orange);
}

.timeline-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.timeline-content {
    background: var(--color-light-gray);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
}

/* ============================================= */
/* ============== JOB CARDS ==================== */
/* ============================================= */

.job-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-fast);
}

.job-card:has(.show) {
    border-color: var(--color-orange);
}

.job-card-header {
    width: 100%;
    background: none;
    border: none;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.job-card-header:hover {
    background: var(--color-light-gray);
}

.job-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-orange);
    flex-shrink: 0;
}

.job-card-title {
    font-size: 1.125rem;
    color: var(--color-black);
}

.job-card-chevron {
    color: var(--color-dark-gray);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.job-card-header:not(.collapsed) .job-card-chevron {
    transform: rotate(180deg);
    color: var(--color-orange);
}

.job-card-body {
    padding: 0 1.5rem 1.25rem 2.75rem;
}

/* ============================================= */
/* ============ CONTACT MODAL ================== */
/* ============================================= */

.contact-modal-content {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.contact-modal-sidebar {
    background: var(--color-black);
}

.contact-modal-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange);
}

.contact-modal-sidebar a:hover {
    color: var(--color-orange) !important;
}

.contact-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 1;
}

.contact-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Override Bootstrap modal backdrop */
.modal-backdrop.show {
    opacity: 0.6;
}

/* Smooth entrance */
#contactModal .modal-dialog {
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

#contactModal.show .modal-dialog {
    transform: translateY(0);
}

@media (max-width: 992px) {
    .contact-modal-sidebar {
        order: 2;
    }
    .contact-modal-sidebar .mb-auto {
        margin-bottom: 0 !important;
    }
    .contact-modal-sidebar .mt-4 {
        margin-top: 1rem !important;
        flex-direction: row !important;
        flex-wrap: wrap;
    }
}

/* ============================================= */
/* ============ JOB FORM CARD ================== */
/* ============================================= */

.job-form-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.job-form-sidebar {
    background: var(--color-black);
}

.job-form-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange);
}
/* ============================================= */
/* ============ RESPONSIVE ===================== */
/* ============================================= */

@media (max-width: 1200px) {
    .team-card-image {
        height: 28rem;
    }
}

@media (max-width: 768px) {
    .team-card-image {
        height: 20rem;
    }
    .team-card-image-sm {
        height: 12rem;
    }
    .partner-card {
        min-height: 100px;
        padding: 1.25rem;
    }
    .timeline {
        padding-left: 2rem;
    }
}

/* ============================================= */
/* ========= INTERACTIVE HOUSE ================= */
/* ============================================= */

.house-tab {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-dark-gray);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-base);
}

.house-tab:hover {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.house-tab.active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
}

.house-tab svg {
    width: 16px;
    height: 16px;
}

.house-viewport {
    position: relative;
    height: 650px;
    background: var(--color-black);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.house-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.house-slide.active {
    opacity: 1;
    visibility: visible;
}

.house-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.house-info-panel {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
}

.house-info-panel.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.house-info-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
}

.house-slide[data-slide="solar"] .house-slide-image {
    object-position: center top;
}

.house-slide[data-slide="wallbox"] .house-slide-image {
    object-position: 0% 100%;
}

.house-slide[data-slide="battery"] .house-slide-image {
    object-position: center center;
}

@media (max-width: 1200px) {
    .house-viewport {
        height: 450px;
    }
    .house-info-content {
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .house-viewport {
        height: 350px;
    }
    .house-info-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        transform: translateY(20px);
    }
    .house-info-panel.visible {
        transform: translateY(0);
    }
    .house-info-content {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

/* ============================================= */
/* ========= FLOATING CONTACT BUTTON ========== */
/* ============================================= */

.floating-contact-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-orange);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(227, 154, 36, 0.4);
    transition: var(--transition-base);
}

.floating-contact-btn:hover {
    background: var(--color-dark-orange);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(227, 154, 36, 0.5);
}

@media (max-width: 768px) {
    .floating-contact-btn {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 48px;
        height: 48px;
    }
    .floating-contact-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================= */
/* ============== SECTION SPACING ============== */
/* ============================================= */

.section-padding {
    padding: 5rem 0;
}

.section-padding-lg {
    padding: 6.5rem 0;
}

@media (max-width: 768px) {
    .section-padding {
        padding: 3.5rem 0;
    }
    .section-padding-lg {
        padding: 4.5rem 0;
    }
}


/* ============================================= */
/* ============= SECTION LABELS ================ */
/* ============================================= */

.section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-orange);
    background: var(--color-light-orange);
    padding: 0.375rem 1rem;
    border-radius: 100px;
}

.section-label-light {
    color: var(--color-orange);
    background: rgba(227, 154, 36, 0.15);
}


/* ============================================= */
/* ================ HERO ====================== */
/* ============================================= */

.hero-section {
    min-height: 100vh;
    min-height: 100svh;
}

.hero-overlay {
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.4) 0%,
        rgba(26, 26, 26, 0.55) 50%,
        rgba(26, 26, 26, 0.7) 100%
    );
}

.hero-badge {
    font-size: 0.8125rem !important;
    letter-spacing: 0.2em;
    padding: 0.5rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    line-height: 1.4 !important;
}

.opacity-85 {
    opacity: 0.85;
}

.scroll-indicator {
    width: 28px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    transition: var(--transition-base);
}

.scroll-indicator:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

.scroll-indicator-dot {
    width: 4px;
    height: 8px;
    background: var(--color-white);
    border-radius: 100px;
    animation: scrollDot 1.8s ease-in-out infinite;
}

@keyframes scrollDot {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0.3; }
}

@media (max-width: 1200px) {
    .hero-heading {
        font-size: 3.25rem !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 768px) {
    .hero-heading {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    .lead-text {
        font-size: 1rem !important;
    }
    .hero-badge {
        font-size: 0.6875rem !important;
    }
}


/* ============================================= */
/* ============= BUTTONS ====================== */
/* ============================================= */

.btn-primary-solar {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-orange);
    padding: 0.875rem 2.25rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
}

.btn-primary-solar:hover {
    background: var(--color-dark-orange);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 154, 36, 0.3);
    color: var(--color-white);
}

.btn-white-solar {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-black);
    background: var(--color-white);
    padding: 0.875rem 2.25rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
}

.btn-white-solar:hover {
    background: var(--color-off-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    color: var(--color-black);
}

.btn-text-orange {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-orange);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: var(--transition-fast);
}

.btn-text-orange:hover {
    color: var(--color-dark-orange);
}

.btn-text-orange .btn-text-icon {
    transition: var(--transition-fast);
}

.btn-text-orange:not(.collapsed) .btn-text-icon {
    transform: rotate(180deg);
}


/* ============================================= */
/* ============ SERVICE CARDS ================== */
/* ============================================= */

.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: var(--transition-base);
}

.service-card:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.service-card-icon {
    width: 64px;
    height: 64px;
    background: var(--color-light-orange);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-icon img {
    width: 36px;
    height: 36px;
}

.service-card-alt {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
}

.service-card-alt:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.service-card-alt-icon {
    width: 56px;
    height: 56px;
    background: var(--color-light-orange);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-alt-icon img {
    width: 32px;
    height: 32px;
}


/* ============================================= */
/* ============ STATS SECTION ================== */
/* ============================================= */

.stat-number {
    font-size: 3.25rem !important;
    line-height: 1 !important;
    font-weight: 400;
}

.stat-suffix {
    font-size: 2rem !important;
    line-height: 1 !important;
    font-weight: 400;
}

.stat-label {
    font-size: 0.9375rem !important;
    font-weight: 400;
}

@media (max-width: 768px) {
    .stat-number {
        font-size: 2.5rem !important;
    }
    .stat-suffix {
        font-size: 1.5rem !important;
    }
}


/* ============================================= */
/* ========= PHILOSOPHY / CTA GLOW ============ */
/* ============================================= */

.philosophy-glow {
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(227, 154, 36, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.cta-glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}


/* ============================================= */
/* ================= MAP ======================= */
/* ============================================= */

.map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* ============================================= */
/* ============== SERVICES PAGE ================ */
/* ============================================= */

.services-liste {
    font-size: 1.5rem;
    line-height: 1.875rem;
    font-family: 'Abel', sans-serif;
}

.box-shadow {
    box-shadow: var(--shadow-card);
}


/* ============================================= */
/* ================= TEAM ====================== */
/* ============================================= */

.team-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.team-member-image {
    height: 30rem;
}

.member-image {
    min-height: 12rem;
}

.team-gradient {
    background: linear-gradient(180deg, rgba(219, 134, 1, 1) 0%, rgba(244, 150, 1, 1) 100%);
}


/* ============================================= */
/* ============== PROJEKTE ===================== */
/* ============================================= */

.projekte-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.projekte-repeater-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.projekte-gradient {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(9, 9, 121, 0) 55%);
}

.coming-soon-filter {
    filter: grayscale(1);
}

.projekt_page .referenzen-section {
    display: none !important;
}

.icons-contact {
    max-height: 20px;
    max-width: 25px;
}

/* ============================================= */
/* ============ PROJEKT CARDS ================== */
/* ============================================= */

.projekt-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 320px;
    cursor: pointer;
}

.projekt-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.projekt-card:hover .projekt-card-image {
    transform: scale(1.05);
}

.projekt-card-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.projekt-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 2;
}

.projekt-card:hover .projekt-card-info span {
    gap: 0.5rem !important;
}

/* Coming Soon */
.projekt-card-soon {
    cursor: default;
}

.projekt-card-soon .projekt-card-image {
    filter: grayscale(100%);
}

.projekt-card-soon:hover .projekt-card-image {
    transform: none;
    filter: grayscale(100%);
}

@media (max-width: 768px) {
    .projekt-card {
        height: 260px;
    }
}

/* ============================================= */
/* ========= PROJEKT HERO SLIDER =============== */
/* ============================================= */

.projekt-hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.projekt-hero-slider .splide__track,
.projekt-hero-slider .splide__list,
.projekt-hero-slider .splide__slide {
    height: 100%;
}

.projekt-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.projekt-hero-slider .splide__arrow {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.projekt-hero-slider:hover .splide__arrow {
    opacity: 1;
}

.projekt-hero-slider .splide__arrow svg {
    width: 18px;
    height: 18px;
    fill: var(--color-white);
}

.projekt-hero-slider .splide__arrow:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pointer-events-none {
    pointer-events: none;
}

.projekt-slide-counter {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.8125rem;
}

@media (max-width: 768px) {
    .projekt-hero-slider .splide__arrow {
        opacity: 1;
        width: 40px;
        height: 40px;
    }
}

/* ============================================= */
/* ========== MASONRY GALLERY ================== */
/* ============================================= */

.masonry-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 0.75rem;
}

.masonry-item {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.masonry-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.masonry-item:nth-child(4) {
    grid-column: span 2;
}

.masonry-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-slow);
}

.masonry-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-base);
    color: var(--color-white);
}

.masonry-item:hover .masonry-image {
    transform: scale(1.03);
}

.masonry-item:hover .masonry-overlay {
    opacity: 1;
}

@media (max-width: 768px) {
    .masonry-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }
    .masonry-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
    .masonry-item:nth-child(4) {
        grid-column: span 1;
    }
}

@media (max-width: 576px) {
    .masonry-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }
    .masonry-item:nth-child(1),
    .masonry-item:nth-child(4) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ============================================= */
/* ============== LIGHTBOX ===================== */
/* ============================================= */

.lightbox-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    transition: opacity 0.2s ease;
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 1;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-fast);
}

.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 1.5rem;
}

.lightbox-next {
    right: 1.5rem;
}

.lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
    padding: 0.375rem 1rem;
    border-radius: 100px;
}

@media (max-width: 768px) {
    .lightbox-arrow {
        width: 40px;
        height: 40px;
    }
    .lightbox-prev {
        left: 0.75rem;
    }
    .lightbox-next {
        right: 0.75rem;
    }
}

/* ============================================= */
/* ============= UNTERNEHMEN =================== */
/* ============================================= */

.unternehmen-navi {
    position: fixed;
    top: 200px;
    left: 30px;
    z-index: 1030;
}


/* ============================================= */
/* ============== MAP ========================== */
/* ============================================= */

.leaflet-bottom {
    display: none !important;
}


/* ============================================= */
/* ============== JOBS ========================= */
/* ============================================= */

.jobs-text ul li {
    font-family: 'Inter', sans-serif;
}


/* ============================================= */
/* ============ PARTNER / KUNDEN =============== */
/* ============================================= */

.partner-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 2rem;
    min-height: 120px;
    transition: var(--transition-base);
}

.partner-card-white {
    background: var(--color-light-gray) !important;
    transition: var(--transition-base);
}

.partner-logo {
    max-width: 70%;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: var(--transition-base);
}

.partner-card:hover .partner-logo  {
    filter: grayscale(0%);
    opacity: 1;
}
.partner-card-white .partner-logo-color{
    filter: grayscale(100%);
    transition: var(--transition-base);
}

.partner-logo-color {
    filter: none;
    opacity: 0.8;
}

.partner-card:hover .partner-logo-color,
.partner-card-white:hover .partner-logo-color {
    opacity: 1;
    filter: grayscale(0%);
}

/* ============================================= */
/* ============== TIMELINE ===================== */
/* ============================================= */

.timeline {
    position: relative;
    padding-left: 2.5rem;
}

.timeline-line {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-hidden {
    display: none;
}

.timeline-hidden.timeline-visible {
    display: block;
    animation: timelineFadeIn 0.5s ease forwards;
}

@keyframes timelineFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-dot {
    position: absolute;
    left: -2.5rem;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-orange);
    border: 2px solid var(--color-light-gray);
    box-shadow: 0 0 0 2px var(--color-orange);
}

.timeline-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-orange);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.timeline-content {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

/* ============================================= */
/* ============ LEGAL PAGES ==================== */
/* ============================================= */

.legal-content h2,
.legal-content h3,
.legal-content h4 {
    font-family: 'Abel', sans-serif;
    color: var(--color-black);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-content h2 {
    font-size: 1.5rem;
}

.legal-content h3 {
    font-size: 1.25rem;
}

.legal-content p,
.legal-content li,
.legal-content a {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    color: var(--color-dark-gray) !important;
}

.legal-content a {
    color: var(--color-orange) !important;
    text-decoration: underline !important;
}

.legal-content a:hover {
    color: var(--color-dark-orange) !important;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-content li {
    margin-bottom: 0.25rem;
}

/* ============================================= */
/* ============== RESPONSIVE =================== */
/* ============================================= */

@media (max-width: 1500px) and (min-width: 1400px) {
    .max-width {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (max-width: 1440px) {
    .unternehmen-navi {
        display: none !important;
    }
}

@media (max-width: 1200px) {

    /* Grid collapses */
    .dienstleistungen-container,
    .dienstleistungen-container-home,
    .team-container,
    .unternehmen-partner,
    .projekte-container,
    .projekte-repeater-container {
        grid-template-columns: 1fr;
    }

    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .two-stretch {
        grid-column: span 3;
    }

    .one-stretch {
        grid-column: span 6;
    }

    .vorteile-container .one-stretch,
    .vorteile-container .two-stretch,
    .services-container .one-stretch,
    .services-container .two-stretch,
    .homepage-dienstleistung.two-stretch {
        grid-column: span 6;
    }

    /* Height adjustments */
    .service-bereich {
        min-height: 250px;
    }

    .team-member-image {
        height: 40rem;
    }

    .home-kontakt.vh-70 {
        min-height: auto;
    }

    .services-liste.vh-50 {
        height: auto;
    }

    .services-image {
        height: 250px !important;
    }

    .referenzen-section {
        min-height: auto !important;
    }

    .referenzen-section h3 {
        font-size: 1.725rem;
        line-height: 1;
    }

    .icons-contact {
        max-height: 30px;
        max-width: 35px;
    }

    .whatsapp-icon {
        background-image: url("data:image/svg+xml,%3Csvg width='98' height='98' viewBox='0 0 98 98' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_16150_230)'%3E%3Cpath d='M83.3 0H14.7C6.58141 0 0 6.58141 0 14.7V83.3C0 91.4186 6.58141 98 14.7 98H83.3C91.4186 98 98 91.4186 98 83.3V14.7C98 6.58141 91.4186 0 83.3 0Z' fill='%2325D366'/%3E%3Cpath d='M58.9531 52.2539C58.3789 51.8711 57.8047 51.6797 57.2304 52.4453L54.9336 55.5078C54.3594 55.8906 53.9765 56.082 53.2109 55.6992C50.3398 54.168 46.3203 52.4453 42.875 46.7031C42.6836 45.9375 43.0664 45.5547 43.4492 45.1719L45.1719 42.4922C45.5547 42.1094 45.3633 41.7266 45.1719 41.3437L42.875 35.793C42.3008 34.2617 41.7265 34.4531 41.1523 34.4531H39.6211C39.2383 34.4531 38.4726 34.6445 37.707 35.4102C33.4961 39.6211 35.2187 45.5547 38.2812 49.3828C38.8554 50.1484 42.6836 57.0391 50.914 60.6758C57.039 63.3555 58.3789 62.9727 60.1015 62.5898C62.207 62.3984 64.3125 60.6758 65.2695 58.9531C65.4609 58.3789 66.4179 55.8906 65.6523 55.5078' fill='white'/%3E%3Cpath d='M20.2316 78.7445L23.5812 63.2406C15.7718 49.8996 19.8871 32.5965 33.0558 24.232C46.5117 15.6953 64.4082 19.7148 72.9449 33.1707C81.4816 46.6266 77.4621 64.523 64.0062 73.0598C55.3929 78.5148 44.5593 79.0316 35.5058 74.457L20.2316 78.7445ZM36.0992 69.0977L36.9988 69.5953C44.655 73.8062 53.9765 73.5191 61.3457 68.8488C72.4855 61.7859 75.7968 46.9711 68.7339 35.8312C61.6711 24.6914 46.8562 21.3801 35.7164 28.443C24.5765 35.5059 21.2652 50.3207 28.3281 61.4605L28.864 62.3219L26.8351 71.7199L36.0992 69.1168V69.0977Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_16150_230'%3E%3Crect width='98' height='98' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
        height: 50px;
        width: 50px;
        position: fixed;
        bottom: 1rem !important;
        right: 1rem !important;
    }
}