/* roboto-200 - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 200; src: url('./fonts/roboto-v47-latin-200.woff2') format('woff2'); } /* roboto-200italic - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: italic; font-weight: 200; src: url('../fonts/roboto-v47-latin-200italic.woff2') format('woff2'); } /* roboto-regular - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2'); } /* roboto-italic - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url('../fonts/roboto-v47-latin-italic.woff2') format('woff2'); } /* roboto-600 - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 600; src: url('../fonts/roboto-v47-latin-600.woff2') format('woff2'); } /* roboto-600italic - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: italic; font-weight: 600; src: url('../fonts/roboto-v47-latin-600italic.woff2') format('woff2'); } /* roboto-800 - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 800; src: url('../fonts/roboto-v47-latin-800.woff2') format('woff2'); } /* roboto-800italic - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: italic; font-weight: 800; src: url('../fonts/roboto-v47-latin-800italic.woff2') format('woff2'); } /****************************************** * * * CSS Styles * * ******************************************/ :root { /* ----- FARBEN ----- */ /* Primärfarbe (Dunkles-Blau) mit verschiedenen Transparenzstufen */ --primarfarbe-solid: hsla(222, 47%, 11%, 1); /* 100% Deckkraft */ --primarfarbe-semi: hsla(222, 47%, 11%, 0.75); /* 75% Deckkraft */ --primarfarbe-light: hsla(222, 47%, 11%, 0.5); /* 50% Deckkraft */ --primarfarbe-verylight: hsla(222, 47%, 11%, 0.25); /* 25% Deckkraft */ /* Sekundärfarbe (Edles-Grau) mit verschiedenen Transparenzstufen*/ --sekundarfarbe-solid: hsla(216, 12%, 84%, 1); /* 100% Deckkraft */ --sekundarfarbe-semi: hsla(216, 12%, 84%, .75); /* 75% Deckkraft */ --sekundarfarbe-light: hsla(216, 12%, 84%, .5); /* 50% Deckkraft */ --sekundarfarbe-verylight: hsla(216, 12%, 84%, 0.25); /* 25% Deckkraft */ /* Akzentfarben (Grün/Rot) */ --akzentfarbe: hsla(342, 74%, 31%, 1); /* Weinrot */ --akzentfarbe-hover: rgb(161, 31, 70); /* Intensiver für Hover */ --akzentfarbe-gruen: hsla(120, 100%, 25%, 0.75); /* Grüner Akzent */ --akzentfarbe-gruen-hover: rgb(211, 247, 221); /* Etwas dunkler für Hover */ --akzentfarbe-gelb: hsla(48, 96%, 53%, .75); /* Orange Akzentfarbe */ --akzentfarbe-gelb-hover: hsla(48, 96%, 53%,1); /* Etwas dunkler für Hover */ --akzentfarbe-orange: hsla(20, 100%, 58%, 0.75); /* Orange Akzentfarbe */ --akzentfarbe-orange-hover: hsla(20, 100%,58%, 1); /* Etwas dunkler für Hover */ --akzentfarbe-rot: hsla(0, 68%, 31%, 0.75); /* Rot Akzent */ --sekundarfarbe-rot-hover: hsla(0, 68%, 31%, 1); /* etwas heller für Hover */ /* Neutrale Farben */ --neutraldunklefarbe-solid: hsla(0, 0%, 35%, 1); /* 100% Deckkraft */ --neutraldunklefarbe-semi: hsla(0, 0%, 35%, 0.75); /* 75% Deckkraft */ --neutraldunklefarbe-light: hsla(0, 0%, 35%, 0.5); /* 50% Deckkraft */ --neutraldunklefarbe-light2: hsla(0, 0%, 35%, 0.45); /* 45% Deckkraft */ --neutraldunklefarbe-verylight: hsla(0, 0%, 35%, 0.25); /* 25% Deckkraft */ --neutralhellefarbe: rgb(247, 244, 241); /* Helle Hintergrundfarbe */ --white: hsla(0, 0%, 100%, 1); /* Reines Weiß */ /* Farben für den Finanzierungspartner-Banner (sBausparkasse) */ --partner-orange: hsla(20, 100%, 58%, 1); /* #ff6129 */ --partner-orange-hover: hsla(17, 100%, 46%, 1); /* Etwas dunkler für Hover */ --partner-blau: hsla(210, 100%, 20%, 1); /* #245375 */ --partner-blau-hover: rgb(2, 60, 118); /* etwas heller für Hover */ --partner-purple:hsla(295, 63%, 29%, 1); /* #245375 */ --partner-purple-hover: hsla(295, 63%, 29%, 1); /* Etwas dunkler für Hover */ /* ---- Styling für Cookie-Banner ---- */ --cc-bg: var(--white); --cc-text: var(--neutraldunklefarbe-solid); --cc-btn-primary-bg: var(--primarfarbe-solid); --cc-btn-primary-text: var(--white); --cc-btn-primary-hover-bg: var(--partner-blau); --cc-btn-secondary-bg: #e6e6e6; --cc-btn-secondary-text: var(--neutraldunklefarbe-solid); --cc-btn-secondary-hover-bg: #d4d4d4; --cc-border-radius: 8px; --cc-separator-border-color: var(--neutralhellefarbe); /* ----- ABSTÄNDE ----- */ --space-xxs: 0.25rem; /* Extra kleiner Abstand (4px bei 16px base) */ --space-xs: 0.5rem; /* Kleiner Abstand */ --space-sm: 1rem; /* Standardabstand */ --space-md: 1.5rem; /* Mittlerer Abstand */ --space-lg: 2rem; /* Großer Abstand */ --space-xl: 3rem; /* Extra großer Abstand */ /* ----- Z-INDEX-EBENEN ----- */ --z-index-base: 1; /* Standardebene */ --z-index-dropdown: 10; /* Für Dropdown-Menüs */ --z-index-sticky: 100; /* Für fixierte Elemente */ --z-index-modal: 1000; /* Für Modale/Overlays */ /* ----- RESPONSIVE BREAKPOINTS ----- */ --breakpoint-mobile: 480px; /* Smartphones */ --breakpoint-tablet: 768px; /* Tablets */ --breakpoint-desktop: 1024px; /* Desktop */ } /* ===================================================== */ /* === GRUNDLEGENDE STYLE-RESETS & GLOBAL STYLES ======= */ /* ===================================================== */ /* Box-Sizing für alle Elemente */ *, *::before, *::after { box-sizing: border-box; /* Padding/Border in Elementgröße inkludieren */ margin: 0; /* Standardmargins entfernen */ padding: 0; /* Standardpaddings entfernen */ } /* HTML-/Body-Styles */ html, body { font-family: 'Roboto', system-ui, -apple-system, sans-serif; /* Font-Stack mit Fallback */ } /* HTML-Spezifische Styles */ html { line-height: 1.5; /* Optimale Lesbarkeit */ -webkit-text-size-adjust: 100%; /* Zoom-Verhalten auf iOS kontrollieren */ scroll-behavior: smooth; /* Sanftes Scrollen */ } /* Body-Styles */ body { color: var(--neutraldunklefarbe-solid); /*Schriftfarbe = Neutral Dunkel*/ background-color: var(--neutralhellefarbe); /*Hintergrundfarbe = neutral Hell*/ min-height: 100vh; /* Mindesthöhe = Viewport-Höhe */ font-synthesis: none; /* Automatische Fett/Kursiv verhindern */ text-rendering: optimizeLegibility; /* Bessere Schriftdarstellung */ -webkit-font-smoothing: antialiased; /* Glättung für WebKit-Browser */ font-size: clamp(1rem, calc(1rem + 1vw), 1.2rem); /* Responsive Schriftgröße */ overflow-x: hidden; /*verhindert einen Scrollbar links-rechts*/ } /* Zusätzliche Resets */ ul[class], ol[class] { list-style: none; /* Keine Aufzählungszeichen */ } input, button, textarea, select { font: inherit; /* Erben die Schrift des übergeordneten Elements */ } /* ==================================================== */ /* === MEDIEN-ELEMENTE ================================ */ /* ==================================================== */ img, picture, video, iframe { max-width: 100%; /* Responsive Skalierung */ height: auto; /* Proportionen erhalten */ display: block; /* Whitespace unter Bildern vermeiden */ } /* ===================================================== */ /* === INTERAKTIVE ELEMENTE =========================== */ /* ===================================================== */ /* Link-Styles */ a { text-decoration: none; /* Unterstreichung entfernen */ color: var(--akzentfarbe); /* Standardfarbe */ cursor: pointer; /* Zeigt an, dass das Element klickbar ist */ transition: transform 0.3s ease, color 0.3s ease, fill 0.3s ease; /* Übergänge */ } a:hover { color: var(--akzentfarbe-hover); /* Hover-Farbe */ transform: scale(1.01); /* Leichte Vergrößerung */ } a:focus, a:focus-visible { outline: 0.125rem solid var(--akzentfarbe); /* Fokus-Rand */ outline-offset: 0.25rem; /* Abstand zum Element */ } /* Button-Styles */ button { cursor: pointer; /* Zeigt an, dass das Element klickbar ist */ max-width: 30rem; /* Maximale Breite des Buttons */ min-width: auto; /* Keine minimale Breite festgelegt */ white-space: nowrap; /* Verhindert Zeilenumbrüche im Button-Text */ padding: 0.5rem 1rem; /* Innenabstand: vertikal 0.5rem, horizontal 1rem */ border: none; /* Entfernt den Standardrahmen */ border-radius: 0.2rem; /* Leicht abgerundete Ecken */ background-color: var(--akzentfarbe); /* Setzt die Hintergrundfarbe auf die Akzentfarbe */ color: var(--neutralhellefarbe); /* Legt die Textfarbe fest */ transition: transform 0.3s ease, background-color 0.3s ease; /* Sanfte Übergänge für Vergränderung und Farbwechsel */ } button:hover { background-color: var(--akzentfarbe-hover); /* Hover-Farbe */ transform: scale(1.01); /* Leichte Vergrößerung */ } /*Fokus-Stille für Buttons*/ button:focus, button:focus-visible { outline: 0.125rem solid var(--akzentfarbe); /* Fokus-Rand */ outline-offset: 0.25rem; /* Abstand zum Element */ } /*cta-button Styles für Call-to-Action links und buttons*/ .cta-buttons-wrapper { /* Wrapper für mehrere Call-to-Action Buttons */ display: flex; /* Flexbox-Layout */ flex-wrap: wrap; /* Zeilenumbruch bei Bedarf */ gap: 1rem; /* Abstand zwischen den Buttons */ justify-content: center; } .cta-button, .cta-button-secondary{ display: inline-block; /* Macht den Link wie einen Button */ width: 100%; /* Nimmt die volle Breite des Containers ein */ max-width: 30ch; /* Maximale Breite auf 30 Zeichen begrenzen */ background-color: var(--akzentfarbe); /* Hintergrundfarbe */ color: var(--white); /* Schriftfarbe weiß */ padding: 1rem; /* Innenabstand */ text-decoration: none; /* Keine Unterstreichung */ border-radius: 5px; /* Abgerundete Ecken */ font-size: 1.1rem; /* Etwas größere Schrift */ font-weight: bold; /* Fetter Text */ text-align: center; /* Zentrierter Text */ transition: all 0.3s ease; /* Sanfter Übergang für alle Eigenschaften */ } /* Hover-Effekt für primären Call-to-Action Button */ .cta-button:hover { background-color: var(--akzentfarbe-hover); /* Dunklere Akzentfarbe beim Hover */ color: var(--white); /* Textfarbe bleibt weiß */ box-shadow: 0 4px 15px var(--neutraldunklefarbe-light2); /* Schatteneffekt beim Hover */ } /* Sekundärer Call-to-Action Button */ .cta-button-secondary { background-color: transparent; /* Transparenter Hintergrund */ border: 2px solid rgba(255, 255, 255, 0.3); color: var(--white); /* Helle Schriftfarbe */ cursor: pointer; box-shadow: none; /* Zeigt an, dass das Element klickbar ist */ } /* Hover-Effekt für sekundären Call-to-Action Button */ .cta-button-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); /* Schriftfarbe bleibt hell */ box-shadow: 0 4px 15px var(--neutraldunklefarbe-verylight); /* Leichter Schatten beim Hover */ } .cta-button-secondary--light { background-color: transparent; border: 2px solid var(--primarfarbe-solid); color: var(--primarfarbe-solid); transition: all 0.3s ease; } .cta-button-secondary--light:hover { background-color: var(--primarfarbe-solid); color: var(--white); box-shadow: 0 4px 15px var(--neutraldunklefarbe-verylight); } hr { border: none; /* Entfernt den Standard-Rahmen */ height: 0.1rem; /* Definiert die Höhe der Linie */ background-color: var(--neutralhellefarbe); /* Setzt die Farbe der Linie */ margin-left: auto; /* Richtet die Linie am rechten Rand aus */ margin: 0.5rem 0; /* Fügt vertikalen Abstand oberhalb und unterhalb ein */ width: 100%; /* Dehnt die Linie Über die gesamte Breite aus */ } h1, h2, h3, h4, h5, h6 { margin: var(--space-sm) 0; /* Set vertical margins */ line-height: 1.2; /* Set line-height */ font-weight: 800; /* Set font weight to bold */ } h1 {font-size: clamp(1.75rem, 4vw + 1rem, 2.25rem);} /* Responsive font size for h1 */ h2 {font-size: clamp(1.62rem, 3.8vw + 0.96rem, 2.05rem);} /* Responsive font size for h2 */ h3 {font-size: clamp(1.49rem, 3.6vw + 0.92rem, 1.85rem);} /* Responsive font size for h3 */ h4 {font-size: clamp(1.36rem, 3.4vw + 0.88rem, 1.65rem);} /* Responsive font size for h4 */ h5 {font-size: clamp(1.23rem, 3.2vw + 0.84rem, 1.45rem);} /* Responsive font size for h5 */ h6 {font-size: clamp(1.1rem, 3vw + 0.8rem, 1.25rem);} /* Responsive font size for h6 */ p { margin-bottom: var(--space-md); /* Bottom margin for paragraphs */ line-height: 1.5rem; /* Set line-height for paragraphs */ } /* ==================================================== */ /* === UTILITY-KLASSEN ================================ */ /* ==================================================== */ /* Text-Styles */ .text-primarfarbe { color: var(--primarfarbe-solid); } /* Primärfarbe */ .text-sekundurfarbe { color: var(--sekundarfarbe-solid); } /* Sekundärfarbe */ .text-akzentfarbe { color: var(--akzentfarbe); } /* Akzentfarbe */ .text-dark { color: var(--neutraldunklefarbe-solid); } /* Dunkle Textfarbe */ .text-hell { color: var(--neutralhellefarbe); } /* Helle Textfarbe */ .text-weiss {color: var(--white);} /* Weiße Textfarbe */ .text-left { text-align: left; } /* Links ausgerichtet */ .text-center { text-align: center; } /* Zentrierte Ausrichtung */ .text-block { text-align: justify; } /* Blocksatz */ .text-right { text-align: right; } /* Rechts ausgerichtet */ .text-fett {font-weight: 600;} /* Fett */ .text-small{font-size:0.9rem;color:var(--sekundarfarbe-light)} .text-margin-bottom2{margin-bottom:2rem;} /* Außenabstand von unten 2rem*/ .text-margin-top2{margin-top:2rem;} /* Außenabstand von oben 2rem*/ .text-margin-bottom4{margin-bottom:4rem;} /* Außenabstand von unten 4rem*/ .text-margin-top4{margin-top:4rem;} /* Außenabstand von oben 4rem*/ .inhalt-zentriert { display: block; /* Element wird als Block dargestellt */ margin: 0 auto; /* Zentriert das Element horizontal */ } /* Visuell verstecken, aber für Screenreader sichtbar */ .visually-hidden { position: absolute; /* Element aus dem normalen Dokumentenfluss nehmen */ width: 1px; /* Sehr schmal */ height: 1px; /* Sehr klein */ padding: 0; /* Kein Innenabstand */ margin: -1px; /* Negativer Außenabstand, um das Element aus dem Blick zu nehmen */ overflow: hidden; /* Ãœberlauf verbergen */ clip: rect(0, 0, 0, 0); /* Clipping, um den Inhalt zu verstecken */ white-space: nowrap; /* Verhindert Zeilenumbruch */ border: 0; /* Kein Rahmen */ } .visually-hidden h1 { font-size: 0; } .flex{ display: flex; /* Flexbox-Layout */ gap: var(--gap, 1rem); /* Flexibler Abstand zwischen Elementen */ } .grid{ display: grid; /* Grid-Layout */ gap: var(--gap, 1rem); /* Flexibler Abstand zwischen Elementen */ } /* ==================================================== */ /* === Grundgerüst-KLASSEN ============================ */ /* ==================================================== */ /* =========================== */ /* === HEADER / NAVIGATION === */ /* =========================== */ .primary-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; width: 100%; min-height: min(110px, 12svh); position: fixed; top: 0; z-index: 900; box-sizing: border-box; overflow: hidden; background-color: var(--primarfarbe-solid); transition: transform 0.3s ease-in-out; } /* Sichtbarkeit beim Scrollen */ .hidden-header { transform: translateY(-100%); } /* === LOGOS === */ .header-left { flex-shrink: 0; } .header-image { max-height: 100px; width: auto; display: block; flex-shrink: 0; } /* === NAVIGATION RECHTS === */ .header-right { display: flex; align-items: center; gap: 1rem; flex-grow: 1; justify-content: flex-end; } nav { flex: 1; display: flex; justify-content: flex-end; align-items: center; } /* === NAVIGATIONSLISTE === */ .primary-navigation { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 1.5rem; list-style: none; margin: 0; padding: 0 1rem; background: var(--primarfarbe-solid); box-sizing: border-box; white-space: nowrap; max-width: 100%; } /* Optionaler Blur, wenn unterstützt */ @supports (backdrop-filter: blur(1rem)) { .primary-navigation { backdrop-filter: blur(1rem); } } /* ==== NAVIGATIONSLINKS ===== */ .primary-navigation a { color: var(--neutralhellefarbe); font-size: clamp(1.25rem, 8vw + 1rem, 1.4rem); padding-bottom: 0.5rem; position: relative; } /* Hover-Effekt mit animiertem Unterstrich */ .primary-navigation a::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: var(--akzentfarbe-hover); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .primary-navigation a:hover::after, .primary-navigation a:active::after { transform: scaleX(1); } /* === MOBIL: Toggle Button === */ .mobile-nav-toggle { display: none; position: absolute; right: 1.5rem; z-index: 9999; cursor: pointer; background-color: var(--primarfarbe-semi); backdrop-filter: blur(10px); fill: var(--white); background-image: url('../images/_holding/svg/burger-menu-svgrepo-com.svg'); background-repeat: no-repeat; background-position: center; background-size: 60%; width: 3rem; height: 3rem; border: none; border-radius: 0.5rem; transition: background-color 0.3s ease, transform 0.3s ease; } .mobile-nav-toggle:hover { background-color: var(--primarfarbe-semi); transform: scale(1.05); } .mobile-nav-toggle[aria-expanded="true"] { background-image: url('../images/_holding/svg/close-x-svgrepo-com.svg'); } .logo-small{ display:none; } /* =========================== */ /* === MAIN / Grundgerüst === */ /* =========================== */ .header-placeholder{ min-height: min(110px, 12svh); } .container { max-width: min(1600px, 90vw); margin-inline: auto; padding-inline: 1rem; } .services { padding: 5rem 0; } /* Hero Section */ .hero { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, var(--primarfarbe-solid) 0%, var(--primarfarbe-solid) 50%, var(--primarfarbe-solid) 100%); height: 100vh; width: 100%; display: flex; align-items: center; color: var(--white); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/_holding/logo.svg) no-repeat center; opacity: 0.15; background-size: 20%; } .hero-content { position: relative; z-index: 2; } .hero-content h1 { font-size: clamp(2.5rem, 6vw + 1rem, 4rem); padding: var(--space-sm) 0; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--white) 0%, var(--neutralhellefarbe) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; } .hero-subtitle { margin-bottom: 3rem; color: var(--white); letter-spacing: 0.01em; text-align: center; } /* Unternehmenskennzahlen Section */ .company { padding-block: clamp(4rem, 8vw, 7.5rem); background: var(--white); } .company-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr)); gap: clamp(3rem, 6vw, 6rem); align-items: center; } .company-text h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 2rem; color: var(--primarfarbe-solid); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .company-text p { margin-bottom: 2rem; color: var(--neutraldunklefarbe-semi); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.8; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-top: 4rem; } .stat { background: var(--sekundarfarbe-light); border-radius: 1.5rem; border: 1px solid var(--neutraldunklefarbe-verylight); box-shadow: 0 4px 15px var(--neutraldunklefarbe-verylight); transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: hidden; padding: clamp(1rem, 3vw, 2rem); text-align: left; } .stat:hover { transform: translateY(-5px); /* Gleicher Schwebe-Effekt */ box-shadow: 0 25px 50px var(--neutraldunklefarbe-verylight); } .stat-number { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; color: var(--primarfarbe-solid); display: block; letter-spacing: -0.02em; } .stat-label { color: var(--primarfarbe-solid); margin-top: 0.5rem; font-size: clamp(0.6rem, 1.2vw, 0.95rem); font-weight: 500; } .company-image { position: relative; border-radius: 1.5rem; overflow: hidden; width:100%; aspect-ratio: 4 / 3; /* Flexibleres Seitenverhältnis */ min-height: 300px; background: var(--sekundarfarbe-light); box-shadow: 0 4px 15px var(--neutraldunklefarbe-verylight); transition: transform 0.4s ease, box-shadow 0.4s ease; } .company-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Construction Company Section*/ #baufirma { background-color: var(--primarfarbe-solid); color: var(--white); } #baufirma .section-title, #baufirma .section-subtitle{ color: var(--white); } /* Projekt Section*/ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 5rem; } .project-card { background: var(--white); border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--neutraldunklefarbe-verylight); transition: all 0.4s ease; display: flex; flex-direction: column; } .project-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px var(--neutraldunklefarbe-verylight); } .project-image { height: 240px; background: linear-gradient(135deg,var(--primarfarbe-solid) 0%, var(--primarfarbe-solid) 50%, var(--primarfarbe-solid) 100%); display: flex; align-items: center; justify-content: center; color: var(--white); position: relative; overflow: hidden; padding: 1rem; } .project-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); } .project-content { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; } .project-content p { color: var(--neutraldunklefarbe-light); margin-bottom: 2rem; flex-grow: 1; } .project-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--neutralhellefarbe); flex-shrink: 0; } .project-meta-item { font-size: 0.875rem; color: var(--neutraldunklefarbe-semi); } .project-status { background: var(--akzentfarbe-gruen-hover); color: var(--akzentfarbe-gruen); padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .project-status.planning { background: var(--akzentfarbe-gelb); color: var(--primarfarbe-solid); } /* Service Section */ #vermietung, #unternehmen { background-color: var(--white); } .service-title { text-align: center; letter-spacing: -0.02em; } .section-subtitle { text-align: center; color: var(--neutraldunklefarbe-semi); margin-bottom: 4rem; max-width: min(600px, 90%); margin-inline: auto; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 2rem; margin-top: 5rem; } .service-card { cursor: pointer; position: relative; overflow: hidden; border-radius: 1.5rem; background-size: cover; background-position: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { box-shadow: 0 20px 40px var(--neutraldunklefarbe-verylight); } .service-card::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease-out; /* Die Animation für den Zoom */ z-index: 0; /* Liegt auf der untersten Ebene */ } .service-card::after { content: ''; cursor: pointer; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.65); backdrop-filter: blur(0.3px); z-index: 1; } .service-card:hover::before {transform: scale(1.15); /* Vergrößert das Hintergrundbild um 5% */} .service-card--bauunternehmen:before {background-image: url('/images/_holding/placeholder-bauunternehmen.png');} .service-card--projektentwicklung:before {background-image: url('/images/_holding/placeholder-projektentwicklung.png');} .service-card--vermietung:before {background-image: url('/images/_holding/placeholder-vermietung.png');} .service-card--planung:before {background-image: url('/images/_holding/placeholder-planung.png');} .service-card--hoch-tiefbau:before {background-image: url('/images/_holding/placeholder-hochbau.png');} .service-card--sanierung:before {background-image: url('/images/_holding/placeholder-sanierung.png');} .service-card--wohnen:before {background-image: url('/images/_holding/placeholder-wohnimmobilie.png');} .service-card--gewerbe:before {background-image: url('/images/_holding/placeholder-gewerbeimmobilie.png');} .service-card--team:before {background-image: url('/images/_holding/placeholder-team.png');} .service-card--ueberuns:before {background-image: url('/images/_holding/placeholder-ueberuns.png');} .service-card .service-link::after { content: ''; position: absolute; inset: 0; z-index: 3; } /* Der Inhaltscontainer, der über dem Farbverlauf liegt */ .service-card-content { position: relative; /* Stellt sicher, dass der Inhalt über dem ::before-Element liegt */ padding: clamp(1rem, 7.5%, 2.5rem); display: flex; flex-direction: column; min-height: 380px; /* Gibt den Karten eine einheitliche Mindesthöhe */ z-index: 2; } .service-card-content h3 { opacity: 1; margin-bottom: 1rem; color: var(--akzentfarbe); letter-spacing: -0.01em; } .service-card-content p { color: var(--neutraldunklefarbe-solid); opacity: 1; margin-bottom: var(--space-lg); flex-grow: 1; } .service-card .service-link { margin-top: auto; /* Schiebt den Link an das Ende des Textblocks */ position: relativ; z-index: 4; } .vermietung-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); margin-top: 4rem; } .service-details { margin-top: auto; padding-top: 1.5rem; } .service-detail-item { display: flex; justify-content: space-between; align-items: center; } .service-detail-item:last-child { margin-bottom: 1rem; } .detail-label { font-size: 0.9rem; color: var(--primarfarbe-solid); } .detail-value { font-weight: 600; color:var(--primarfarbe-solid); } .detail-value.highlight { color: var(--akzentfarbe); } /* Contact Section */ .contact { padding: clamp(3vw, 60px, 5%) 0; background: linear-gradient(135deg, var(--primarfarbe-solid) 50%, var(--primarfarbe-solid)); position: relative; color: var(--white); } .contact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../images/_holding/logo.svg') no-repeat center center ; opacity: 0.4; } .contact .section-title {text-align:center;} .contact .section-subtitle { color: var(--white); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 40px, 6rem); margin: 0.1rem auto; position: relative; z-index: 2; } .contact-info h3 { margin-bottom: 2rem; color: var(--white); } .contact-item { display: flex; align-items: flex-start; margin-bottom: 2rem; padding: 1.5rem; background: var(--sekundarfarbe-verylight); opacity: 0.8; border-radius: 12px; border: 1px solid var(--sekundarfarbe-light); } .contact-item .span { color: hsla(0, 0%, 100%, .4); } .contact-icon { width: 3rem; height: 3rem; background: linear-gradient(135deg, var(--akzentfarbe) 0%, var(--akzentfarbe-hover) 100%); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; flex-shrink: 0; } .contact-form { background: var(--sekundarfarbe-verylight); opacity: 0.8; padding: clamp(1rem, 5%, 3rem); border-radius: 20px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--sekundarfarbe-light); } /* --- SPAM-SCHUTZ: Honeypot-Feld --- */ /* Macht das Feld für Menschen unsichtbar UND versteckt es vor Screenreadern, damit es barrierefrei bleibt. */ .hp-field { opacity: 0; position: absolute; top: 0; left: -9999px; /* Weit aus dem Bildschirm schieben */ z-index: -1; width: 1px; height: 1px; pointer-events: none; clip: rect(0,0,0,0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .form-group { margin-bottom: 2rem; } #kontakt-form-api input[type="checkbox"]#datenschutz { width: 1.5rem; height: 1rem; margin: 0 0.5rem 0 0; min-width: 1.5rem; min-height: 1rem; flex-shrink: 0; } .form-group label { display: block; margin-bottom: 0.75rem; font-weight: 600; color: var(--white); } .form-group input, .form-group textarea { width: 100%; padding: 1rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: var(--white); font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--akzentfarbe); background: rgba(255, 255, 255, 0.15); } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.5); } .form-group textarea { height: 7rem; resize: vertical; } .button-container { display: flex; justify-content: center; } .submit-btn { padding: 1rem 2.5rem; border-radius: 0.6rem; transition: all 0.3s ease; width: 100%; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(139, 21, 56, 0.3); } /* Stellt sicher, dass das Elternelement eine Positionierungs-Referenz ist */ .status-badge[data-tooltip], label[data-tooltip] { position: relative; cursor: help; /* Zeigt dem Benutzer an, dass es hier mehr Infos gibt */ } /* Das eigentliche Tooltip-Fenster (standardmäßig unsichtbar) */ .status-badge[data-tooltip]::after, label[data-tooltip]::after { content: attr(data-tooltip); /* Holt den Text aus dem data-Attribut */ position: absolute; bottom: 125%; /* Positioniert den Tooltip über dem Badge */ left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem; white-space: nowrap; /* Verhindert Zeilenumbrüche */ opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; z-index: 10; } /* Macht den Tooltip sichtbar, wenn man über das Badge fährt */ .status-badge[data-tooltip]:hover::after, label[data-tooltip]:hover::after { opacity: 1; visibility: visible; } span[data-tooltip] { position: relative; cursor: pointer; } span[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 125%; /* über dem Link */ left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; } span[data-tooltip]:hover::after { opacity: 1; } .info-label[data-tooltip]::after { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 10px; } .info-label[data-tooltip]::before { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 5px; border-top-color: transparent; border-bottom-color: #333; } /* === STYLING FÜR DIE LEAFLET KARTE ====== */ .contact-map-container { padding: 0; overflow: hidden; grid-column: 1/-1; margin-top: clamp(1.25rem, 5vh, 4rem); } #leaflet-map { height: clamp(20rem, 50vh, 25rem); width: 100%; border-radius: 0.75rem; z-index: 1; } /* --- Styling für die Pop-ups --- */ .leaflet-popup-content-wrapper { background: var(--primarfarbe-solid); color: var(--white); border-radius: 0.5rem; box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2); } .leaflet-popup-content { font-size: 0.95rem; margin: 1rem 1.25rem; line-height: 1.5; } .leaflet-popup-tip { background: var(--primarfarbe-solid); box-shadow: 0 0.1875rem 0.875rem rgba(0, 0, 0, 0.15); } .leaflet-popup-close-button { color: var(--white) !important; font-size: 1.125rem !important; width: 1.5rem !important; height: 1.5rem !important; line-height: 1.5rem !important; } .leaflet-popup-close-button:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* --- Styling für die benutzerdefinierten Marker --- */ .professional-marker { position: relative; width: 2rem !important; height: 2.5rem !important; margin-left: -1rem !important; margin-top: -2.5rem !important; } .professional-marker::before { content: ''; position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background: var(--akzentfarbe); border: 0.125rem solid var(--white); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4); transition: all 0.3s ease; } .professional-marker::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); width: 0.625rem; height: 0.625rem; background: var(--white); border-radius: 50%; z-index: 1; } .professional-marker:hover::before { background: var(--akzentfarbe-hover, var(--akzentfarbe)); box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.4); transform: rotate(-45deg) scale(1.05); } /* --- Alternative: Minimalistischer Marker --- */ .minimal-marker { position: relative; width: 1.75rem !important; height: 2.25rem !important; margin-left: -0.875rem !important; margin-top: -2.25rem !important; } .minimal-marker::before { content: ''; position: absolute; top: 0; left: 0; width: 1.75rem; height: 1.75rem; background: var(--akzentfarbe); border: 0.0625rem solid rgba(255, 255, 255, 0.3); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4); transition: all 0.2s ease; } .minimal-marker::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); width: 0.5rem; height: 0.5rem; background: var(--white); border-radius: 50%; z-index: 1; } .minimal-marker:hover::before { background: var(--akzentfarbe-hover, var(--akzentfarbe)); transform: rotate(-45deg) scale(1.03); box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.4); } /* --- Alternative: SVG Marker --- */ .svg-marker-professional { position: relative; width: 2.25rem !important; height: 2.25rem !important; margin-left: -1.125rem !important; margin-top: -1.125rem !important; } .svg-marker-professional svg { width: 2.25rem; height: 2.25rem; fill: var(--akzentfarbe); filter: drop-shadow(0 0.1875rem 0.375rem rgba(0, 0, 0, 0.4)); transition: all 0.3s ease; } .svg-marker-professional:hover svg { fill: var(--akzentfarbe-hover, var(--akzentfarbe)); filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.4)); transform: scale(1.05); } /* --- Leaflet Controls Styling --- */ .leaflet-control-zoom a { width: 2rem !important; height: 2rem !important; line-height: 2rem !important; font-size: 1.125rem !important; border-radius: 0.25rem !important; } .leaflet-control-attribution { font-size: 0.75rem !important; padding: 0.25rem 0.5rem !important; border-radius: 0.25rem !important; } /* ============================ */ /* == FOOTER /SEKUNDÄRE NAVi == */ /* =========================== */ footer { background: var(--primarfarbe-solid); padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem 3rem; margin-bottom: 2rem; text-align: center; } .footer-section { /*text-align: left;*/ font-size: 0.9rem; /* Kleinere Schriftgröße */ } .footer-section h4 { margin-bottom: 1.5rem; color: var(--akzentfarbe); } .footer-section ul { list-style: none; padding: 0; } .footer-section p, .footer-section li { margin-bottom: 0.75rem; color: var(--sekundarfarbe-light); } .footer-section a { color: var(--sekundarfarbe-semi); text-decoration: none; transition: color 0.3s ease; } .footer-section a:hover { color: var(--akzentfarbe-hover); } .footer-section.firmengruppe { grid-column: 1 / -1; /* Spanne über alle Spalten */ width: 100%; text-align: center; /* Zentriere den Text */ } .footer-bottom { border-top: 1px solid var(--sekundarfarbe-semi); padding-top: 2rem; text-align: center; color: var(--sekundarfarbe-light); font-size: 0.8rem; } /* ======================================================= */ /* === STYLING FÜR LEISTUNGS-DETAILSEITEN ================ */ /* ======================================================= */ .service-detail-content { margin-top: 4rem; text-align: left; max-width: 800px; /* Begrenzt die Breite für bessere Lesbarkeit */ margin-inline: auto; /* Zentriert den Inhaltsblock */ } .service-detail-content h3 { margin-bottom: 1.5rem; color: var(--primarfarbe-solid); } .service-detail-list { list-style: disc; padding-left: 2rem; /* Fügt den Einzug für die Aufzählungszeichen hinzu */ color: var(--neutraldunklefarbe-semi); } .service-detail-list li { margin-bottom: 1rem; } .service-detail-list li::marker { color: var(--akzentfarbe); /* Färbt die Aufzählungspunkte in Ihrer Akzentfarbe */ } /* Anpassung der bestehenden CTA-Sektion für die Detailseiten */ .service-detail-content + .cta-section { margin-top: 5rem; background-color: var(--neutralhellefarbe); /* Hellt den Hintergrund auf */ color: var(--primarfarbe-solid); border-radius: 1rem; } .service-detail-content + .cta-section h2 { color: var(--primarfarbe-solid); } .service-detail-content + .cta-section p { color: var(--neutraldunklefarbe-semi); } /* ===================================== */ /* === TEAM SECTION ==================== */ /* ===================================== */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; /* Etwas mehr Abstand für den Schatten */ margin-top: 5rem; } /* Der äußere Container, der die Struktur vorgibt */ .team-member { text-align: left; position: relative; } /* Der obere, farbige Block, der das Bild enthält */ .team-member__photo { position: relativ; overflow: hidden; } .team-member__photo::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background-color: var(--color); } .team-member__photo::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; /* Höhe des Schattenverlaufs */ background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%); z-index: 3; /* Liegt über dem Bild */ } /* Individuelle Farben über Modifikator-Klassen */ .team-member--martin .team-member__photo {--color: var(--primarfarbe-solid);} .team-member--bastian .team-member__photo {--color: var(--akzentfarbe);} .team-member--sandra .team-member__photo {--color: var(--white);} .team-member__photo img { width: 100%; height: auto; display: block; position: relative; z-index: 2; /* Liegt unter dem Schatten, aber über der Farbe */ } /* Der untere Block mit den Textinformationen */ /* Der untere Block mit den Textinformationen */ .team-member__info { position: relative; z-index: 4; padding: 1.5rem 1rem; background: var(--white); } .team-member__name { font-size: 1.5rem; color: var(--primarfarbe-solid); margin-bottom: 0.25rem; font-weight: 600; } .team-member__title { color: var(--neutraldunklefarbe-semi); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; /* Fügt Abstand zur Beschreibung hinzu */ } .team-member__description { color: var(--neutraldunklefarbe-light); font-size: 0.95rem; line-height: 1.6; } /* ============================ */ /* ==== SMARTBAR ==== */ /* =========================== */ .smart-bar { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .smart-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Haupt-Trigger-Button */ .smart-trigger { width: 56px; height: 56px; background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.25); transition: transform 0.3s ease; position: relative; z-index: 10; } .smart-trigger:hover { transform: scale(1.05); } .smart-trigger svg { width: 1.5rem; height: 1.5rem; fill: var(--white); transition: transform 0.3s ease, opacity 0.3s ease; } .smart-trigger .icon-close { position: absolute; transform: scale(0.5); opacity: 0; } .smart-bar.is-open .smart-trigger .icon-open { transform: scale(0.5); opacity: 0; } .smart-bar.is-open .smart-trigger .icon-close { transform: scale(1); opacity: 1; } /* Container für die Optionen */ .smart-options { position: absolute; bottom: 0; right: 0; display: flex; flex-direction: column-reverse; /* Kehrt die visuelle Reihenfolge um */ align-items: flex-end; gap: 12px; padding-bottom: 64px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease-out; } .smart-bar.is-open .smart-options { opacity: 1; visibility: visible; transform: translateY(0); } /* Styling der einzelnen Options-Zeilen (Link) */ .smart-option { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); opacity: 0; /* Gesteuert durch die gestaffelte Animation */ transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } /* Der sichtbare Text */ .option-label { background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 6px 14px; border-radius: 16px; font-size: 0.9rem; white-space: nowrap; transition: background-color 0.2s ease; } /* Der Icon-Button */ .option-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(20, 20, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background-color 0.2s ease; } .option-icon svg { width: 22px; height: 22px; fill: var(--white); } .smart-option:hover .option-icon, .smart-option:hover .option-label { background: var(--primarfarbe-solid); /* Akzentfarbe beim Hover */ color: var(--akzentfarbe-gelb-hover); } /* Trennlinie */ .smart-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); margin: 4px 0; opacity: 0; transition: opacity 0.3s; } /* Gestaffelte Animation von unten nach oben */ .smart-bar.is-open .smart-option, .smart-bar.is-open .smart-divider { opacity: 1; transform: translateY(0); } .smart-bar.is-open .smart-option:nth-last-child(1) { transition-delay: 0.0s; } .smart-bar.is-open .smart-option:nth-last-child(2) { transition-delay: 0.02s; } .smart-bar.is-open .smart-divider { transition-delay: 0.04s; } .smart-bar.is-open .smart-option:nth-last-child(4) { transition-delay: 0.06s; } .smart-bar.is-open .smart-option:nth-last-child(5) { transition-delay: 0.08s; } .smart-bar.is-open .smart-option:nth-last-child(6) { transition-delay: 0.10s; } .smart-bar.is-open .smart-option:nth-last-child(7) { transition-delay: 0.12s; } /* Logik für Web Share API vs. Fallback */ .smart-option.native-share, .smart-option.fallback-share { display: none; } .smart-bar.supports-native-share .native-share { display: flex; } .smart-bar:not(.supports-native-share) .fallback-share { display: flex; } /* ============================== */ /* == CUSTOM LIGHTBOX STILE === */ /* ============================= */ .custom-lightbox-overlay { position: fixed; inset: 0; /* Modern way to set top/right/bottom/left to 0 */ background: rgba(15, 23, 42, 0.85); /* Slightly darker for more focus */ backdrop-filter: blur(8px); z-index: var(--z-index-modal, 1000); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .custom-lightbox-overlay.visible { opacity: 1; visibility: visible; } .custom-lightbox-content { position: relative; max-width: 95vw; max-height: 95vh; display: flex; align-items: center; justify-content: center; /* Animation for the content appearing */ transform: scale(0.95); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .custom-lightbox-overlay.visible .custom-lightbox-content { transform: scale(1); opacity: 1; } #lightbox-media-container { display: flex; align-items: center; justify-content: center; } /* Image and iFrame Styling */ #lightbox-media-container img, #lightbox-media-container iframe { max-width: 90vw; max-height: 90vh; object-fit: contain; border: none; background: #000; } /* Close and Navigation Buttons */ .lightbox-close, .lightbox-nav { position: absolute; cursor: pointer; color: var(--white); background: rgba(20, 20, 20, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background-color 0.2s, transform 0.2s; z-index: 1001; } .lightbox-close:hover, .lightbox-nav:hover { background: var(--primarfarbe-solid); transform: scale(1.05); } .lightbox-close { top: -16px; right: -16px; } .lightbox-nav { top: 50%; transform: translateY(-50%); } .lightbox-nav.prev { left: -60px; } .lightbox-nav.next { right: -60px; } /* Counter Styling */ .lightbox-counter { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: rgba(20, 20, 20, 0.7); color: var(--neutralhellefarbe); padding: 0.25rem 1rem; border-radius: 1rem; font-size: 0.9rem; } /* --- Styling for AJAX-loaded content --- */ #lightbox-media-container.has-scrollable-content { align-items: flex-start; max-height: 85vh; overflow-y: auto; background: var(--white); border-radius: 8px; } #lightbox-media-container.has-scrollable-content .wizard-container { width: 100%; padding: clamp(1.5rem, 4vw, 3rem); /* Responsive padding */ } /* Scrollbar Styling */ #lightbox-media-container.has-scrollable-content::-webkit-scrollbar { width: 8px; } #lightbox-media-container.has-scrollable-content::-webkit-scrollbar-track { background: #f1f1f1; } #lightbox-media-container.has-scrollable-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } /* ======================================================= */ /* === BREADCRUMB & SERVICE-DETAILSEITEN LAYOUT ========== */ /* ======================================================= */ /* --- Breadcrumb Navigation --- */ .breadcrumb { padding-block: 1rem 2rem; font-size: 0.9rem; } .breadcrumb a { color: var(--neutraldunklefarbe-semi); text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: var(--primarfarbe-solid); } .breadcrumb span { color: var(--neutraldunklefarbe-light); } .breadcrumb-separator { margin: 0 0.5rem; } /* --- Zweispaltiges Layout für Detailseiten --- */ .service-detail-layout { display: grid; grid-template-columns: 280px 1fr; align-items: flex-start; } .service-detail-main { padding-left: 4rem; } /* --- Seitenleiste --- */ .service-detail-sidebar { position: sticky; /* Bleibt beim Scrollen sichtbar */ top: 140px; /* Abstand zum Header */ } .service-nav { display: flex; flex-direction: column; /* Stellt die Elemente untereinander dar */ align-items: stretch; gap: 0.5rem; border-left: 2px solid var(--neutraldunklefarbe-verylight); } .service-nav a { display: block; padding: 1rem 1.5rem; border-left: 2px solid transparent; margin-left: -2px; /* Überlappt den grauen Rand */ color: var(--neutraldunklefarbe-semi); transition: all 0.3s ease; } .service-nav a:hover { background-color: var(--neutralhellefarbe); color: var(--primarfarbe-solid); border-left-color: var(--akzentfarbe-hover); } .service-nav a.active { background-color: transparent; color: var(--primarfarbe-solid); font-weight: 600; border-left-color: var(--akzentfarbe); } .service-nav a strong { display: block; font-size: 1.1rem; } .service-nav a span { font-size: 0.85rem; opacity: 0.8; } /* --- Hauptinhalt --- */ .service-detail-main .section-title, .service-detail-main .section-subtitle { text-align: left; /* Text linksbündig im Hauptinhalt */ margin-inline: 0; } .service-detail-hero { position: relative; /* Wichtig für die Positionierung des Overlays */ margin-bottom: 3rem; border-radius: 1.5rem; overflow: hidden; color: var(--white); } .service-detail-hero img { width: 100%; height: 350px; object-fit: cover; display: block; } .service-detail-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.7) 100%); } /* Text-Container im Titelbild */ .service-detail-hero__content { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(1.5rem, 4vw, 3rem); z-index: 2; } .service-detail-hero__content .section-title, .service-detail-hero__content .section-subtitle { color: var(--white); text-shadow: 0 2px 5px rgba(0,0,0,0.5); } /* --- Animationen (unverändert) --- */ @keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-on-scroll { opacity: 0; } .animate-on-scroll.visible { animation: fadeInSlideUp 0.8s ease-out forwards; } .animate-on-scroll:nth-of-type(2) { animation-delay: 0.1s; } .animate-on-scroll:nth-of-type(3) { animation-delay: 0.2s; } .animate-on-scroll:nth-of-type(4) { animation-delay: 0.3s; } /* ======================================================= */ /* === KARRIERE-SEITE ==================================== */ /* ======================================================= */ .job-opening { background: var(--white); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06); margin-top: 4rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .job-opening__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding: 2rem 2.5rem; background: linear-gradient(135deg, var(--primarfarbe-solid) 0%, var(--akzentfarbe-hover) 100%); color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .job-opening__title { font-size: clamp(1.6rem, 2.5vw, 2rem); margin: 0; line-height: 1.2; font-weight: 700; } .job-opening__meta { margin: 0.25rem 0 0; font-weight: 600; opacity: 0.9; font-size: 0.95rem; } .job-opening__body { padding: 2.5rem; } .job-opening__description { margin-bottom: 2.5rem; max-width: 75ch; } .job-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .job-detail-block h3 { color: var(--primarfarbe-solid); margin-bottom: 1rem; font-size: 1.2rem; } .service-detail-list { list-style: none; padding-left: 0; margin: 0; } .service-detail-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; } .service-detail-list li::before { content: "✓"; position: absolute; left: 0; top: 0.1rem; color: var(--akzentfarbe); font-weight: bold; } .job-offer-box { background-color: var(--neutralhellefarbe); border-radius: 1rem; padding: 2rem; border: 1px solid var(--neutraldunklefarbe-verylight); } .job-offer-box h3 { color: var(--primarfarbe-solid); margin-top: 0; font-size: 1.2rem; margin-bottom: 1rem; } .pdf-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); z-index: 9999; display: none; /* Standardmäßig ausgeblendet */ flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--white); font-size: 1.1rem; font-weight: 500; } .pdf-loading-overlay.visible { display: flex; /* Wird per JavaScript eingeblendet */ } .pdf-spinner { width: 50px; height: 50px; border: 5px solid var(--neutralehelfarbe-light); border-top: 5px solid var(--white); border-radius: 50%; animation: spin 1s linear infinite; } /* Die Keyframe-Animation für die Drehung (falls noch nicht vorhanden) */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ======================================================= */ /* === UNTERNEHMENSGESCHICHTE / TIMELINE =============== */ /* ======================================================= */ /* --- Ladebalken --- */ .progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: var(--akzentfarbe); width: 0%; z-index: var(--z-index-sticky); transition: width 0.1s linear; } .history-timeline { position: relative; margin-inline: auto; margin-top: 5rem; } /* Die zentrale vertikale Linie der Timeline */ .history-timeline::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 100%; background-color: var(--sekundarfarbe-solid); } .timeline-item { padding: 1rem 3rem; position: relative; width: 50%; opacity: 0; transform: translateY(50px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; } /* Animation von links */ .timeline-item:nth-child(odd) { left: 0; text-align: right; transform: translateX(-150px); /* Startet 50px nach links verschoben */ } /* Animation von rechts */ .timeline-item:nth-child(even) { left: 50%; text-align: left; transform: translateX(150px); /* Startet 50px nach rechts verschoben */ } /* Endzustand der Animation */ .timeline-item.visible { opacity: 1; transform: translateY(0); } /* Der Punkt auf der Timeline */ .timeline-item .timeline-date::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; background-color: var(--white); border: 4px solid var(--akzentfarbe); border-radius: 50%; z-index: 1; } .timeline-item:nth-child(odd) .timeline-date::after {right: -0.5rem;} .timeline-item:nth-child(even) .timeline-date::after {left: -0.5rem;} /* Restliches Styling bleibt gleich */ .timeline-date { font-size: 1.5rem; font-weight: 800; color: var(--primarfarbe-solid); margin-bottom: 0.5rem; } .timeline-content { background: var(--white); border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--neutraldunklefarbe-verylight); box-shadow: 0 4px 15px var(--neutraldunklefarbe-verylight); } .timeline-image { margin-bottom: 1rem; border-radius: 0.5rem; overflow: hidden; } .timeline-image img { width: 100%; height: auto; display: block; } .timeline-content h3 { margin-top: 0; color: var(--akzentfarbe); } .timeline-content p { font-size: 0.95rem; color: var(--neutraldunklefarbe-solid); margin-bottom: 0; } .status-badge[data-tooltip]:hover::after, label[data-tooltip]:hover::after { opacity: 1; visibility: visible; } span[data-tooltip], sup[data-tooltip] { position: relative; cursor: pointer; } span[data-tooltip]::after, sup[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 125%; /* über dem Link */ left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 13px; line-height: 1.4; text-align: left; white-space: pre-line; width: max-content; max-width: 250px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; z-index: 1000; } [data-tooltip]:hover::after { opacity: 1; visibility: visible; } /* --- RESPONSIVE ANPASSUNGEN --- */ @media (max-width: 45em) { .history-timeline::before { left: 1.5rem; } .timeline-item, .timeline-item:nth-child(even) { width: 100%; padding-left: 3rem; padding-right: 1rem; left: 0; text-align: left; transform: translateX(50px); } .timeline-item.visible { transform: translateX(0); } .timeline-item .timeline-date::after, .timeline-item:nth-child(even) .timeline-date::after { left: 0.8rem; } } /* ============================== */ /* === RESPONSIVE BREAKPOINTS === */ /* ============================== */ /* Mobile & Tablet < 75em (~1200px) */ @media (max-width: 75em) { .logo-large { display: none; } .logo-small { display: block; } .primary-navigation { gap: clamp(0.5rem, 2vw, 1.25rem); padding-inline: 1rem; } .primary-navigation a { font-size: 0.9rem; } .service-detail-layout {grid-template-columns: 1fr;} .service-detail-sidebar {display: none;} .company-content {grid-template-columns: 1fr; } .company-image {grid-row: 1;} .projects-grid{ grid-template-columns: repeat(2, 1fr);} /*Anpassungen der KONTAKT SECTION - Hauptsächlich LEAFLET-MAP*/ .contact-content {grid-template-columns: 1fr; max-width:100%;} #leaflet-map { height: clamp(18rem, 45vh, 22rem); border-radius: 0.5rem; } .professional-marker { width: 1.75rem !important; height: 2.1875rem !important; margin-left: -0.875rem !important; margin-top: -2.1875rem !important; } .professional-marker::before { width: 1.75rem; height: 1.75rem; border-width: 0.09375rem; } .professional-marker::after { width: 0.5625rem; height: 0.5625rem; } .minimal-marker { width: 1.5rem !important; height: 1.9375rem !important; margin-left: -0.75rem !important; margin-top: -1.9375rem !important; } .minimal-marker::before { width: 1.5rem; height: 1.5rem; } .minimal-marker::after { width: 0.4375rem; height: 0.4375rem; } .svg-marker-professional { width: 2rem !important; height: 2rem !important; margin-left: -1rem !important; margin-top: -1rem !important; } .svg-marker-professional svg { width: 2rem; height: 2rem; } /*Anpassunen Footer-Section*/ .footer-content {grid-template-columns: 1fr 1fr;} .footer-content .rechtlich { grid-column: 1 / -1; /* Spanne über alle Spalten */ width: 100%; } .footer-section.rechtlich ul { display: flex; /* Links nebeneinander auf dem Desktop */ justify-content: center; /* Zentriert die Links */ gap: 1rem; } .footer-section.rechtlich h4 { text-align: center;} } /* Mobile & kleine Tablets < 45em (~720px) */ @media (max-width: 45em) { .mobile-nav-toggle {display: block;} .primary-navigation { position: fixed; inset: 0; /* Füllt den gesamten Viewport */ z-index: var(--z-index-modal); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; transform: translateX(100%); transition: transform 500ms ease-out; overflow-y: auto; } .primary-navigation[data-visible="true"] { transform: translateX(0%);} .primary-navigation a { text-align: center; white-space: normal; word-break: break-word; position: relative; } .projects-grid{ grid-template-columns: 1fr;} .project-conten {padding:1.5rem;} .detail-value {font-size: clamp(0.9rem, 7%, 1.2rem);} .service-card {padding: 1.15rem;} .service-card h3 {font-size: 1.25em; overflow-wrap: break-word; word-break: break-word; hyphens: auto;} .team-grid { grid-template-columns: 1fr; gap: 3.5rem; max-width: 400px; margin-inline: auto; } .team-member { text-align: center; } /*KONTAKT-SECTION*/ .contact-item{ flex-direction: column; align-items: center; text-align: center; gaP: 1.5rem; } .contact-content p, .contact-content h2, .contact-content h3 { text-align:center; } #leaflet-map { height: clamp(16rem, 40vh, 20rem); } .leaflet-popup-content { font-size: 0.875rem; margin: 0.75rem 1rem; } .job-details-grid { grid-template-columns: 1fr; } .job-opening__header { flex-direction: column; align-items: flex-start; } .cta-button { align-self: flex-start; } /*Anpassungen Footer-Block*/ .footer-content { grid-template-columns: 1fr; gap: 1.5rem; /* Etwas weniger Abstand auf Mobilgeräten */ } .footer-section { text-align: center; /* Alles zentrieren */ padding: 0; /* Padding zurücksetzen */ } .footer-section.rechtlich ul { display: grid; /* Links wieder untereinander anordnen */ gap: 0rem; } .smart-bar { bottom: 1rem; right: 1rem; } .service-detail-layout { grid-template-columns: 1fr; } .service-detail-sidebar { order: -1; } .service-detail-main { padding-left: 0; } .lightbox-nav.prev { left: 5px; } .lightbox-nav.next { right: 5px; } .lightbox-close { top: 5px; right: 5px; } #lightbox-media-container img, #lightbox-media-container iframe { max-width: 95vw; max-height: 80vh; } }