/********************************************************************** _ _ _ _ | (_) (_) | | __| |_ __ _ _ _ __ _____ ___ _ _ __ ___ __| | ___ / _` | |/ _` | | '_ \ / _ \ \ / / | | | '_ ` _ \ / _` |/ _ \ | (_| | | (_| | | | | | (_) \ V /| |_| | | | | | || (_| | __/ \__,_|_|\__, |_|_| |_|\___/ \_/ \__,_|_| |_| |_(_)__,_|\___| __/ | |___/ *********************************************************************** URL: https://www.diginovum.de Creator: DIGINOVUM GmbH Author: Frank Schmitz Contact: schmitz@diginovum.de 〈 〉 | « » | ← → | ⟵ ⟶ | ‹ › | “ ” | – ⌄ ∨ 📷 ❤ ☀ ★ ☂ ☎ ☏ ⌚ ❄ ♫ ☯ 🗸 ✓ ✔✔ 🗹 ✅ ☑ ⨯ ✗ ✘ ❌ ☒ ❎ ◄ ► ◅ ▻ • ™ © ® ☘ ✿ ❀ ■ Aufbau dieser Datei: 1. GLOBAL – Tokens, Bootstrap-Overrides, Fonts, Resets, Typografie, Container, Buttons 2. DESKTOP – in HTML-Reihenfolge: Navi/Header › Main (Sektionen, Formulare) › Footer 3. BREAKPOINTS – gleiche Reihenfolge, alle @media-Queries gebündelt **********************************************************************/ /********************************************************************** * 1. GLOBAL **********************************************************************/ /* ----- Design-Tokens ----- */ :root{ /* Marken */ --c-yellow: #FFCC00; --c-yellow-soft: #FFE066; --c-yellow-deep: #E6B800; --c-yellow-text: #7a5b00; --c-blue: #009FE3; --c-blue-soft: #66C7EE; --c-blue-deep: #007BB8; --c-blue-text: #005a85; /* Neutrale */ --c-ink: #0E1116; --c-ink-2: #1A1F26; --c-graphite: #2A2F37; --c-stone-700: #3F4651; --c-stone-500: #6B7280; --c-stone-300: #C7CBD1; --c-stone-200: #E2E4E1; --c-stone-100: #EEEEEA; --c-paper: #F6F6F4; --c-white: #FFFFFF; /* Typografie */ --f-display: 'Inter Tight', system-ui, -apple-system, sans-serif; --f-body: 'Inter', system-ui, -apple-system, sans-serif; /* Layout */ --shadow-card: 0 2px 6px rgba(14,17,22,.05), 0 12px 30px rgba(14,17,22,.07); --shadow-soft: 0 1px 2px rgba(14,17,22,.04), 0 8px 24px rgba(14,17,22,.05); --section-spacing: 5rem; } .navbar-toggler { border: 0px solid white; } /* ----- Bootstrap-Variablen mit Tokens überschreiben ----- */ :root, [data-bs-theme="light"]{ /* Hintergrund & Schrift */ --bs-body-bg: var(--c-paper); --bs-body-color: var(--c-ink); --bs-body-font-family: var(--f-body); --bs-body-font-size: 17px; --bs-body-line-height: 1.6; --bs-body-font-weight: 400; --bs-heading-color: var(--c-ink); /* Borders & Radii */ --bs-border-color: var(--c-stone-200); --bs-border-color-translucent: rgba(14,17,22,.10); --bs-border-radius: 14px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 22px; --bs-border-radius-pill: 999px; /* Links */ --bs-link-color: var(--c-ink); --bs-link-color-rgb: 14, 17, 22; --bs-link-hover-color: var(--c-stone-500); --bs-link-hover-color-rgb: 107, 114, 128; --bs-link-decoration: none; /* Container & Gutter */ --bs-gutter-x: 1.5rem; /* Theme-Farben */ --bs-primary: var(--c-ink); --bs-primary-rgb: 14, 17, 22; --bs-dark: var(--c-ink); --bs-dark-rgb: 14, 17, 22; --bs-light: var(--c-paper); --bs-light-rgb: 246, 246, 244; --bs-warning: var(--c-yellow); --bs-warning-rgb: 255, 204, 0; --bs-info: var(--c-blue); --bs-info-rgb: 0, 159, 227; /* Accordion */ --bs-accordion-border-color: var(--c-stone-200); --bs-accordion-border-width: 1px; --bs-accordion-border-radius: 0; --bs-accordion-bg: transparent; --bs-accordion-btn-color: var(--c-ink); --bs-accordion-btn-bg: transparent; --bs-accordion-btn-font-weight: 700; --bs-accordion-btn-padding-x: 8px; --bs-accordion-btn-padding-y: 28px; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--c-ink); --bs-accordion-body-padding-x: 8px; --bs-accordion-body-padding-y: 0; /* Navbar */ --bs-navbar-toggler-focus-width: 0; --bs-navbar-toggler-border-color: var(--c-stone-200); } /* ----- Lokale Fonts (woff2 in assets/fonts/; Preload: diginovum_font_preloads()) ----- */ @font-face { font-display:swap; font-family:'Inter'; font-style:normal; font-weight:400; src:url('../fonts/inter-v20-latin-400.woff2') format('woff2'); } @font-face { font-display:swap; font-family:'Inter'; font-style:normal; font-weight:500; src:url('../fonts/inter-v20-latin-500.woff2') format('woff2'); } @font-face { font-display:swap; font-family:'Inter'; font-style:normal; font-weight:600; src:url('../fonts/inter-v20-latin-600.woff2') format('woff2'); } @font-face { font-display:swap; font-family:'Inter'; font-style:normal; font-weight:700; src:url('../fonts/inter-v20-latin-700.woff2') format('woff2'); } @font-face { font-display:swap; font-family:'Inter Tight'; font-style:normal; font-weight:700; src:url('../fonts/inter-tight-v9-latin-700.woff2') format('woff2'); } @font-face { font-display:swap; font-family:'Inter Tight'; font-style:normal; font-weight:800; src:url('../fonts/inter-tight-v9-latin-800.woff2') format('woff2'); } @font-face { font-display:swap; font-family:'Inter Tight'; font-style:normal; font-weight:900; src:url('../fonts/inter-tight-v9-latin-900.woff2') format('woff2'); } .intertight { font-family: 'Inter Tight'; } .inter { font-family: 'Inter'; } /* ----- Basis-Resets ----- */ html{ scroll-behavior:smooth; } body{ background-color:#fff; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body > aside {background-color: white; position: relative; margin-top: 47px;} img{ max-width:100%; display:block; } img{ background-color:var(--c-stone-200); } .logo-img, .custom-logo, .job-mark, .partner-logo img, .service-icon img, .stat-icon img, .page-hero-mark, .pillar-logo{ background-color:transparent; } img.aligncenter { margin: 0 auto; } a{ text-decoration:none; } .site-main{ overflow-x: hidden; } .object-fit-cover{ object-fit: cover; } .img-icon{ max-width: 100px; } .example:last-child {margin-bottom: 0;} /* ----- Typografie (überschreibt Bootstrap-Headings) ----- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ font-family:var(--f-display); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0; color:var(--c-ink); } h1, .h1 { font-size: clamp(2rem, 1.45rem + 2.6vw, 3rem); } h2, .h2 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem); } h3, .h3 { font-size: clamp(1.35rem, 1.2rem + 0.9vw, 1.75rem); } h4, .h4 { font-size: clamp(1.15rem, 1.08rem + 0.45vw, 1.4rem); } h5, .h5 { font-size: clamp(1.05rem, 1.01rem + 0.25vw, 1.25rem); } h6, .h6 { font-size: clamp(1rem, 0.98rem + 0.12vw, 1.1rem); } .h-hero{ font-size:clamp(48px, 7vw, 104px); font-weight:900; letter-spacing:-.035em; line-height:.98; } .section-title{ font-size:clamp(36px, 4.4vw, 64px); } .h-card{ font-size:clamp(22px, 1.8vw, 28px); font-weight:700; } .h-mini{ font-size:18px; font-weight:700; letter-spacing:-.01em; } .lead { font-size: clamp(1.1rem, 1.04rem + 0.4vw, 1.375rem); } p.lead{ font-size:clamp(18px, 1.4vw, 22px); line-height:1.55; color:var(--c-stone-700); max-width:62ch; font-weight:400; } .display-1 { font-size: clamp(3rem, 1.8rem + 6vw, 6rem); } .display-2 { font-size: clamp(2.75rem, 1.8rem + 5vw, 5.5rem); } .display-3 { font-size: clamp(2.5rem, 1.8rem + 4vw, 4.5rem); } .display-4 { font-size: clamp(2.25rem, 1.7rem + 3vw, 3.5rem); } .display-5 { font-size: clamp(2rem, 1.6rem + 2.4vw, 3rem); } .display-6 { font-size: clamp(1.75rem, 1.5rem + 1.8vw, 2.5rem); } .blue {color: var(--c-blue)!important;} .yellow {color: var(--c-yellow)!important;} /* ----- Titel-Highlight: [Wort] = gelb, {Wort} = blau (Ausgabe als via diginovum_the_title()) ----- */ .section-title mark, .hero-title mark, .page-hero-title mark { background-color:transparent; /* -Standardoptik zurücksetzen */ color:inherit; font-style:normal; font-weight:inherit; background-repeat:no-repeat; background-position:0 88%; background-size:100% 38%; padding:0 .08em; } .section-title mark.hl-yellow, .hero-title mark.hl-yellow, .page-hero-title mark.hl-yellow { background-image:linear-gradient(var(--c-yellow), var(--c-yellow)); } .section-title mark.hl-blue, .hero-title mark.hl-blue, .page-hero-title mark.hl-blue { background-image:linear-gradient(var(--c-blue), var(--c-blue)); } .section-title em, .hero-title em, .page-hero-title em { background-image:linear-gradient(var(--c-yellow), var(--c-yellow)); } .section-title strong, .hero-title strong, .page-hero-title strong { background-image:linear-gradient(var(--c-blue), var(--c-blue)); } /* ----- Container (vollwertiger 1320px-Container) ----- */ .container-xxl{ --bs-gutter-x: clamp(40px, 4vw, 56px); max-width: 1320px; } .container-xl{ --bs-gutter-x: clamp(40px, 4vw, 56px); max-width: 1140px; } /* ----- Buttons (extends Bootstrap .btn) ----- */ .btn{ font-family:var(--f-display); font-weight:700; font-size:16px; padding:18px 26px; border-radius:999px; display:inline-flex; align-items:center; gap:12px; border:1px solid transparent; transition:transform .15s ease, background .15s ease; } .btn--primary{ background:var(--c-ink); color:var(--c-paper); } .btn--primary:hover{ background:var(--c-graphite); color:var(--c-paper); transform:translateY(-2px); } body.page-elektro .btn--primary, .btn--yellow { background: var(--c-yellow)!important; color:var(--c-ink); } body.page-haus .btn--primary, .btn--blue { background: var(--c-blue)!important; color:white; } .btn--ghost, .btn--secondary { background:transparent; color:var(--c-ink); border-color:var(--c-stone-300); } .btn--ghost:hover, .btn--secondary:hover{ border-color:var(--c-ink); color:var(--c-ink); } .btn--yellow{ background:var(--c-yellow); color:var(--c-ink); } .btn--yellow:hover{ background:var(--c-yellow-deep); color:var(--c-ink); transform:translateY(-2px); } .btn--blue, .page-haus .hero-actions .btn--secondary, .page-haus .banner__cta { background:var(--c-blue); color:var(--c-white); } .btn--blue:hover, .page-haus .hero-actions .btn--secondary:hover, .page-haus .banner__cta:hover { background:var(--c-blue-deep); color:var(--c-white); transform:translateY(-2px); } .btn--white{ background:var(--c-white); color:var(--c-ink); } .btn--white:hover{ background:var(--c-paper); color:var(--c-ink); } /* Bootstrap-Button an die Markenfarbe koppeln (für .btn btn-primary / -outline-primary). */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, #000); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); } /********************************************************************** * 2. DESKTOP **********************************************************************/ /* ================= NAVI / HEADER ================= */ .site-header.navbar{ background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--c-stone-200); padding-top:14px; padding-bottom:14px; } .site-header .navbar-brand{ padding:0; margin-right:0; } .site-header .custom-logo { height:60px; width:auto; display:block; font-size: 11px;} .site-header .navbar-nav{ gap:8px 22px; } .site-header .nav-link{ font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--c-ink); padding:6px 4px !important; position:relative; } .site-header .nav-link:hover{ color:var(--c-stone-500); } .site-header .nav-link.active{ color:var(--c-ink); } .site-header .nav-link.active::after{ content:""; position:absolute; left:4px; right:4px; bottom:-2px; height:2px; background:var(--c-ink); } body.page-elektro .site-header .nav-link.active::after{ background:var(--c-yellow); height:3px; bottom:-3px; } body.page-haus .site-header .nav-link.active::after{ background:var(--c-blue); height:3px; bottom:-3px; } .header-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--c-ink); color:var(--c-paper); padding:12px 18px; border-radius:999px; font-family:var(--f-display); font-weight:600; font-size:14px; transition:transform .15s ease, background .15s ease; white-space:nowrap; } .header-cta:hover{ background:var(--c-graphite); color:var(--c-paper); transform:translateY(-1px); } .header-cta svg{ width:14px; height:14px; } /* Mobile Toggle */ .navbar-toggler{ padding:8px 10px; border-radius:8px; } .navbar-toggler:focus{ box-shadow:none; } /* ================= MAIN ================= */ /* --------- Sektionen: Gerüst --------- */ .section{ scroll-margin-top: 80px; } .section-py-sm { padding-block: clamp(48px, 6vw, 80px); } .section-py-md { padding-block: clamp(80px, 9vw, 80px); } .section-py-lg { padding-block: clamp(80px, 11vw, 80px); } .section-bg-white { background: var(--c-white); } .section-bg-paper { background: var(--c-paper); } .section-bg-ink { background: var(--c-ink); color: var(--c-paper); } .section-bg-ink h2, .section-bg-ink .section-title { color: var(--c-white); } .section-bg-ink p { color: var(--c-stone-300); } .section-bg-ink .section-intro p { color: var(--c-stone-300); } .section--has-bg{ background-color:var(--c-stone-200); background-size:cover; background-position:center; } [data-bg]:not(.section--has-bg), [data-bg-loaded]:not(.section--has-bg){ transition:filter .5s ease; } [data-bg]:not(.section--has-bg):not(.page-hero-media){ filter:blur(20px); } [data-bg-loaded]:not(.section--has-bg){ filter:blur(0); } .section-head{ margin-bottom:72px; } .section-head .section-head__main .section-title{ max-width:18ch; } .section-head--stacked { margin-bottom: 1.5rem; } .section-head--center { margin-bottom: 3rem; text-align: center; } .section-topline{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:600; color:var(--c-stone-500); display:inline-flex; align-items:center; gap:10px; } .section-topline .section-topline__star{ width:10px; height:10px; fill: currentColor; } .section-topline--on-dark{ color:var(--c-stone-300); } .section-topline + .section-title { margin-top: 1rem; } /*.section__topline{ letter-spacing: 0.08em; }*/ .section-intro { padding-top: 30px; } .section-intro p { font-size:clamp(18px,1.4vw,22px); line-height:1.55; color:var(--c-stone-700); margin-bottom:0; } .section-intro > :last-child { margin-bottom:0; } /*.section__intro > :last-child{ margin-bottom: 0; }*/ .section-outro { padding-top: 30px; color:var(--c-stone-700);} .section-link { margin-top: 1.5rem; } /* --------- Hero / Splash (Startseite) --------- */ .section-hero{ min-height: 60vh; } .section-hero.section--has-bg{ position: relative; color: #fff; } .section-hero.section--has-bg::before{ content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); pointer-events: none; } .section-hero .container{ position: relative; z-index: 1; } .hero{ position:relative; background:linear-gradient(180deg, #FBFBF9 0%, var(--c-paper) 70%); color:var(--c-ink); overflow:hidden; isolation:isolate; } .hero::before{ content:""; position:absolute; inset:auto -8% -32% auto; width:80vw; height:80vw; max-width:950px; max-height:950px; background:url("data:image/svg+xml;utf8,") no-repeat center/contain; z-index:0; pointer-events:none; } .hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(55% 50% at 0% -5%, rgba(255,204,0,.55), transparent 60%), radial-gradient(45% 45% at 100% 0%, rgba(0,159,227,.40), transparent 62%), radial-gradient(40% 35% at 75% 35%, rgba(255,204,0,.08), transparent 70%); } .hero-inner{ position:relative; z-index:1; } .hero-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--c-stone-200); margin-bottom:48px; } .hero-top .hero-section-topline{ max-width:520px; } .hero-top .hero-meta{ font-family:var(--f-display); font-weight:500; font-size:14px; color:var(--c-stone-700); display:flex; gap:24px; align-items:center; flex-wrap:wrap; } .hero-top .hero-meta .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-stone-300); } .hero .hero-title { color:var(--c-ink); max-width:18ch; margin-bottom:32px; } .hero .hero-title em, .hero .hero-title strong{ font-style:normal; font-weight:inherit; color:var(--c-ink); background-repeat:no-repeat; background-position:0 88%; background-size:100% 38%; padding:0 .08em; } .hero .hero-title em{ background-image:linear-gradient(var(--c-yellow), var(--c-yellow)); } .hero .hero-title strong{ background-image:linear-gradient(var(--c-blue), var(--c-blue)); } .hero .hero-sub{ max-width:56ch; color:var(--c-stone-700); font-size:clamp(17px, 1.25vw, 20px); line-height:1.55; margin-bottom:56px; } /* Splash-Türen */ .splash{ margin:0 -8px; } .door{ position:relative; display:block; border-radius:var(--bs-border-radius-lg); overflow:hidden; background:var(--c-ink-2); min-height:440px; isolation:isolate; height:100%; transition:transform .35s ease; color:var(--c-paper); } .door:hover{ transform:translateY(-4px); color:var(--c-paper); } .door .door-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.42; transition:opacity .4s ease, transform .8s ease; } .door:hover .door-bg{ opacity:.52; transform:scale(1.04); } .door .door-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,17,22,.25) 0%, rgba(14,17,22,.78) 65%, rgba(14,17,22,.92) 100%); } .door--elektro .door-overlay{ background: radial-gradient(95% 70% at 100% 0%, rgba(255,204,0,.45), transparent 55%), radial-gradient(60% 50% at 0% 100%, rgba(255,204,0,.10), transparent 60%)/*, linear-gradient(180deg, rgba(14,17,22,.20) 0%, rgba(20,15,2,.72) 60%, rgba(20,15,2,.92) 100%); */ } .door--haus .door-overlay{ background: radial-gradient(95% 70% at 100% 0%, rgba(0,159,227,.50), transparent 55%), radial-gradient(60% 50% at 0% 100%, rgba(0,159,227,.12), transparent 60%)/*, linear-gradient(180deg, rgba(14,17,22,.20) 0%, rgba(2,18,28,.72) 60%, rgba(2,18,28,.92) 100%)*/; } .door .door-content{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:36px 36px 32px; color:var(--c-paper); } .door .door-tag{ font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-stone-300); } .door .door-title{ font-family:var(--f-display); font-weight:900; font-size:clamp(36px, 4vw, 56px); letter-spacing:-.02em; line-height:1; margin:14px 0 18px; color:var(--c-paper); text-wrap:balance; } .door .door-services{ /*color:var(--c-stone-300);*/ font-size:15px; line-height:1.7; } .door .door-services li{ list-style:none; padding-left:0; } .door .door-services ul{ padding:0; margin:0; columns:2; column-gap:24px; } .door .door-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:28px; margin-top:28px; border-top:1px solid rgba(255,255,255,.12); } .door .door-cta{ display:inline-flex; align-items:center; gap:14px; font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--c-paper); } .door .door-cta .arrow{ width:38px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25); transition:background .2s, border-color .2s, transform .2s; } .door:hover .door-cta .arrow{ background:var(--c-paper); border-color:var(--c-paper); transform:translateX(2px); } .door:hover .door-cta .arrow svg{ stroke:var(--c-ink); } .door .door-cta .arrow svg{ width:14px; height:14px; stroke:var(--c-paper); transition:stroke .2s; } .door--elektro{ background:#1a1305; } .door--elektro .door-tag, .door--elektro .door-cta{ color:var(--c-yellow); } .door--elektro .door-cta .arrow{ border-color:var(--c-yellow); } .door--elektro .door-services strong{ color:var(--c-yellow); } .door--haus{ background:#051a26; } .door--haus .door-tag, .door--haus .door-cta{ color:var(--c-blue-soft); } .door--haus .door-cta .arrow{ border-color:var(--c-blue-soft); } .door--haus .door-services strong{ color:var(--c-blue-soft); } .hero-bottom{ margin-top:56px; padding:24px 0 32px; border-top:1px solid var(--c-stone-200); display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; font-family:var(--f-display); color:var(--c-stone-500); font-size:14px; } .hero-bottom .scroll-hint{ display:inline-flex; align-items:center; gap:10px; } .hero-bottom .scroll-hint .dash{ width:30px; height:1px; background:var(--c-stone-300); } .hero-bottom .marquee{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; } .hero-bottom .marquee span{ opacity:.85; } /* --------- Page-Hero --------- */ .page-hero{ position:relative; background:linear-gradient(180deg, #FBFBF9 0%, var(--c-paper) 80%); overflow:hidden; isolation:isolate; } .page-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; } .page-hero--elektro::after{ background: radial-gradient(60% 50% at 0% 0%, rgba(255,204,0,.65), transparent 60%), radial-gradient(45% 45% at 100% 10%, rgba(255,204,0,.20), transparent 65%); } .page-hero--haus::after{ background: radial-gradient(60% 50% at 0% 0%, rgba(0,159,227,.55), transparent 60%), radial-gradient(45% 45% at 100% 10%, rgba(0,159,227,.20), transparent 65%); } .page-hero--jobs::after{ background: radial-gradient(45% 45% at 0% 0%, rgba(255,204,0,.40), transparent 60%), radial-gradient(45% 45% at 100% 0%, rgba(0,159,227,.35), transparent 60%); } .page-hero-inner{ position:relative; z-index:1; } .breadcrumb-reizig{ display:flex; gap:10px; align-items:center; font-family:var(--f-display); font-weight:500; font-size:13px; color:var(--c-stone-500); margin-bottom:48px; list-style:none; padding:0; } .breadcrumb-reizig a:hover{ color:var(--c-ink); } .breadcrumb-reizig .sep{ opacity:.5; } .breadcrumb-reizig .current{ color:var(--c-ink); font-weight:600; } .page-hero-text .page-hero-mark{ height:54px; width:auto; display:block; margin-bottom:32px; } .page-hero-text .page-hero-title { font-family:var(--f-display); font-weight:900; font-size:clamp(44px, 6vw, 88px); letter-spacing:-.035em; line-height:1; margin:0 0 28px; color:var(--c-ink); max-width:14ch; text-wrap:balance; } .page-hero-text .lead{ margin-bottom:40px; } .page-hero-text .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .page-hero-media{ position:relative; border-radius:var(--bs-border-radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--c-stone-200) center/cover no-repeat; box-shadow:var(--shadow-card); } .page-hero-media .floater{ position:absolute; bottom:24px; left:24px; right:24px; background:rgba(14,17,22,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--c-paper); border-radius:var(--bs-border-radius); padding:18px 22px; font-family:var(--f-display); display:flex; gap:18px; align-items:center; } .page-hero-media .floater-num{ font-weight:900; font-size:36px; line-height:1; color:var(--c-white); } .page-hero-media .floater-text{ font-size:13px; line-height:1.35; max-width:24ch; color:var(--c-stone-300); } .page-hero--elektro .page-hero-media .floater-num{ color:var(--c-yellow); } .page-hero--haus .page-hero-media .floater-num{ color:var(--c-blue-soft); } /* --------- USPs --------- */ .usps{ border-top:1px solid var(--c-stone-200); padding-top:48px; } .usp{ position:relative; padding-right:16px; } .usp .usp-bullet{ width:22px; height:22px; margin-bottom:18px; } .usp h3{ font-size:20px; line-height:1.2; margin-bottom:10px; } .usp p{ font-size:15px; color:var(--c-stone-500); line-height:1.6; margin:0; } /* --------- Leistungs-Säulen --------- */ .pillar{ border-radius:var(--bs-border-radius-lg); padding:48px 44px 40px; position:relative; overflow:hidden; background:var(--c-white); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; min-height:520px; height:100%; } .pillar--elektro{ border-top:6px solid var(--c-yellow); } .pillar--haus{ border-top:6px solid var(--c-blue); } .pillar .pillar-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; } .pillar .pillar-head .pillar-tag{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-family:var(--f-display); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.12em; } .pillar--elektro .pillar-tag{ background:rgba(255,204,0,.16); color:var(--c-yellow-text); } .pillar--haus .pillar-tag{ background:rgba(0,159,227,.14); color:var(--c-blue-text); } .pillar .pillar-head .pillar-logo{ height:65px; width:auto; object-fit:contain; margin-left:0; } .pillar h3{ font-size:clamp(28px, 2.2vw, 36px); line-height:1.1; margin-bottom:14px; } .pillar p{ color:var(--c-stone-700); font-size:16px; max-width:48ch; } .pillar .pillar-list ul{ list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 24px; } .pillar-list ul li{ display:flex; gap:10px; padding:13px 0 13px 20px; border-bottom:1px solid var(--c-stone-200); font-family:var(--f-display); font-weight:500; font-size:15px; position: relative; } .pillar-list ul li::before { position: absolute; content: ''; top: 18px; left: 1px; width: 16px; height: 16px; mask-image: url("data:image/svg+xml;utf8,"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .pillar--elektro .pillar-list ul li::before { background-color: var(--c-yellow-deep); } .pillar--haus .pillar-list ul li::before { background-color: var(--c-blue-deep); } .pillar .pillar-list ul li:nth-last-child(-n+2){ border-bottom:none; } .pillar .pillar-list ul li .tick{ flex:none; width:16px; height:16px; margin-top:3px; } .pillar ul.svc li .tick { fill:none; } .pillar .pillar-cta{ margin-top:auto; padding-top:32px; display:inline-flex; align-items:center; gap:14px; font-family:var(--f-display); font-weight:700; font-size:16px; } .pillar .pillar-cta .arrow{ width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease; } .pillar--elektro .pillar-cta{ color:var(--c-yellow-text); } .pillar--elektro .pillar-cta .arrow{ background:var(--c-yellow); } .pillar--haus .pillar-cta{ color:var(--c-blue-text); } .pillar--haus .pillar-cta .arrow{ background:var(--c-blue); color:var(--c-white); } .pillar:hover .pillar-cta .arrow{ transform:translateX(4px); } /* --------- Energiewende-Kacheln --------- */ .energy-card{ position:relative; border-radius:var(--bs-border-radius); overflow:hidden; /* background:var(--c-ink-2); */ color:white; min-height:520px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; } .energy-card .energy-bg{ position:absolute; inset:0; background-size:cover; background-position:center; /*opacity:.55;*/ transition:opacity .4s ease, transform .8s ease; z-index:-2; } .energy-card .energy-grad{ position:absolute; inset:0; /*background:linear-gradient(180deg, rgba(14,17,22,.15) 0%, rgba(14,17,22,.85) 75%, rgba(14,17,22,.95) 100%);*/ background:linear-gradient(180deg, rgba(28, 33, 41,.15) 0%, rgba(28, 33, 41,.85) 75%, rgba(28, 33, 41,.95) 100%); z-index:-1; } .energy-card:hover .energy-bg{ opacity:.7; transform:scale(1.04); } .energy-card .energy-content{ padding:32px; } .energy-card .energy-num{ font-family:var(--f-display); font-weight:800; font-size:14px; color:var(--c-yellow); letter-spacing:.18em; text-transform:uppercase; margin-bottom:24px; display:inline-flex; align-items:center; gap:10px; } .energy-card .energy-num::before{ content:""; width:32px; height:1px; background:var(--c-yellow); } .energy-card h3{ font-size:30px; line-height:1.1; color:var(--c-white); margin-bottom:14px; } .energy-card p{ /*color:var(--c-stone-300);*/ font-size:15px; line-height:1.55; max-width:32ch; margin:0; } .energy-card .energy-more{ margin-top:24px; display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--c-yellow); } /* --------- Service-Detail-Cards --------- */ .service-card{ background:var(--c-white); border-radius:var(--bs-border-radius); padding:36px 34px; display:flex; flex-direction:column; box-shadow:var(--shadow-soft); transition:transform .25s ease, box-shadow .25s ease; position:relative; border-top:4px solid transparent; height:100%; } .service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); } body.page-elektro .service-card{ border-top-color:var(--c-yellow); } body.page-haus .service-card{ border-top-color:var(--c-blue); } .svc-accent--elektro .service-card{ border-top-color:var(--c-yellow); } .svc-accent--haus .service-card{ border-top-color:var(--c-blue); } .service-card .service-icon{ width:56px; height:56px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:24px; } body.page-elektro .service-card .service-icon{ background:rgba(255,204,0,.16); color:var(--c-yellow-text); } body.page-haus .service-card .service-icon{ background:rgba(0,159,227,.14); color:var(--c-blue-text); } .svc-accent--elektro .service-card .service-icon{ background:rgba(255,204,0,.16); color:var(--c-yellow-text); } .svc-accent--haus .service-card .service-icon{ background:rgba(0,159,227,.14); color:var(--c-blue-text); } .service-card .service-icon svg{ width:26px; height:26px; } .service-card .service-icon img { width:26px; height:26px; object-fit:contain; } .service-card h3{ font-size:22px; line-height:1.2; margin-bottom:12px; text-wrap:balance; } .service-card p{ font-size:15px; color:var(--c-stone-700); margin:0 0 18px; line-height:1.6; } .service-card ul{ list-style:none; padding:0; margin:auto 0 0; padding-top:16px; border-top:1px solid var(--c-stone-200); } .service-card ul li{ font-family:var(--f-display); font-weight:500; font-size:14px; padding:6px 0; color:var(--c-stone-700); display:flex; gap:8px; align-items:center; } .service-card ul li::before{ content:""; width:5px; height:5px; border-radius:50%; flex:none; } body.page-elektro .service-card ul li::before{ background:var(--c-yellow-deep); } body.page-haus .service-card ul li::before{ background:var(--c-blue-deep); } .svc-accent--elektro .service-card ul li::before{ background:var(--c-yellow-deep); } .svc-accent--haus .service-card ul li::before{ background:var(--c-blue-deep); } /* Service-Text (WYSIWYG-Feld): Beschreibung + Liste mit Häkchen */ .service-card .service-text > :last-child { margin-bottom: 0; } .service-card .service-text p { font-size: 15px; color: var(--c-stone-700); line-height: 1.6; margin: 0 0 14px; } .service-card .service-text ul { list-style: none; padding: 16px 0 0; margin: 14px 0 0; border-top: 1px solid var(--c-stone-200); } .service-card .service-text ul li { font-family: var(--f-display); font-weight: 500; font-size: 14px; padding: 6px 0; color: var(--c-stone-700); display: flex; gap: 8px; align-items: flex-start; } .service-card .service-text ul li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; margin-top: 8px; } .svc-accent--elektro .service-card .service-text ul li::before { background: var(--c-yellow-deep); } .svc-accent--haus .service-card .service-text ul li::before { background: var(--c-blue-deep); } /* --------- Prozess-Steps --------- */ .process{ position:relative; } .process::before{ content:""; position:absolute; left:0; right:0; top:62px; height:1px; background:var(--c-stone-200); z-index:0; } .process-step{ position:relative; z-index:1; } .process-step .step-num{ width:76px; height:76px; display:flex; align-items:center; justify-content:center; background:var(--c-white); border:1px solid var(--c-stone-200); border-radius:50%; font-family:var(--f-display); font-weight:900; font-size:30px; color:var(--c-ink); margin-bottom:24px; } body.page-elektro .process-step .step-num{ border-color:var(--c-yellow); color:var(--c-yellow-text); } body.page-haus .process-step .step-num{ border-color:var(--c-blue); color:var(--c-blue-text); } .process-step h3{ font-size:20px; line-height:1.25; margin-bottom:10px; } .process-step p{ font-size:15px; color:var(--c-stone-700); line-height:1.6; margin:0; } /* --------- Zielgruppen --------- */ .audience{ position:relative; border-radius:var(--bs-border-radius); overflow:hidden; min-height:340px; height:100%; /* background:var(--c-ink-2); */ isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; color:var(--c-paper); } .audience .audience-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.45; z-index:-2; } .audience .audience-grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,18,28,.2) 0%, rgba(2,18,28,.85) 70%, rgba(2,18,28,.95) 100%); z-index:-1; } .audience .audience-content{ padding:24px 26px 26px; } .audience h3{ font-family:var(--f-display); font-weight:800; font-size:22px; color:var(--c-white); line-height:1.15; margin-bottom:6px; } .audience p{ /*color:var(--c-stone-300);*/ font-size:13px; line-height:1.5; margin:0; max-width:28ch; } .audience .audience-tag{ display:inline-block; font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-blue-soft); margin-bottom:10px; } /* --------- Innungs-Banner / Certification --------- */ .cert-banner{ background:var(--c-ink); color:var(--c-paper); border-radius:var(--bs-border-radius-lg); padding:56px 48px; display:grid; grid-template-columns:auto 1fr auto; gap:48px; align-items:center; position:relative; isolation:isolate; overflow:hidden; } .cert-banner::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 70% at 100% 0%, rgba(255,204,0,.30), transparent 60%); } .cert-banner .cert-seal{ width:120px; height:120px; border-radius:50%; background:var(--c-yellow); color:var(--c-ink); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:900; text-align:center; font-size:13px; letter-spacing:.06em; line-height:1.1; text-transform:uppercase; flex:none; } .cert-banner h2{ color:var(--c-white); font-size:32px; line-height:1.1; margin-bottom:8px; } .cert-banner p{ color:var(--c-stone-300); max-width:48ch; margin:0; } .cert-banner .cert-cta{ display:inline-flex; align-items:center; gap:14px; background:var(--c-yellow); color:var(--c-ink); padding:16px 24px; border-radius:999px; font-family:var(--f-display); font-weight:700; font-size:15px; } .img-seal { width: 150px; border-radius: 50%; margin: 0 auto; } /* --------- Referenzen --------- */ .ref{ background:var(--c-white); border-radius:var(--bs-border-radius); overflow:hidden; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; height:100%; transition:transform .3s ease, box-shadow .3s ease; } .ref:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); } .ref .ref-media{ aspect-ratio:4/3; background-size:cover; background-position:center; background-color:var(--c-stone-200); position:relative; } .ref--wide .ref-media{ aspect-ratio:16/9; } .ref .ref-media .ref-tag{ position:absolute; top:16px; left:16px; padding:6px 12px; border-radius:999px; font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; } .ref .ref-tag--elektro{ background:var(--c-yellow); color:var(--c-ink); } .ref .ref-tag--haus{ background:var(--c-blue); color:var(--c-white); } .ref .ref-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; } .ref .ref-meta{ font-family:var(--f-display); font-weight:500; font-size:13px; color:var(--c-stone-500); letter-spacing:.04em; } .ref h3{ font-size:20px; line-height:1.25; } .ref p{ font-size:14px; color:var(--c-stone-700); margin:0; line-height:1.55; } /* --------- Stats --------- */ .stats{ border-top:1px solid var(--c-stone-200); border-bottom:1px solid var(--c-stone-200); } .stat{ padding:48px 24px; border-right:1px solid var(--c-stone-200); } .stat:last-child{ border-right:none; } .stat-icon .img-icon {margin: 0 auto;} .stat .stat-num{ font-family:var(--f-display); font-weight:900; font-size:clamp(48px, 5vw, 76px); line-height:1; letter-spacing:-.04em; color:var(--c-ink); } body.page-haus .stat .stat-num {color:var(--c-blue-deep);} .stat .stat-num .unit{ font-size:.45em; color:var(--c-yellow-deep); margin-left:2px; font-weight:700; } body.page-haus .stat .stat-num .unit{ color:var(--c-blue-deep); } .stat .stat-label{ margin-top:16px; font-family:var(--f-display); font-weight:500; font-size:14px; color:var(--c-stone-500); /*max-width:18ch;*/ } /* Stats auf dunklem Hintergrund */ .section-bg-ink .stats{ border-color:rgba(255,255,255,.1); } .section-bg-ink .stat{ border-right-color:rgba(255,255,255,.08); } .section-bg-ink .stat .stat-num{ color:var(--c-white); } .section-bg-ink .stat .stat-num .unit{ color:var(--c-yellow); } .section-bg-ink .stat .stat-label{ color:var(--c-stone-300); } /* --------- Über uns --------- */ .about-media{ position:relative; border-radius:var(--bs-border-radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--c-stone-200) center/cover no-repeat; } .about-media .badge-stamp{ position:absolute; bottom:28px; left:28px; background:var(--c-white); border-radius:999px; padding:14px 22px; display:inline-flex; gap:14px; align-items:center; font-family:var(--f-display); font-weight:700; font-size:14px; box-shadow:var(--shadow-card); } .about-media .badge-stamp .badge-num{ font-size:28px; line-height:1; color:var(--c-ink); } .about-media .badge-stamp .badge-text{ color:var(--c-stone-700); font-weight:500; font-size:13px; max-width:14ch; line-height:1.25; } .about-text h2{ margin-bottom:24px; } .about-text .signature{ margin-top:36px; padding-top:28px; border-top:1px solid var(--c-stone-200); display:flex; gap:16px; align-items:center; } .about-text .signature .sig-avatar{ width:56px; height:56px; border-radius:50%; background:var(--c-stone-200) center/cover no-repeat; flex:none; } .about-text .signature .sig-name{ font-family:var(--f-display); font-weight:700; font-size:15px; } .about-text .signature .sig-role{ font-size:13px; color:var(--c-stone-500); } /* --------- Karriere-Teaser --------- */ .career{ position:relative; border-radius:var(--bs-border-radius-lg); overflow:hidden; isolation:isolate; background:var(--c-ink); color:var(--c-paper); padding:96px 64px; } .career .career-bg-img{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; z-index:-2; } .career h2{ color:var(--c-white); max-width:14ch; margin-bottom:24px; } .career p{ color:var(--c-stone-300); max-width:46ch; margin:0 0 36px; } .career .career-cta{ display:inline-flex; align-items:center; gap:14px; background:var(--c-yellow); color:var(--c-ink); padding:18px 26px; border-radius:999px; font-family:var(--f-display); font-weight:700; font-size:16px; transition:transform .15s ease; } .career .career-cta:hover{ transform:translateY(-2px); color:var(--c-ink); } .career-positions{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--bs-border-radius); padding:24px 28px; } .career-positions h3{ color:var(--c-paper); font-size:18px; margin-bottom:18px; } .career-positions ul{ list-style:none; padding:0; margin:0; } .career-positions li{ display:flex; justify-content:space-between; align-items:center; padding:14px 15px 14px 0; border-top:1px solid rgba(255,255,255,.08); font-family:var(--f-display); position: relative; } .career-positions li:first-child{ border-top:none; } .career-positions .pos-title{ font-weight:600; font-size:15px; color:var(--c-paper); } .career-positions .pos-meta{ font-size:13px; color:var(--c-stone-300); margin-top:2px; } .career-positions .pos-arrow {color: var(--c-stone-300); position: absolute; top: 15px; right: 0;} /* --------- Job-Cards (Jobs-Seite) --------- */ .job-list article:last-child {margin-bottom: 0;} .jobs-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:48px; } .jobs-filter .btn-filter{ background:var(--c-white); border:1px solid var(--c-stone-200); padding:10px 18px; border-radius:999px; font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--c-stone-700); display:inline-flex; align-items:center; gap:8px; } .jobs-filter .btn-filter .dot{ width:8px; height:8px; border-radius:50%; } .jobs-filter .btn-filter.is-active{ background:var(--c-ink); color:var(--c-paper); border-color:var(--c-ink); } .jobs-filter .btn-filter[data-filter="elektro"] .dot{ background:var(--c-yellow); } .jobs-filter .btn-filter[data-filter="haus"] .dot{ background:var(--c-blue); } .job-card{ background:var(--c-white); border-radius:var(--bs-border-radius); padding:32px; display:grid; grid-template-columns:90px 1fr auto; gap:32px; align-items:start; box-shadow:var(--shadow-soft); position:relative; border-left:4px solid transparent; margin-block: clamp(40px, 9vw, 80px); } article.job-anker {scroll-margin-top: 100px;} .job-card--elektro{ border-left-color:var(--c-yellow); } .job-card--haus{ border-left-color:var(--c-blue); } .job-card .job-mark{ height:54px; width:auto; object-fit:contain; object-position:left center; } .job-card .job-body h3{ font-size:24px; line-height:1.2; margin:0 0 6px; } .job-card .job-meta{ font-family:var(--f-display); font-weight:500; font-size:14px; color:var(--c-stone-500); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px 16px; } .job-card .job-meta .job-code{ background:var(--c-stone-100); color:var(--c-stone-700); padding:2px 10px; border-radius:6px; font-weight:600; } .job-card .job-meta .sep{ opacity:.5; } .job-card .job-tasks{ /*display:grid; grid-template-columns:1fr 1fr; gap:8px 32px;*/ font-size:14px; line-height:1.55; padding:0; margin:0; color:var(--c-stone-700); } .job-card .job-tasks ul {list-style-type:none; padding-left:0;} .job-card .job-tasks li{ position:relative; padding-left:18px; } .job-card .job-tasks li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; } .job-card--elektro .job-tasks li::before{ background:var(--c-yellow-deep); } .job-card--haus .job-tasks li::before{ background:var(--c-blue-deep); } .job-card .job-cta{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width:180px; } .job-card .job-cta .apply-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--c-ink); color:var(--c-paper); padding:14px 22px; border-radius:999px; font-family:var(--f-display); font-weight:700; font-size:14px; white-space:nowrap; } .job-card .job-cta .apply-btn:hover{ background:var(--c-graphite); color:var(--c-paper); } .job-card .job-cta .apply-phone{ font-family:var(--f-display); font-size:13px; color:var(--c-stone-500); } .job-card .job-cta .apply-phone strong{ color:var(--c-ink); font-weight:700; } /* --------- Bewerbung / Checkliste --------- */ .apply-block{ background:var(--c-paper); border-radius:var(--bs-border-radius-lg); padding:64px; } .apply-block h2{ margin-bottom:18px; } .apply-block ul{ list-style:none; padding:0; margin:0; } .apply-block ul li{ display:flex; gap:12px; padding:10px 0; font-family:var(--f-display); font-weight:500; font-size:15px; } .apply-block .apply-list ul { list-style: none; padding: 0; margin: 0; } .apply-block .apply-list ul li { display: flex; gap: 12px; padding: 10px 0; font-family: var(--f-display); font-weight: 500; font-size: 15px; align-items: flex-start; } .apply-block .apply-list ul li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background-color: var(--c-yellow-deep); -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; } .apply-block .apply-list p { margin: 0 0 12px; } .apply-block .apply-list > :last-child { margin-bottom: 0; } .apply-block .col-title{ font-family:var(--f-display); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--c-stone-500); margin-bottom:14px; } /* --------- Partner --------- */ .partner-logo{ font-family:var(--f-display); font-weight:800; font-size:18px; color:var(--c-stone-500); letter-spacing:-.01em; text-align:center; padding:8px 0; opacity:.7; transition:opacity .2s ease, color .2s ease; } .partner-logo:hover{ opacity:1; color:var(--c-ink); } .partner-logo .sub{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; } .partner-logo img { max-height:52px; width:auto; margin:0 auto; object-fit:contain; } /* --------- FAQ (Bootstrap-Accordion-Overrides) --------- */ .faq-accordion{ max-width:920px; margin:0 auto; border-top:1px solid var(--c-stone-200); } .faq-accordion .accordion-item{ background:transparent; border:0; border-bottom:1px solid var(--c-stone-200); border-radius:0; } .faq-accordion .accordion-button{ font-family:var(--f-display); font-weight:700; font-size:20px; color:var(--c-ink); background:transparent; box-shadow:none; padding:28px 8px; gap:24px; } .faq-accordion .accordion-button::after{ width:36px; height:36px; border-radius:50%; border:1px solid var(--c-stone-200); background-image:url("data:image/svg+xml;charset=utf8,"); background-size:14px; background-position:center; background-repeat:no-repeat; transition:background-color .2s, border-color .2s, transform .2s; margin-left:auto; flex:none; } .faq-accordion .accordion-button:not(.collapsed){ color:var(--c-ink); background:transparent; box-shadow:none; } .faq-accordion .accordion-button:not(.collapsed)::after{ background-color:var(--c-ink); border-color:var(--c-ink); background-image:url("data:image/svg+xml;charset=utf8,"); transform:rotate(45deg); } body.page-elektro .faq-accordion .accordion-button:not(.collapsed)::after, body.page-haus .faq-accordion .accordion-button:not(.collapsed)::after{ background-image:url("data:image/svg+xml;charset=utf8,"); } body.page-elektro .faq-accordion .accordion-button:not(.collapsed)::after, body.page-elektro .faq-accordion .accordion-button::after { background-color: var(--bs-warning); border-color:var(--bs-warning); } body.page-haus .faq-accordion .accordion-button:not(.collapsed)::after, body.page-haus .faq-accordion .accordion-button::after { background-color: var(--c-blue); border-color:var(--c-blue); } .faq-accordion .accordion-button:focus{ box-shadow:none; } .faq-accordion .accordion-body{ color:var(--c-stone-700); font-size:16px; line-height:1.65; max-width:64ch; padding:0 8px 28px; } /* --------- Kontakt-CTA --------- */ .contact-cta{ background:var(--c-paper); border-radius:var(--bs-border-radius-lg); padding:80px 64px; position:relative; overflow:hidden; isolation:isolate; } body.page-elektro .contact-cta::before, body.page-haus .contact-cta::before{ content:""; position:absolute; inset:0; z-index:-1; } body.page-elektro .contact-cta::before{ background:radial-gradient(60% 60% at 100% 100%, rgba(255,204,0,.30), transparent 65%); } body.page-haus .contact-cta::before{ background:radial-gradient(60% 60% at 100% 100%, rgba(0,159,227,.22), transparent 65%); } .contact-cta h2{ margin-bottom:18px; } .contact-cta p{ color:var(--c-stone-700); margin:0 0 28px; max-width:42ch; } .contact-cta .contact-buttons{ display:flex; gap:14px; flex-wrap:wrap; padding-top: 3rem; } .contact-card{ background:var(--c-white); border-radius:var(--bs-border-radius); padding:36px; box-shadow:var(--shadow-soft); } .contact-card .ck-row{ display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--c-stone-200); align-items:flex-start; } .contact-card .ck-row:first-of-type{ border-top:none; padding-top:0; } .contact-card .ck-icon{ width:42px; height:42px; border-radius:50%; background:var(--c-stone-100); display:flex; align-items:center; justify-content:center; flex:none; } .contact-card .ck-label{ font-family:var(--f-display); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--c-stone-500); margin-bottom:4px; } .contact-card .ck-value{ font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--c-ink); } .contact-card .ck-sub{ font-size:13px; color:var(--c-stone-500); margin-top:2px; } /* --------- Banner (Standardfelder-Sektion) --------- */ .banner__card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; padding: 3.5rem 3rem; border-radius: 1.25rem; background: var(--bs-dark); color: #fff; } .banner__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 100% 0%, rgba(var(--bs-warning-rgb), 0.30), transparent 60%); } .banner__seal { flex: none; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bs-dark); font-weight: 700; font-size: 0.8125rem; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; } body.page-elektro .banner__seal {background: var(--bs-warning);} body.page-haus .banner__seal {background: var(--c-blue); color: white;} .banner__title { color: #fff; margin-bottom: 0.5rem; } .banner__text { color: rgba(255, 255, 255, 0.75); max-width: 48ch; } .banner__text > :last-child { margin-bottom: 0; } .banner__cta { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-radius: 999px; background: var(--bs-warning); color: var(--bs-dark); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease; } .banner__cta:hover { color: var(--bs-dark); transform: translateY(-2px); } .banner__cta::after { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; } /* --------- Slider (Swiper) --------- */ .swiper { padding-bottom: 2.5rem; } .swiper .swiper-button-next, .swiper .swiper-button-prev { color: var(--bs-primary); } .swiper .swiper-pagination-bullet-active { background-color: var(--bs-primary); } /* ================= FOOTER ================= */ .site-footer{ background:var(--c-ink); color:var(--c-stone-300); padding:80px 0 32px; } .site-footer a{ color:var(--c-stone-300); } .site-footer a:hover{ color:var(--c-white); } .site-footer .logo-img{ height:48px; } .site-footer .nav-link{ padding-left:0; padding-right:1rem; } .footer-brand p{ margin-top:18px; max-width:34ch; font-size:14px; line-height:1.6; } .site-footer h4{ font-family:var(--f-display); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--c-white); margin-bottom:18px; } .site-footer ul{ list-style:none; padding:0; margin:0; } .site-footer li{ padding:7px 0; font-size:15px; } .footer-meta{ padding-top:32px; font-size:13px; color:var(--c-stone-500); border-top:1px solid rgba(255,255,255,.08); margin-top:24px; } .footer-meta a:hover{ color:var(--c-white); } .cert-img { background-color: white; max-width: 300px; margin: 0 auto; } /********************************************************************** * 3. TABLET **********************************************************************/ @media (max-width: 991.98px){ /* --------- Main: Hero --------- */ .hero-top{ flex-direction:column; align-items:flex-start; gap:20px; } /* --------- Main: Prozess-Steps --------- */ .process::before{ display:none; } /* --------- Main: Innungs-Banner --------- */ .cert-banner{ grid-template-columns:1fr; gap:24px; text-align:center; } /* --------- Main: Stats --------- */ .stat{ border-right:none; border-bottom:1px solid var(--c-stone-200); } .section-bg-ink .stat{ border-bottom-color:rgba(255,255,255,.08); } /* --------- Main: Karriere-Teaser --------- */ .career{ padding:64px 32px; } /* --------- Main: Job-Cards --------- */ .job-card{ grid-template-columns:1fr; gap:18px; } .job-card .job-cta{ align-items:flex-start; } .job-card .job-tasks{ grid-template-columns:1fr; } /* --------- Main: Bewerbung / Checkliste --------- */ .apply-block{ padding:40px; } /* --------- Main: Kontakt-CTA --------- */ .contact-cta{ padding:48px 32px; } /* --------- Main: Banner --------- */ .banner__card { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; padding: 2.5rem 1.75rem; } .banner__seal { margin: 0 auto; } .banner__text { margin-inline: auto; } /* --------- Hero Duo --------- */ .door .door-services ul {columns: 1;} /* --------- Tiles --------- */ .section-tiles .section-intro {padding-top: 0px;} /* --------- Tiles Duo --------- */ .pillar {padding: 48px 15px 40px;} .pillar .pillar-list ul {display: list-item;} } /********************************************************************** * 3. MOBILE **********************************************************************/ @media (max-width: 767px) { .section-intro {padding-top: 0px;} .energy-card {min-height: 420px;} .stat .stat-num {font-size: clamp(34px, 5vw, 76px);} .contact-cta {padding: 48px 15px;} .contact-card {padding: 30px 15px;} .contact-card .ck-icon {display: none;} .job-card {padding: 32px 15px;margin-block: clamp(40px, 9vw, 80px);} #footer-block-1 {display: none;} .pos-meta {display: none;} }