/* ============================================= */
/* ============== 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);
}

/*
 * Removed: a leftover global accordion override from an earlier design.
 * It pointed `.accordion-button::after` at /uploads/Icons/open-container.svg
 * and close-container.svg with !important — both of which return 404 — and no
 * template on this site used an accordion any more. The dead rules silently
 * blanked the chevron on the new FAQ. Accordion styling now lives with the
 * component, under .faq-accordion below.
 */

: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.75) !important;
}

/* Checkbox styling */
.fui-checkbox-label {
    color: rgba(255, 255, 255, 0.92) !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-red,
.button-white {
    transition: var(--transition-base);
    border-radius: var(--radius-sm);
}

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

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


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

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

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

.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 {
    /* on the near-black footer a dark red reads as nothing; the brand red at
       low alpha keeps this a divider rather than a stripe */
    border-bottom: 1px solid rgba(245, 33, 14, 0.35);
}


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

.header-color {
    background-color: rgba(245, 33, 14, 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?xml%20version='1.0'%20encoding='UTF-8'?%3E%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201142.16%20282.91'%3E%3Cdefs%3E%3Cstyle%3E%20.cls-1,%20.cls-2%20%7B%20fill:%20%23fff;%20%7D%20.cls-2,%20.cls-3%20%7B%20fill-rule:%20evenodd;%20%7D%20.cls-4,%20.cls-3%20%7B%20fill:%20%23F5210E;%20%7D%20%3C/style%3E%3C/defs%3E%3Cg%20id='Farbig'%3E%3Cg%20id='Logo'%3E%3Cg%20id='d'%3E%3Cg%20id='e'%3E%3Cpath%20class='cls-1'%20d='M735.64,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,0Z%20M875.64,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-.06h0Z%20M828.76,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.05h0Z%20M902.18,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,0Z%20M989.48,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,0Z%20M1126.93,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-.06h0Z%20M1080.05,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%20class='cls-4'%20d='M205.9,118.67H143.97c-2.55,0,-4.65,0.2,-6.32,0.6s-3,1.11,-4,2.15c-0.99,1.02,-1.7,2.38,-2.1,4.05s-0.6,3.74,-0.6,6.18V160.95c0,2.55,0.2,4.65,0.6,6.32s1.11,3,2.1,4s2.32,1.7,4,2.15c1.67,0.43,3.77,0.65,6.32,0.65H205.9V187.95H142.25c-5.39,0,-9.89,-0.43,-13.52,-1.3c-3.6,-0.88,-6.52,-2.27,-8.7,-4.22s-3.74,-4.45,-4.71,-7.51s-1.42,-6.72,-1.42,-11V128.8c0,-4.28,0.48,-7.97,1.42,-11c0.96,-3.06,2.52,-5.56,4.71,-7.51s5.07,-3.37,8.7,-4.28c3.6,-0.91,8.11,-1.36,13.52,-1.36H205.9Z%20M280.43,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,0Z%20M235.45,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.31h0Z%20M349.63,122.62H383.31c5.33,0,9.81,0.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,11V185.34c0,1.76,-0.88,2.61,-2.61,2.61H397.22c-1.76,0,-2.61,-0.88,-2.61,-2.61V149.62c0,-2.47,-0.2,-4.54,-0.6,-6.18c-0.4,-1.67,-1.08,-3,-2.07,-4.05c-0.99,-1.02,-2.32,-1.76,-4,-2.15s-3.8,-0.6,-6.43,-0.6H351.35c-2.55,0,-4.65,0.2,-6.32,0.6s-3,1.11,-4,2.15c-0.99,1.02,-1.7,2.38,-2.1,4.05s-0.6,3.74,-0.6,6.18V185.34c0,1.76,-0.88,2.61,-2.61,2.61H323.89c-1.76,0,-2.61,-0.88,-2.61,-2.61V146.77c0,-4.28,0.48,-7.97,1.42,-11c0.96,-3.06,2.52,-5.56,4.71,-7.51s5.07,-3.37,8.7,-4.28c3.6,-0.91,8.11,-1.36,13.52,-1.36Z%20M440.16,110.61c0,-1.76,0.88,-2.61,2.61,-2.61H454.6c1.76,0,2.61,0.88,2.61,2.61V122.62H476.16V136.64H457.21V160.95c0,2.55,0.2,4.65,0.6,6.32s1.11,3,2.1,4s2.32,1.7,4,2.15c1.67,0.43,3.77,0.65,6.32,0.65H486.16V187.95H468.51c-5.39,0,-9.89,-0.43,-13.52,-1.3c-3.6,-0.88,-6.52,-2.27,-8.7,-4.22s-3.74,-4.45,-4.71,-7.51s-1.42,-6.72,-1.42,-11V136.64H424.16V122.62H440.16Z%20M563.14,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%20M637.02,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,0Z%20M592.04,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.31h0Z%20M693.77,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,0Z'%20fill-rule='evenodd'/%3E%3Cpath%20class='cls-2'%20d='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%20class='cls-2'%20d='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%20class='cls-3'%20d='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: 16.15rem;
}

.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);
}

