/* ============================================= */
/* ============== 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.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%;
/* Was 450px when the slider showed one image at a time. At three up, a
450px-tall slot turns a landscape photo into a portrait crop, so the
height comes down with the width. */
height: 300px;
object-fit: cover;
display: block;
transition: var(--transition-slow);
}
@media (max-width: 1199.98px) {
.gallery-slide-image { height: 320px; }
}
@media (max-width: 767.98px) {
.gallery-slide-image { height: 260px; }
}
/* --- Lightbox trigger ------------------------------------------------- */
a.gallery-slide-inner {
display: block;
position: relative;
cursor: zoom-in;
}
.gallery-slide-zoom {
position: absolute;
right: .75rem;
bottom: .75rem;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-black);
background: rgba(255, 255, 255, 0.88);
box-shadow: var(--shadow-sm);
opacity: 0;
transform: translateY(4px);
transition: var(--transition-base);
}
a.gallery-slide-inner:hover .gallery-slide-zoom,
a.gallery-slide-inner:focus-visible .gallery-slide-zoom {
opacity: 1;
transform: translateY(0);
}
/* The affordance cannot be hover-only: on a touch screen there is no hover, and
for a keyboard user the focus ring is the only thing that would move. */
@media (hover: none) {
.gallery-slide-zoom { opacity: 1; transform: none; }
}
a.gallery-slide-inner:focus-visible {
outline: 3px solid var(--color-orange);
outline-offset: 3px;
}
/* --- Lightbox --------------------------------------------------------- */
/* Bootstrap's backdrop is a 50% grey — fine for a dialog, far too light behind
a photograph. Scoped through a class the lightbox puts on while it is
open, so the contact modal keeps the backdrop it has always had.
`opacity` is set directly rather than through `--bs-backdrop-opacity`, which
is what Bootstrap 5.3 reads: the site already overrides `.modal-backdrop.show`
with a literal `opacity: 0.6` further down this file, and a literal beats a
variable no matter what the variable says. Setting only the variable left the
backdrop at 0.6 — the computed value said so. Hence the extra `.show` here,
to out-specify that rule. */
body.gallery-lightbox-open .modal-backdrop.show {
--bs-backdrop-bg: #000;
opacity: 0.92;
}
.gallery-lightbox .modal-content {
background: transparent;
border: 0;
align-items: center;
/* Below the breakpoint the dialog goes fullscreen, and without this the
picture sits against the top edge with the rest of the screen empty. */
justify-content: center;
}
.gallery-lightbox .modal-dialog {
max-width: min(1400px, 94vw);
}
.gallery-lightbox-figure {
margin: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
}
.gallery-lightbox-image {
max-width: 100%;
/* Leaves room for the caption and keeps the picture whole on a laptop —
`contain`, never `cover`: this is the view someone opened to see the
whole photograph. */
max-height: 78vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.35);
}
.gallery-lightbox-caption {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: .25rem .75rem;
color: #fff;
text-align: center;
max-width: 60rem;
}
.gallery-lightbox-counter {
font-variant-numeric: tabular-nums;
opacity: .7;
font-size: .875rem;
}
.gallery-lightbox-alt {
font-size: .9375rem;
opacity: .92;
}
.gallery-lightbox-close,
.gallery-lightbox-nav {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(4px);
transition: var(--transition-base);
}
.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover,
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-nav:focus-visible {
background: rgba(255, 255, 255, 0.28);
}
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-nav:focus-visible {
outline: 3px solid var(--color-orange);
outline-offset: 2px;
}
.gallery-lightbox-close {
top: -3rem;
right: 0;
width: 44px;
height: 44px;
}
.gallery-lightbox-nav {
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
}
.gallery-lightbox-prev { left: -4rem; }
.gallery-lightbox-next { right: -4rem; }
/* Below the breakpoint the dialog goes fullscreen, so the controls come inside
the frame instead of hanging off its edges where they would be cut off. */
@media (max-width: 991.98px) {
.gallery-lightbox .modal-dialog { max-width: 100%; }
.gallery-lightbox-close { top: 1rem; right: 1rem; }
.gallery-lightbox-prev { left: .5rem; }
.gallery-lightbox-next { right: .5rem; }
.gallery-lightbox-image { max-height: 66vh; }
}
.gallery-slider .splide__slide.is-active .gallery-slide-image {
transform: scale(1);
}
/* Dimming the inactive slides was right when the slider showed one image at a
time and the neighbours were half-visible peeks. At three up, Splide still
marks only the first of the three as `is-active`, so the rule greyed out two
perfectly visible photos. It now applies only at the mobile breakpoint, which
is the one that is still 1-up. */
.gallery-slider .splide__slide .gallery-slide-inner {
opacity: 1;
transform: none;
transition: var(--transition-base);
}
@media (max-width: 767.98px) {
.gallery-slider .splide__slide:not(.is-active) .gallery-slide-inner {
opacity: 0.4;
transform: scale(0.95);
}
}
.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;
}
/* --- Service card with a photo ---------------------------------------
Used on /dienstleistungen when an on-the-job photo (`dienstleistungBild`) has
been uploaded for the tile; the optional colleague below it is only a caption.
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. The class names still say
"person" because the markup is unchanged — renaming them would touch the
template, the CSS and nothing else of substance. */
.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 …
; 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-orange);
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;
}
@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(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;
}
/* --- Optional background photo behind the philosophy quote ------------
The section keeps `background-black`, so the quote sits on black whether or
not the photo has loaded — a slow or missing image degrades to the old flat
band, never to unreadable text.
The scrim below is the whole design decision. Measured against the image
currently in the field (solarsense-at-work-43) by compositing the served
1920x900 transform with this exact gradient and taking the *lightest* pixel
under the quote: white on it comes out at 5.67:1, against the 4.5:1 that AA
asks of body text and the 3:1 it asks of text this size. Anything lighter
than 0.66/0.58/0.72 starts eating that margin — 0.62/0.54/0.68 already drops
to 4.89:1 — and anything heavier flattens the photo back into black, which
is the reason it is there. **A noticeably brighter photo (snow, blown-out
sky) should be re-measured rather than assumed.** */
.philosophy-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Slightly toward the top: these are roof shots, and the horizon reads
better than the foreground under a centred block of text. */
object-position: center 35%;
pointer-events: none;
}
.philosophy-has-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.58) 50%, rgba(0, 0, 0, 0.72) 100%);
pointer-events: none;
}
/* ============================================= */
/* ========= INTRO FIGURE ===================== */
/* ============================================= */
/* The intro section's image, beside the text (components/intro-section.twig).
Only ever rendered when the CMS field holds an image, so there is no empty
state to style — without one the partial falls back to the centred single
column and this never appears. The 4:3 ratio matches the server-side crop,
which reserves the space before the file arrives. */
.intro-figure {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.intro-figure-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
/* Left-aligned in the split, because centred text against a hard image edge
reads as a mistake rather than a choice.
The `!important` is not decoration. The Dienstleistungen and Unternehmen
intro copy arrives from the rich-text field already wrapped in
`` — the alignment is saved in the *content*, not
applied by this stylesheet — and Bootstrap's `.text-center` is itself
`!important`, so nothing weaker reaches it. Scoped to the two-column intro
only: the centred single-column fallback, and every other `text-center` on
the site, are untouched.
The cleaner fix is to clear the centring on those two entries in the control
panel, after which this rule does nothing. It stays as the safety net for the
next entry someone centres by habit. */
.intro-split-text,
.intro-split-text .text-center {
text-align: left !important;
}
.intro-split-text .section-label {
margin-left: 0;
}
/* The homepage intro is the one with a heading, and at the two-column measure it
wants to be a touch tighter than a full-width centred line. */
.intro-split-text .intro-text,
.intro-split-text > .inter {
max-width: 34rem;
}
@media (max-width: 991.98px) {
/* Stacked: the text goes back to the full column width, and the image
follows it rather than sitting in a half-width sliver. */
.intro-split-text .intro-text,
.intro-split-text > .inter {
max-width: 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: 1.0625rem !important;
line-height: 1.65 !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;
}
}
/* ============================================= */
/* ============ SKIP LINK (a11y) =============== */
/* ============================================= */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: 2000;
padding: 0.75rem 1.25rem;
background: #E39A24;
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 #E39A24;
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
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 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(227, 154, 36, 0.10);
border-bottom: 2px solid rgba(227, 154, 36, 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(227, 154, 36, 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(227, 154, 36, 0.10);
border-bottom: 1px solid rgba(227, 154, 36, 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
* orange, 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='%23E39A24' 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='%23E39A24' 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-orange);
}
.faq-accordion .accordion-button:focus-visible {
outline: 3px solid #E39A24;
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;
}
}
/* ============================================= */
/* ========= SCHWEIZER KANTONSKARTE ============ */
/* ============================================= */
/* The clickable canton map on /referenzen (components/schweiz-karte.twig).
Replaces the grid of coats of arms. Three states, and the difference between
the first two is a real distinction, not decoration: orange cantons have
published projects, pale ones are places we work where references are still
to come. Both are links; grey cantons are not. */
.ch-karte-wrapper {
max-width: 62rem;
margin-inline: auto;
}
.ch-karte {
display: block;
width: 100%;
height: auto;
/* The artwork is 1000x641; the ratio keeps the space reserved so the section
below does not jump while the page settles. */
aspect-ratio: 1000 / 641;
overflow: visible;
}
.ch-kanton path,
.ch-kanton {
transition: fill var(--transition-base), transform var(--transition-base);
}
.ch-kanton--inaktiv {
fill: var(--color-white);
stroke: var(--color-border);
stroke-width: 1.2;
pointer-events: none;
}
.ch-kanton--referenzen path {
fill: var(--color-orange);
stroke: var(--color-white);
stroke-width: 1.2;
}
.ch-kanton--einsatzgebiet path {
fill: var(--color-light-orange);
stroke: var(--color-orange);
stroke-width: 1.2;
}
a.ch-kanton {
cursor: pointer;
}
a.ch-kanton:hover path,
a.ch-kanton:focus-visible path {
fill: var(--color-dark-orange);
}
/* The outline has to sit on the , not the : an SVG path's outline is
drawn around its bounding box in some engines and vanishes in others. A
drop-shadow filter follows the actual silhouette in every browser. */
a.ch-kanton:focus {
outline: none;
}
a.ch-kanton:focus-visible {
filter: drop-shadow(0 0 0 var(--color-black)) drop-shadow(0 0 3px var(--color-black));
}
.ch-karte-legende {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem 2rem;
margin: 1.5rem 0 0;
font-size: .875rem;
color: var(--color-dark-gray);
}
.ch-karte-legende li {
display: flex;
align-items: center;
gap: .5rem;
}
.ch-legende-punkt {
width: 14px;
height: 14px;
border-radius: 4px;
flex: 0 0 auto;
}
.ch-legende-punkt--referenzen {
background: var(--color-orange);
}
.ch-legende-punkt--einsatzgebiet {
background: var(--color-light-orange);
box-shadow: inset 0 0 0 1.5px var(--color-orange);
}
/* The same cantons as text. A shape on a map is a poor tap target on a phone,
and this list is what a search engine or an AI assistant actually reads. */
.ch-karte-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .75rem;
margin: 2rem 0 0;
}
.ch-karte-link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem 1rem;
border-radius: var(--radius-md);
background: var(--color-white);
color: var(--color-black);
text-decoration: none;
font-size: .9375rem;
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
}
.ch-karte-link svg {
color: var(--color-orange);
transition: var(--transition-base);
}
.ch-karte-link:hover,
.ch-karte-link:focus-visible {
background: var(--color-orange);
color: var(--color-white);
}
.ch-karte-link:hover svg,
.ch-karte-link:focus-visible svg {
color: var(--color-white);
transform: translateX(2px);
}
.ch-karte-link--einsatzgebiet {
background: transparent;
box-shadow: inset 0 0 0 1px var(--color-border);
color: var(--color-dark-gray);
}
@media (prefers-reduced-motion: reduce) {
.ch-kanton path,
.ch-karte-link,
.ch-karte-link svg {
transition: none;
}
}