/* ===================================================================== home.css — KK Energy Solutions Startseite (B2B Engineering Standard) Aktiviert via auf der Home-Page. Erbt main.css für Header/Footer/Forms; überschreibt Hero/Sections. ===================================================================== */ .home-v2 { /* Tokens */ --h-paper: #FFFFFF; --h-soft: #F5F5F4; --h-line: #E5E5E2; --h-line-strong: #1A1A1A; --h-ink: #0A0A0A; --h-ink-2: #444444; --h-ink-3: #6B6B6B; /* Brand stays */ --h-dark: #073A06; --h-mid: #6FAE65; --h-light: #C7E264; --h-deep: #02160A; /* near-black green — Footer/Hero outer frame */ --h-radius: 4px; --h-radius-lg: 8px; background: var(--h-paper); color: var(--h-ink); font-family: var(--sans); font-feature-settings: "ss01", "ss03", "kern", "cv11"; } /* Override paper grain — engineers want clean */ .home-v2::before { display: none; } /* Disable announce bar magazine framing — keep but tone down */ .home-v2 .announce { background: var(--h-ink); border-bottom: 0; } /* Header on home: white, harder lines */ .home-v2 .site-header { background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--h-line); position: relative; } .home-v2 .site-header[data-scrolled="true"] { background: rgba(255, 255, 255, 0.98); border-color: var(--h-line-strong); } .home-v2 .site-logo { font-family: var(--sans); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; font-variation-settings: normal; } /* ---------- TYPO on home: Fraunces for display, Geist for body (CI-konform) ---------- */ .home-v2 h1, .home-v2 h2, .home-v2 h3, .home-v2 h4, .home-v2 .h1, .home-v2 .h2, .home-v2 .h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; color: var(--kk-dark); } /* ---------- SIDE-INDEX RAIL — distinctive editorial-engineering nav ---------- */ .home-v2 .side-index { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 50; display: none; /* desktop only */ flex-direction: column; gap: 0.85rem; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: auto; font-variant-numeric: tabular-nums; } @media (min-width: 1180px) { .home-v2 .side-index { display: flex; } } .home-v2 .side-index__item { display: grid; grid-template-columns: 32px auto; align-items: center; gap: 0.75rem; text-decoration: none; color: rgba(10, 10, 10, 0.4); padding: 0.3rem 0; position: relative; transition: color 200ms; } .home-v2 .side-index__item::before { content: ""; width: 24px; height: 1px; background: currentColor; transition: width 250ms cubic-bezier(0.16,1,0.3,1), background 200ms; } .home-v2 .side-index__num { display: none; } .home-v2 .side-index__label { font-weight: 500; opacity: 0; transform: translateX(-4px); transition: opacity 250ms, transform 250ms cubic-bezier(0.16,1,0.3,1); } .home-v2 .side-index__item:hover, .home-v2 .side-index__item:focus-visible, .home-v2 .side-index__item.is-active { color: var(--h-dark); text-decoration: none; } .home-v2 .side-index__item.is-active::before { background: var(--h-dark); width: 40px; } .home-v2 .side-index__item:hover .side-index__label, .home-v2 .side-index__item:focus-visible .side-index__label, .home-v2 .side-index__item.is-active .side-index__label { opacity: 1; transform: translateX(0); } /* When over dark sections — invert color */ .home-v2 .side-index.is-on-dark .side-index__item { color: rgba(255,255,255,0.45); } .home-v2 .side-index.is-on-dark .side-index__item:hover, .home-v2 .side-index.is-on-dark .side-index__item.is-active { color: var(--h-light); } .home-v2 .side-index.is-on-dark .side-index__item.is-active::before { background: var(--h-light); } /* ---------- HERO — Dark engineering surface, no stock photo ---------- */ .home-v2 .hero-v2 { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; isolation: isolate; padding-block: clamp(3rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem); border-bottom: 1px solid var(--hairline); } /* Subtle technical grid background — soft on cream */ .home-v2 .hero-v2__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(7,58,6,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(7,58,6,0.04) 1px, transparent 1px), radial-gradient(900px 500px at 80% -10%, rgba(199,226,100,0.18), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(111,174,101,0.10), transparent 60%); background-size: 40px 40px, 40px 40px, auto, auto; pointer-events: none; z-index: 0; } .home-v2 .hero-v2__inner { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; gap: 2.5rem; width: 100%; } .home-v2 .hero-v2__top { display: flex; align-items: center; gap: 1rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hairline); } .home-v2 .hero-v2__top::before { content: ""; width: 36px; height: 1px; background: var(--kk-dark); flex: 0 0 auto; } .home-v2 .hero-v2__top em { font-style: normal; color: var(--kk-dark); font-weight: 600; } .home-v2 .hero-v2__layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 980px) { .home-v2 .hero-v2__layout { /* Logo-Stage bekommt mehr Platz (1.4fr) damit das KK-Logo prominent ist */ grid-template-columns: 0.9fr 1.4fr; gap: clamp(2rem, 4vw, 4rem); } } .home-v2 .hero-v2__copy { max-width: 640px; } .home-v2 .hero-v2__eyebrow { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.05em; color: var(--kk-dark); font-weight: 500; margin: 0 0 1.5rem; } .home-v2 .hero-v2__title { font-family: var(--serif); font-size: clamp(2.5rem, 5.2vw, 5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.025em; color: var(--kk-dark); margin: 0 0 1.75rem; max-width: 14ch; } .home-v2 .hero-v2__title em { font-style: normal; color: var(--kk-dark); } .home-v2 .hero-v2__lede { font-family: var(--sans); font-size: clamp(1rem, 1.15vw, 1.1875rem); line-height: 1.55; color: var(--ink-soft); max-width: 52ch; margin: 0 0 2rem; font-weight: 400; } /* Hero figure */ .home-v2 .hero-figure { margin: 0; position: relative; } .home-v2 .hero-figure img { width: 100%; height: auto; max-width: 720px; display: block; border-radius: 0.5rem; box-shadow: 0 30px 60px rgba(0,0,0,0.45); } /* ============== ECHTES KK-LOGO als Hero-Schema ============== */ /* Logo-Stage — base interactivity */ .home-v2 .hero-schematic__svg .logo-stage a { cursor: pointer; outline: none; } .home-v2 .hero-schematic__svg .logo-band { transition: filter 350ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); transform-box: fill-box; transform-origin: 50% 0%; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35)); } .home-v2 .hero-schematic__svg a:hover .logo-band, .home-v2 .hero-schematic__svg a:focus-visible .logo-band { filter: brightness(1.12) saturate(1.08) drop-shadow(0 14px 28px rgba(199,226,100,0.18)); } .home-v2 .hero-schematic__svg a:focus-visible .logo-band { outline: 3px solid #C7E264; outline-offset: 4px; } /* Annotation labels around the logo — clickable cards */ .home-v2 .hero-schematic__svg .logo-anno { opacity: 0; transition: opacity 350ms; } .home-v2 .hero-schematic__svg .logo-anno .anno-card { transition: fill 250ms cubic-bezier(0.16,1,0.3,1), stroke-width 250ms cubic-bezier(0.16,1,0.3,1), filter 250ms; } .home-v2 .hero-schematic__svg .logo-anno .anno-cta { transition: opacity 250ms; } .home-v2 .hero-schematic__svg a:hover .logo-anno .anno-card, .home-v2 .hero-schematic__svg a:focus-visible .logo-anno .anno-card { fill: rgba(7,58,6,0.95); stroke-width: 2.5; filter: drop-shadow(0 8px 18px rgba(199,226,100,0.18)); } .home-v2 .hero-schematic__svg a:focus-visible .logo-anno .anno-card { outline: 2px solid #C7E264; outline-offset: 4px; } @media (prefers-reduced-motion: no-preference) { /* 1) Convergence point pops in first */ .home-v2 .schema-converge { opacity: 0; animation: schemaFadeIn 500ms cubic-bezier(0.16,1,0.3,1) 100ms forwards; } /* 2) Connector line from data-node to logo top */ .home-v2 .schema-converge-lines line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: schemaDraw 500ms cubic-bezier(0.16,1,0.3,1) 400ms forwards; } /* 3) Logo bands grow downward from the top in sequence (KK-Logo-Prinzip) */ .home-v2 .hero-schematic__svg .logo-band { opacity: 0; transform: translateY(-40px) scaleY(0.6); } .home-v2 .hero-schematic__svg .logo-band--dark { animation: bandGrow 1100ms cubic-bezier(0.16,1,0.3,1) 700ms forwards; } .home-v2 .hero-schematic__svg .logo-band--mid { animation: bandGrow 1100ms cubic-bezier(0.16,1,0.3,1) 950ms forwards; } .home-v2 .hero-schematic__svg .logo-band--light { animation: bandGrow 1100ms cubic-bezier(0.16,1,0.3,1) 1200ms forwards; } /* 4) Annotations slide in from outside after bands settle */ .home-v2 .hero-schematic__svg .logo-anno--01 { animation: annoSlideLeft 700ms cubic-bezier(0.16,1,0.3,1) 1700ms forwards; } .home-v2 .hero-schematic__svg .logo-anno--03 { animation: annoSlideRight 700ms cubic-bezier(0.16,1,0.3,1) 1900ms forwards; } .home-v2 .hero-schematic__svg .logo-anno--02 { animation: annoSlideUp 700ms cubic-bezier(0.16,1,0.3,1) 2100ms forwards; } /* 5) Datenfluss-Bögen */ .home-v2 .schema-connectors { opacity: 0; animation: schemaFadeIn 700ms ease 2300ms forwards; } /* 6) Metrics fade in last */ .home-v2 .schema-metrics > * { opacity: 0; animation: schemaFadeIn 700ms ease 2500ms forwards; } } @keyframes schemaFadeIn { to { opacity: 1; } } @keyframes schemaDraw { to { stroke-dashoffset: 0; } } @keyframes bandGrow { to { opacity: 1; transform: translateY(0) scaleY(1); } } @keyframes annoSlideLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes annoSlideRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes annoSlideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .home-v2 .hero-schematic__svg .logo-band { opacity: 1; transform: none; } .home-v2 .hero-schematic__svg .logo-anno { opacity: 1; transform: none; } .home-v2 .schema-converge, .home-v2 .schema-connectors, .home-v2 .schema-metrics > * { opacity: 1; } .home-v2 .schema-converge-lines line { stroke-dasharray: none; stroke-dashoffset: 0; } } /* Hero CTAs — same as before */ .home-v2 .hero-v2__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; } .home-v2 .hero-v2__cta .btn-primary { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.1rem 1.85rem; background: var(--kk-dark); color: var(--paper); border: 1.5px solid var(--kk-dark); border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; letter-spacing: 0.005em; transition: background 200ms, color 200ms, transform 150ms; min-height: 52px; } .home-v2 .hero-v2__cta .btn-primary::after { content: "→"; font-weight: 500; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .home-v2 .hero-v2__cta .btn-primary:hover { background: var(--ink); border-color: var(--ink); text-decoration: none; transform: translateY(-1px); } .home-v2 .hero-v2__cta .btn-primary:hover::after { transform: translateX(4px); } .home-v2 .hero-v2__cta .btn-ghost { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.1rem 1.85rem; background: transparent; color: var(--kk-dark); border: 1.5px solid var(--hairline-strong); border-radius: 999px; font-weight: 500; font-size: 0.9375rem; text-decoration: none; transition: background 200ms, border-color 200ms; min-height: 52px; } .home-v2 .hero-v2__cta .btn-ghost:hover { background: rgba(7,58,6,0.06); border-color: var(--kk-dark); text-decoration: none; } .home-v2 .hero-v2__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; } .home-v2 .hero-v2__cta .btn-primary { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.1rem 1.85rem; background: var(--kk-dark); color: var(--paper); border: 1.5px solid var(--kk-dark); border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; letter-spacing: 0.005em; transition: background 200ms, color 200ms, transform 150ms; min-height: 52px; } .home-v2 .hero-v2__cta .btn-primary::after { content: "→"; font-weight: 500; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .home-v2 .hero-v2__cta .btn-primary:hover { background: var(--ink); border-color: var(--ink); text-decoration: none; transform: translateY(-1px); } .home-v2 .hero-v2__cta .btn-primary:hover::after { transform: translateX(4px); } .home-v2 .hero-v2__cta .btn-ghost { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.1rem 1.85rem; background: transparent; color: var(--kk-dark); border: 1.5px solid var(--hairline-strong); border-radius: 999px; font-weight: 500; font-size: 0.9375rem; text-decoration: none; transition: background 200ms, border-color 200ms; min-height: 52px; } .home-v2 .hero-v2__cta .btn-ghost:hover { background: rgba(7,58,6,0.06); border-color: var(--kk-dark); text-decoration: none; } /* Hero stat strip — 3 KPIs at bottom of hero */ .home-v2 .hero-v2__stats { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.18); align-self: end; } @media (min-width: 720px) { .home-v2 .hero-v2__stats { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .home-v2 .hero-v2__stat { color: #FFFFFF; } .home-v2 .hero-v2__stat-num { display: block; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--h-light); margin-bottom: 0.45rem; font-variant-numeric: tabular-nums; } .home-v2 .hero-v2__stat-num small { font-size: 0.55em; font-weight: 500; color: rgba(255,255,255,0.7); margin-left: 0.25em; } .home-v2 .hero-v2__stat-label { font-size: 0.8125rem; color: rgba(255,255,255,0.85); line-height: 1.4; letter-spacing: 0.005em; } /* ---------- TRUST STRIP — partner/norm credentials ---------- */ .home-v2 .trust-strip { background: var(--h-ink); color: #FFFFFF; padding-block: 1.5rem; border-bottom: 1px solid #000; overflow: hidden; } .home-v2 .trust-strip__inner { display: flex; gap: 1.5rem 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.78); font-weight: 500; } .home-v2 .trust-strip__tags { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; flex: 1 1 auto; justify-content: center; } .home-v2 .trust-strip__tags > span { display: inline-flex; align-items: center; gap: 0.6em; } .home-v2 .trust-strip__tags > span::before { content: ""; width: 6px; height: 6px; background: var(--h-light); display: inline-block; } .home-v2 .trust-strip__seal { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 4px; border-radius: var(--h-radius); text-decoration: none; flex-shrink: 0; transition: transform 280ms ease, filter 280ms ease; } .home-v2 .trust-strip__seal:hover { transform: translateY(-1px); filter: drop-shadow(0 6px 18px rgba(199, 226, 100, 0.18)); } .home-v2 .trust-strip__seal:focus-visible { outline: 2px solid var(--h-light); outline-offset: 4px; } .home-v2 .trust-strip__seal img { height: 128px; width: auto; display: block; } @media (max-width: 760px) { .home-v2 .trust-strip__inner { gap: 1.25rem; font-size: 0.6875rem; letter-spacing: 0.15em; } .home-v2 .trust-strip__tags { gap: 1.5rem; } .home-v2 .trust-strip__seal img { height: 96px; } .home-v2 .trust-strip { padding-block: 1.25rem; } } /* ---------- SECTION FRAME ---------- */ .home-v2 .sect { padding-block: clamp(4rem, 7vw, 7rem); border-bottom: 1px solid var(--h-line); background: var(--h-paper); } .home-v2 .sect--soft { background: var(--h-soft); } .home-v2 .sect--dark { background: var(--h-ink); color: #FFFFFF; border-color: #000; } .home-v2 .sect--dark h2, .home-v2 .sect--dark h3 { color: #FFFFFF; } .home-v2 .sect--green { position: relative; background: var(--h-ink); color: #FFFFFF; isolation: isolate; overflow: hidden; border-color: #000; } .home-v2 .sect--green::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(199,226,100,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(199,226,100,0.04) 1px, transparent 1px), radial-gradient(900px 500px at 80% -10%, rgba(199,226,100,0.05), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(111,174,101,0.06), transparent 60%); background-size: 40px 40px, 40px 40px, auto, auto; pointer-events: none; z-index: 0; } .home-v2 .sect--green > * { position: relative; z-index: 1; } .home-v2 .sect--green h2, .home-v2 .sect--green h3 { color: #FFFFFF; } .home-v2 .sect__head { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); } @media (min-width: 880px) { .home-v2 .sect__head { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: end; } } .home-v2 .sect__kicker { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1F6458; /* Tannengrün — 7.5:1 auf cream/white */ font-weight: 600; margin: 0 0 1.25rem; display: inline-flex; align-items: center; gap: 0.6em; } .home-v2 .sect--dark .sect__kicker, .home-v2 .sect--green .sect__kicker { color: var(--h-light); } .home-v2 .sect__kicker::before { content: ""; width: 32px; height: 1px; background: currentColor; } .home-v2 .sect__title, .home-v2 .about-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: var(--h-dark); margin: 0; max-width: 22ch; } .home-v2 .sect__lede { font-size: 1.0625rem; line-height: 1.55; color: var(--h-ink-2); max-width: 48ch; margin: 0; } .home-v2 .sect--dark .sect__lede, .home-v2 .sect--green .sect__lede { color: rgba(255,255,255,0.78); } /* ---------- SOLUTIONS GRID — 3 image cards ---------- */ .home-v2 .solutions { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 720px) { .home-v2 .solutions { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } .home-v2 .sol-card { position: relative; display: block; text-decoration: none; color: var(--h-ink); background: #FFFFFF; border: 1px solid var(--h-line); border-radius: var(--h-radius-lg); overflow: hidden; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms, border-color 200ms; isolation: isolate; } .home-v2 .sol-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(7, 58, 6, 0.25); border-color: var(--h-dark); } .home-v2 .sol-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .home-v2 .sol-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .home-v2 .sol-card:hover .sol-card__media img { transform: scale(1.05); } .home-v2 .sol-card__num { position: absolute; top: 1rem; left: 1rem; background: var(--h-dark); color: #FFFFFF; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .home-v2 .sol-card__body { padding: 1.5rem 1.5rem 1.75rem; } .home-v2 .sol-card__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.85rem; } .home-v2 .sol-card__copy { font-size: 0.9375rem; line-height: 1.55; color: var(--h-ink-2); margin: 0 0 1.5rem; } .home-v2 .sol-card__bullets { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.4rem; } .home-v2 .sol-card__bullets li { font-size: 0.8125rem; color: var(--h-ink-2); padding-left: 1.25rem; position: relative; } .home-v2 .sol-card__bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 1.5px; background: var(--h-mid); } .home-v2 .sol-card__cta { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.875rem; font-weight: 600; color: var(--h-dark); text-decoration: none; border-bottom: 1.5px solid var(--h-dark); padding-bottom: 0.2rem; } .home-v2 .sol-card__cta::after { content: "→"; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .home-v2 .sol-card:hover .sol-card__cta::after { transform: translateX(4px); } /* Make whole card clickable via stretched link */ .home-v2 .sol-card .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ---------- KPI BLOCK ---------- */ .home-v2 .kpis { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); } @media (min-width: 720px) { .home-v2 .kpis { grid-template-columns: repeat(4, 1fr); } } .home-v2 .kpi { padding: 2.5rem 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.12); } @media (min-width: 720px) { .home-v2 .kpi { border-bottom: 0; border-right: 1px solid rgba(255,255,255,0.12); } .home-v2 .kpi:last-child { border-right: 0; } } .home-v2 .kpi__num { display: block; font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; color: var(--h-light); margin-bottom: 0.6rem; font-variant-numeric: tabular-nums; } .home-v2 .kpi__num small { font-size: 0.45em; font-weight: 500; color: rgba(255,255,255,0.65); margin-left: 0.15em; } .home-v2 .kpi__label { font-size: 0.875rem; color: rgba(255,255,255,0.92); line-height: 1.4; font-weight: 500; } .home-v2 .kpi__sub { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; letter-spacing: 0.04em; } /* ---------- PROCESS GRID ---------- */ .home-v2 .process-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 600px) { .home-v2 .process-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .home-v2 .process-grid { grid-template-columns: repeat(3, 1fr); } } .home-v2 .process-item { position: relative; padding: 1.75rem 1.5rem; background: #FFFFFF; border: 1px solid var(--h-line); border-radius: var(--h-radius-lg); display: flex; flex-direction: column; gap: 0.85rem; } .home-v2 .process-item__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--h-dark); color: #FFFFFF; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 50%; font-variant-numeric: tabular-nums; } .home-v2 .process-item__title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; } .home-v2 .process-item__copy { font-size: 0.875rem; line-height: 1.55; color: var(--h-ink-2); margin: 0; } /* ---------- ABOUT BLOCK (founders) ---------- */ .home-v2 .about-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 880px) { .home-v2 .about-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .home-v2 .about-media { position: relative; aspect-ratio: 5 / 6; background: var(--h-soft); overflow: hidden; border-radius: var(--h-radius-lg); } .home-v2 .about-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-v2 .about-media__caption { position: absolute; inset: auto 0 0 0; padding: 1rem 1.25rem; background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0)); color: #FFFFFF; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } .home-v2 .about-content h2 { margin-bottom: 1.5rem; } .home-v2 .about-title em { font-style: normal; color: var(--h-dark); } .home-v2 .about-content p { font-size: 1rem; line-height: 1.6; color: var(--h-ink-2); margin-bottom: 1rem; } .home-v2 .about-cred { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--h-line); } .home-v2 .about-cred dt { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin-bottom: 0.35rem; } .home-v2 .about-cred dd { font-size: 1rem; font-weight: 600; color: var(--h-ink); margin: 0; } .home-v2 .about-link { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 2rem; font-size: 0.9375rem; font-weight: 600; color: var(--h-dark); border-bottom: 1.5px solid var(--h-dark); padding-bottom: 0.2rem; text-decoration: none; } .home-v2 .about-link::after { content: "→"; transition: transform 250ms; } .home-v2 .about-link:hover::after { transform: translateX(4px); } /* ---------- INDUSTRIES ROW ---------- */ .home-v2 .industries { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--h-line); } @media (min-width: 720px) { .home-v2 .industries { grid-template-columns: repeat(3, 1fr); } } .home-v2 .industry { padding: 2.25rem 1.75rem 2.25rem 0; border-bottom: 1px solid var(--h-line); } @media (min-width: 720px) { .home-v2 .industry { border-bottom: 0; border-right: 1px solid var(--h-line); padding: 2.25rem 1.75rem; } .home-v2 .industry:first-child { padding-left: 0; } .home-v2 .industry:last-child { border-right: 0; padding-right: 0; } } .home-v2 .industry__num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; color: var(--h-ink-3); font-variant-numeric: tabular-nums; margin-bottom: 0.85rem; } .home-v2 .industry__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.85rem; } .home-v2 .industry__copy { font-size: 0.9375rem; line-height: 1.55; color: var(--h-ink-2); margin: 0; } /* ---------- Industries als echte Karten (2-Spalten-Variante) ---------- */ .industries.industries--cards-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; border-top: 0; } @media (min-width: 720px) { .industries.industries--cards-2 { grid-template-columns: 1fr 1fr; gap: 2rem; } } .industries.industries--cards-2 > .industry { position: relative; background: #FFFFFF; border: 1px solid var(--h-line); border-radius: 10px; padding: clamp(1.75rem, 3vw, 2.5rem); padding-right: clamp(4.5rem, 7vw, 6rem); overflow: hidden; transition: border-color 220ms, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms; } @media (min-width: 720px) { .industries.industries--cards-2 > .industry { border-bottom: 1px solid var(--h-line); border-right: 1px solid var(--h-line); padding: clamp(1.75rem, 3vw, 2.5rem); padding-right: clamp(4.5rem, 7vw, 6rem); } .industries.industries--cards-2 > .industry:first-child { padding-left: clamp(1.75rem, 3vw, 2.5rem); } .industries.industries--cards-2 > .industry:last-child { padding-right: clamp(4.5rem, 7vw, 6rem); } } .industries.industries--cards-2 > .industry:hover, .industries.industries--cards-2 > .industry:focus-within { border-color: var(--kk-dark); transform: translateY(-2px); box-shadow: 0 16px 36px -22px rgba(7, 58, 6, 0.4); } .industry__svg { position: absolute; top: clamp(1.25rem, 2.5vw, 1.75rem); right: clamp(1.25rem, 2.5vw, 1.75rem); width: clamp(56px, 6vw, 80px); height: auto; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .industry__svg animate { begin: indefinite; } .industries.industries--cards-2 > .industry { transition: none; } } /* ---------- FINAL CTA ---------- */ .home-v2 .final-cta { text-align: center; padding-block: clamp(5rem, 9vw, 8rem); background: var(--h-dark); color: #FFFFFF; border-bottom: 1px solid #000; position: relative; overflow: hidden; } .home-v2 .final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 300px at 50% 0%, rgba(199,226,100,0.10), transparent 60%), radial-gradient(600px 300px at 50% 100%, rgba(111,174,101,0.10), transparent 60%); pointer-events: none; } .home-v2 .final-cta > * { position: relative; } .home-v2 .final-cta__title { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: #FFFFFF; margin: 0 auto 1.5rem; max-width: 18ch; } .home-v2 .final-cta__title em { font-style: normal; color: var(--h-light); } .home-v2 .final-cta__sub { font-size: 1.0625rem; line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 56ch; margin: 0 auto 2.5rem; } .home-v2 .final-cta__row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .home-v2 .final-cta__row .btn-primary { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.15rem 2rem; background: var(--h-light); color: var(--h-ink); border: 1.5px solid var(--h-light); border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; min-height: 52px; transition: background 200ms, transform 150ms; } .home-v2 .final-cta__row .btn-primary::after { content: "→"; transition: transform 250ms; } .home-v2 .final-cta__row .btn-primary:hover { background: #FFFFFF; transform: translateY(-1px); text-decoration: none; } .home-v2 .final-cta__row .btn-primary:hover::after { transform: translateX(4px); } .home-v2 .final-cta__row .btn-secondary { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.15rem 1.85rem; background: rgba(255,255,255,0.06); color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.55); border-radius: 999px; font-weight: 500; font-size: 0.9375rem; text-decoration: none; min-height: 52px; transition: background 200ms, border-color 200ms, transform 150ms; } .home-v2 .final-cta__row .btn-secondary::after { content: "→"; transition: transform 250ms; } .home-v2 .final-cta__row .btn-secondary:hover { background: rgba(255,255,255,0.14); border-color: #FFFFFF; text-decoration: none; transform: translateY(-1px); } .home-v2 .final-cta__row .btn-secondary:hover::after { transform: translateX(4px); } .home-v2 .final-cta__row .btn-secondary:focus-visible { outline: 2px solid var(--h-light); outline-offset: 3px; } .home-v2 .final-cta__row .btn-tel { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.15rem 2rem; background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 999px; font-weight: 500; font-size: 0.9375rem; text-decoration: none; min-height: 52px; transition: background 200ms, border-color 200ms; font-variant-numeric: tabular-nums; } .home-v2 .final-cta__row .btn-tel:hover { background: rgba(255,255,255,0.1); border-color: #FFFFFF; text-decoration: none; } /* Quiet animations on home: just subtle hover, no marquee on hero */ .home-v2 .marquee, .home-v2 .pillars, .home-v2 .showcase, .home-v2 .hero, .home-v2 .pullquote, .home-v2 .stats, .home-v2 .entries, .home-v2 .audiences, .home-v2 .manifesto, .home-v2 .cta-final, .home-v2 .pillars__fallback { display: none; } /* Container: looser on home */ .home-v2 .container { max-width: 1280px; } .home-v2 .container--full { max-width: none; } /* ============== LEISTUNGEN PAGE — additional patterns ============== */ /* Page-Hero (smaller than home-hero, dark surface, no schematic) */ .home-v2 .ph-hero { background: var(--h-deep); color: #FFFFFF; padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid #000; position: relative; isolation: isolate; overflow: hidden; } /* Engineering-Grid (verstärkt, Hero-Sprache) */ .home-v2 .ph-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(199, 226, 100, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.06) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 90% 80% at 60% 50%, #000 30%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 50%, #000 30%, transparent 95%); pointer-events: none; z-index: -2; opacity: 0.85; transition: opacity 500ms ease; } /* Brand-Aura, weicher Spotlight */ .home-v2 .ph-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 80% 20%, rgba(199, 226, 100, 0.10), transparent 65%), radial-gradient(600px 300px at 20% 80%, rgba(111, 174, 101, 0.08), transparent 60%); pointer-events: none; z-index: -1; } /* Hover/Focus-within auf Art-Bereich → Grid leuchtet auf */ .home-v2 .ph-hero:has(.ph-hero__art:hover)::before, .home-v2 .ph-hero:focus-within::before { opacity: 1; background-image: linear-gradient(rgba(199, 226, 100, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.13) 1px, transparent 1px); } /* LIVE-Badge oben rechts in ph-hero (Hero-Sprache, datasheet) */ .home-v2 .ph-hero__live { position: absolute; top: 1.25rem; right: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; font-weight: 500; color: var(--h-light); pointer-events: none; z-index: 2; } .home-v2 .ph-hero__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--h-light); box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.6); animation: ctaLivePulse 2.4s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .home-v2 .ph-hero__live-dot { animation: none; } .home-v2 .ph-hero::before { transition: none; } } .home-v2 .ph-hero__inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: end; } @media (min-width: 880px) { .home-v2 .ph-hero__inner { grid-template-columns: 1.5fr 1fr; gap: 4rem; } } .home-v2 .ph-hero__kicker { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-light); font-weight: 600; margin: 0 0 1.5rem; display: inline-flex; align-items: center; gap: 0.6em; } .home-v2 .ph-hero__kicker::before { content: ""; width: 36px; height: 1px; background: currentColor; } .home-v2 .ph-hero__title { font-family: var(--sans); font-weight: 700; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -0.035em; color: #FFFFFF; margin: 0 0 1.5rem; font-variation-settings: normal; max-width: 16ch; } .home-v2 .ph-hero__title em { font-style: normal; color: var(--h-light); } .home-v2 .ph-hero__lede { font-size: 1.0625rem; line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 56ch; margin: 0; } .home-v2 .ph-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.5rem; align-self: end; } .home-v2 .ph-hero__stat-num { display: block; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--h-light); margin-bottom: 0.4rem; font-variant-numeric: tabular-nums; } .home-v2 .ph-hero__stat-num small { font-size: 0.55em; font-weight: 500; color: rgba(255,255,255,0.65); margin-left: 0.15em; } .home-v2 .ph-hero__stat-label { font-family: var(--sans); font-size: 0.8125rem; color: rgba(255,255,255,0.85); line-height: 1.4; } /* Service-Row — alternating image+content rows */ .home-v2 .svc-row { display: grid; grid-template-columns: 1fr; gap: 0; padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--h-line); background: var(--h-paper); align-items: center; } .home-v2 .svc-row--alt { background: var(--h-soft); } @media (min-width: 880px) { .home-v2 .svc-row { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); } .home-v2 .svc-row--reverse .svc-row__media { order: 2; } .home-v2 .svc-row--reverse .svc-row__body { order: 1; } } .home-v2 .svc-row__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--h-radius-lg); background: var(--h-soft); } .home-v2 .svc-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16,1,0.3,1); } .home-v2 .svc-row:hover .svc-row__media img { transform: scale(1.03); } .home-v2 .svc-row__num { position: absolute; top: 1rem; left: 1rem; background: var(--h-dark); color: var(--h-light); font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .home-v2 .svc-row__caption { position: absolute; inset: auto 1rem 1rem auto; background: var(--h-paper); color: var(--h-ink); padding: 0.6rem 0.85rem; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; border-radius: var(--h-radius); border: 1px solid var(--h-line); } .home-v2 .svc-row__body { display: flex; flex-direction: column; } .home-v2 .svc-row__kicker { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1F6458; font-weight: 600; margin: 0 0 1rem; } .home-v2 .svc-row__title { font-family: var(--sans); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.028em; line-height: 1.1; margin: 0 0 1.25rem; font-variation-settings: normal; max-width: 18ch; } .home-v2 .svc-row__copy { font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--h-ink-2); margin: 0 0 1.5rem; max-width: 50ch; } .home-v2 .svc-row__bullets { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.5rem; border-top: 1px solid var(--h-line); padding-top: 1.25rem; } .home-v2 .svc-row__bullets li { font-size: 0.9375rem; color: var(--h-ink); padding-left: 1.5rem; position: relative; } .home-v2 .svc-row__bullets li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 14px; height: 1.5px; background: var(--h-mid); } .home-v2 .svc-row__cta { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--h-dark); text-decoration: none; border-bottom: 1.5px solid var(--h-dark); padding-bottom: 0.2rem; align-self: flex-start; transition: gap 250ms cubic-bezier(0.16,1,0.3,1); } .home-v2 .svc-row__cta::after { content: "→"; transition: transform 250ms cubic-bezier(0.16,1,0.3,1); } .home-v2 .svc-row__cta:hover { text-decoration: none; gap: 0.85em; } .home-v2 .svc-row__cta:hover::after { transform: translateX(4px); } /* ============== Prose pattern for detail pages ============== */ .home-v2 .prose-v2 { max-width: 70ch; margin: 0 auto; } .home-v2 .prose-v2 > * + * { margin-top: 1.25rem; } .home-v2 .prose-v2 h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.1; margin-top: 3.5rem; margin-bottom: 1.25rem; font-variation-settings: normal; color: var(--h-ink); } .home-v2 .prose-v2 h2:first-child { margin-top: 0; } .home-v2 .prose-v2 h3 { font-family: var(--sans); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; margin-top: 2.25rem; margin-bottom: 0.85rem; font-variation-settings: normal; color: var(--h-ink); } .home-v2 .prose-v2 p { font-size: 1.0625rem; line-height: 1.65; color: var(--h-ink-2); } .home-v2 .prose-v2 p.lead { font-size: 1.25rem; line-height: 1.55; color: var(--h-ink); font-weight: 400; } .home-v2 .prose-v2 ul { list-style: none; padding: 0; margin-block: 1rem; display: grid; gap: 0.55rem; } .home-v2 .prose-v2 ul li { font-size: 1rem; color: var(--h-ink); padding-left: 1.6rem; position: relative; line-height: 1.5; } .home-v2 .prose-v2 ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 14px; height: 1.5px; background: var(--h-mid); } .home-v2 .prose-v2 strong { font-weight: 600; color: var(--h-ink); } /* Image banner — full-bleed with caption overlay */ .home-v2 .img-banner { position: relative; width: 100%; border-block: 1px solid var(--h-line); background: var(--h-soft); overflow: hidden; isolation: isolate; } .home-v2 .img-banner img { width: 100%; height: clamp(320px, 45vw, 540px); object-fit: cover; display: block; } .home-v2 .img-banner__caption { position: absolute; inset: auto auto 1.5rem 1.5rem; background: var(--h-paper); border: 1px solid var(--h-line); padding: 1rem 1.25rem; max-width: 380px; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; color: var(--h-ink); border-radius: var(--h-radius); } .home-v2 .img-banner__caption strong { display: block; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: #1F6458; font-weight: 600; margin-bottom: 0.4rem; } @media (min-width: 720px) { .home-v2 .img-banner__caption { inset: auto auto 2.5rem 2.5rem; padding: 1.25rem 1.5rem; max-width: 440px; } } /* Two-col split (audience / industrie | privat) */ .home-v2 .split-2-v2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-block: 3rem; } @media (min-width: 880px) { .home-v2 .split-2-v2 { grid-template-columns: 1fr 1fr; gap: 4rem; } } .home-v2 .split-2-v2__panel { border-top: 1.5px solid var(--h-ink); padding-top: 1.5rem; } .home-v2 .split-2-v2__panel .kicker { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1F6458; font-weight: 600; margin: 0 0 1rem; } .home-v2 .split-2-v2__panel h3 { font-family: var(--sans); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 1rem; font-variation-settings: normal; } .home-v2 .split-2-v2__panel p { font-size: 1rem; line-height: 1.6; color: var(--h-ink-2); margin: 0; } /* Manifesto V2 — numbered statement list */ .home-v2 .manifesto-v2 { list-style: none; padding: 0; margin: 3rem 0 0; border-top: 1.5px solid var(--h-ink); counter-reset: manifesto; } .home-v2 .sect--dark .manifesto-v2, .home-v2 .sect--green .manifesto-v2 { border-top-color: rgba(255,255,255,0.3); } .home-v2 .manifesto-v2 li { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--h-line); counter-increment: manifesto; } .home-v2 .sect--dark .manifesto-v2 li, .home-v2 .sect--green .manifesto-v2 li { border-bottom-color: rgba(255,255,255,0.18); } .home-v2 .manifesto-v2 li::before { content: "↳ " counter(manifesto, decimal-leading-zero); font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.16em; color: var(--h-ink-3); font-variant-numeric: tabular-nums; font-weight: 500; } .home-v2 .sect--dark .manifesto-v2 li::before, .home-v2 .sect--green .manifesto-v2 li::before { color: var(--h-light); } .home-v2 .manifesto-v2 p { font-family: var(--sans); font-size: clamp(1.125rem, 1.5vw, 1.4375rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--h-ink); font-weight: 500; margin: 0; } .home-v2 .sect--dark .manifesto-v2 p, .home-v2 .sect--green .manifesto-v2 p { color: #FFFFFF; } .home-v2 .manifesto-v2 strong { font-weight: 700; color: var(--h-dark); } .home-v2 .sect--dark .manifesto-v2 strong, .home-v2 .sect--green .manifesto-v2 strong { color: var(--h-light); } /* Process grid V2 — 5-col on detail pages (Inspektion has 5 steps) */ .home-v2 .process-grid--5 { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .home-v2 .process-grid--5 { grid-template-columns: repeat(2,1fr); } } @media (min-width: 980px) { .home-v2 .process-grid--5 { grid-template-columns: repeat(5,1fr); } } /* HOAI Table V2 — industrial/datasheet aesthetic */ .home-v2 .hoai-v2 { margin-block: 3rem; border-top: 1.5px solid var(--h-ink); border-bottom: 1.5px solid var(--h-ink); background: var(--h-paper); } .home-v2 .hoai-v2__caption { display: flex; justify-content: space-between; align-items: baseline; padding: 1.25rem 0 1rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); border-bottom: 1px solid var(--h-line); font-variant-numeric: tabular-nums; } .home-v2 .hoai-v2__caption strong { color: var(--h-ink); font-weight: 600; } .home-v2 .hoai-v2 table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.9375rem; } .home-v2 .hoai-v2 thead { display: none; /* visually hidden — captions on rows are enough */ } .home-v2 .hoai-v2 tbody tr { border-bottom: 1px solid var(--h-line); transition: background 200ms; } .home-v2 .hoai-v2 tbody tr:hover { background: var(--h-soft); } .home-v2 .hoai-v2 tbody tr:last-child { border-bottom: 0; } .home-v2 .hoai-v2 th[scope="row"] { width: 5.5rem; vertical-align: top; text-align: left; font-family: var(--sans); font-size: 1.875rem; font-weight: 700; color: var(--h-dark); padding: 1.25rem 1rem 1.25rem 0; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .home-v2 .hoai-v2 td { padding: 1.4rem 1rem 1.4rem 0; vertical-align: top; color: var(--h-ink-2); line-height: 1.5; } .home-v2 .hoai-v2 td:first-of-type { font-weight: 600; color: var(--h-ink); width: 22%; font-size: 1rem; } .home-v2 .hoai-v2 td:last-of-type { font-size: 0.9375rem; padding-right: 0; } /* Restyle the standard when used inside home-v2 */ .home-v2 table.data { font-family: var(--sans); } .home-v2 table.data caption { background: transparent; border-bottom: 1.5px solid var(--h-ink); font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 500; padding: 1rem 0 0.75rem; } .home-v2 table.data thead th { background: var(--h-soft); color: var(--h-ink); font-family: var(--sans); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; } .home-v2 table.data tbody th[scope="row"] { background: transparent; font-family: var(--sans); color: var(--h-dark); font-size: 1.5rem; font-weight: 700; font-variation-settings: normal; } .home-v2 .table-wrap { border-radius: 0; border-color: var(--h-ink); border-width: 1.5px 0; margin-block: 3rem; } /* ============== HOME FOOTER — Conversion-First Compact ============== */ .home-v2 .home-footer { background: #FFFFFF; color: var(--h-ink); border-top: 1px solid var(--h-line); padding-block: 3.5rem 1.75rem; font-family: var(--sans); } /* --- Conversion strip --- */ .home-v2 .hf-conv { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--h-line); } @media (min-width: 760px) { .home-v2 .hf-conv { grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; } } .home-v2 .hf-conv__msg { max-width: 30ch; } .home-v2 .hf-conv__eyebrow { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1F6458; font-weight: 600; margin: 0 0 0.65rem; display: inline-flex; align-items: center; gap: 0.55rem; } .home-v2 .hf-conv__eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: #1F6458; } .home-v2 .hf-conv__title { font-family: var(--sans); font-size: clamp(1.625rem, 3vw, 2.125rem); letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; margin: 0 0 0.6rem; color: var(--h-ink); } .home-v2 .hf-conv__sub { font-size: 0.9375rem; line-height: 1.55; color: var(--h-ink-2); margin: 0; } /* Action stack */ .home-v2 .hf-conv__actions { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: stretch; } @media (min-width: 540px) { .home-v2 .hf-conv__actions { grid-template-columns: 1fr 1.2fr; gap: 0.85rem; } .home-v2 .hf-conv__mail { grid-column: 1 / -1; } } /* Tel block — outlined dark, dark-green number */ .home-v2 .hf-conv__tel { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.85rem 1.1rem; border: 1.5px solid var(--h-line-strong); border-radius: 8px; text-decoration: none; color: var(--h-ink); background: #FFFFFF; transition: background 200ms, border-color 200ms, transform 150ms; min-height: 56px; } .home-v2 .hf-conv__tel:hover { background: var(--h-soft); text-decoration: none; transform: translateY(-1px); } .home-v2 .hf-conv__tel-label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; } .home-v2 .hf-conv__tel-value { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--h-dark); font-variant-numeric: tabular-nums; } /* CTA — single dark-green pill, only deep accent */ .home-v2 .hf-conv__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 1rem 1.4rem; background: var(--h-dark); color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 1rem; border-radius: 999px; letter-spacing: -0.005em; transition: background 200ms, transform 150ms; min-height: 56px; text-align: center; } .home-v2 .hf-conv__cta:hover { background: #0E5A0C; text-decoration: none; transform: translateY(-1px); } .home-v2 .hf-conv__cta span[aria-hidden] { font-weight: 500; transition: transform 200ms cubic-bezier(0.16,1,0.3,1); } .home-v2 .hf-conv__cta:hover span[aria-hidden] { transform: translateX(3px); } /* Mail — quiet secondary link */ .home-v2 .hf-conv__mail { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.55rem 0.5rem; color: var(--h-ink-2); text-decoration: underline; text-decoration-color: var(--h-line-strong); text-decoration-thickness: 1px; text-underline-offset: 0.22em; font-size: 0.875rem; min-height: 32px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; transition: color 200ms, text-decoration-color 200ms; } .home-v2 .hf-conv__mail:hover { color: var(--h-dark); text-decoration-color: var(--h-dark); } /* --- Meta strip --- */ .home-v2 .hf-meta { display: grid; grid-template-columns: 1fr; gap: 1.1rem; padding-top: 1.5rem; font-size: 0.8125rem; } @media (min-width: 760px) { .home-v2 .hf-meta { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem 2.5rem; } } .home-v2 .hf-meta__addr { font-style: normal; line-height: 1.5; color: var(--h-ink-2); font-size: 0.8125rem; } .home-v2 .hf-meta__addr strong { display: block; color: var(--h-ink); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.005em; margin-bottom: 0.15rem; } .home-v2 .hf-meta__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; } .home-v2 .hf-meta__nav a { color: var(--h-ink-2); text-decoration: none; font-weight: 500; font-size: 0.8125rem; display: inline-flex; align-items: center; min-height: 28px; padding-block: 2px; border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms; } .home-v2 .hf-meta__nav a:hover { color: var(--h-dark); border-bottom-color: var(--h-dark); } .home-v2 .hf-meta__copy { grid-column: 1 / -1; margin: 0; padding-top: 1rem; border-top: 1px solid var(--h-line); color: var(--h-ink-3); font-size: 0.75rem; letter-spacing: 0.02em; } /* Hide the inherited footer-statement / footer-cta / site-footer__bottom on home */ .home-v2 .home-footer .footer-cta, .home-v2 .home-footer .footer-statement, .home-v2 .home-footer .site-footer__bottom, .home-v2 .home-footer .site-footer__grid { display: none; } /* =================================================================== SUBTLE MOTION — Reveal-on-Scroll, Hero-Stagger, Hover-Lift Alle Animationen pausieren bei prefers-reduced-motion: reduce. =================================================================== */ @media (prefers-reduced-motion: no-preference) { /* data-reveal: Inhalt ist IMMER sichtbar (opacity: 1 default). Animation-Pattern entfernt, da JS-abhaengiges Hide-by-Default bei verzoegertem JS-Load weisse Sektionen verursacht. */ .home-v2 [data-reveal] { opacity: 1; transform: none; } /* Hero load stagger — 3 stages: title-block, lede, cta */ .home-v2 .hero-v2__copy [data-anim-stage] { opacity: 0; transform: translateY(10px); animation: heroStage 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--anim-stage, 0) * 140ms + 120ms); } @keyframes heroStage { to { opacity: 1; transform: none; } } /* Sol-card hover lift — subtle 2px */ .home-v2 .sol-card { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease, border-color 200ms ease; } .home-v2 .sol-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(7, 58, 6, 0.18); } /* Industry-card subtle hover */ .home-v2 .industry { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } .home-v2 .industry:hover { transform: translateY(-2px); } /* Process-item subtle hover */ .home-v2 .process-item { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } .home-v2 .process-item:hover { transform: translateY(-2px); } /* Footer Tel/CTA hover already in scope — keep */ } /* KPI count-up — make tabular nums explicit so width doesn't jitter */ .home-v2 .kpi__num { font-variant-numeric: tabular-nums; } /* === Reduced-motion: hard-disable everything === */ @media (prefers-reduced-motion: reduce) { .home-v2 [data-reveal], .home-v2 .hero-v2__copy [data-anim-stage] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .home-v2 .sol-card, .home-v2 .industry, .home-v2 .process-item { transition: none !important; } .home-v2 .sol-card:hover, .home-v2 .industry:hover, .home-v2 .process-item:hover { transform: none !important; } } /* =================================================================== PEOPLE-V2 — Founder Profiles =================================================================== */ .home-v2 .people-v2 { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 760px) { .home-v2 .people-v2 { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .home-v2 .person { display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem 1.75rem; background: var(--h-paper); border: 1px solid var(--h-line); border-left: 4px solid var(--h-dark); } .home-v2 .person__role { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1F6458; font-weight: 600; margin: 0; } .home-v2 .person__name { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--h-ink); line-height: 1.1; } .home-v2 .person__title { font-size: 0.9375rem; font-weight: 500; color: var(--h-ink-2); margin: 0; } .home-v2 .person__bio { font-size: 0.9375rem; line-height: 1.6; color: var(--h-ink-2); margin: 0; } .home-v2 .person__work-label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 0.5rem 0 0; } .home-v2 .person__work-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .home-v2 .person__work-list li { font-size: 0.9375rem; line-height: 1.45; color: var(--h-ink); position: relative; padding-left: 1.25rem; } .home-v2 .person__work-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--h-mid); font-weight: 700; } .home-v2 .person__close { font-size: 0.875rem; line-height: 1.5; color: var(--h-ink-3); font-style: italic; margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--h-line); } /* =================================================================== ECKDATEN-V2 — Company Facts Box (definition list) =================================================================== */ .home-v2 .eckdaten-v2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2.5rem; padding: 2rem; background: var(--h-soft); border-left: 4px solid var(--h-dark); margin: 0; } @media (min-width: 720px) { .home-v2 .eckdaten-v2 { grid-template-columns: repeat(2, 1fr); } } .home-v2 .eckdaten-v2 div { display: flex; flex-direction: column; gap: 0.25rem; } .home-v2 .eckdaten-v2 dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; } .home-v2 .eckdaten-v2 dd { font-size: 1rem; font-weight: 600; color: var(--h-ink); margin: 0; font-variant-numeric: tabular-nums; } /* =================================================================== VALUES-GRID — Werte =================================================================== */ .home-v2 .values-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 0; padding: 0; } @media (min-width: 640px) and (max-width: 999px) { .home-v2 .values-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } } @media (min-width: 1000px) { .home-v2 .values-grid { grid-template-columns: repeat(6, 1fr); gap: 2rem 2.25rem; } .home-v2 .values-grid > div:nth-child(1) { grid-column: 1 / span 2; } .home-v2 .values-grid > div:nth-child(2) { grid-column: 3 / span 2; } .home-v2 .values-grid > div:nth-child(3) { grid-column: 5 / span 2; } .home-v2 .values-grid > div:nth-child(4) { grid-column: 2 / span 2; } .home-v2 .values-grid > div:nth-child(5) { grid-column: 4 / span 2; } } .home-v2 .values-grid > div { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.5rem; border-top: 2px solid var(--h-dark); } .home-v2 .values-grid dt { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; color: var(--h-ink); } .home-v2 .values-grid dd { font-size: 0.9375rem; line-height: 1.5; color: var(--h-ink-2); margin: 0; } /* =================================================================== CREDS-GRID — Zertifizierungen / Credentials =================================================================== */ .home-v2 .creds-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .home-v2 .creds-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } .home-v2 .cred-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.5rem; background: var(--h-paper); border: 1px solid var(--h-line); border-left: 4px solid var(--h-dark); } .home-v2 .cred-card__icon { width: 28px; height: 28px; color: var(--h-dark); flex-shrink: 0; margin-top: 0.1rem; } .home-v2 .cred-card__text { font-size: 0.9375rem; line-height: 1.45; color: var(--h-ink); font-weight: 500; } /* =================================================================== CAPABILITY-GRID — Leistungsbereiche (5 Items, 3+2 zentriert) =================================================================== */ .home-v2 .capability-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) and (max-width: 999px) { .home-v2 .capability-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (min-width: 1000px) { .home-v2 .capability-grid { grid-template-columns: repeat(6, 1fr); gap: 1.25rem 1.5rem; } .home-v2 .capability-grid > .capability-card:nth-child(1) { grid-column: 1 / span 2; } .home-v2 .capability-grid > .capability-card:nth-child(2) { grid-column: 3 / span 2; } .home-v2 .capability-grid > .capability-card:nth-child(3) { grid-column: 5 / span 2; } .home-v2 .capability-grid > .capability-card:nth-child(4) { grid-column: 2 / span 2; } .home-v2 .capability-grid > .capability-card:nth-child(5) { grid-column: 4 / span 2; } } .home-v2 .capability-card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.5rem; background: var(--h-paper); border: 1px solid var(--h-line); border-left: 4px solid var(--h-dark); } .home-v2 .capability-card__num { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--h-dark); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 2rem; border-right: 1px solid var(--h-line); padding-right: 1rem; line-height: 1.2; } .home-v2 .capability-card__text { font-size: 0.9375rem; line-height: 1.4; color: var(--h-ink); font-weight: 500; } /* =================================================================== CODEX-GRID — Verhaltenscodex als Iconboxen nebeneinander =================================================================== */ .home-v2 .codex-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .home-v2 .codex-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (min-width: 1000px) { .home-v2 .codex-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } .home-v2 .codex-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.5rem; background: var(--h-paper); border: 1px solid var(--h-line); border-left: 4px solid var(--h-dark); height: 100%; } .home-v2 .codex-card__num { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-dark); font-weight: 600; font-variant-numeric: tabular-nums; } .home-v2 .codex-card__icon { width: 32px; height: 32px; color: var(--h-dark); flex-shrink: 0; margin-top: 0.25rem; } .home-v2 .codex-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; color: var(--h-ink); margin: 0; line-height: 1.25; } .home-v2 .codex-card__copy { font-size: 0.9375rem; line-height: 1.55; color: var(--h-ink-2); margin: 0; } /* =================================================================== CHECKLIST — bullet ✓ list for "Warum" =================================================================== */ .home-v2 .checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 720px) { .home-v2 .checklist { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2.5rem; } } .home-v2 .checklist li { position: relative; padding: 0.35rem 0 0.35rem 3rem; font-size: 1.0625rem; line-height: 1.5; color: var(--h-ink); font-weight: 500; min-height: 2.25rem; display: flex; align-items: center; } .home-v2 .checklist li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 30px; height: 30px; border-radius: 50%; background-color: var(--h-dark); background-image: url("data:image/svg+xml;utf8,"); background-size: 18px 18px; background-position: center; background-repeat: no-repeat; flex-shrink: 0; } /* =================================================================== LEGAL-PROSE — Impressum, Datenschutz =================================================================== */ .home-v2 .legal-prose { max-width: 70ch; margin: 0 auto; } .home-v2 .legal-prose h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin: 2.5rem 0 1rem; color: var(--h-ink); } .home-v2 .legal-prose > h2:first-child { margin-top: 0; } .home-v2 .legal-prose h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin: 1.75rem 0 0.5rem; color: var(--h-ink); } .home-v2 .legal-prose p, .home-v2 .legal-prose ul, .home-v2 .legal-prose ol { font-size: 0.9375rem; line-height: 1.65; color: var(--h-ink-2); margin: 0 0 1rem; } .home-v2 .legal-prose ul, .home-v2 .legal-prose ol { padding-left: 1.5rem; } .home-v2 .legal-prose li { margin-bottom: 0.4rem; } .home-v2 .legal-prose strong { color: var(--h-ink); font-weight: 700; } .home-v2 .legal-prose address { font-style: normal; line-height: 1.55; margin: 0 0 1rem; color: var(--h-ink); } .home-v2 .legal-prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.75rem; margin: 0 0 1.5rem; font-size: 0.9375rem; } .home-v2 .legal-prose dt { font-weight: 700; color: var(--h-ink); } .home-v2 .legal-prose dd { margin: 0; color: var(--h-ink-2); } .home-v2 .legal-prose a { color: var(--h-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .home-v2 .legal-prose a:hover { text-decoration-thickness: 2px; } /* =================================================================== FORM-SHELL-V2 — Wrapper für Kontakt-Multistep-Form =================================================================== */ .home-v2 .form-shell-v2 { background: var(--h-paper); border: 1px solid var(--h-line); padding: 2rem; margin: 0 auto; max-width: 760px; } @media (min-width: 760px) { .home-v2 .form-shell-v2 { padding: 2.75rem; } } /* =================================================================== PROJEKT-LIST — Typische Projekte / Branchen =================================================================== */ .home-v2 .projekt-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 580px) { .home-v2 .projekt-list { grid-template-columns: repeat(2, 1fr); } } .home-v2 .projekt-list li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--h-ink); } .home-v2 .projekt-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 1.5px; background: var(--h-mid); } /* prose-v2 auf dunkelgrünem Hintergrund (sect--green) */ .home-v2 .sect--green .prose-v2, .home-v2 .prose-v2--on-dark { color: rgba(255, 255, 255, 0.85); } .home-v2 .sect--green .prose-v2 h2, .home-v2 .sect--green .prose-v2 h3, .home-v2 .prose-v2--on-dark h2, .home-v2 .prose-v2--on-dark h3 { color: #FFFFFF; } .home-v2 .sect--green .prose-v2 p, .home-v2 .sect--green .prose-v2 li, .home-v2 .prose-v2--on-dark p, .home-v2 .prose-v2--on-dark li { color: rgba(255, 255, 255, 0.85); } .home-v2 .sect--green .prose-v2 strong, .home-v2 .prose-v2--on-dark strong { color: #FFFFFF; } /* Contact-Grid-V2 für Kontakt-Seite (Form + Aside Side-by-Side) */ .home-v2 .contact-grid-v2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 980px) { .home-v2 .contact-grid-v2 { grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; } } .home-v2 .contact-info-v2 { position: sticky; top: 5rem; } @media (max-width: 979px) { .home-v2 .contact-info-v2 { position: static; } } /* Eckdaten-V2 in der Kontakt-Aside (Sidebar) → 1-spaltig statt 2 */ .home-v2 .contact-info-v2 .eckdaten-v2 { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem; } @media (min-width: 720px) { .home-v2 .contact-info-v2 .eckdaten-v2 { grid-template-columns: 1fr; } } .home-v2 .contact-info-v2 .eckdaten-v2 a { word-break: break-word; } /* =================================================================== PUMPED FOOTER — Dark Brand-Statement Variant (alle Seiten) Klassen: hf-top, hf-brand, hf-statement, hf-tagline, hf-eyebrow hf-contact (+ __kicker, __primary, __label, __value, __addr, __cta) hf-grid, hf-region (+ hf-map), hf-cols, hf-col, hf-col-kicker, hf-tags hf-wordmark, hf-bottom (+ __status, __copy, __top) footer-marquee + footer-marquee__toggle (WCAG 2.2.2 Pause-Button) =================================================================== */ /* Override the white legacy home-footer when pumped markup is present */ /* Background: --h-deep (near-black green, #02160A) — verifiziert via contrast-master: - #FFFFFF text → 18.72:1 PASS AA - rgba(255,255,255,0.72) tagline → ~10:1 PASS - var(--h-light) #C7E264 accents → 12.92:1 PASS - 0.45-alpha h-light border → 3:1+ PASS UI Frame: oben Hero in #073A06, unten Footer in #02160A — bewusster Klammer-Effekt */ .home-v2 .home-footer.is-pumped, .home-v2 .home-footer:has(.hf-grid) { background: var(--h-deep); color: #FFFFFF; border-top: none; padding-block: 0 0; } /* --- Footer Marquee --- */ .home-v2 .home-footer .footer-marquee { position: relative; background: #000000; border-bottom: 1px solid rgba(199, 226, 100, 0.18); border-top: none; padding-block: 0.95rem; overflow: hidden; } .home-v2 .home-footer .footer-marquee__track { display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.85); animation: hfMarquee 48s linear infinite; padding-left: 2.5rem; width: max-content; will-change: transform; } .home-v2 .home-footer .footer-marquee__track > span { display: inline-flex; align-items: center; gap: 2.5rem; } .home-v2 .home-footer .footer-marquee__track > span::after { content: "◆"; color: var(--h-light); font-size: 0.6em; } .home-v2 .home-footer .footer-marquee__track.is-paused { animation-play-state: paused; } @keyframes hfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .home-v2 .home-footer .footer-marquee__track { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; padding-left: 0; } } /* Pause/Play toggle for marquee — WCAG 2.2.2 Pause, Stop, Hide Touch-Target: 44x44 (WCAG 2.2 SC 2.5.8 + Mobile-Best-Practice) Border-Alpha 0.45 für 3:1-Puffer auf #02160A */ .home-v2 .home-footer .footer-marquee__toggle { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(199, 226, 100, 0.10); color: #FFFFFF; border: 1px solid rgba(199, 226, 100, 0.45); border-radius: 0; cursor: pointer; padding: 0; font: inherit; transition: background 200ms ease, border-color 200ms ease; } .home-v2 .home-footer .footer-marquee__toggle:hover, .home-v2 .home-footer .footer-marquee__toggle:focus-visible { background: rgba(199, 226, 100, 0.22); border-color: var(--h-light); outline: none; } .home-v2 .home-footer .footer-marquee__toggle:focus-visible { outline: 2px solid var(--h-light); outline-offset: 2px; } .home-v2 .home-footer .footer-marquee__icon { display: block; width: 14px; height: 14px; position: relative; } /* Pause icon (default = playing, button shows pause icon) */ .home-v2 .home-footer .footer-marquee__icon::before, .home-v2 .home-footer .footer-marquee__icon::after { content: ""; position: absolute; top: 0; width: 4px; height: 14px; background: currentColor; } .home-v2 .home-footer .footer-marquee__icon::before { left: 1px; } .home-v2 .home-footer .footer-marquee__icon::after { right: 1px; } /* Play icon (when paused, button shows play triangle) */ .home-v2 .home-footer .footer-marquee__toggle[aria-pressed="true"] .footer-marquee__icon { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; margin-left: 2px; } .home-v2 .home-footer .footer-marquee__toggle[aria-pressed="true"] .footer-marquee__icon::before, .home-v2 .home-footer .footer-marquee__toggle[aria-pressed="true"] .footer-marquee__icon::after { display: none; } /* --- Container override for pumped footer (kompakter, mit weniger Bauhöhe) --- */ .home-v2 .home-footer.is-pumped > .container, .home-v2 .home-footer:has(.hf-grid) > .container { padding-block: 1.5rem 1rem; } /* --- HF-BRAND-ROW: Logo links, NAP-Kontaktblock rechts (single source of truth) Logo + Wordmark scannen sich zuerst (Brand-Anker), Kontakt rechts in der Action-Zone. Adresse wurde aus dem Region-Block hochgezogen, damit Tel/Mail nicht doppelt im Footer erscheinen (a11y/SR-Empfehlung accessibility-lead). --- */ .home-v2 .home-footer .hf-brand-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding-block: 1.5rem 1.25rem; border-bottom: 1px solid rgba(199, 226, 100, 0.16); } .home-v2 .home-footer .hf-brand-link { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; color: #FFFFFF; outline-offset: 4px; padding: 4px; margin: -4px; } .home-v2 .home-footer .hf-orca { display: inline-flex; align-self: flex-start; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 4px; border-radius: var(--h-radius); text-decoration: none; transition: transform 280ms ease, filter 280ms ease; } .home-v2 .home-footer .hf-orca img { height: 96px; width: auto; display: block; } .home-v2 .home-footer .hf-orca:hover { transform: translateY(-1px); filter: drop-shadow(0 6px 18px rgba(199, 226, 100, 0.18)); } .home-v2 .home-footer .hf-orca:focus-visible { outline: 2px solid var(--h-light); outline-offset: 4px; } @media (max-width: 600px) { .home-v2 .home-footer .hf-orca img { height: 80px; } } .home-v2 .home-footer .hf-brand-link:focus-visible { outline: 2px solid var(--h-light); } .home-v2 .home-footer .hf-logo { width: 40px; height: 40px; flex-shrink: 0; filter: drop-shadow(0 0 0 transparent); transition: filter 380ms ease, transform 380ms ease; } .home-v2 .home-footer .hf-brand-link:hover .hf-logo { filter: drop-shadow(0 0 12px rgba(199, 226, 100, 0.45)); transform: scale(1.04); } .home-v2 .home-footer .hf-brand-stack { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.2; } .home-v2 .home-footer .hf-brand-name { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; color: #FFFFFF; } .home-v2 .home-footer .hf-brand-tag { font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); } /* hf-brand-contact: NAP-Block rechts in der Brand-Row, vertikal zentriert mit Logo. Links sind im Ruhezustand unterstrichen (WCAG 1.4.1 — nicht nur per Farbe markiert, da hier inline neben Adresstext sitzend). */ .home-v2 .home-footer .hf-brand-contact { font-style: normal; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); text-align: right; margin: 0; } .home-v2 .home-footer .hf-brand-contact a { color: var(--h-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 200ms ease, text-decoration-thickness 200ms ease; } .home-v2 .home-footer .hf-brand-contact a:hover, .home-v2 .home-footer .hf-brand-contact a:focus-visible { color: #FFFFFF; text-decoration-thickness: 2px; outline: none; } .home-v2 .home-footer .hf-brand-contact a:focus-visible { outline: 2px solid var(--h-light); outline-offset: 2px; } @media (max-width: 600px) { .home-v2 .home-footer .hf-brand-contact { text-align: left; } } /* hf-region__note: kurze Map-Caption (ersetzt frühere doppelte Adresse) */ .home-v2 .home-footer .hf-region__note { font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0; padding-top: 0.85rem; border-top: 1px dashed rgba(199, 226, 100, 0.22); } /* --- HF-GRID: Region (with Map) + Sitemap Cols (compacted) --- */ .home-v2 .home-footer .hf-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding-block: 1.5rem; border-bottom: 1px solid rgba(199, 226, 100, 0.16); } @media (min-width: 880px) { .home-v2 .home-footer .hf-grid { grid-template-columns: minmax(280px, 1fr) 2.6fr; gap: 2.5rem; align-items: start; } } .home-v2 .home-footer .hf-region { max-width: none; container-type: inline-size; container-name: hf-region; } .home-v2 .home-footer .hf-col-kicker { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--h-light); margin: 0 0 1rem; } /* hf-region__body — Map links | Info rechts, sobald die Region-Spalte tatsächlich breit genug ist (Container-Query auf .hf-region) */ .home-v2 .home-footer .hf-region__body { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } @container hf-region (min-width: 500px) { .home-v2 .home-footer .hf-region__body { grid-template-columns: minmax(180px, 220px) 1fr; gap: 1.75rem; } } .home-v2 .home-footer .hf-region__info { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; } .home-v2 .home-footer .hf-map { width: 100%; height: auto; max-width: 220px; display: block; margin: 0; } /* hf-cols sitemap — 3 Spalten: Leistungen + Unternehmen breiter, Standards rechts */ .home-v2 .home-footer .hf-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (min-width: 720px) { .home-v2 .home-footer .hf-cols { grid-template-columns: 1.5fr 1.4fr 1.1fr; gap: 2.5rem; } } /* Sub-Kicker innerhalb einer Spalte (z.B. "Rechtliches" unter "Unternehmen") */ .home-v2 .home-footer .hf-col-subkicker { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: rgba(199, 226, 100, 0.7); margin: 1.25rem 0 0.65rem; padding-top: 0.85rem; border-top: 1px dashed rgba(199, 226, 100, 0.16); } .home-v2 .home-footer .hf-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .home-v2 .home-footer .hf-col li { font-size: 0.9375rem; line-height: 1.4; color: rgba(255, 255, 255, 0.78); } .home-v2 .home-footer .hf-col a { color: rgba(255, 255, 255, 0.85); text-decoration: none; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; } .home-v2 .home-footer .hf-col a:hover, .home-v2 .home-footer .hf-col a:focus-visible { color: var(--h-light); border-bottom-color: var(--h-light); outline: none; } .home-v2 .home-footer .hf-col a:focus-visible { outline: 2px solid var(--h-light); outline-offset: 2px; } .home-v2 .home-footer .hf-tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; } .home-v2 .home-footer .hf-tags li { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.6); padding: 0.35rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.18); } /* --- HF-WORDMARK: removed in compacted footer --- */ .home-v2 .home-footer .hf-wordmark { display: none; } /* --- HF-BOTTOM: Status / Copy / Back-to-top (kompakter) --- */ .home-v2 .home-footer .hf-bottom { display: grid; grid-template-columns: 1fr; gap: 0.4rem; padding-top: 0.85rem; font-size: 0.75rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); text-align: center; } @media (min-width: 720px) { .home-v2 .home-footer .hf-bottom { grid-template-columns: auto 1fr auto; gap: 2rem; text-align: left; } } .home-v2 .home-footer .hf-bottom__status { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 0.5rem; } .home-v2 .home-footer .hf-bottom__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--h-light); display: inline-block; animation: hfPulse 2.4s ease-in-out infinite; } @keyframes hfPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { .home-v2 .home-footer .hf-bottom__status::before { animation: none; opacity: 1; } } .home-v2 .home-footer .hf-bottom__copy { text-align: center; } @media (min-width: 720px) { .home-v2 .home-footer .hf-bottom__copy { text-align: center; } } .home-v2 .home-footer .hf-bottom__top a { color: rgba(255, 255, 255, 0.7); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-bottom: 2px; transition: color 200ms ease, border-color 200ms ease; } .home-v2 .home-footer .hf-bottom__top a:hover, .home-v2 .home-footer .hf-bottom__top a:focus-visible { color: var(--h-light); border-bottom-color: var(--h-light); outline: none; } .home-v2 .home-footer .hf-bottom__top a:focus-visible { outline: 2px solid var(--h-light); outline-offset: 2px; } /* =================================================================== PAGE-HERO V2 — Animated Art + Stats Bar (Service-Pages) Modifier: .ph-hero--with-art (2-col: copy + thematic SVG) Stats werden aus dem Hero in eine eigene .ph-stats-bar verschoben. =================================================================== */ .home-v2 .ph-hero--with-art { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem); } .home-v2 .ph-hero--with-art .ph-hero__inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 980px) { .home-v2 .ph-hero--with-art .ph-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; align-items: center; } } /* The .ph-hero__copy keeps copy together */ .home-v2 .ph-hero--with-art .ph-hero__copy { max-width: 56ch; } /* The art container — themed SVG lives here */ .home-v2 .ph-hero__art { position: relative; width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(199,226,100,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(199,226,100,0.05) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid rgba(199, 226, 100, 0.18); padding: 1.5rem; isolation: isolate; } .home-v2 .ph-hero__art::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(420px 280px at 80% 20%, rgba(199,226,100,0.10), transparent 60%), radial-gradient(380px 240px at 20% 80%, rgba(31,100,88,0.20), transparent 60%); pointer-events: none; z-index: -1; } .home-v2 .ph-hero__art-corner { position: absolute; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(199, 226, 100, 0.6); font-weight: 500; } .home-v2 .ph-hero__art-corner--tl { top: 0.75rem; left: 0.85rem; } .home-v2 .ph-hero__art-corner--tr { top: 0.75rem; right: 0.85rem; } .home-v2 .ph-hero__art-corner--bl { bottom: 0.75rem; left: 0.85rem; } .home-v2 .ph-hero__art-corner--br { bottom: 0.75rem; right: 0.85rem; } .home-v2 .hero-art { width: 100%; height: 100%; display: block; overflow: visible; } /* === Animated Data-Flow Schematic (Energetische Inspektion) === */ .home-v2 .hero-art__node-circle { fill: var(--h-dark); stroke: var(--h-light); stroke-width: 1.5; transform-origin: center; transform-box: fill-box; } .home-v2 .hero-art__node-pulse { fill: none; stroke: var(--h-light); stroke-width: 1.2; transform-origin: center; transform-box: fill-box; opacity: 0; } .home-v2 .hero-art__node-icon { fill: var(--h-light); } .home-v2 .hero-art__node-label { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; fill: #FFFFFF; text-anchor: middle; } .home-v2 .hero-art__node-sublabel { font-family: var(--sans); font-size: 8px; font-weight: 400; fill: rgba(255, 255, 255, 0.65); text-anchor: middle; } .home-v2 .hero-art__connector { fill: none; stroke: var(--h-light); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.55; } .home-v2 .hero-art__data-pulse { fill: var(--h-light); } .home-v2 .hero-art__axis-label { font-family: var(--sans); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(199, 226, 100, 0.45); font-weight: 500; } @media (prefers-reduced-motion: no-preference) { .home-v2 .hero-art__node { animation: heroNodeAppear 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards; /* IMPORTANT: don't animate transform here — it overrides per-node translate(x,y) */ } .home-v2 .hero-art__node--1 { animation-delay: 200ms; } .home-v2 .hero-art__node--2 { animation-delay: 700ms; } .home-v2 .hero-art__node--3 { animation-delay: 1200ms; } .home-v2 .hero-art__node--4 { animation-delay: 1700ms; } .home-v2 .hero-art__node-pulse { animation: heroPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; } .home-v2 .hero-art__node--1 .hero-art__node-pulse { animation-delay: 0s; } .home-v2 .hero-art__node--2 .hero-art__node-pulse { animation-delay: 0.4s; } .home-v2 .hero-art__node--3 .hero-art__node-pulse { animation-delay: 0.8s; } .home-v2 .hero-art__node--4 .hero-art__node-pulse { animation-delay: 1.2s; } .home-v2 .hero-art__connector { stroke-dashoffset: 0; animation: heroDashFlow 1.6s linear infinite; } .home-v2 .hero-art__data-pulse { animation: heroDataPulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; opacity: 0; } .home-v2 .hero-art__data-pulse--1 { animation-delay: 0.4s; } .home-v2 .hero-art__data-pulse--2 { animation-delay: 1.4s; } .home-v2 .hero-art__data-pulse--3 { animation-delay: 2.4s; } } @keyframes heroNodeAppear { /* opacity-only — never animate transform here, it would clobber the per-node translate(x,y) */ from { opacity: 0; } to { opacity: 1; } } @keyframes heroPulse { 0% { opacity: 0.6; transform: scale(1); } 60% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } } @keyframes heroDashFlow { to { stroke-dashoffset: -14; } } @keyframes heroDataPulse { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(120px); } } @media (prefers-reduced-motion: reduce) { .home-v2 .hero-art__node, .home-v2 .hero-art__node-pulse, .home-v2 .hero-art__connector, .home-v2 .hero-art__data-pulse { animation: none !important; opacity: 1; } .home-v2 .hero-art__node-pulse { opacity: 0; } .home-v2 .hero-art__data-pulse { opacity: 0.7; } } /* =================================================================== STICKY BOTTOM CTA — appears after scrolling past hero

with two links: page + tel Hidden on Home and Kontakt via body class .has-sticky-cta =================================================================== */ .home-v2 .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background-color: var(--kk-dark); background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 16px 16px; color: #FFFFFF; border-top: 1px solid rgba(255, 255, 255, 0.25); padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom)); display: none; transform: translateY(100%); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); font-family: var(--sans); } .home-v2.has-sticky-cta .sticky-cta { display: block; } .home-v2 .sticky-cta.is-visible { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .home-v2 .sticky-cta { transition: none; } } .home-v2 .sticky-cta__inner { display: grid; grid-template-columns: 1fr; gap: 0.5rem; align-items: center; max-width: 1200px; margin: 0 auto; } @media (min-width: 720px) { .home-v2 .sticky-cta__inner { grid-template-columns: 1fr auto auto; gap: 1.25rem; } } .home-v2 .sticky-cta__msg { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; line-height: 1.3; color: rgba(255, 255, 255, 0.92); } .home-v2 .sticky-cta__msg-pulse { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .home-v2 .sticky-cta__msg-pulse { animation: hfPulse 2.4s ease-in-out infinite; } } .home-v2 .sticky-cta__msg-text strong { font-weight: 600; color: #FFFFFF; display: block; margin-bottom: 0.05rem; font-size: 0.8125rem; letter-spacing: 0.02em; } .home-v2 .sticky-cta__msg-text span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.01em; } @media (max-width: 719px) { .home-v2 .sticky-cta__msg { display: none; } .home-v2 .sticky-cta__inner { grid-template-columns: 1fr 1fr; gap: 0.6rem; } } .home-v2 .sticky-cta__btn, .home-v2 .sticky-cta__tel { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; padding: 0.6rem 1.05rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; border: 1px solid transparent; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; white-space: nowrap; } .home-v2 .sticky-cta__btn { background: #FFFFFF; color: var(--kk-dark); border-color: #FFFFFF; } .home-v2 .sticky-cta__btn:hover, .home-v2 .sticky-cta__btn:focus-visible { background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.88); outline: none; } .home-v2 .sticky-cta__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .home-v2 .sticky-cta__tel { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); } .home-v2 .sticky-cta__tel:hover, .home-v2 .sticky-cta__tel:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: #FFFFFF; outline: none; } .home-v2 .sticky-cta__tel:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .home-v2 .sticky-cta__icon { width: 14px; height: 14px; flex-shrink: 0; } /* Sticky-CTA layout adjustment: footer gets extra bottom margin instead of main padding, so we don't get a white gap between the last (often dark) main section and the dark footer. The dark footer + extra space sits behind the sticky CTA without visual seam. */ .home-v2.has-sticky-cta .home-footer .hf-bottom { padding-bottom: 5.5rem; } /* =================================================================== PERSON-WITH-PHOTO — adds avatar to .person card =================================================================== */ .home-v2 .person--with-photo { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .home-v2 .person__photo { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 300px; background: var(--h-soft); border: 1px solid var(--h-line); overflow: hidden; } .home-v2 .person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-v2 .person__photo-meta { position: absolute; bottom: 0.6rem; left: 0.7rem; right: 0.7rem; display: flex; justify-content: space-between; font-family: var(--sans); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); font-weight: 600; padding: 0.3rem 0.5rem; background: rgba(7, 58, 6, 0.92); } /* =================================================================== INLINE CTA — small in-prose reminder card =================================================================== */ /* Inline-CTA: Engineering-Grid statt soliden Grünblock (Hero-Sprache) */ .home-v2 .inline-cta { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem 1.75rem 1.75rem 2rem; background: var(--h-deep); color: #FFFFFF; margin: 2.5rem 0; border-left: 3px solid var(--h-light); overflow: hidden; transition: border-left-color 350ms ease; } /* Engineering-Grid wie Hero */ .home-v2 .inline-cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(199, 226, 100, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 80% 100% at 30% 50%, #000 0%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 80% 100% at 30% 50%, #000 0%, transparent 90%); opacity: 0.85; transition: opacity 400ms ease; pointer-events: none; } /* Brand-Aura zentral */ .home-v2 .inline-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 200px at 25% 50%, rgba(199, 226, 100, 0.10), transparent 65%), radial-gradient(400px 200px at 80% 50%, rgba(111, 174, 101, 0.08), transparent 60%); pointer-events: none; transition: opacity 400ms ease; } @keyframes ctaInlinePulse { 0% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.7); } 70% { box-shadow: 0 0 0 9px rgba(199, 226, 100, 0); } 100% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0); } } /* Grid wird heller bei Button-Hover/Focus (:has() Trigger) */ .home-v2 .inline-cta:has(.inline-cta__btn:hover)::before, .home-v2 .inline-cta:has(.inline-cta__btn:focus-visible)::before, .home-v2 .inline-cta:focus-within::before { opacity: 1; background-image: linear-gradient(rgba(199, 226, 100, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.13) 1px, transparent 1px); } @media (min-width: 720px) { .home-v2 .inline-cta { grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } } @media (prefers-reduced-motion: reduce) { .home-v2 .inline-cta__kicker::before { animation: none; } .home-v2 .inline-cta::before, .home-v2 .inline-cta::after { transition: none; } } .home-v2 .inline-cta__copy { display: grid; gap: 0.35rem; position: relative; } .home-v2 .inline-cta__kicker { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-light); font-weight: 600; margin: 0; display: inline-flex; align-items: center; gap: 0.6rem; } .home-v2 .inline-cta__kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--h-light); box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.55); animation: ctaInlinePulse 2.6s ease-out infinite; flex-shrink: 0; } .home-v2 .inline-cta__title { font-family: var(--sans); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: #FFFFFF; margin: 0; line-height: 1.3; } .home-v2 .inline-cta__sub { font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); line-height: 1.5; margin: 0; } .home-v2 .inline-cta__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .home-v2 .inline-cta__btn, .home-v2 .inline-cta__tel { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.7rem 1.15rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: all 180ms ease; white-space: nowrap; } .home-v2 .inline-cta__btn { background: var(--h-light); color: var(--h-dark); border-color: var(--h-light); } .home-v2 .inline-cta__btn:hover, .home-v2 .inline-cta__btn:focus-visible { background: #FFFFFF; border-color: #FFFFFF; outline: none; } .home-v2 .inline-cta__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .home-v2 .inline-cta__tel { background: transparent; color: #FFFFFF; border-color: rgba(199, 226, 100, 0.45); } .home-v2 .inline-cta__tel:hover, .home-v2 .inline-cta__tel:focus-visible { background: rgba(199, 226, 100, 0.12); border-color: var(--h-light); outline: none; } .home-v2 .inline-cta__tel:focus-visible { outline: 2px solid var(--h-light); outline-offset: 2px; } /* =================================================================== SPACING-AUDIT — harmonize section padding-block =================================================================== */ .home-v2 .sect { padding-block: clamp(3.5rem, 6vw, 5.5rem); } .home-v2 .sect--soft { padding-block: clamp(3.5rem, 6vw, 5.5rem); } .home-v2 .sect--green { padding-block: clamp(4rem, 7vw, 6rem); } /* =================================================================== PROSE-ASIDE — Long-form text + floating image-card sidebar Section pattern:

...

=================================================================== */ .home-v2 .prose-aside { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 980px) { .home-v2 .prose-aside { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 4rem; } .home-v2 .prose-aside--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); } .home-v2 .prose-aside--reverse .prose-aside__copy { order: 2; } .home-v2 .prose-aside--reverse .prose-aside__art { order: 1; } } .home-v2 .prose-aside__art { position: relative; } @media (min-width: 980px) { .home-v2 .prose-aside__art { position: sticky; top: 6rem; } } /* Image-Card — engineering datasheet treatment for photos */ .home-v2 .image-card { position: relative; background: var(--h-soft); border: 1px solid var(--h-line); margin: 0; } .home-v2 .image-card--on-dark { background: rgba(0, 0, 0, 0.4); border-color: rgba(199, 226, 100, 0.18); } .home-v2 .image-card__head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #595959; border-bottom: 1px solid var(--h-line); font-weight: 500; } .home-v2 .image-card--on-dark .image-card__head { color: rgba(255, 255, 255, 0.55); border-bottom-color: rgba(199, 226, 100, 0.18); } .home-v2 .image-card__head-spec { color: var(--h-dark); font-weight: 600; } .home-v2 .image-card--on-dark .image-card__head-spec { color: var(--h-light); } .home-v2 .image-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--h-ink); } .home-v2 .image-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Decorative crosshair overlay (engineering-drawing) */ .home-v2 .image-card__img-wrap::before, .home-v2 .image-card__img-wrap::after { content: ""; position: absolute; background: rgba(199, 226, 100, 0.5); pointer-events: none; z-index: 1; } .home-v2 .image-card__img-wrap::before { top: 50%; left: 0.6rem; right: 0.6rem; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(199,226,100,0.5) 0%, rgba(199,226,100,0.5) 6%, transparent 6%, transparent 94%, rgba(199,226,100,0.5) 94%, rgba(199,226,100,0.5) 100%); } .home-v2 .image-card__img-wrap::after { left: 50%; top: 0.6rem; bottom: 0.6rem; width: 1px; transform: translateX(-50%); background: linear-gradient(0deg, rgba(199,226,100,0.5) 0%, rgba(199,226,100,0.5) 6%, transparent 6%, transparent 94%, rgba(199,226,100,0.5) 94%, rgba(199,226,100,0.5) 100%); } .home-v2 .image-card__caption { padding: 1rem 1rem 1.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--h-ink-2); border-top: 1px solid var(--h-line); } .home-v2 .image-card--on-dark .image-card__caption { color: rgba(255, 255, 255, 0.78); border-top-color: rgba(199, 226, 100, 0.18); } .home-v2 .image-card__caption strong { display: block; color: var(--h-ink); font-weight: 600; margin-bottom: 0.35rem; letter-spacing: -0.01em; } .home-v2 .image-card--on-dark .image-card__caption strong { color: #FFFFFF; } /* Image-card variant: "datasheet" — small spec rows beneath image */ .home-v2 .image-card__specs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--h-line); } .home-v2 .image-card--on-dark .image-card__specs { border-top-color: rgba(199, 226, 100, 0.18); } .home-v2 .image-card__specs > li { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; padding: 0.55rem 1rem; font-size: 0.8125rem; line-height: 1.4; color: var(--h-ink-2); border-bottom: 1px solid var(--h-line); } .home-v2 .image-card__specs > li:last-child { border-bottom: none; } .home-v2 .image-card--on-dark .image-card__specs > li { color: rgba(255, 255, 255, 0.78); border-bottom-color: rgba(199, 226, 100, 0.10); } .home-v2 .image-card__specs dt, .home-v2 .image-card__specs > li > span:first-child { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #595959; align-self: center; } .home-v2 .image-card--on-dark .image-card__specs dt, .home-v2 .image-card--on-dark .image-card__specs > li > span:first-child { color: rgba(255, 255, 255, 0.55); } .home-v2 .image-card__specs dd, .home-v2 .image-card__specs > li > span:last-child { margin: 0; color: var(--h-ink); font-weight: 500; } .home-v2 .image-card--on-dark .image-card__specs dd, .home-v2 .image-card--on-dark .image-card__specs > li > span:last-child { color: #FFFFFF; } /* === Stats Bar (separate row under hero) === */ .home-v2 .ph-stats-bar { background: var(--h-ink); color: #FFFFFF; border-top: 1px solid rgba(199, 226, 100, 0.16); border-bottom: 1px solid #000; padding-block: 2rem; } .home-v2 .ph-stats-bar__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; } @media (min-width: 720px) { .home-v2 .ph-stats-bar__grid { grid-template-columns: repeat(4, 1fr); gap: 0; } .home-v2 .ph-stats-bar__item + .ph-stats-bar__item { padding-left: 2rem; border-left: 1px solid rgba(199, 226, 100, 0.18); } } .home-v2 .ph-stats-bar__item { display: flex; flex-direction: column; gap: 0.55rem; } .home-v2 .ph-stats-bar__num { font-family: var(--sans); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--h-light); font-variant-numeric: tabular-nums; } .home-v2 .ph-stats-bar__num small { font-size: 0.55em; font-weight: 500; color: rgba(255, 255, 255, 0.7); margin-left: 0.15em; } .home-v2 .ph-stats-bar__label { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.78); } /* =================================================================== CONTRAST FIXES — overrides for elements failing WCAG AA on home-v2 =================================================================== */ .home-v2 .form__legend, .home-v2 .form__step-indicator, .home-v2 .field__hint { color: #595959 !important; } .home-v2 .contact-info-v2 .eckdaten-v2 dt { color: #595959 !important; font-weight: 600; } .home-v2 .contact-info-v2 .eckdaten-v2 dd { color: var(--h-ink) !important; } .home-v2 .contact-info-v2 .eckdaten-v2 dd a { color: var(--h-dark) !important; } .home-v2 .contact-info-v2 .sect__kicker { color: #1F6458 !important; } /* =================================================================== MEGAMENU — Leistungen-Dropdown mit Cards, Bild + Title-Link + Bullets =================================================================== */ .home-v2 .primary-nav__has-megamenu { position: static; } .primary-nav__has-megamenu { position: static; } .megamenu { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--h-ink); background-image: linear-gradient(rgba(199, 226, 100, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.04) 1px, transparent 1px), radial-gradient(900px 500px at 80% -10%, rgba(199, 226, 100, 0.05), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(111, 174, 101, 0.06), transparent 60%); background-size: 40px 40px, 40px 40px, auto, auto; border-top: 1px solid rgba(199, 226, 100, 0.18); border-bottom: 1px solid rgba(199, 226, 100, 0.18); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 0.55); color: #FFFFFF; padding-block: 2.5rem 2.75rem; z-index: 50; overflow: hidden; } .megamenu[hidden] { display: none; } .megamenu > .container { position: relative; z-index: 1; } /* Decorative SVG positioned absolutely so it doesn't push content */ .megamenu > .megamenu__deco { position: absolute; top: 0; right: 0; width: 320px; height: 220px; pointer-events: none; opacity: 0.7; z-index: 0; } @media (max-width: 720px) { .megamenu > .megamenu__deco { display: none; } } .megamenu__head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(199, 226, 100, 0.18); } .megamenu__kicker { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kk-light); font-weight: 600; margin: 0 0 0.4rem; } .megamenu__title { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #FFFFFF; margin: 0; } .megamenu__title em { font-style: normal; color: var(--kk-light); } .megamenu__overview { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--kk-light); border-bottom: 1.5px solid var(--kk-light); padding-bottom: 0.2rem; text-decoration: none; } .megamenu__overview:hover, .megamenu__overview:focus-visible { color: #FFFFFF; border-color: #FFFFFF; outline: none; } .megamenu__overview[aria-current="page"] { color: var(--kk-mid); border-color: var(--kk-mid); } .megamenu__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .megamenu__grid > li { display: flex; } .megamenu__card { position: relative; display: flex; flex-direction: column; gap: 1rem; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(199, 226, 100, 0.2); border-radius: 6px; padding: 1.25rem; transition: border-color 200ms, background 200ms, transform 200ms cubic-bezier(0.16, 1, 0.3, 1); } .megamenu__card-body { display: flex; flex-direction: column; flex: 1; gap: 0.5rem; } .megamenu__card:hover { background: rgba(199, 226, 100, 0.08); border-color: var(--kk-light); transform: translateY(-2px); } .megamenu__card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, 0.3); border-radius: 4px; } .megamenu__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); } .megamenu__card:hover .megamenu__card-media img { transform: scale(1.04); } .megamenu__card-num { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--kk-light); color: var(--kk-dark); font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .megamenu__card-kicker { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kk-light); font-weight: 600; margin: 0; } .megamenu__card-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0.25rem 0 0; } .megamenu__card-title a { color: #FFFFFF; text-decoration: none; } .megamenu__card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; } .megamenu__card-title a:hover, .megamenu__card-title a:focus-visible { color: var(--kk-light); text-decoration: underline; text-underline-offset: 0.2em; outline: none; } .megamenu__card:has(.megamenu__card-title a:focus-visible) { outline: 2px solid var(--kk-light); outline-offset: 3px; } .megamenu__card-title a[aria-current="page"] { color: var(--kk-mid); border-bottom: 2px solid var(--kk-mid); padding-bottom: 0.1rem; } .megamenu__card-copy { font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); margin: 0; } .megamenu__card-bullets { list-style: none; padding: 0; margin: 0.25rem 0 0; display: grid; gap: 0.35rem; } .megamenu__card-bullets li { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); position: relative; padding-left: 1rem; } .megamenu__card-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 1.5px; background: var(--kk-light); } .megamenu__card-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--kk-light); border-bottom: 1px solid transparent; padding-bottom: 0.15rem; align-self: flex-start; transition: color 200ms, border-color 200ms, gap 200ms; } .megamenu__card:hover .megamenu__card-cta { color: #FFFFFF; gap: 0.6rem; border-bottom-color: var(--kk-light); } /* Mobile: Megamenu wird zu einer einfachen Card-Stack-Liste innerhalb des Burger-Menüs */ @media (max-width: 879px) { .megamenu { position: static; padding: 1rem 1.25rem; box-shadow: none; border: 0; background-image: none; } .megamenu__head { flex-direction: column; align-items: stretch; gap: 0.85rem; margin-bottom: 1rem; padding-bottom: 0.85rem; } .megamenu__title { font-size: 1.125rem; } .megamenu__grid { grid-template-columns: 1fr; gap: 1.25rem; } .megamenu__card-media { display: none; } .megamenu__card-bullets { display: none; } .megamenu__card-copy { display: none; } .megamenu__card { gap: 0.25rem; } .megamenu__card-title { font-size: 1rem; } } /* =================================================================== MAPS-LOADER — DSGVO-konformer Click-to-Load Wrapper für Google Maps =================================================================== */ .home-v2 .maps-loader { position: relative; aspect-ratio: 16 / 9; background: var(--h-soft); border: 1px solid var(--h-line); border-radius: var(--h-radius-lg); overflow: hidden; isolation: isolate; } .home-v2 .maps-loader__placeholder { position: absolute; inset: 0; display: block; } .home-v2 .maps-loader__svg { width: 100%; height: 100%; display: block; } .home-v2 .maps-loader__overlay { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; background: rgba(255, 255, 255, 0.95); border-left: 4px solid var(--h-dark); padding: 1rem 1.25rem; max-width: 22rem; } .home-v2 .maps-loader__addr { font-size: 0.9375rem; line-height: 1.45; color: var(--h-ink); margin: 0; } .home-v2 .maps-loader__addr strong { font-weight: 700; color: var(--h-dark); } .home-v2 .maps-loader__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.75rem; background: var(--h-dark); color: #FFFFFF; border: 0; border-radius: 999px; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 16px 32px -12px rgba(7, 58, 6, 0.5); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms; z-index: 2; } .home-v2 .maps-loader__btn:hover, .home-v2 .maps-loader__btn:focus-visible { transform: translate(-50%, -50%) translateY(-2px); box-shadow: 0 22px 40px -14px rgba(7, 58, 6, 0.6); outline: none; } .home-v2 .maps-loader__btn:focus-visible { outline: 3px solid var(--h-light); outline-offset: 3px; } .home-v2 .maps-loader__hint { position: absolute; bottom: 0.5rem; right: 1rem; margin: 0; font-size: 0.75rem; color: var(--h-ink-3); background: rgba(255, 255, 255, 0.92); padding: 0.4rem 0.75rem; border-radius: 4px; max-width: 22rem; text-align: right; z-index: 2; } .home-v2 .maps-loader__hint a { color: var(--h-dark); text-decoration: underline; text-underline-offset: 0.15em; } @media (max-width: 720px) { .home-v2 .maps-loader { aspect-ratio: 4 / 3; } .home-v2 .maps-loader__overlay { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; } .home-v2 .maps-loader__btn { font-size: 0.875rem; padding: 0.85rem 1.4rem; } .home-v2 .maps-loader__hint { position: static; margin: 0.75rem 0 0; background: transparent; text-align: left; padding: 0; max-width: none; } } /* Nach Klick: Overlay-Elemente sind weg, iframe füllt den Container */ .home-v2 .maps-loader--loaded { background: transparent; } .home-v2 .maps-loader--loaded iframe { width: 100%; height: 100%; border: 0; display: block; } .home-v2 .maps-loader--loaded iframe:focus-visible { outline: 3px solid var(--h-dark); outline-offset: -3px; } /* form-shell zentriert (statt im 2-col Grid mit aside) */ .home-v2 .form-shell-v2--centered { max-width: 720px; margin-inline: auto; } /* =================================================================== HOAI-TABLE — Leistungsphasen-Tabelle (TGA-Seite) =================================================================== */ .home-v2 .hoai-table-wrap { overflow-x: auto; border: 1px solid var(--h-line); background: var(--h-paper); } .home-v2 .hoai-table-wrap:focus { outline: 2px solid var(--h-dark); outline-offset: 2px; } .home-v2 .hoai-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .home-v2 .hoai-table thead { background: var(--h-soft); border-bottom: 1px solid var(--h-line); } .home-v2 .hoai-table thead th { text-align: left; padding: 1rem 1.25rem; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; } .home-v2 .hoai-table tbody tr { border-bottom: 1px solid var(--h-line); } .home-v2 .hoai-table tbody tr:last-child { border-bottom: 0; } .home-v2 .hoai-table tbody tr:hover { background: rgba(7, 58, 6, 0.02); } .home-v2 .hoai-table th[scope="row"], .home-v2 .hoai-table td { padding: 1.1rem 1.25rem; vertical-align: top; line-height: 1.5; } .home-v2 .hoai-table__lph { width: 4rem; font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--h-dark); font-size: 1.0625rem; } .home-v2 .hoai-table__name { width: 30%; font-weight: 600; color: var(--h-ink); } .home-v2 .hoai-table__content { color: var(--h-ink-2); } @media (max-width: 720px) { .home-v2 .hoai-table { font-size: 0.875rem; } .home-v2 .hoai-table__name { width: auto; } .home-v2 .hoai-table th[scope="row"], .home-v2 .hoai-table td { padding: 0.85rem 1rem; } } /* =================================================================== PROCESS-GRID --4 Modifier — 4 Schritte in einer Reihe (kein 3+1 Waise) =================================================================== */ @media (min-width: 980px) { .home-v2 .process-grid.process-grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 600px) and (max-width: 979px) { .home-v2 .process-grid.process-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* =================================================================== SECT__INTRO — kleine Label-Zeile vor einem nachfolgenden Card-Block =================================================================== */ .home-v2 .sect__intro { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 3rem 0 1.5rem; } /* =================================================================== INDUSTRIES --4 / --5 Modifier (Über-uns Card-Reihen) Erweitert das Startseiten-Pattern auf 4 oder 5 Spalten. =================================================================== */ @media (min-width: 880px) { .home-v2 .industries--4 { grid-template-columns: repeat(4, 1fr); } .home-v2 .industries--4 > .industry { border-right: 1px solid var(--h-line); padding: 2.25rem 1.75rem; border-bottom: 0; } .home-v2 .industries--4 > .industry:nth-child(4n) { border-right: 0; padding-right: 0; } .home-v2 .industries--4 > .industry:nth-child(4n+1) { padding-left: 0; } .home-v2 .industries--4 > .industry:last-child { border-right: 0; padding-right: 0; } } @media (min-width: 1100px) { .home-v2 .industries--5 { grid-template-columns: repeat(5, 1fr); } .home-v2 .industries--5 > .industry { border-right: 1px solid var(--h-line); padding: 2.25rem 1.5rem; border-bottom: 0; } .home-v2 .industries--5 > .industry:nth-child(5n) { border-right: 0; padding-right: 0; } .home-v2 .industries--5 > .industry:nth-child(5n+1) { padding-left: 0; } .home-v2 .industries--5 > .industry:last-child { border-right: 0; padding-right: 0; } } /* 3 Spalten × 2 Zeilen für 6-Item-Grid (z. B. „Was uns auszeichnet") */ @media (min-width: 880px) { .home-v2 .industries--6 { grid-template-columns: repeat(3, 1fr); } .home-v2 .industries--6 > .industry { border-right: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); padding: 2.25rem 1.75rem; } .home-v2 .industries--6 > .industry:nth-child(3n) { border-right: 0; padding-right: 0; } .home-v2 .industries--6 > .industry:nth-child(3n+1) { padding-left: 0; } .home-v2 .industries--6 > .industry:nth-last-child(-n+3) { border-bottom: 0; padding-bottom: 0; } } /* Mid-screen Fallback: 2 Spalten (verhindert beengte 3- oder 4-spaltige Layouts auf Tablets) */ @media (min-width: 600px) and (max-width: 879px) { .home-v2 .industries--4, .home-v2 .industries--5 { grid-template-columns: repeat(2, 1fr); } .home-v2 .industries--4 > .industry, .home-v2 .industries--5 > .industry { border-right: 0; border-bottom: 1px solid var(--h-line); padding: 2rem 0; } .home-v2 .industries--4 > .industry:nth-last-child(-n+2), .home-v2 .industries--5 > .industry:nth-last-child(-n+2) { border-bottom: 0; } } /* 3-Spalten-Fallback für 5-Item-Grid auf mittlerem Desktop */ @media (min-width: 880px) and (max-width: 1099px) { .home-v2 .industries--5 { grid-template-columns: repeat(3, 1fr); } .home-v2 .industries--5 > .industry { border-right: 1px solid var(--h-line); padding: 2.25rem 1.5rem; border-bottom: 0; } .home-v2 .industries--5 > .industry:nth-child(3n) { border-right: 0; padding-right: 0; } .home-v2 .industries--5 > .industry:nth-child(3n+1) { padding-left: 0; } .home-v2 .industries--5 > .industry:last-child { border-right: 0; padding-right: 0; } } /* =================================================================== SOLUTIONS --2 Modifier — 2-spaltige sol-card-Reihe (für Founders) =================================================================== */ @media (min-width: 720px) { .home-v2 .solutions--2 { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } } /* =================================================================== SOLUTIONS --portrait — Founder-Photo-Fix (Stirn nicht abschneiden) Aspect-Ratio von 4:3 (landscape) auf 1:1 (square) und Fokus auf Kopf. =================================================================== */ .home-v2 .solutions--portrait .sol-card__media { aspect-ratio: 1 / 1; } .home-v2 .solutions--portrait .sol-card__media img { object-position: center 25%; } .home-v2 .solutions--portrait .sol-card:hover .sol-card__media img { transform: none; } /* SOL-CARD Erweiterungen — eyebrow (role), bullets-label, close-line, longer copy */ .home-v2 .sol-card__role { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1F6458; font-weight: 600; margin: 0 0 0.5rem; } .home-v2 .sol-card__bullets-label { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 0.6rem 0 0.6rem; } .home-v2 .sol-card__close { font-size: 0.875rem; line-height: 1.5; color: var(--h-ink-3); font-style: italic; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--h-line); } /* Mehrere Copy-Absätze in sol-card__body — dezenten Abstand zwischen ihnen */ .home-v2 .sol-card__body .sol-card__copy + .sol-card__copy { margin-top: -0.85rem; margin-bottom: 1.25rem; } /* =================================================================== SECT__CLOSE — Schluss-Statement nach einer Card-Reihe =================================================================== */ .home-v2 .sect__close { font-size: 1.0625rem; line-height: 1.55; color: var(--h-ink-2); font-style: italic; max-width: 56rem; margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--h-line); } /* =================================================================== SECT__POST — Sub-Block nach Hauptinhalt (z. B. „Unser Anspruch" nach Founders) =================================================================== */ .home-v2 .sect__post { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--h-line); max-width: 56rem; } .home-v2 .sect__post-title { font-family: var(--sans); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--h-ink); line-height: 1.2; margin: 0 0 1rem; } .home-v2 .sect__post p { font-size: 1rem; line-height: 1.6; color: var(--h-ink-2); margin: 0 0 0.85rem; } .home-v2 .sect__post p:last-child { margin-bottom: 0; } /* =================================================================== ABOUT-GRID --reverse — image rechts, prose links (Desktop) =================================================================== */ @media (min-width: 880px) { .home-v2 .about-grid--reverse > .about-content { order: 1; } .home-v2 .about-grid--reverse > .about-media { order: 2; } } /* =================================================================== VISION-QUOTE — großer Statement-Block =================================================================== */ .home-v2 .vision-quote { background: var(--h-paper); padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); } .home-v2 .vision-quote__inner { max-width: 56rem; text-align: left; } .home-v2 .vision-quote__kicker { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-dark); font-weight: 600; margin: 0 0 1.5rem; } .home-v2 .vision-quote__title { font-size: clamp(1.625rem, 3.6vw, 2.625rem); font-weight: 700; letter-spacing: -0.025em; color: var(--h-ink); line-height: 1.25; margin: 0; } .home-v2 .vision-quote__title em { font-style: normal; color: var(--h-dark); } /* =================================================================== TEAM-CARD — Founder-Card im sol-card-Stil (Bild oben, Text unten) =================================================================== */ .home-v2 .team-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 760px) { .home-v2 .team-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } .home-v2 .team-card { position: relative; background: #FFFFFF; border: 1px solid var(--h-line); border-radius: var(--h-radius-lg); overflow: hidden; display: flex; flex-direction: column; } .home-v2 .team-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--h-soft); } .home-v2 .team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-v2 .team-card__num { position: absolute; top: 1rem; left: 1rem; background: var(--h-dark); color: #FFFFFF; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding: 0.45rem 0.8rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .home-v2 .team-card__body { padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; } .home-v2 .team-card__role { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1F6458; font-weight: 600; margin: 0; } .home-v2 .team-card__name { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; color: var(--h-ink); line-height: 1.1; margin: 0; } .home-v2 .team-card__title { font-size: 0.9375rem; font-weight: 500; color: var(--h-ink-2); margin: 0 0 0.35rem; } .home-v2 .team-card__bio { font-size: 0.9375rem; line-height: 1.6; color: var(--h-ink-2); margin: 0; } .home-v2 .team-card__work-label { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 0.6rem 0 0; } .home-v2 .team-card__work-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .home-v2 .team-card__work-list li { font-size: 0.9375rem; line-height: 1.45; color: var(--h-ink); position: relative; padding-left: 1.25rem; } .home-v2 .team-card__work-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--h-mid); font-weight: 700; } .home-v2 .team-card__close { font-size: 0.875rem; line-height: 1.5; color: var(--h-ink-3); font-style: italic; margin: 0.75rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--h-line); } /* =================================================================== ANSPRUCH-BLOCK — kleine Sektion nach Geschäftsführung =================================================================== */ .home-v2 .anspruch-block { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--h-line); max-width: 56rem; } .home-v2 .anspruch-block__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--h-ink); line-height: 1.2; margin: 0 0 1rem; } .home-v2 .anspruch-block p { font-size: 1rem; line-height: 1.6; color: var(--h-ink-2); margin: 0 0 1rem; } .home-v2 .anspruch-block__list-label { font-family: var(--sans); font-size: 0.6875rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 1.25rem 0 0.6rem !important; } .home-v2 .anspruch-block__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .home-v2 .anspruch-block__list li { font-size: 1rem; line-height: 1.5; color: var(--h-ink); position: relative; padding-left: 1.5rem; } .home-v2 .anspruch-block__list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--h-mid); font-weight: 700; } /* =================================================================== VALUES-GRID Closing + CTA =================================================================== */ .home-v2 .values-grid__close { font-size: 1.0625rem; line-height: 1.55; color: var(--h-ink-2); font-style: italic; max-width: 48rem; margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--h-line); } .home-v2 .values-grid__cta { margin-top: 1.5rem; } /* =================================================================== CREDS-GRID Note (z. B. GEG-Quali als Zusatzhinweis) =================================================================== */ .home-v2 .creds-grid__note { font-size: 0.9375rem; line-height: 1.55; color: var(--h-ink-2); margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--h-line); max-width: 56rem; } /* =================================================================== DOMAIN-LIST — kleine Pills für „Wir arbeiten an komplexen Systemen in:" =================================================================== */ .home-v2 .domain-list__label { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 0 0 1rem; } .home-v2 .domain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; } .home-v2 .domain-pill { display: inline-flex; align-items: center; padding: 0.6rem 1.1rem; background: var(--h-paper); border: 1px solid var(--h-line); border-left: 4px solid var(--h-dark); font-size: 0.9375rem; font-weight: 500; color: var(--h-ink); } /* =================================================================== ANALYSIS-LIST — „Unsere Analysen umfassen u. a." =================================================================== */ .home-v2 .analysis-list__label { font-family: var(--sans); font-size: 0.6875rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 1.5rem 0 0.75rem !important; } .home-v2 .analysis-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem; } @media (min-width: 540px) { .home-v2 .analysis-list { grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; } } .home-v2 .analysis-list li { font-size: 0.9375rem; line-height: 1.45; color: var(--h-ink); position: relative; padding-left: 1.25rem; } .home-v2 .analysis-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--h-mid); font-weight: 700; } /* ===================================================================== POST-AUDIT (2026-05-01): Touch-Targets + Mobile + SVG-Animationen Verifiziert via accessibility-lead, contrast-master, mobile-accessibility ===================================================================== */ /* --- Touch-Targets: WCAG 2.2 SC 2.5.8 (24x24 min) + Mobile-Best-Practice (44x44) --- */ /* Side-Index links: 6 Items eng gestapelt — Padding hoch */ .home-v2 .side-index__item { padding-block: 0.6rem; min-height: 28px; } /* Sticky-CTA: Anfrage-Button und Tel-Link */ .home-v2 .sticky-cta__btn, .home-v2 .sticky-cta__tel, .home-v2 .sticky-cta .btn, .sticky-cta__btn, .sticky-cta__tel { min-height: 44px; display: inline-flex; align-items: center; } /* Maps-Loader Button (Kontakt-Seite) */ .home-v2 .maps-loader__btn, .maps-loader__btn { min-height: 44px; display: inline-flex; align-items: center; } /* --- Mobile-Optimierung: Layout, Abstände, Lesbarkeit --- */ @media (max-width: 640px) { /* Hero: kompakteres Padding, engerer Title */ .home-v2 .hero-v2 { padding-block: 4rem 3rem; } .home-v2 .hero-v2__title { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.05; } .home-v2 .hero-v2__lede { font-size: 1rem; line-height: 1.55; } /* CTA-Buttons im Hero: full-width und gestapelt */ .home-v2 .hero-v2__cta { flex-direction: column; align-items: stretch; gap: 0.75rem; } .home-v2 .hero-v2__cta .btn-primary, .home-v2 .hero-v2__cta .btn-ghost { width: 100%; justify-content: center; min-height: 48px; } /* Sektion-Abstände komprimieren */ .home-v2 .sect { padding-block: 3.5rem; } .home-v2 .sect__title, .home-v2 .about-title { font-size: clamp(1.5rem, 6.5vw, 2rem); } /* Side-Index auf Mobile ausblenden — Inhaltsverzeichnis stört auf schmalen Screens */ .home-v2 .side-index { display: none; } /* KPI-Block: 2 Spalten statt 4 */ .home-v2 .kpis { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } /* Final-CTA: Buttons stapeln */ .home-v2 .final-cta__row { flex-direction: column; align-items: stretch; gap: 0.75rem; } .home-v2 .final-cta__row .btn-primary, .home-v2 .final-cta__row .btn-tel { width: 100%; justify-content: center; min-height: 48px; } /* Footer: kompakterer Block-Padding */ .home-v2 .home-footer.is-pumped > .container, .home-v2 .home-footer:has(.hf-grid) > .container { padding-block: 2rem 1rem; } /* Footer Brand-Row: Logo links, Kontakt unten (gestapelt) */ .home-v2 .home-footer .hf-brand-row { padding-block: 1.25rem 1rem; } } /* --- SVG-Animationen: digitaler Touch im dunklen Footer --- */ /* Daten-Grid-Pattern hinter Brand-Row + Pulsierender Data-Node */ .home-v2 .home-footer.is-pumped .hf-brand-row { position: relative; isolation: isolate; } .home-v2 .home-footer.is-pumped .hf-brand-row::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(rgba(199, 226, 100, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.05) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; mask-image: radial-gradient(ellipse 80% 60% at 70% 50%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 50%, #000 0%, transparent 75%); opacity: 0.7; } /* Hf-Wordmark: dezent durchlaufender Highlight-Sweep */ .home-v2 .home-footer.is-pumped .hf-wordmark { position: relative; overflow: hidden; } .home-v2 .home-footer.is-pumped .hf-wordmark::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 30%, rgba(199, 226, 100, 0.08) 45%, rgba(199, 226, 100, 0.18) 50%, rgba(199, 226, 100, 0.08) 55%, transparent 70% ); background-size: 250% 100%; background-position: 100% 0; animation: hfWordmarkSweep 9s ease-in-out infinite; pointer-events: none; } @keyframes hfWordmarkSweep { 0%, 20% { background-position: 200% 0; } 60%, 100% { background-position: -100% 0; } } /* Final-CTA: subtiles Daten-Grid-Pattern (ergänzt das bestehende dunkle Section) */ .home-v2 .final-cta { position: relative; isolation: isolate; } .home-v2 .final-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(rgba(199, 226, 100, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.04) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 0%, transparent 80%); } /* WCAG 2.3.3 / prefers-reduced-motion: alle neuen Animationen abschalten */ @media (prefers-reduced-motion: reduce) { .home-v2 .home-footer.is-pumped .hf-wordmark::after { animation: none; background: none; } } /* ===================================================================== CTA-KNALL-MODUL (2026-05-01) Primary-CTAs sollen direkt ins Auge springen — Glow, Pulse, Shine, Spring-Hover. Wirkt nur auf .btn-primary in dunklen Sections (final-cta, ph-hero, hero-v2). Alles via prefers-reduced-motion abschaltbar. ===================================================================== */ /* --- Final-CTA: Engineering-Grid (Hero-Sprache) --- Statisches Grid-Pattern + zentrale Brand-Aura. Reagiert auf Button-Hover/Focus via :has() — Grid leuchtet dann auf. Kein Diagonal-Scan, kein Kicker-Beam mehr. */ .home-v2 .final-cta { background: var(--h-deep); isolation: isolate; } .home-v2 .final-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; /* Engineering-Grid wie .hero-v2__grid-bg */ background-image: linear-gradient(rgba(199, 226, 100, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.05) 1px, transparent 1px); background-size: 40px 40px; /* Sanfte Vignette — Grid an den Rändern dunkler */ mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 95%); opacity: 0.7; transition: opacity 500ms ease, background-size 500ms ease; pointer-events: none; } /* Brand-Aura zentral — überlagert das Grid */ .home-v2 .final-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 380px at 50% 50%, rgba(199, 226, 100, 0.10), transparent 65%), radial-gradient(900px 360px at 50% 0%, rgba(199, 226, 100, 0.08), transparent 70%), radial-gradient(700px 360px at 50% 100%, rgba(111, 174, 101, 0.08), transparent 70%); pointer-events: none; transition: opacity 500ms ease; } /* Hover/Focus auf Primary-CTA → Grid leuchtet auf, Aura intensiver. :focus-within deckt Tastatur-User ab; :has() macht Hover ohne JS möglich. */ .home-v2 .final-cta:has(.btn-primary:hover)::before, .home-v2 .final-cta:has(.btn-primary:focus-visible)::before, .home-v2 .final-cta:focus-within::before { opacity: 1; background-image: linear-gradient(rgba(199, 226, 100, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.12) 1px, transparent 1px); } .home-v2 .final-cta:has(.btn-primary:hover)::after, .home-v2 .final-cta:has(.btn-primary:focus-visible)::after, .home-v2 .final-cta:focus-within::after { opacity: 1.3; } /* --- Datasheet-Frame: Corner-Brackets oben + unten (Hero-Sprache) --- Die 4 Spans sind im HTML als und werden hier zu L-Brackets gerendert. Wenn die Spans fehlen, fällt alles graceful zurück (kein Layout-Schaden). */ .home-v2 .final-cta { position: relative; } .home-v2 .final-cta .cta-corner { position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 2; color: rgba(199, 226, 100, 0.55); transition: color 350ms ease, transform 350ms ease; } .home-v2 .final-cta .cta-corner::before, .home-v2 .final-cta .cta-corner::after { content: ""; position: absolute; background: currentColor; } .home-v2 .final-cta .cta-corner::before { width: 100%; height: 1px; } .home-v2 .final-cta .cta-corner::after { width: 1px; height: 100%; } .home-v2 .final-cta .cta-corner--tl { top: 24px; left: 24px; } .home-v2 .final-cta .cta-corner--tl::before { top: 0; left: 0; } .home-v2 .final-cta .cta-corner--tl::after { top: 0; left: 0; } .home-v2 .final-cta .cta-corner--tr { top: 24px; right: 24px; } .home-v2 .final-cta .cta-corner--tr::before { top: 0; right: 0; } .home-v2 .final-cta .cta-corner--tr::after { top: 0; right: 0; } .home-v2 .final-cta .cta-corner--bl { bottom: 24px; left: 24px; } .home-v2 .final-cta .cta-corner--bl::before { bottom: 0; left: 0; } .home-v2 .final-cta .cta-corner--bl::after { bottom: 0; left: 0; } .home-v2 .final-cta .cta-corner--br { bottom: 24px; right: 24px; } .home-v2 .final-cta .cta-corner--br::before { bottom: 0; right: 0; } .home-v2 .final-cta .cta-corner--br::after { bottom: 0; right: 0; } .home-v2 .final-cta:has(.btn-primary:hover) .cta-corner, .home-v2 .final-cta:has(.btn-primary:focus-visible) .cta-corner, .home-v2 .final-cta:focus-within .cta-corner { color: var(--h-light); transform: scale(1.15); } /* Datasheet-Labels in den Ecken — Monospace, leicht versetzt zu den Brackets */ .home-v2 .final-cta .cta-label { position: absolute; font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 0.6875rem; letter-spacing: 0.2em; font-weight: 500; color: rgba(199, 226, 100, 0.55); pointer-events: none; z-index: 2; transition: color 350ms ease; } .home-v2 .final-cta .cta-label--tl { top: 28px; left: 60px; } .home-v2 .final-cta .cta-label--tr { top: 28px; right: 60px; } .home-v2 .final-cta .cta-label--br { bottom: 28px; right: 60px; } .home-v2 .final-cta:has(.btn-primary:hover) .cta-label, .home-v2 .final-cta:has(.btn-primary:focus-visible) .cta-label, .home-v2 .final-cta:focus-within .cta-label { color: var(--h-light); } /* LIVE-Badge in der Top-Right-Ecke (Hero-Sprache) */ .home-v2 .final-cta .cta-live { position: absolute; top: 28px; right: 60px; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 0.6875rem; letter-spacing: 0.2em; font-weight: 500; color: var(--h-light); pointer-events: none; z-index: 2; } .home-v2 .final-cta .cta-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--h-light); box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.6); animation: ctaLivePulse 2.4s ease-out infinite; } @keyframes ctaLivePulse { 0% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(199, 226, 100, 0); } 100% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0); } } /* Mobile: Brackets enger, Labels weg um Title-Lesbarkeit zu schützen */ @media (max-width: 720px) { .home-v2 .final-cta .cta-corner { width: 18px; height: 18px; } .home-v2 .final-cta .cta-corner--tl { top: 16px; left: 16px; } .home-v2 .final-cta .cta-corner--tr { top: 16px; right: 16px; } .home-v2 .final-cta .cta-corner--bl { bottom: 16px; left: 16px; } .home-v2 .final-cta .cta-corner--br { bottom: 16px; right: 16px; } .home-v2 .final-cta .cta-label, .home-v2 .final-cta .cta-live { display: none; } } /* --- Primary CTA-Button: Static, ohne Aura/Pulse/Shine (User-Wunsch 2026-05-08) --- Wirkt nur auf .final-cta__row .btn-primary. Hover/Focus bleiben aktiv. */ .home-v2 .final-cta__row .btn-primary { position: relative; isolation: isolate; background: var(--h-light); color: var(--h-deep); border: 1.5px solid var(--h-light); font-weight: 700; letter-spacing: -0.005em; box-shadow: 0 12px 36px -14px rgba(199, 226, 100, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease; overflow: hidden; } /* Pfeil-Verhalten: subtle translate auf Hover */ .home-v2 .final-cta__row .btn-primary::after { transition: transform 200ms ease; position: relative; z-index: 2; } /* Hover/Focus: clean, kein Glow (User-Wunsch 2026-05-08) */ .home-v2 .final-cta__row .btn-primary:hover, .home-v2 .final-cta__row .btn-primary:focus-visible { background-color: #FFFFFF; border-color: #FFFFFF; color: var(--h-deep); transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); outline: none; } .home-v2 .final-cta__row .btn-primary:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; } .home-v2 .final-cta__row .btn-primary:active { transform: translateY(0); transition-duration: 80ms; } .home-v2 .final-cta__row .btn-primary:hover::after { transform: translateX(4px); } /* H3 unter about-content (Sub-Heading vor about-cred dl) — Divider-Linie sitzt OBERHALB des Headings */ .home-v2 .about-cred__heading { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-ink-3); font-weight: 600; margin: 2rem 0 0; padding-top: 2rem; border-top: 1px solid var(--h-line); } .home-v2 .about-cred__heading + .about-cred { margin-top: 0.75rem; padding-top: 0; border-top: none; } /* --- Sekundär-CTA: nur Final-CTA bekommt den Border-Pulse — Hero-Ghost bleibt schlicht --- */ .home-v2 .final-cta__row .btn-tel { position: relative; isolation: isolate; border-color: rgba(199, 226, 100, 0.55); transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1), background 200ms ease, border-color 240ms ease, box-shadow 240ms ease; } .home-v2 .final-cta__row .btn-tel::before { content: ""; position: absolute; inset: -1px; border: 1.5px solid var(--h-light); border-radius: inherit; opacity: 0; transform: scale(1); transition: opacity 200ms ease; pointer-events: none; animation: ctaSecondaryRing 3s ease-out infinite; animation-delay: 1.3s; } @keyframes ctaSecondaryRing { 0% { opacity: 0.6; transform: scale(1); } 70% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.08); } } .home-v2 .final-cta__row .btn-tel:hover, .home-v2 .final-cta__row .btn-tel:focus-visible, .home-v2 .hero-v2__cta .btn-ghost:hover, .home-v2 .hero-v2__cta .btn-ghost:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: var(--h-light); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 36px -12px rgba(199, 226, 100, 0.4); outline: none; } .home-v2 .final-cta__row .btn-tel:focus-visible, .home-v2 .hero-v2__cta .btn-ghost:focus-visible { outline: 2px solid var(--h-light); outline-offset: 4px; } /* --- Sticky-CTA (mobile) auch verstärken --- */ .home-v2 .sticky-cta__btn, .sticky-cta__btn { position: relative; background: #FFFFFF !important; color: var(--kk-dark) !important; font-weight: 700; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4), 0 8px 24px -6px rgba(255, 255, 255, 0.45); transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 220ms ease; } .home-v2 .sticky-cta__btn:hover, .home-v2 .sticky-cta__btn:focus-visible, .sticky-cta__btn:hover, .sticky-cta__btn:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18), 0 14px 28px -6px rgba(255, 255, 255, 0.55); } /* --- prefers-reduced-motion: ALLE neuen CTA-Animationen abschalten --- */ @media (prefers-reduced-motion: reduce) { .home-v2 .final-cta__row .btn-primary, .home-v2 .hero-v2__cta .btn-primary, .home-v2 .final-cta__row .btn-primary::before, .home-v2 .hero-v2__cta .btn-primary::before, .home-v2 .final-cta__row .btn-tel::before, .home-v2 .hero-v2__cta .btn-ghost::before, .home-v2 .sticky-cta__btn, .home-v2 .final-cta .cta-live__dot { animation: none !important; } /* Statisches Background nach Pause wiederherstellen */ .home-v2 .final-cta__row .btn-primary, .home-v2 .hero-v2__cta .btn-primary { background-image: none; background-color: var(--h-light); } .home-v2 .final-cta__row .btn-primary::before, .home-v2 .hero-v2__cta .btn-primary::before { opacity: 0.4; } /* Hover-trigger Übergänge auf Reduced-Motion entfernen */ .home-v2 .final-cta::before, .home-v2 .final-cta::after, .home-v2 .final-cta .cta-corner, .home-v2 .final-cta .cta-label { transition: none; } } /* ===================================================================== FORM-INNOVATION-MODUL (2026-05-01) Innovative Multistep-Form mit Datasheet-Frame, Step-Nodes-Schema, animierter Progress-Bar, Slide-Transitions, Field-FX, Char-Counter, Stamp-Success. Re-usable für mehrere Forms via .form-shell-v2 Klasse. ===================================================================== */ /* Form-Shell-Container — bekommt 4 Corner-Brackets (datasheet) */ .home-v2 .form-shell-v2 { position: relative; isolation: isolate; margin-block: 1.25rem; } /* Datasheet-Corner-Brackets um den Form-Container */ .home-v2 .form-shell-v2::before, .home-v2 .form-shell-v2::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 1; } .home-v2 .form-shell-v2::before { top: -9px; left: -9px; border-top: 1px solid var(--h-light); border-left: 1px solid var(--h-light); } .home-v2 .form-shell-v2::after { bottom: -9px; right: -9px; border-bottom: 1px solid var(--h-light); border-right: 1px solid var(--h-light); } /* Zwei zusätzliche Corner-Brackets via Wrapper-Pseudoelemente */ .home-v2 .form-shell-v2 > .form-shell-v2__frame { position: relative; } .home-v2 .form-shell-v2 > .form-shell-v2__frame::before, .home-v2 .form-shell-v2 > .form-shell-v2__frame::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 1; } .home-v2 .form-shell-v2 > .form-shell-v2__frame::before { top: -9px; right: -9px; border-top: 1px solid var(--h-light); border-right: 1px solid var(--h-light); } .home-v2 .form-shell-v2 > .form-shell-v2__frame::after { bottom: -9px; left: -9px; border-bottom: 1px solid var(--h-light); border-left: 1px solid var(--h-light); } /* Datasheet-Label oben (z.B. "FORM / 3-STEP / V2") */ .home-v2 .form-shell-v2__label { position: absolute; top: -0.5rem; left: 1.5rem; background: var(--h-soft); padding: 0 0.6rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.22em; font-weight: 500; color: var(--h-dark); z-index: 2; } /* Step-Nodes Schema (3 animierte Nodes wie Hero) — über der Form */ .home-v2 .form-stepnodes { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 2rem; padding: 0 0.5rem; position: relative; } .home-v2 .form-stepnodes::before { content: ""; position: absolute; left: 12%; right: 12%; top: 24px; height: 1px; background: linear-gradient(90deg, rgba(199, 226, 100, 0.4), rgba(199, 226, 100, 0.2) 50%, rgba(199, 226, 100, 0.4)); z-index: 0; } .home-v2 .form-stepnodes__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; flex: 1; z-index: 1; } .home-v2 .form-stepnodes__node { width: 48px; height: 48px; border-radius: 50%; background: var(--h-deep); border: 1.5px solid rgba(199, 226, 100, 0.4); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.875rem; font-weight: 600; color: rgba(199, 226, 100, 0.6); transition: all 350ms cubic-bezier(0.34, 1.4, 0.64, 1); } .home-v2 .form-stepnodes__label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(7, 58, 6, 0.55); font-weight: 500; text-align: center; } .home-v2 .form-stepnodes__item.is-done .form-stepnodes__node { background: var(--h-light); border-color: var(--h-light); color: var(--h-deep); } .home-v2 .form-stepnodes__item.is-active .form-stepnodes__node { background: var(--h-deep); border-color: var(--h-light); color: var(--h-light); box-shadow: 0 0 0 6px rgba(199, 226, 100, 0.15), 0 8px 22px -8px rgba(199, 226, 100, 0.5); transform: scale(1.08); animation: formNodePulse 2.4s ease-out infinite; } .home-v2 .form-stepnodes__item.is-active .form-stepnodes__label { color: var(--h-dark); font-weight: 600; } @keyframes formNodePulse { 0% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.55), 0 8px 22px -8px rgba(199, 226, 100, 0.5); } 60% { box-shadow: 0 0 0 16px rgba(199, 226, 100, 0), 0 8px 22px -8px rgba(199, 226, 100, 0.5); } 100% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0), 0 8px 22px -8px rgba(199, 226, 100, 0.5); } } /* Animated Progress-Bar (filling gradient, role="progressbar") */ .home-v2 .form__progress--v2 { position: relative; height: 3px; background: var(--h-line); border-radius: 0; overflow: hidden; margin: 0 0 1.75rem; } .home-v2 .form__progress--v2::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--progress, 33%); background: linear-gradient(90deg, var(--h-mid), var(--h-light)); transition: width 600ms cubic-bezier(0.65, 0, 0.35, 1); box-shadow: 0 0 12px rgba(199, 226, 100, 0.6); } .home-v2 .form__progress--v2::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 30px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: translateX(calc(var(--progress-px, 0px) - 15px)); transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; } /* Field-Focus-Pulse Ring — subtle 1.5Hz, WCAG safe */ .home-v2 .form .field { position: relative; } .home-v2 .form .field input:focus, .home-v2 .form .field select:focus, .home-v2 .form .field textarea:focus { animation: fieldFocusPulse 1.4s ease-in-out infinite; } @keyframes fieldFocusPulse { 0%, 100% { box-shadow: 0 1px 0 0 var(--kk-dark), 0 0 0 0 rgba(7, 58, 6, 0.0); } 50% { box-shadow: 0 1px 0 0 var(--kk-dark), 0 0 0 4px rgba(199, 226, 100, 0.18); } } /* Validity-Checkmark (visual only, kein SR-Spam) */ .home-v2 .form .field__check { position: absolute; right: 0; top: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(199, 226, 100, 0.15); color: var(--h-dark); font-size: 0.875rem; font-weight: 700; opacity: 0; transform: scale(0.7); transition: opacity 250ms ease, transform 250ms cubic-bezier(0.34, 1.6, 0.64, 1); pointer-events: none; } .home-v2 .form .field.is-valid .field__check { opacity: 1; transform: scale(1); background: var(--h-light); } /* Char-Counter für Textarea (aria-live polite, nur unter <100 Rest) */ .home-v2 .form .field__counter { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--ink-mute); text-align: right; margin-top: 0.35rem; font-variant-numeric: tabular-nums; } .home-v2 .form .field__counter.is-warning { color: #b06800; } .home-v2 .form .field__counter.is-danger { color: #7a0e0e; font-weight: 600; } /* Slide-Transition zwischen Steps */ .home-v2 .form .form__step { animation: stepEnter 380ms cubic-bezier(0.34, 1.2, 0.64, 1) both; } .home-v2 .form .form__step[hidden] { display: none; } @keyframes stepEnter { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } /* Step-Headings: visuell hochwertiger */ .home-v2 .form .form__step h2, .home-v2 .form .form__step h3 { font-family: var(--sans); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--h-deep); margin: 0 0 1.5rem; } /* Success-Panel mit Datasheet-Stamp */ .home-v2 .form__success--stamp { position: relative; background: var(--h-soft); border: 1px solid var(--h-light); padding: 3rem 2.5rem; text-align: center; overflow: hidden; animation: successEnter 600ms cubic-bezier(0.34, 1.4, 0.64, 1) both; } .home-v2 .form__success--stamp::before { content: "✓"; display: block; font-size: 4rem; line-height: 1; color: var(--h-light); margin: 0 auto 1.25rem; width: 80px; height: 80px; border-radius: 50%; background: var(--h-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; animation: successCheckmark 800ms cubic-bezier(0.34, 1.6, 0.64, 1) both; animation-delay: 200ms; } .home-v2 .form__success--stamp::after { content: "ANFRAGE / EINGEGANGEN — REV. 2026"; position: absolute; top: 1rem; right: 1rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.22em; color: rgba(7, 58, 6, 0.4); pointer-events: none; } .home-v2 .form__success--stamp h2 { margin: 0 0 0.85rem; color: var(--h-deep); } @keyframes successEnter { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes successCheckmark { 0% { opacity: 0; transform: scale(0); } 60% { transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } /* Form-Buttons: Engineering-Style mit Spring-Hover */ .home-v2 .form .btn, .home-v2 .form .btn--ghost, .home-v2 .form .btn-arrow { transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), background 200ms ease, box-shadow 240ms ease; } .home-v2 .form .btn-arrow:hover, .home-v2 .form .btn-arrow:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(7, 58, 6, 0.4); } /* Form-Header above the form (Service-Specific) */ .home-v2 .form-header { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; } @media (min-width: 720px) { .home-v2 .form-header { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } } .home-v2 .form-header__copy { max-width: 60ch; } .home-v2 .form-usp { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 1.5rem; list-style: none; background: var(--h-soft); border-left: 3px solid var(--h-light); } .home-v2 .form-usp__item { display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.9375rem; line-height: 1.45; color: var(--h-ink); } .home-v2 .form-usp__item::before { content: "→"; flex-shrink: 0; color: var(--h-mid); font-weight: 700; font-size: 1rem; line-height: 1.4; } .home-v2 .form-usp__item strong { display: block; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.15rem; color: var(--h-deep); } /* prefers-reduced-motion Block für Form-Innovationen */ @media (prefers-reduced-motion: reduce) { .home-v2 .form-stepnodes__item.is-active .form-stepnodes__node, .home-v2 .form .field input:focus, .home-v2 .form .field select:focus, .home-v2 .form .field textarea:focus, .home-v2 .form .form__step, .home-v2 .form__success--stamp, .home-v2 .form__success--stamp::before { animation: none !important; } .home-v2 .form__progress--v2::before, .home-v2 .form__progress--v2::after { transition: none; } .home-v2 .form-stepnodes__node { transition: none; } } /* ===================================================================== FORM-CARDS — Multi-Select Card-Grid (Engineering-Datasheet) 3×3 Grid, gleiche Höhe via auto-rows, Keyboard 1-9 Shortcuts. Visual: Datasheet-Cards mit Corner-Brackets bei Hover/Checked. ===================================================================== */ .home-v2 .form-cards { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; } .home-v2 .form-cards__legend { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.01em; color: var(--ink); margin: 0 0 0.5rem; padding: 0; display: block; } .home-v2 .form-cards__hint { font-family: var(--sans); font-size: var(--fs-mu); color: var(--ink-mute); margin: 0 0 0.4rem; letter-spacing: 0.01em; } .home-v2 .form-cards__kbdhint { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(7, 58, 6, 0.45); margin: 0 0 1rem; } .home-v2 .form-cards__grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; /* Cards same height baseline */ gap: 0.6rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 540px) { .home-v2 .form-cards__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 820px) { .home-v2 .form-cards__grid { grid-template-columns: repeat(3, 1fr); } } /* 2-Spalten-Variante für 4-Card-Layouts (z.B. Zeitrahmen) */ .home-v2 .form-cards__grid--2col { grid-template-columns: 1fr; } @media (min-width: 540px) { .home-v2 .form-cards__grid--2col { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 820px) { .home-v2 .form-cards__grid--2col { grid-template-columns: repeat(2, 1fr); } } .home-v2 .form-cards__grid > li { display: flex; } /* Single Card: wraps SR-only checkbox + visual */ .home-v2 .form-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; width: 100%; padding: 1.05rem 1.15rem; background: rgba(199, 226, 100, 0.025); border: 1px solid rgba(199, 226, 100, 0.20); cursor: pointer; user-select: none; isolation: isolate; transition: background 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 220ms ease; } .home-v2 .form-card__cb { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .home-v2 .form-card__icon { font-size: 1.4rem; line-height: 1; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; filter: grayscale(0.05); transition: transform 240ms cubic-bezier(0.34, 1.6, 0.64, 1); } .home-v2 .form-card__label { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; color: var(--h-deep); line-height: 1.2; } .home-v2 .form-card__sub { display: block; font-weight: 400; font-size: 0.75rem; color: var(--ink-mute); margin-top: 0.15rem; letter-spacing: 0.01em; } .home-v2 .form-card__kbd { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; color: rgba(7, 58, 6, 0.5); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(7, 58, 6, 0.18); background: transparent; flex-shrink: 0; transition: all 220ms ease; } /* Datasheet Corner-Brackets — nur sichtbar bei Hover/Checked */ .home-v2 .form-card::before, .home-v2 .form-card::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; opacity: 0; transition: opacity 220ms ease; } .home-v2 .form-card::before { top: -1px; left: -1px; border-top: 1.5px solid var(--h-light); border-left: 1.5px solid var(--h-light); } .home-v2 .form-card::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--h-light); border-right: 1.5px solid var(--h-light); } /* Hover */ .home-v2 .form-card:hover { background: rgba(199, 226, 100, 0.08); border-color: rgba(199, 226, 100, 0.5); transform: translateY(-1px); } .home-v2 .form-card:hover::before, .home-v2 .form-card:hover::after { opacity: 0.65; } .home-v2 .form-card:hover .form-card__icon { transform: scale(1.08); } /* Focus (via :focus-within auf Label, da Checkbox SR-only) */ .home-v2 .form-card:focus-within { outline: 2px solid var(--h-light); outline-offset: 3px; border-color: var(--h-light); } .home-v2 .form-card:focus-within::before, .home-v2 .form-card:focus-within::after { opacity: 1; } /* Checked-State */ .home-v2 .form-card:has(input:checked) { background: rgba(199, 226, 100, 0.18); border-color: var(--h-light); border-width: 1px; box-shadow: inset 0 0 0 1px var(--h-light), 0 4px 14px -6px rgba(7, 58, 6, 0.18); } .home-v2 .form-card:has(input:checked)::before, .home-v2 .form-card:has(input:checked)::after { opacity: 1; } .home-v2 .form-card:has(input:checked) .form-card__kbd { background: var(--h-deep); border-color: var(--h-deep); color: var(--h-light); } /* Visueller Check-Indikator (kleiner Punkt rechts wenn checked) */ .home-v2 .form-card:has(input:checked) .form-card__icon::after { content: "✓"; position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--h-deep); color: var(--h-light); font-size: 0.625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .home-v2 .form-card__icon { position: relative; } /* Disabled (z.B. Sonstiges deaktiviert in bestimmten Kontexten) */ .home-v2 .form-card:has(input:disabled) { opacity: 0.45; cursor: not-allowed; } /* Active-Press */ .home-v2 .form-card:active { transform: translateY(0) scale(0.99); transition-duration: 80ms; } /* Group-Error-State (wenn keine Card gewählt + Step-Validation fehlgeschlagen) */ .home-v2 .form-cards.is-invalid .form-card { border-color: rgba(122, 14, 14, 0.4); } .home-v2 .form-cards.is-invalid .form-cards__legend { color: #7a0e0e; } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .home-v2 .form-card, .home-v2 .form-card__icon, .home-v2 .form-card::before, .home-v2 .form-card::after, .home-v2 .form-card__kbd { transition: none; } } /* ============================================================ Touch-Optimierung — Anfrage-Form (gilt zusätzlich zu Mobile-CSS in main.css, deckt große Touch-Geräte wie iPad Landscape ab) ============================================================ */ @media (hover: none) and (pointer: coarse) { .home-v2 .form-cards__kbdhint, .home-v2 .form-card__kbd { display: none; } .home-v2 .form-card { grid-template-columns: auto 1fr; } } @media (max-width: 539px) { .home-v2 .form-stepnodes__label { font-size: clamp(0.625rem, 2.2vw, 0.6875rem); letter-spacing: 0.1em; } } /* Mobile-Form: vertical Card-Stack, kbd-Hints aus, mehr Platz fürs Label */ @media (max-width: 767px) { .home-v2 .form-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0.85rem 0.85rem 0.95rem; gap: 0.45rem; } .home-v2 .form-card__icon { font-size: 1.05rem; width: 22px; height: 22px; margin-bottom: 0.1rem; } .home-v2 .form-card__label { font-size: 0.875rem; line-height: 1.22; overflow-wrap: break-word; hyphens: auto; } .home-v2 .form-card__sub { font-size: 0.68rem; margin-top: 0.15rem; line-height: 1.3; } .home-v2 .form-card__kbd, .home-v2 .form-cards__kbdhint { display: none; } } /* ===================================================================== FORM-CONFIGURATOR — Dark Engineering-Datasheet Variante .form-shell-v2--dark wrapper. Dunkler Hintergrund mit Grid, Form-Header mit Eyebrow + Title + Duration-Pill, 4-Step-Nodes, Trust-Strip am Ende. ===================================================================== */ /* Wrapper-Section um die ganze Konfigurator-Struktur (replaces sect--soft) */ .home-v2 .config-section { background: var(--h-deep); color: #FFFFFF; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: calc(-1 * var(--topbar-offset)); } .home-v2 .config-section::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(199, 226, 100, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 226, 100, 0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 95% 80% at 50% 40%, #000 30%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 40%, #000 30%, transparent 95%); opacity: 0.85; pointer-events: none; } .home-v2 .config-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 400px at 70% 10%, rgba(199, 226, 100, 0.10), transparent 65%), radial-gradient(600px 350px at 30% 90%, rgba(111, 174, 101, 0.08), transparent 60%); pointer-events: none; } /* Form-Header: Eyebrow + Title + Icon + Duration-Pill */ .home-v2 .config-header { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: end; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(199, 226, 100, 0.18); position: relative; } @media (min-width: 720px) { .home-v2 .config-header { grid-template-columns: 1fr auto; gap: 2rem; } } .home-v2 .config-header__main { display: flex; align-items: center; gap: 1rem; min-width: 0; } .home-v2 .config-header__icon { flex-shrink: 0; width: 56px; height: 56px; border: 1px solid rgba(199, 226, 100, 0.4); background: radial-gradient(circle at 50% 50%, rgba(199, 226, 100, 0.12), transparent 70%), rgba(199, 226, 100, 0.04); display: inline-flex; align-items: center; justify-content: center; position: relative; } .home-v2 .config-header__icon::before, .home-v2 .config-header__icon::after { content: ""; position: absolute; width: 6px; height: 6px; pointer-events: none; } .home-v2 .config-header__icon::before { top: -1px; left: -1px; border-top: 1px solid var(--h-light); border-left: 1px solid var(--h-light); } .home-v2 .config-header__icon::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--h-light); border-right: 1px solid var(--h-light); } .home-v2 .config-header__icon svg { width: 28px; height: 28px; color: var(--h-light); } .home-v2 .config-header__copy { min-width: 0; } .home-v2 .config-header__eyebrow { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--h-light); font-weight: 500; margin: 0 0 0.4rem; display: inline-flex; align-items: center; gap: 0.6rem; } .home-v2 .config-header__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--h-light); display: inline-block; } .home-v2 .config-header__title { font-family: var(--sans); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: #FFFFFF; margin: 0; } .home-v2 .config-header__title em { font-style: normal; font-weight: 600; color: var(--h-light); } .home-v2 .config-header__pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border: 1px solid rgba(199, 226, 100, 0.55); border-radius: 999px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 500; color: var(--h-light); background: rgba(199, 226, 100, 0.04); white-space: nowrap; } .home-v2 .config-header__pill svg { width: 14px; height: 14px; } /* Step-Nodes Schema überarbeitet — Dark theme + 4 Items */ .home-v2 .config-section .form-stepnodes { margin-block: 1.5rem 2.5rem; padding: 0; } .home-v2 .config-section .form-stepnodes::before { background: linear-gradient(90deg, rgba(199, 226, 100, 0.45), rgba(199, 226, 100, 0.18) 50%, rgba(199, 226, 100, 0.45)); } .home-v2 .config-section .form-stepnodes__node { background: var(--h-deep); border-color: rgba(199, 226, 100, 0.35); color: rgba(199, 226, 100, 0.7); } .home-v2 .config-section .form-stepnodes__label { color: rgba(255, 255, 255, 0.55); font-weight: 500; } .home-v2 .config-section .form-stepnodes__item.is-active .form-stepnodes__label { color: #FFFFFF; font-weight: 600; } .home-v2 .config-section .form-stepnodes__item.is-done .form-stepnodes__node { background: var(--h-light); border-color: var(--h-light); color: var(--h-deep); } /* Form-Shell-V2 dark override — sonst zeigt das default white durch max-width: none → volle Container-Breite (statt 760px zentriert) */ .home-v2 .config-section .form-shell-v2 { background: transparent; border: 0; padding: 0; max-width: none; width: 100%; } .home-v2 .config-section .form-shell-v2__frame { background: transparent; } /* Form auf dunklem Hintergrund — solides dunkles Backing, kein white-bleed */ .home-v2 .config-section .form { background: var(--h-deep); border: 1px solid rgba(199, 226, 100, 0.22); padding: clamp(1.75rem, 3vw, 2.75rem); position: relative; isolation: isolate; box-shadow: 0 8px 40px -16px rgba(0, 0, 0, 0.55); } /* Datasheet-Corners auf dem Form-Container */ .home-v2 .config-section .form::before, .home-v2 .config-section .form::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; } .home-v2 .config-section .form::before { top: -1px; left: -1px; border-top: 1px solid var(--h-light); border-left: 1px solid var(--h-light); } .home-v2 .config-section .form::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--h-light); border-right: 1px solid var(--h-light); } .home-v2 .config-section .form__legend { color: rgba(255, 255, 255, 0.55); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; } .home-v2 .config-section .form .form__step h2, .home-v2 .config-section .form .form__step h3 { color: #FFFFFF; } .home-v2 .config-section .form .form__step-indicator { color: var(--h-light); } /* Inputs dark theme — max-width für Lesbarkeit auch in voller Form-Breite (a11y-lead: Single-Line-Inputs auf 60ch, Textarea auf 75ch begrenzen) */ .home-v2 .config-section .form input[type="text"], .home-v2 .config-section .form input[type="email"], .home-v2 .config-section .form input[type="tel"], .home-v2 .config-section .form select, .home-v2 .config-section .form textarea { background: rgba(255, 255, 255, 0.04); color: #FFFFFF; border-bottom: 1.5px solid rgba(199, 226, 100, 0.55); padding: 0.95rem 1rem; caret-color: var(--h-light); } .home-v2 .config-section .form input[type="text"], .home-v2 .config-section .form input[type="email"], .home-v2 .config-section .form input[type="tel"], .home-v2 .config-section .form select { max-width: 60ch; } .home-v2 .config-section .form textarea { max-width: 75ch; } .home-v2 .config-section .form input::placeholder, .home-v2 .config-section .form textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .home-v2 .config-section .form input:hover, .home-v2 .config-section .form select:hover, .home-v2 .config-section .form textarea:hover { border-bottom-color: var(--h-light); } .home-v2 .config-section .form input:focus, .home-v2 .config-section .form select:focus, .home-v2 .config-section .form textarea:focus { background: rgba(199, 226, 100, 0.06); border-bottom-color: var(--h-light); border-bottom-width: 2px; outline: 0; } .home-v2 .config-section .form label { color: #FFFFFF; font-weight: 500; } .home-v2 .config-section .form .field__hint { color: rgba(255, 255, 255, 0.55); } .home-v2 .config-section .form .field__counter { color: rgba(255, 255, 255, 0.55); } .home-v2 .config-section .form input[type="checkbox"] { accent-color: var(--h-light); width: 1.25rem; height: 1.25rem; } .home-v2 .config-section .form .field--inline label a { color: var(--h-light); } /* Form-Cards Dark-Theme Adaption */ .home-v2 .config-section .form-cards__legend { color: #FFFFFF; font-weight: 600; font-size: 1rem; } .home-v2 .config-section .form-cards__hint { color: rgba(255, 255, 255, 0.65); } .home-v2 .config-section .form-cards__kbdhint { color: rgba(199, 226, 100, 0.5); } .home-v2 .config-section .form-card { background: rgba(199, 226, 100, 0.04); border-color: rgba(199, 226, 100, 0.28); } .home-v2 .config-section .form-card__label { color: #FFFFFF; } .home-v2 .config-section .form-card__sub { color: rgba(255, 255, 255, 0.5); } .home-v2 .config-section .form-card__kbd { color: rgba(199, 226, 100, 0.65); border-color: rgba(199, 226, 100, 0.3); background: rgba(199, 226, 100, 0.04); } .home-v2 .config-section .form-card:hover { background: rgba(199, 226, 100, 0.08); border-color: rgba(199, 226, 100, 0.6); } .home-v2 .config-section .form-card:has(input:checked) { background: rgba(199, 226, 100, 0.14); border-color: var(--h-light); box-shadow: inset 0 0 0 1px var(--h-light), 0 6px 24px -8px rgba(199, 226, 100, 0.4); } .home-v2 .config-section .form-card:has(input:checked) .form-card__kbd { background: var(--h-light); border-color: var(--h-light); color: var(--h-deep); } .home-v2 .config-section .form-card:has(input:checked) .form-card__icon::after { background: var(--h-light); color: var(--h-deep); } /* Animated Progress-Bar Dark */ .home-v2 .config-section .form__progress--v2 { background: rgba(199, 226, 100, 0.12); } /* Form-Buttons im dunklen Theme */ .home-v2 .config-section .form .btn { background: var(--h-light); color: var(--h-deep); border-color: var(--h-light); font-weight: 700; position: relative; overflow: hidden; isolation: isolate; } .home-v2 .config-section .form .btn:hover, .home-v2 .config-section .form .btn:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: var(--h-deep); outline: none; } .home-v2 .config-section .form .btn:focus-visible { outline: 2px solid var(--h-light); outline-offset: 4px; } .home-v2 .config-section .form .btn--ghost { background: transparent; color: rgba(255, 255, 255, 0.85); border-color: rgba(199, 226, 100, 0.35); } .home-v2 .config-section .form .btn--ghost:hover, .home-v2 .config-section .form .btn--ghost:focus-visible { background: rgba(199, 226, 100, 0.08); color: #FFFFFF; border-color: var(--h-light); } /* Submit-Button — Data-Pulse "Sende-Effekt" beim letzten Step */ .home-v2 .config-section .form button[type="submit"] { animation: configSubmitPulse 2.6s ease-out infinite; box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.6), 0 8px 24px -6px rgba(199, 226, 100, 0.45); } @keyframes configSubmitPulse { 0% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0.65), 0 8px 24px -6px rgba(199, 226, 100, 0.45); } 60% { box-shadow: 0 0 0 14px rgba(199, 226, 100, 0), 0 8px 24px -6px rgba(199, 226, 100, 0.45); } 100% { box-shadow: 0 0 0 0 rgba(199, 226, 100, 0), 0 8px 24px -6px rgba(199, 226, 100, 0.45); } } /* Error-Summary dark theme */ .home-v2 .config-section .form__error-summary { background: rgba(122, 14, 14, 0.18); border-color: rgba(122, 14, 14, 0.6); color: #FFCCCC; } .home-v2 .config-section .form__error-summary h3 { color: #FFCCCC; } .home-v2 .config-section .form__error-summary a { color: #FFCCCC; } /* Trust-Strip am Ende des Forms */ .home-v2 .config-trust { list-style: none; margin: 2.5rem 0 0; padding: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; border-top: 1px solid rgba(199, 226, 100, 0.18); } @media (min-width: 720px) { .home-v2 .config-trust { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } .home-v2 .config-trust__item { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); font-weight: 500; } .home-v2 .config-trust__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--h-light); } /* Success-Stamp Dark-Variant */ .home-v2 .config-section .form__success--stamp { background: rgba(199, 226, 100, 0.04); border-color: var(--h-light); color: #FFFFFF; } .home-v2 .config-section .form__success--stamp h2 { color: #FFFFFF; } .home-v2 .config-section .form__success--stamp::before { background: var(--h-light); color: var(--h-deep); } .home-v2 .config-section .form__success--stamp::after { color: rgba(199, 226, 100, 0.55); } .home-v2 .config-section .form__success--stamp .btn--ghost { background: transparent; color: rgba(255, 255, 255, 0.85); border-color: rgba(199, 226, 100, 0.4); } /* Form-Header (USP) Dark-Variant */ .home-v2 .config-section .form-header__copy { color: rgba(255, 255, 255, 0.85); } .home-v2 .config-section .form-header__copy p { color: rgba(255, 255, 255, 0.78); } .home-v2 .config-section .form-usp { background: rgba(255, 255, 255, 0.03); border-left-color: var(--h-light); } .home-v2 .config-section .form-usp__item { color: rgba(255, 255, 255, 0.85); } .home-v2 .config-section .form-usp__item strong { color: #FFFFFF; } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .home-v2 .config-section .form button[type="submit"] { animation: none !important; } } /* ============== HONORARVORTEIL — TGA-Seite (Insert: 15 % vs 25 %) ============== */ .home-v2 .cost-advantage { background: var(--h-paper); } .home-v2 .cost-figure { margin: 0; padding: 0; border: 1px solid var(--h-line); border-radius: var(--h-radius-lg); background: linear-gradient(180deg, #FFFFFF 0%, var(--h-soft) 100%); overflow: hidden; position: relative; } .home-v2 .cost-figure::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(7, 58, 6, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 58, 6, 0.04) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%); pointer-events: none; z-index: 0; } .home-v2 .cost-figure > * { position: relative; z-index: 1; } .home-v2 .cost-figure__compare { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; } @media (min-width: 760px) { .home-v2 .cost-figure__compare { grid-template-columns: 1fr auto 1fr; align-items: stretch; } } .home-v2 .cost-figure__col { padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 0.75rem; border-bottom: 1px solid var(--h-line); } @media (min-width: 760px) { .home-v2 .cost-figure__col { border-bottom: 0; } } .home-v2 .cost-figure__col--win { background: rgba(199, 226, 100, 0.10); border-left: 4px solid var(--h-dark); } .home-v2 .cost-figure__col--ref { background: transparent; border-left: 4px solid var(--h-line); } @media (max-width: 759px) { .home-v2 .cost-figure__col--ref { border-left: 4px solid var(--h-line); } } .home-v2 .cost-figure__label { margin: 0; } .home-v2 .cost-figure__tag { display: inline-block; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 0.4em 0.75em; border-radius: 999px; border: 1px solid currentColor; } .home-v2 .cost-figure__col--win .cost-figure__tag { color: var(--h-dark); background: rgba(255, 255, 255, 0.6); } .home-v2 .cost-figure__col--ref .cost-figure__tag { color: #4A4A4A; background: rgba(255, 255, 255, 0.5); } .home-v2 .cost-figure__value { margin: 0; line-height: 1; } .home-v2 .cost-figure__num { display: inline-block; font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; color: var(--h-deep); } .home-v2 .cost-figure__col--ref .cost-figure__num { color: #6A6A6A; text-decoration: line-through; text-decoration-thickness: 0.05em; text-decoration-color: rgba(7, 58, 6, 0.35); } .home-v2 .cost-figure__num small { font-size: 0.4em; font-weight: 600; margin-left: 0.05em; letter-spacing: 0; vertical-align: 0.1em; } .home-v2 .cost-figure__note { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #2C2C2C; max-width: 32ch; } .home-v2 .cost-figure__col--ref .cost-figure__note { color: #5A5A5A; } .home-v2 .cost-figure__sep { display: flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; background: var(--h-soft); border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); } @media (min-width: 760px) { .home-v2 .cost-figure__sep { border-top: 0; border-bottom: 0; border-left: 1px solid var(--h-line); border-right: 1px solid var(--h-line); padding: 0 1.25rem; } } .home-v2 .cost-figure__sep span { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--h-dark); padding: 0.5em 0.75em; border: 1px solid var(--h-dark); border-radius: 999px; background: var(--h-paper); } .home-v2 .cost-figure__caption { padding: 1.25rem clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--h-line); background: rgba(255, 255, 255, 0.7); font-size: 0.8125rem; line-height: 1.5; color: #4A4A4A; } @media (prefers-reduced-motion: reduce) { .home-v2 .cost-figure { transition: none; } } /* ============== WIRTSCHAFTLICHKEITS-PULL-QUOTE — Home (Insert) ============== */ .home-v2 .econ-quote { background: var(--h-paper); padding-block: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); position: relative; overflow: hidden; } .home-v2 .econ-quote::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 280px at 80% 50%, rgba(199, 226, 100, 0.08), transparent 60%), radial-gradient(500px 260px at 10% 100%, rgba(7, 58, 6, 0.04), transparent 60%); pointer-events: none; } .home-v2 .econ-quote > .container { position: relative; } .home-v2 .econ-quote__inner { max-width: 60rem; } .home-v2 .econ-quote__kicker { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-dark); font-weight: 600; margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .home-v2 .econ-quote__kicker::before { content: ""; width: 28px; height: 1px; background: var(--h-dark); } .home-v2 .econ-quote__body { margin: 0; padding: 0; border: 0; font-size: clamp(1.5rem, 3.4vw, 2.375rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: var(--h-deep); } .home-v2 .econ-quote__body em { font-style: normal; background: linear-gradient(180deg, transparent 60%, rgba(199, 226, 100, 0.45) 60%, rgba(199, 226, 100, 0.45) 95%, transparent 95%); padding: 0 0.1em; color: var(--h-deep); } .home-v2 .econ-quote__cite { display: block; margin-top: 1.75rem; font-style: normal; font-size: 0.8125rem; letter-spacing: 0.04em; color: #4A4A4A; } .home-v2 .econ-quote__cite::before { content: "— "; } /* ============== COOKIE CONSENT BANNER + MODAL ============== */ /* ---- Banner (bottom, slide-up, role=region) ---- */ .cookie-banner { position: fixed; inset: auto 0 0 0; z-index: 9000; background: var(--h-deep, #02160A); color: #FFFFFF; border-top: 1px solid var(--h-dark, #073A06); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35); transform: translateY(100%); transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1); } .cookie-banner.is-visible { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } } .cookie-banner__inner { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem; display: grid; gap: 1.25rem; align-items: start; } @media (min-width: 880px) { .cookie-banner__inner { grid-template-columns: 1fr auto; gap: 2rem; padding: 1.5rem 2rem; align-items: center; } } .cookie-banner__copy { min-width: 0; } .cookie-banner__kicker { font-family: var(--sans, system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--h-light, #C7E264); margin: 0 0 0.4rem; } .cookie-banner__lede { font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 70ch; } .cookie-banner__link { color: var(--h-light, #C7E264); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__link:hover, .cookie-banner__link:focus-visible { color: #FFFFFF; } .cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } /* ---- Buttons (shared between banner & modal) ---- */ .cookie-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.7rem 1.2rem; font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background 180ms, border-color 180ms, color 180ms, transform 120ms; } .cookie-btn:focus-visible { outline: 2px solid var(--h-light, #C7E264); outline-offset: 3px; } .cookie-btn--primary { background: var(--h-light, #C7E264); color: var(--h-ink, #0A0A0A); border-color: var(--h-light, #C7E264); } .cookie-btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; transform: translateY(-1px); } .cookie-btn--secondary { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); } .cookie-btn--secondary:hover { background: rgba(255, 255, 255, 0.14); border-color: #FFFFFF; } .cookie-btn--ghost { background: transparent; color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.25); } .cookie-btn--ghost:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); } .cookie-modal__panel .cookie-btn--ghost { color: var(--h-deep, #02160A); border-color: var(--h-line, #E5E5E2); } .cookie-modal__panel .cookie-btn--ghost:hover { background: var(--h-soft, #F5F5F4); border-color: var(--h-deep, #02160A); } /* ---- Modal ---- */ body.cookie-modal-open { overflow: hidden; } .cookie-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 200ms ease; } .cookie-modal.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .cookie-modal { transition: none; } } .cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 22, 10, 0.65); backdrop-filter: blur(2px); cursor: pointer; } .cookie-modal__panel { position: relative; z-index: 1; background: var(--h-paper, #FFFFFF); color: var(--h-deep, #02160A); border: 1px solid var(--h-line, #E5E5E2); border-radius: var(--h-radius-lg, 8px); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.75rem clamp(1.25rem, 3vw, 2rem); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35); } .cookie-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .cookie-modal__title { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.625rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--h-deep, #02160A); } .cookie-modal__title:focus { outline: none; } .cookie-modal__close { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--h-line, #E5E5E2); border-radius: 999px; color: var(--h-deep, #02160A); cursor: pointer; font-size: 1.25rem; line-height: 1; transition: background 150ms, border-color 150ms; } .cookie-modal__close:hover { background: var(--h-soft, #F5F5F4); border-color: var(--h-deep, #02160A); } .cookie-modal__close:focus-visible { outline: 2px solid var(--h-dark, #073A06); outline-offset: 2px; } .cookie-modal__desc { margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.55; color: #2C2C2C; } .cookie-modal__form { display: flex; flex-direction: column; gap: 0.5rem; } /* ---- Cookie-Kategorien ---- */ .cookie-cat { border: 1px solid var(--h-line, #E5E5E2); border-radius: var(--h-radius, 4px); background: var(--h-paper, #FFFFFF); transition: border-color 150ms, background 150ms; } .cookie-cat:has(input:checked):not(:has(input:disabled)) { border-color: var(--h-dark, #073A06); background: rgba(199, 226, 100, 0.08); } .cookie-cat__label { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; padding: 1rem 1.15rem; cursor: pointer; align-items: start; } .cookie-cat__label input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--h-dark, #073A06); cursor: pointer; } .cookie-cat__label input[disabled] { cursor: not-allowed; opacity: 0.7; } .cookie-cat__text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .cookie-cat__text strong { font-weight: 600; font-size: 0.9375rem; color: var(--h-deep, #02160A); } .cookie-cat__desc { font-size: 0.8125rem; line-height: 1.5; color: #4A4A4A; } .cookie-modal__foot { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--h-line, #E5E5E2); } /* ---- Mobile ---- */ @media (max-width: 640px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .cookie-btn { flex: 1 1 auto; min-width: 0; } .cookie-modal__panel { padding: 1.25rem; } .cookie-modal__foot { flex-direction: column-reverse; } .cookie-modal__foot .cookie-btn { width: 100%; } } /* =================================================================== PRAXIS — Bento gallery of real project deliverables =================================================================== */ .home-v2 .praxis-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 720px) { .home-v2 .praxis-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: 1.25rem; } } @media (min-width: 1100px) { .home-v2 .praxis-grid { grid-auto-rows: 220px; } } .home-v2 .praxis-card { position: relative; margin: 0; padding: 0; border-radius: var(--h-radius-lg); overflow: hidden; background: var(--h-ink); isolation: isolate; border: 1px solid var(--h-line); aspect-ratio: 4 / 3; } @media (min-width: 720px) { .home-v2 .praxis-card { aspect-ratio: auto; } .home-v2 .praxis-card { grid-column: span 2; grid-row: span 2; } .home-v2 .praxis-card--hero { grid-column: span 4; grid-row: span 2; } .home-v2 .praxis-card--portrait { grid-column: span 2; grid-row: span 2; } } .home-v2 .praxis-card figure { margin: 0; width: 100%; height: 100%; position: relative; } .home-v2 .praxis-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1)); } .home-v2 .praxis-card:hover img, .home-v2 .praxis-card:focus-within img { transform: scale(1.03); } .home-v2 .praxis-card figcaption { position: absolute; inset: auto 0 0 0; padding: 0.875rem 1rem 0.9375rem; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.4; color: #FFFFFF; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0) 100%); text-shadow: 0 1px 2px rgba(0,0,0,0.6); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 0.6em; pointer-events: none; } .home-v2 .praxis-card__tag { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--h-light); font-weight: 600; background: rgba(0,0,0,0.55); padding: 0.25em 0.55em; border-radius: 999px; border: 1px solid rgba(199, 226, 100, 0.35); } /* Soft section override: praxis on cream background uses subtle frame */ .home-v2 .home-praxis.sect--soft .praxis-card { border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.06); } /* ===================================================================== FOOTER — LIGHT THEME (cream/paper to match homepage hero background) Contrast-validated via contrast-master agent, all pairs WCAG AA+. Marquee strip keeps a dark variant as a visual contrast band. ===================================================================== */ .home-v2 .home-footer.is-pumped, .home-v2 .home-footer:has(.hf-grid) { background: var(--paper); color: var(--ink); border-top: 1px solid rgba(7, 58, 6, 0.18); } /* Marquee strip stays dark for editorial contrast */ .home-v2 .home-footer .footer-marquee { background: var(--ink); border-bottom: 1px solid rgba(7, 58, 6, 0.18); border-top: none; } .home-v2 .home-footer .footer-marquee__track { color: rgba(245, 242, 236, 0.85); } .home-v2 .home-footer .footer-marquee__track > span::after { color: var(--kk-light); } .home-v2 .home-footer .footer-marquee__toggle { background: rgba(199, 226, 100, 0.10); color: var(--paper); border-color: rgba(199, 226, 100, 0.45); } .home-v2 .home-footer .footer-marquee__toggle:hover, .home-v2 .home-footer .footer-marquee__toggle:focus-visible { background: rgba(199, 226, 100, 0.22); border-color: var(--kk-light); } .home-v2 .home-footer .footer-marquee__toggle:focus-visible { outline-color: var(--kk-light); } /* Brand row — cream bg, ink text, dark-green hover */ .home-v2 .home-footer .hf-brand-row { border-bottom: 1px solid rgba(7, 58, 6, 0.18); } .home-v2 .home-footer .hf-brand-link { color: var(--ink); } .home-v2 .home-footer .hf-brand-link:hover .hf-brand-name { color: var(--kk-dark); } .home-v2 .home-footer .hf-brand-name { color: var(--ink); } .home-v2 .home-footer .hf-brand-tag, .home-v2 .home-footer .hf-wordmark { color: rgba(10, 26, 9, 0.7); } .home-v2 .home-footer .hf-brand-contact { color: rgba(10, 26, 9, 0.7); } .home-v2 .home-footer .hf-brand-contact a { color: var(--ink); } .home-v2 .home-footer .hf-brand-contact a:hover { color: var(--kk-dark); } /* Region info block */ .home-v2 .home-footer .hf-region { border-color: rgba(7, 58, 6, 0.18); } .home-v2 .home-footer .hf-region__info, .home-v2 .home-footer .hf-region__note, .home-v2 .home-footer .hf-region__body { color: rgba(10, 26, 9, 0.7); } /* Column kickers and links — .is-pumped scope for spec over catch-all p rule */ .home-v2 .home-footer.is-pumped .hf-col-kicker, .home-v2 .home-footer.is-pumped .hf-col-subkicker, .home-v2 .home-footer:has(.hf-grid) .hf-col-kicker, .home-v2 .home-footer:has(.hf-grid) .hf-col-subkicker { color: var(--kk-dark); } .home-v2 .home-footer .hf-col a, .home-v2 .home-footer .hf-tags a { color: var(--ink); } .home-v2 .home-footer .hf-col a:hover, .home-v2 .home-footer .hf-tags a:hover { color: var(--kk-dark); } .home-v2 .home-footer .hf-tags li { color: rgba(10, 26, 9, 0.7); } /* Bottom bar (status/copy/back-to-top) */ .home-v2 .home-footer .hf-bottom { border-top: 1px solid rgba(7, 58, 6, 0.18); color: rgba(10, 26, 9, 0.7); } .home-v2 .home-footer .hf-bottom__copy, .home-v2 .home-footer .hf-bottom__status { color: rgba(10, 26, 9, 0.7); } .home-v2 .home-footer .hf-bottom a { color: var(--ink); } .home-v2 .home-footer .hf-bottom a:hover { color: var(--kk-dark); } /* Logo image — switch to dark variant if a light-mode source exists, else keep current logo (already readable on cream). */ .home-v2 .home-footer .hf-logo { filter: none; } /* Inherited-from-.site-footer overrides: The legacy .site-footer rules in main.css set white text + light-yellow accents for the dark-green footer. Re-scope them for the light theme. */ .home-v2 .home-footer.is-pumped a, .home-v2 .home-footer:has(.hf-grid) a { color: var(--ink); } .home-v2 .home-footer.is-pumped a:not(.footer-cta__btn)::after, .home-v2 .home-footer:has(.hf-grid) a:not(.footer-cta__btn)::after { background: rgba(7, 58, 6, 0.45); } .home-v2 .home-footer.is-pumped a:hover:not(.footer-cta__btn)::after, .home-v2 .home-footer:has(.hf-grid) a:hover:not(.footer-cta__btn)::after { background: var(--kk-dark); } .home-v2 .home-footer.is-pumped p, .home-v2 .home-footer:has(.hf-grid) p { color: rgba(10, 26, 9, 0.85); } /* ============================================================ Footer light-theme polish (May 2026): - Subtle architectural grid pattern across whole footer - SVG region map recolored for cream-bg contrast - Standards tags get visible rectangular dark-green borders ============================================================ */ .home-v2 .home-footer.is-pumped, .home-v2 .home-footer:has(.hf-grid) { background-image: linear-gradient(rgba(7, 58, 6, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 58, 6, 0.045) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; } /* SVG region map — readable on cream */ .home-v2 .home-footer .hf-map path { fill: rgba(199, 226, 100, 0.22); stroke: rgba(7, 58, 6, 0.55); } .home-v2 .home-footer .hf-map text { fill: rgba(10, 26, 9, 0.78); } .home-v2 .home-footer .hf-map text[font-weight="600"] { fill: var(--ink); } .home-v2 .home-footer .hf-map circle { fill: var(--kk-dark); } .home-v2 .home-footer .hf-map circle[r="6"] { fill: #6F8A1F; stroke: var(--ink); stroke-width: 1.2; } .home-v2 .home-footer .hf-map line { stroke: rgba(10, 26, 9, 0.55); } .home-v2 .home-footer .hf-map polygon { fill: rgba(10, 26, 9, 0.65); } /* Standards tags — visible rectangular border (≥3:1 vs cream per WCAG SC 1.4.11) */ .home-v2 .home-footer.is-pumped .hf-tags li, .home-v2 .home-footer:has(.hf-grid) .hf-tags li { border: 1px solid rgba(7, 58, 6, 0.55); background: transparent; color: var(--ink); } /* User-Wunsch 2026-05-08: hero-art SVGs vollständig statisch (kein Pulse, kein Dash-Flow) */ .home-v2 .hero-art__node, .home-v2 .hero-art__node-pulse, .home-v2 .hero-art__connector, .home-v2 .hero-art__data-pulse { animation: none !important; } .home-v2 .hero-art__node-pulse, .home-v2 .hero-art__data-pulse { display: none; } .home-v2 .hero-art__connector { stroke-dashoffset: 0; opacity: 0.55; }