/*
 * Scrim behind the floating header.
 *
 * Until you scroll, the header has no bar of its own and sits straight on the
 * hero image. Over the homepage's sunset that left the red active nav link at
 * about 1.1:1 — invisible — and even the white links only reached 4.3:1. This
 * gives the nav a dark base wherever it floats, and switches off as soon as
 * the solid bar takes over.
 *
 * No `position: relative` on .main-header — it is already position:fixed via
 * Bootstrap's .fixed-top, which is containing block enough, and adding
 * relative here overrides that and drops the header back into the flow.
 */
.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 50%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--transition-base);
}

.main-header.active::before,
.header-solid .main-header::before {
    opacity: 0;
}

.main-header.active {
    /* a shade darker than the #1A1A1A elsewhere: it carries the red active
       nav link, which needs 4.5:1 and only reached 4.2 on the lighter bar */
    background: rgba(12, 12, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(245, 33, 14, 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 {
    /* a shade darker than the #1A1A1A elsewhere: it carries the red active
       nav link, which needs 4.5:1 and only reached 4.2 on the lighter bar */
    background: rgba(12, 12, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(245, 33, 14, 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-red);
}

.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-red);
}

.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-red);
}

/* 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-red);
    border-radius: 100px;
    transition: var(--transition-fast);
}

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

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

.nav-link-hover.active {
    color: var(--color-red) !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-red);
    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-red) !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-red) !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-red);
}

.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-red);
    }
}

/* ============================================= */
/* =============== 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;
}

.red-stat-card .color-red {
    color: var(--color-red);
}

.red-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%;
    /* Strengthened on the fork. The name and role sit on this scrim rather
       than on a solid colour, so how legible they are depends on what is
       behind them in the photo; the old 0.75/0.30 ramp left the accent-
       coloured role at about 2.5:1 wherever a portrait's light studio
       backdrop reached the bottom of the card. */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.78) 22%, rgba(0, 0, 0, 0.4) 55%, 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-red);
    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-red);
    border-color: var(--color-red);
    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-red);
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-red);
}

.timeline-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-red-ink);
    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-red);
}

.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-red);
    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-red);
}

.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-red);
}

.contact-modal-sidebar a:hover {
    color: var(--color-red) !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-red);
}
/* ============================================= */
/* ============ 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-red-ink);
    color: var(--color-red-ink);
}

.house-tab.active {
    background: var(--color-red-ink);
    border-color: var(--color-red-ink);
    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-red);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(245, 33, 14, 0.4);
    transition: var(--transition-base);
}

.floating-contact-btn:hover {
    background: var(--color-red-ink);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(245, 33, 14, 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-red-ink);
    background: var(--color-light-red);
    padding: 0.375rem 1rem;
    border-radius: 100px;
}

.section-label-light {
    /* On the dark heroes this pill used to be accent text on an accent tint,
       which worked when the accent was orange (7.4:1) but tops out at 4.2:1
       with any red light enough to still read as red. White inside the red
       pill keeps the accent and clears AA comfortably. */
    color: #fff;
    background: rgba(245, 33, 14, 0.34);
}


/* ============================================= */
/* ================ 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-red-ink);
    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-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 33, 14, 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-red {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-red-ink);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: var(--transition-fast);
}

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

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

.btn-text-red: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-red);
    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-red);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

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


/* --- Service card with a team portrait -------------------------------
   Used on /dienstleistungen when a Team or Geschäftsleitung member has been
   picked for the tile. The photo is full-bleed, so the padding moves off the
   card and onto the body; .service-card-alt keeps the shadow, radius and hover
   lift, which is why the variant sits on top of it rather than replacing it. */

.service-card-person {
    padding: 0;
    overflow: hidden;
}

.service-person-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-light-gray);
}

.service-person-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Rich text from the CMS arrives as <p>…</p>; the trailing margin is the card's
   padding's job. */
.service-card-text > *:last-child {
    margin-bottom: 0;
}

/* The service icon, kept as a badge straddling the photo's bottom edge. */
.service-person-badge {
    position: absolute;
    left: 2rem;
    bottom: -24px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-light-red);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-person-badge img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Clears the badge, which overhangs the photo by 24px. */
.service-person-body {
    padding-top: 2.5rem !important;
}

.service-person-caption {
    border-top: 1px solid var(--color-border-light);
    width: 100%;
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    .service-person-badge {
        left: 1.5rem;
    }
}

/* ============================================= */
/* ============ 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(245, 33, 14, 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-red);
    border: 2px solid var(--color-light-gray);
    box-shadow: 0 0 0 2px var(--color-red);
}

.timeline-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-red-ink);
    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: 1.0625rem !important;
    line-height: 1.65 !important;
    color: var(--color-dark-gray) !important;
}

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

.legal-content a:hover {
    color: var(--color-dark-red) !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;
    }
}
/* ============================================= */
/* ============ SKIP LINK (a11y) =============== */
/* ============================================= */

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    /* small white text on a solid fill: the ink red gives 7.5:1 here, the
       brand red only 4.1:1 */
    background: var(--color-red-ink);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 0 0 0.25rem 0.25rem;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}

/* ============================================= */
/* ====== SERVICE / JOB / TEAM DETAIL ========== */
/* ============================================= */

.lead-summary {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* --- Fact table (AI-extractable specs) --- */
.table-facts {
    border-collapse: collapse;
}

.table-facts th,
.table-facts td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.table-facts th[scope="row"] {
    width: 34%;
    white-space: nowrap;
}

.table-facts tr:last-child th,
.table-facts tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 575.98px) {
    .table-facts th[scope="row"] {
        width: 42%;
        white-space: normal;
    }
}

/* --- Breadcrumb --- */
nav[aria-label="Brotkrumennavigation"] ol {
    align-items: center;
}

/* --- Service cards link to their detail page --- */
.service-card-alt {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card-alt:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
}

.service-card-link:focus-visible {
    outline: 3px solid #F5210E;
    outline-offset: 3px;
}

/* ============================================= */
/* ====== DETAIL-PAGE HERO (below header) ====== */
/* ============================================= */

/*
 * The header is fixed, so a hero that starts flush at the top of the document
 * has its first line (the breadcrumb) hidden underneath it. The existing hero
 * sections get away with it because their content is bottom-aligned inside a
 * 55vh image. These detail pages are text-first, so they need the clearance.
 */
.detail-hero {
    padding-top: calc(4rem + 6rem);
}

@media (max-width: 991.98px) {
    .detail-hero {
        padding-top: calc(4rem + 4.5rem);
    }
}

/* Bootstrap Reboot pushes every <caption> below its table; for a facts table
   the caption reads as an intro, so put it back on top. */
.table-facts caption {
    caption-side: top;
}

/* ============================================= */
/* ============ ABLAUF (process) =============== */
/* ============================================= */

.ablauf-step {
    position: relative;
    padding: 2rem 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ablauf-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.07);
}

.ablauf-num {
    display: block;
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.ablauf-list {
    counter-reset: none;
}

/* ============================================= */
/* ========== VERGLEICHSTABELLE ================ */
/* ============================================= */

/*
 * A real <table> at every breakpoint. On narrow screens it is RESTYLED into
 * stacked cards via the data-label attributes — never rebuilt as divs, which
 * would destroy the machine-readability the table exists for.
 */
.comparison-table {
    border-collapse: collapse;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
}

.comparison-table caption {
    caption-side: top;
}

.comparison-table thead th {
    padding: 1rem;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a1a;
    background: rgba(245, 33, 14, 0.10);
    border-bottom: 2px solid rgba(245, 33, 14, 0.35);
}

.comparison-table tbody th[scope="row"] {
    padding: 1rem;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    font-family: 'Abel', system-ui, sans-serif;
    font-size: 1.1rem;
    color: #1a1a1a;
}

/* Table cells are not covered by the `p, .p, li` rule in fonts.css, so the body
   size has to be restated here. It is prose, and it reads at the same size as
   prose everywhere else. */
.comparison-table tbody td {
    padding: 1rem;
    vertical-align: top;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #4a4a4a;
}

.comparison-table tbody tr + tr th,
.comparison-table tbody tr + tr td {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.comparison-table tbody tr:hover th,
.comparison-table tbody tr:hover td {
    background: rgba(245, 33, 14, 0.04);
}

/* Screen-reader-only label for the empty corner header cell */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767.98px) {
    .comparison-table thead {
        /* visually hidden, still announced to assistive tech via the headers */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .comparison-table,
    .comparison-table caption,
    .comparison-table tbody,
    .comparison-table tbody tr,
    .comparison-table tbody th,
    .comparison-table tbody td {
        display: block;
        width: 100%;
    }

    /* Without this the caption inherits the first column's width and wraps
       into a narrow ribbon once the table becomes a block. */
    .comparison-table caption {
        box-sizing: border-box;
        max-width: 100%;
    }

    .comparison-table tbody tr {
        margin-bottom: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .comparison-table tbody th[scope="row"] {
        white-space: normal;
        background: rgba(245, 33, 14, 0.10);
        border-bottom: 1px solid rgba(245, 33, 14, 0.25);
    }

    .comparison-table tbody tr + tr th,
    .comparison-table tbody tr + tr td {
        border-top: 0;
    }

    .comparison-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #8a8a8a;
    }

    .comparison-table tbody td + td {
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
}

/* ============================================= */
/* ============ FAQ ACCORDION ================== */
/* ============================================= */

/*
 * Bootstrap's accordion, restyled to the site's type system.
 *
 * One panel, not eight cards. The previous version gave every question its own
 * bordered, shadowed box with a 0.75rem gap and tinted the open one's header
 * red, which read as a stack of boxes with a highlight bar rather than as a
 * list of questions. The whole set is now a single white card with the items
 * separated by hairlines; the only thing marking the open item is the chevron
 * rotating and the answer appearing.
 *
 * The question stays a step larger than the answer and set in Abel; the answer
 * is Inter at the site's body size.
 */
.faq-accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon-width: 1.1rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5210E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='2 5 8 11 14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5210E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='2 5 8 11 14 5'/%3e%3c/svg%3e");

    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.faq-accordion .accordion-item {
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The rule between two questions. The first item has nothing above it to be
   separated from, so it gets none. */
.faq-accordion .accordion-item + .accordion-item {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- the question --- */
.faq-accordion .accordion-button {
    padding: 1.4rem 1.5rem;
    font-family: 'Abel', system-ui, sans-serif;
    font-size: 1.35rem;
    line-height: 1.35;
    color: #1a1a1a;
    background: transparent;
    box-shadow: none;
    transition: color 0.15s ease-in-out;
    /* keeps the chevron off a question long enough to reach the right edge */
    gap: 1.5rem;
}

/* Open is no longer a background change — the chevron and the answer say it. */
.faq-accordion .accordion-button:not(.collapsed) {
    color: #1a1a1a;
    background: transparent;
    box-shadow: none;
}

.faq-accordion .accordion-button:hover {
    color: var(--color-dark-red);
}

.faq-accordion .accordion-button:focus-visible {
    outline: 3px solid #F5210E;
    outline-offset: -3px;
}

/* Chevron rotates on open (Bootstrap handles the transform). `margin-left:
   auto` is what pushes it to the right edge — do not replace it with a fixed
   margin, or it ends up parked against the end of the question text. */
.faq-accordion .accordion-button::after {
    margin-left: auto;
    transition: transform 0.2s ease-in-out;
}

/* --- the answer ---
   No top padding, and here that is right: with the tinted band gone, the
   question and its answer read as one block and the gap between them is the
   button's own 1.4rem of bottom padding. Padding here on top of that would
   push the answer away from the question it belongs to. */
.faq-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #4a4a4a;
    max-width: 62rem;
}

.faq-accordion .accordion-body a {
    color: #4a4a4a;
}

@media (max-width: 575.98px) {
    .faq-accordion .accordion-button {
        padding: 1.15rem;
        font-size: 1.15rem;
        gap: 1rem;
    }

    .faq-accordion .accordion-body {
        padding: 0 1.15rem 1.15rem;
        font-size: 1rem;
    }
}