/* ========================================================================== LEISTUNG: TRANSFORM PAGE -------------------------------------------------------------------------- Page-specific styles for /leistungen/transform/. Section CSS is added in AP-3 (one block per section in render order). ========================================================================== */ /* -------------------------------------------------------------------------- Header transparency override The fixed site-header (main.css) ships with a navy background. On this page it overlays the blue hero stage and must blend transparently. WordPress adds `page-template-page-leistungen-transform[-php]` to for pages using this template — both forms target safely. -------------------------------------------------------------------------- */ body.page-template-page-leistungen-transform .site-header, body.page-template-page-leistungen-transform-php .site-header { /* background: transparent; */ } /* ========================================================================== Section: Hero (Figma 71:3034 "Home-Stage", 1440×650 blue stage) ========================================================================== */ .leistungen-hero { position: relative; width: 100%; background: var(--color-blue-500); overflow: hidden; } .leistungen-hero__stage { position: relative; width: 100%; max-width: 1440px; height: 650px; margin: 0 auto; } /* --- "transform" title at (60, 220), 505×110 ----------------------------- */ .leistungen-hero__title { position: absolute; left: 60px; top: 220px; margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h1-insights); line-height: var(--lh-h1-insights); color: var(--color-white); } /* --- Lede group (Frame 2485) at (60, 470), 451 wide, gap 36 -------------- */ .leistungen-hero__lede { position: absolute; left: 60px; top: 470px; width: 451px; display: flex; flex-direction: column; gap: 36px; } .leistungen-hero__rule { display: block; width: 100px; height: 1px; background: var(--color-white); } .leistungen-hero__lede-text { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--color-white); } /* --- Orbital diagram on right side --------------------------------------- */ .leistungen-hero__orbital { position: absolute; inset: 0; pointer-events: none; } /* Satellite (Group 2419) at (937, 243), 156×156: - 156×156 outer stroke ring - 42×42 stroke halo at (57,57) → centered - 12×12 white-fill dot at (72,72) → centered */ .leistungen-hero__sat { position: absolute; left: 937px; top: 243px; width: 156px; height: 156px; } .leistungen-hero__sat-ring, .leistungen-hero__sat-halo, .leistungen-hero__sat-dot { position: absolute; border-radius: 50%; } .leistungen-hero__sat-ring { left: 0; top: 0; width: 156px; height: 156px; border: 1px solid var(--color-white); } .leistungen-hero__sat-halo { left: 57px; top: 57px; width: 42px; height: 42px; border: 1px solid var(--color-white); } .leistungen-hero__sat-dot { left: 72px; top: 72px; width: 12px; height: 12px; background: var(--color-white); } /* Arrow (Group 2418) at (1064, 313), 59×18: - 58×1 line at (0, 8) - 11×18 chevron at (48, 0) */ .leistungen-hero__arrow { position: absolute; left: 1064px; top: 313px; width: 59px; height: 18px; color: var(--color-white); } .leistungen-hero__arrow-line { position: absolute; left: 0; top: 8px; width: 58px; height: 1px; background: currentColor; } .leistungen-hero__arrow-tip { position: absolute; left: 48px; top: 0; display: block; } /* Concentric rings on the right. - Ring lg (Ellipse 374) — left 1281, top 134, 374×374 - Ring md (Ellipse 270) — left 1147, top 186, 270×270 - Ring sm (Ellipse 156) — left 1204, top 243, 156×156 - Center dot (Ellipse 28) — left 1268, top 307, 28×28 (white fill) The 374 ring is intentionally NOT concentric with the inner trio — its center sits ~186px right of theirs. This matches the Figma composition: the outermost ring shifts off the right edge of the 1440 stage. */ .leistungen-hero__rings { position: absolute; inset: 0; } .leistungen-hero__ring { position: absolute; border: 1px solid var(--color-white); border-radius: 50%; background: transparent; } .leistungen-hero__ring--lg { left: 1281px; top: 134px; width: 374px; height: 374px; } .leistungen-hero__ring--md { left: 1147px; top: 186px; width: 270px; height: 270px; } .leistungen-hero__ring--sm { left: 1204px; top: 243px; width: 156px; height: 156px; } .leistungen-hero__center-dot { position: absolute; left: 1268px; top: 307px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-white); } /* --- Lorem-ipsum intro band (71:3056) on white -------------------------- */ /* Page Y 730 → 80px gap below the 650-tall blue stage. 1140 wide centered inside 1440. IBM Plex Medium 32/41.6 navy; second clause coloured blue. Bottom padding = 100 to match Figma gap to Cases section (slider Y 998). */ .leistungen-hero__intro { background: var(--color-white); padding: 80px 0 100px; } .leistungen-hero__intro-text { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 60px; font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--color-navy-900); } .leistungen-hero__intro-link { color: var(--color-blue-500); } /* ========================================================================== Section: Cases (Figma 71:3105 "Slider", 1440×524 white) -------------------------------------------------------------------------- Outer 1440 stage holds two layers: 1. Inner column 1140×524 centered at left 150 — heading + paging + teaser 2. Next-slide peek image at left 1321 / top 89 / 652×435 — sticks out past the right edge of the 1140 inner; the section clips with overflow:hidden ========================================================================== */ .leistungen-cases { position: relative; width: 100%; background: var(--color-white); overflow: hidden; padding-bottom: 100px; /* gap to next zielbild section (Rectangle 4170 starts at page Y 1622) */ } .leistungen-cases__stage { position: relative; width: 100%; max-width: 1440px; height: 524px; margin: 0 auto; } /* Next-slide peek image at (1321, 89), 652×435. Pinned to the 1440 stage; clipped by section overflow:hidden. */ .leistungen-cases__peek { position: absolute; left: 1321px; top: 89px; width: 652px; height: 435px; object-fit: cover; pointer-events: none; user-select: none; } /* Inner column 1140 wide centered (left 150 of 1440) */ .leistungen-cases__inner { position: absolute; left: 150px; top: 0; width: 1140px; height: 524px; } /* "Cases" heading at top-left (0, 1). 42/46.2 IBM Plex 600 navy. */ .leistungen-cases__heading { position: absolute; left: 0; top: 1px; margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h2-card); line-height: var(--lh-h2-card); color: var(--color-navy-900); } /* Paging at top-right (1032, 0), 108×48. Two 48×48 round-rect arrows, gap 12. */ .leistungen-cases__paging { position: absolute; left: 1032px; top: 0; width: 108px; height: 48px; display: flex; flex-direction: row; align-items: center; gap: 12px; /* Swiper's .swiper-wrapper sets z-index:1, so the paging needs z-index>=2 to sit on top — otherwise the wrapper intercepts pointer events and the arrows look clickable but aren't. */ z-index: 2; } .leistungen-cases__arrow { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; width: 48px; height: 48px; border: 1px solid var(--color-navy-900); border-radius: var(--radius-pill); background: transparent; color: var(--color-navy-900); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-default); } .leistungen-cases__arrow svg { display: block; width: 24px; height: 24px; } /* Hover (Figma 46:11195 / 46:11199): fill None → navy. SVG strokes use currentColor, so flipping `color` to white keeps the arrow visible against the new navy background. */ .leistungen-cases__arrow:hover, .leistungen-cases__arrow:focus-visible { background: var(--color-navy-900); color: var(--color-white); } /* When there's only one slide the arrows are still hover-able but the click is a no-op — JS adds aria-disabled in that case for AT users. */ .leistungen-cases__arrow[aria-disabled="true"] { cursor: default; } /* Teaser card 1140×436. Left img 653, right body 487, navy bg. Stage-11 Swiper integration: the slide MUST be a normal-flow flex child of `.swiper-wrapper`. `position: absolute` here would pop the slide out of Swiper's flex track → all slides stack on top of each other at the wrapper origin, image hides the text panel, translate3d transforms have no visible effect. The swiper container itself owns the (0, 88) inner-block offset. */ .leistungen-cases__teaser { display: flex; flex-direction: row; height: 436px; background: var(--color-navy-900); overflow: hidden; } .leistungen-cases__teaser-img { flex: 0 0 653px; width: 653px; height: 436px; overflow: hidden; } .leistungen-cases__teaser-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease-out; } /* Hover: image scales 1.05 (clipped by parent overflow:hidden), title gains underline. Mirrors the SMART_ANIMATE 300ms hover the designer wired on the cases teaser component (Figma destination empty — these deltas are the build's UX choice). */ .leistungen-cases__teaser:hover .leistungen-cases__teaser-img img, .leistungen-cases__teaser:focus-within .leistungen-cases__teaser-img img { transform: scale(1.05); } .leistungen-cases__teaser:hover .leistungen-cases__title, .leistungen-cases__teaser:focus-within .leistungen-cases__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* Right body — vertical flex column, gap 4, padding 32. */ .leistungen-cases__teaser-body { flex: 0 0 487px; width: 487px; height: 436px; padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; color: var(--color-white); } /* Date row (Frame 2413): 14/19.6 IBM Plex 400 white uppercase. */ .leistungen-cases__date { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-label-uc); line-height: var(--lh-label-uc); color: var(--color-white); text-transform: uppercase; } /* Content (Frame 2420): vertical flex column, gap 20, fills width. */ .leistungen-cases__content { display: flex; flex-direction: column; gap: 20px; width: 100%; } /* Copy (Frame 2424): title + body, gap 12. */ .leistungen-cases__copy { display: flex; flex-direction: column; gap: 12px; width: 100%; } .leistungen-cases__title { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-card-title-l); line-height: var(--lh-card-title-l); color: var(--color-white); } .leistungen-cases__body { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-white); } /* Link row (Frame 2419): 14×14 ring + "Mehr erfahren" with bottom border, gap 8. */ .leistungen-cases__link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; align-self: flex-start; color: var(--color-white); } .leistungen-cases__link-ring { display: block; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--color-white); border-radius: 50%; flex: 0 0 14px; } .leistungen-cases__link-label { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid var(--color-white); font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-white); } /* ========================================================================== Section: Zielbild-Diagram (Figma 71:3071 "Rectangle 4170", 1440×992 #f1f1f1) -------------------------------------------------------------------------- Pure-CSS composition. Rectangle 4170 is the full-bleed light-gray bg. 28 leaf nodes float on top with absolute positions: • 1 heading (top-left) • 6 concentric rings ring--746/538/360/236/200/164 • 4 icon-placeholder rects (same color as bg → invisible, kept for parity) • 7 connector lines (16×1 navy, one is vertical) • 7 Ø9 dot markers (--color-blue-400) on the outer ring perimeter • 8 labels (3 right-aligned left-side, 3 left-aligned right-side, Digitaler Reifegrad centered above center, Kick-off centered) ========================================================================== */ .leistungen-zielbild { width: 100%; background: var(--color-gray-50); } .leistungen-zielbild__stage { position: relative; width: 100%; max-width: 1440px; height: 992px; margin: 0 auto; } /* "Headline Lorem Ipsum" at (150, 80), 443×46. 42/46.2 IBM Plex 600 navy. */ .leistungen-zielbild__heading { position: absolute; left: 150px; top: 80px; margin: 0; width: 443px; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h2-card); line-height: var(--lh-h2-card); color: var(--color-navy-900); } /* --- Concentric rings --------------------------------------------------- ring--746 outermost (no fill, navy stroke) @ (353, 166) ring--538 @ (457, 270) ring--360 @ (546, 359) ring--236 (fill #fafafa @ 0.5 opacity, no stroke) @ (608, 421) ring--200 (fill #fafafa, no stroke) @ (626, 439) ring--164 (fill white, navy stroke) — innermost @ (644, 457) */ .leistungen-zielbild__ring { position: absolute; border-radius: 50%; display: block; } .leistungen-zielbild__ring--746 { left: 353px; top: 166px; width: 746px; height: 746px; border: 1px solid var(--color-navy-900); } .leistungen-zielbild__ring--538 { left: 457px; top: 270px; width: 538px; height: 538px; border: 1px solid var(--color-navy-900); } .leistungen-zielbild__ring--360 { left: 546px; top: 359px; width: 360px; height: 360px; border: 1px solid var(--color-navy-900); } .leistungen-zielbild__ring--236 { left: 608px; top: 421px; width: 236px; height: 236px; background: var(--color-gray-25); opacity: 0.5; } .leistungen-zielbild__ring--200 { left: 626px; top: 439px; width: 200px; height: 200px; background: var(--color-gray-25); } .leistungen-zielbild__ring--164 { left: 644px; top: 457px; width: 164px; height: 164px; background: var(--color-white); border: 1px solid var(--color-navy-900); } /* --- Icon-placeholder rectangles (4) — fill #f1f1f1 same as bg --------- */ .leistungen-zielbild__icon { position: absolute; display: block; background: var(--color-gray-50); } .leistungen-zielbild__icon--bl-outer { left: 333px; top: 512px; width: 50px; height: 57px; } .leistungen-zielbild__icon--bl-inner { left: 433px; top: 599px; width: 68px; height: 59px; } .leistungen-zielbild__icon--br-inner { left: 943px; top: 599px; width: 68px; height: 59px; } .leistungen-zielbild__icon--br-outer { left: 1073px; top: 510px; width: 68px; height: 59px; } /* --- Dot markers (7, Ø9 blue-400) -------------------------------------- */ .leistungen-zielbild__dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--color-blue-400); display: block; } .leistungen-zielbild__dot--digitalstrategie { left: 453px; top: 535px; } .leistungen-zielbild__dot--change { left: 468px; top: 808px; } .leistungen-zielbild__dot--prozessmanagement { left: 566px; top: 624px; } .leistungen-zielbild__dot--reifegrad { left: 721px; top: 355px; } .leistungen-zielbild__dot--operating { left: 877px; top: 624px; } .leistungen-zielbild__dot--technologie { left: 990px; top: 535px; } .leistungen-zielbild__dot--programm { left: 984px; top: 270px; } /* --- Connector lines (7, 16×1 navy except reifegrad which is 1×16) ----- */ .leistungen-zielbild__line { position: absolute; background: var(--color-navy-900); display: block; } .leistungen-zielbild__line--prozessmanagement { left: 550px; top: 628px; width: 16px; height: 1px; } .leistungen-zielbild__line--operating { left: 886px; top: 628px; width: 16px; height: 1px; } .leistungen-zielbild__line--technologie { left: 999px; top: 539px; width: 16px; height: 1px; } .leistungen-zielbild__line--programm { left: 993px; top: 274px; width: 16px; height: 1px; } .leistungen-zielbild__line--change { left: 452px; top: 812px; width: 16px; height: 1px; } .leistungen-zielbild__line--digitalstrategie { left: 437px; top: 539px; width: 16px; height: 1px; } /* Vertical 1×16 connector for "Digitaler Reifegrad" — sits below the inner-360 ring crown */ .leistungen-zielbild__line--reifegrad { left: 726px; top: 339px; width: 1px; height: 16px; } /* --- Labels (8) -------------------------------------------------------- */ .leistungen-zielbild__label { position: absolute; margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); color: var(--color-navy-900); } /* Left-side labels: right-aligned (their right edge butts up to the dot) 18/25.2 (--fs-body-m / --lh-body-m) — 197 wide */ .leistungen-zielbild__label--prozessmanagement, .leistungen-zielbild__label--digitalstrategie, .leistungen-zielbild__label--change { width: 197px; font-size: var(--fs-body-m); line-height: var(--lh-body-m); text-align: right; } .leistungen-zielbild__label--prozessmanagement { left: 232px; top: 515px; } .leistungen-zielbild__label--digitalstrategie { left: 345px; top: 604px; } .leistungen-zielbild__label--change { left: 247px; top: 787px; } /* Right-side labels: left-aligned. Tighter line-height 23.4 (--fs-card-body / --lh-card-body) per Figma */ .leistungen-zielbild__label--technologie, .leistungen-zielbild__label--programm { width: 197px; font-size: var(--fs-card-body); line-height: var(--lh-card-body); text-align: left; } .leistungen-zielbild__label--technologie { left: 1023px; top: 516px; } .leistungen-zielbild__label--programm { left: 1017px; top: 251px; } .leistungen-zielbild__label--operating { width: 130px; font-size: var(--fs-card-body); line-height: var(--lh-card-body); text-align: left; left: 910px; top: 605px; } /* "Digitaler Reifegrad" — centered, sits between rings 360 and 236 above the inner-circle plug. Tighter line-height (23.4) */ .leistungen-zielbild__label--reifegrad { width: 130px; font-size: var(--fs-card-body); line-height: var(--lh-card-body); text-align: center; left: 660px; top: 287px; } /* "Kick-off" — centered inside the innermost 164 white circle. IBM Plex 600 (semibold), 18/25.2. */ .leistungen-zielbild__label--kickoff { width: 130px; font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: var(--fw-semibold); text-align: center; left: 661px; top: 525px; } /* ========================================================================== Section 4 — Zielbild cards (Figma 71:3059 + 71:3060/61/62) White bg (page default). Gap from diagram (gray) is owned by THIS section as padding-top: 100px. Bottom 64px gap to Transformieren heading owned here. Inner column 1140px (3 cards × 360 + 2 × 30 gap), centered (left margin 150). ========================================================================== */ .leistungen-zielbild-cards { width: 100%; background: var(--color-white); padding: 100px 0 64px; } .leistungen-zielbild-cards__inner { width: 1140px; max-width: calc(100% - 300px); margin: 0 auto; } .leistungen-zielbild-cards__heading { margin: 0 0 40px; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h2-card); line-height: var(--lh-h2-card); color: var(--color-navy-900); } .leistungen-zielbild-cards__grid { display: flex; gap: 30px; } /* ----- Shared service card (component 1:325 — Leistungen/Frame 2437) ----- Used 3× here AND 6× in section 5 (transformieren). 360 wide; height is NOT fixed — flex/grid `align-items: stretch` (default) makes every card in a row equalize to the tallest card's natural content height. That yields 263 in section 4 (1 row, max=263) and 238 / 244 in section 5 (row 1 max=238, row 2 max=244). 32px padding, 12px gap, gray-50 bg, 24px radius. */ .leistungen-service-card { width: 360px; flex: 0 0 360px; padding: 32px; box-sizing: border-box; background: var(--color-gray-50); /* Briefing-Fix 5.9: Cards sind ECKIG — der fruehere radius-pill war die Ursache fuer die Inkonsistenz zwischen Transform (rund) und Operate (eckig, weil dort ein Template-Override ohne Radius galt). */ border-radius: 0; display: flex; flex-direction: column; gap: 12px; } .leistungen-service-card__title { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-card-title-l); line-height: var(--lh-card-title-l); color: var(--color-navy-900); } .leistungen-service-card__body { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-navy-900); } /* ========================================================================== Section 5 — Transformieren cards (Figma 71:3063 + 71:3064/65/66/67/68/69) White bg. Top gap from section 4 already owned by section 4 padding-bottom: 64px → this section starts with padding-top: 0. Bottom 100px gap to section 6 (prozess, dark blue #006ED3) is owned BY THIS SECTION as padding-bottom, because adding padding-top to prozess would extend dark blue into the gap. 6 cards in 2 rows × 3 cols using the shared .leistungen-service-card primitive. 30px gap (both axes). Row heights stretch independently: row 1 = 238 (driven by card 1/2 natural content, 4-line body), row 2 = 244 (driven by card 6, 3-line title). ========================================================================== */ .leistungen-transformieren { width: 100%; background: var(--color-white); padding: 0 0 100px; } .leistungen-transformieren__inner { width: 1140px; max-width: calc(100% - 300px); margin: 0 auto; } .leistungen-transformieren__heading { margin: 0 0 40px; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h2-card); line-height: var(--lh-h2-card); color: var(--color-navy-900); } .leistungen-transformieren__grid { display: grid; grid-template-columns: repeat(3, 360px); gap: 30px; margin-top:30px; } /* ========================================================================== Section 6 — Prozess (Figma 71:3057 — instance of 39:2370 "5-Phasen-Prozess") -------------------------------------------------------------------------- Dark-blue stage 1440×1301. Section 5 owns the upstream 100px white gap as padding-bottom, so this section starts with padding-top: 0. Composition is absolute-positioned (Figma uses ABSOLUTE constraints) inside a fixed-height stage: • Heading "5-Phasen-Prozess" centered at (443, 80), 555×46 • Subhead lede at (364, 174), 710×84 (32/41.6 weight 400) • Vertical 1px white line at x=720, y=440, height 618 (connects circles) • 5 step circles (Frame 2438, 100×100, radius 50) at x=670, y=338+180×(n-1) Step 1 = ACTIVE (white fill, blue digit). Steps 2–5 = inactive (transparent fill = section bg, white 1px border, white digit). • 5 copy blocks (Frame 2446, 352 wide, gap 12) zigzag — odd steps at x=818 (right of column), even at x=270 (left). Heights: s1–s4 = 118, s5 = 143 (4-line body). AP-3 builds the static state only. The Figma MOUSE_ENTER hover variant 39:2403 (smart-animate step expansion) is JS-driven — implement in AP-5. ========================================================================== */ .leistungen-prozess { width: 100%; background: var(--color-blue-500); } .leistungen-prozess__stage { position: relative; width: 100%; max-width: 1440px; height: 1301px; margin: 0 auto; } .leistungen-prozess__heading { position: absolute; left: 443px; top: 80px; width: 555px; margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h2-card); line-height: var(--lh-h2-card); color: var(--color-white); text-align: center; } .leistungen-prozess__subhead { position: absolute; left: 364px; top: 174px; width: 710px; margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--color-white); text-align: center; } /* 1px-wide white line from y=440 to y=1058 at x=720. Sits behind circles. */ /* Dashed connector — Figma `Line 123` strokeDashes [4, 4] (4px dash + 4px gap), 1px white. Inactive step circles below give themselves the section blue bg so the dashed line is visually broken at each circle (the dashes are covered by the opaque circle, matching Figma). */ .leistungen-prozess__line { position: absolute; left: 720px; top: 440px; width: 1px; height: 618px; background: none; background-image: repeating-linear-gradient( to bottom, var(--color-white) 0 4px, transparent 4px 8px ); display: block; } /* Step circle (Frame 2438) — 100×100 perfect circle, 1px white outline. Default = inactive (transparent against section bg, white digit). `.is-active` = filled white with blue digit. */ .leistungen-prozess__step { position: absolute; left: 670px; width: 100px; height: 100px; border: 1px solid var(--color-white); border-radius: 50%; background: var(--color-blue-500); display: flex; align-items: center; justify-content: center; box-sizing: border-box; color: var(--color-white); } .leistungen-prozess__step.is-active { background: var(--color-white); color: var(--color-blue-500); } .leistungen-prozess__step--n1 { top: 338px; } .leistungen-prozess__step--n2 { top: 518px; } .leistungen-prozess__step--n3 { top: 698px; } .leistungen-prozess__step--n4 { top: 878px; } .leistungen-prozess__step--n5 { top: 1058px; } .leistungen-prozess__num { display: inline-block; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-step-num); line-height: var(--lh-step-num); color: inherit; text-align: center; } /* Copy block (Frame 2446) — 352 wide, vertical flex column with title + body. */ .leistungen-prozess__copy { position: absolute; width: 352px; display: flex; flex-direction: column; gap: 12px; } .leistungen-prozess__copy--s1 { left: 818px; top: 338px; } .leistungen-prozess__copy--s2 { left: 270px; top: 518px; } .leistungen-prozess__copy--s3 { left: 818px; top: 698px; } .leistungen-prozess__copy--s4 { left: 270px; top: 878px; } .leistungen-prozess__copy--s5 { left: 818px; top: 1058px; } .leistungen-prozess__step-title { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-card-title-l); line-height: var(--lh-card-title-l); color: var(--color-white); } .leistungen-prozess__step-body { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-white); } /* ========================================================================== Section: Contact CTA (Figma 71:3108, instance of 39:2745) -------------------------------------------------------------------------- Anna Kunz card on white bg. 1139×290 card with 1px navy stroke. Sits between dark-blue prozess (above) and dark-navy footer (below) with 100px white gaps both sides. Card has NO border-radius for this Leistung instance (verified in audit). ========================================================================== */ .leistungen-contact { width: 100%; background: var(--color-white); padding: 100px 0; } .leistungen-contact__card { position: relative; width: 100%; max-width: 1139px; height: 290px; margin: 0 auto; border: 1px solid var(--color-navy-900); background: transparent; box-sizing: border-box; color: var(--color-navy-900); } .leistungen-contact__question { position: absolute; left: 32px; top: 32px; width: 359px; margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-card-title-l); line-height: var(--lh-card-title-l); color: var(--color-navy-900); } .leistungen-contact__details { position: absolute; left: 421px; top: 32px; width: 228px; height: 157px; } .leistungen-contact__name { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-card-title-l); line-height: var(--lh-card-title-l); color: var(--color-navy-900); } .leistungen-contact__role { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-navy-900); } .leistungen-contact__link { position: relative; top: 25px; left: 0; display: block; margin-bottom: 10px; flex-direction: row; align-items: center; gap: 12px; height: 27px; text-decoration: none; color: var(--color-navy-900); font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-m); line-height: var(--lh-body-m); } /* Mail link: explicit width matches Figma INSTANCE (99). LinkedIn link: no explicit width — the natural text width (~107) is 4px wider than Figma's reported 103, which is acceptable since the underline correctly spans the text. Forcing 103 caused child-overflow warnings in the responsive sweep. */ .leistungen-contact__link--mail { width: auto; } .leistungen-contact__link--linkedin { } .leistungen-contact__link-icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; flex-shrink: 0; } .leistungen-contact__link-icon img { display: block; } /* Underline rendered as ::after so it can wipe out on hover (right-anchored scaleX(0) collapses the line from left → right, mirroring the home .cta-link-underline pattern). 300ms ease-out. */ .leistungen-contact__link-text { position: relative; display: inline-block; margin-bottom: 1px; padding-bottom: 1px; } .leistungen-contact__link-text::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right center; transform: scaleX(1); transition: transform 300ms ease-out; } .leistungen-contact__link:hover .leistungen-contact__link-text::after, .leistungen-contact__link:focus-visible .leistungen-contact__link-text::after { transform: scaleX(0); } .leistungen-contact__portrait { position: absolute; left: 927px; top: 32px; width: 180px; height: 226px; overflow: hidden; } .leistungen-contact__portrait img { display: block; position: absolute; left: -252px; top: -44px; width: 534px; height: 534px; max-width: none; object-fit: cover; } /* ========================================================================== AP-4 — RESPONSIVE -------------------------------------------------------------------------- Strategy: "follow figma". The page is built pixel-perfect at 1440 design width. Between 1440 and 1024 we use CSS `zoom` to proportionally compress the entire 1440-canvas to viewport width while preserving Figma layout fidelity. This avoids re-flowing the absolute-positioned diagram, prozess and contact-card sections at desktop sizes. `zoom` is now baseline in all major browsers (Firefox shipped May 2024). Unlike transform: scale(), `zoom` shrinks the layout box too, so siblings below a zoomed section follow naturally without empty gaps. Below 1024 (tablet), we'll switch to per-section reflow rules in subsequent iterations of this block (see breakpoints below). ========================================================================== */ /* --- 1) Fluid desktop zone (1024 ≤ vw ≤ 1439) --------------------------- Each section gets pre-zoom width 1440px and `zoom: var(--leistung-scale)`. The scale variable is set by a tiny JS handler in main.js (resize-aware) so the page proportionally compresses the 1440 design to viewport width while preserving Figma layout fidelity exactly. `zoom` requires a unitless number (CSS calc with `vw` produces a length, which is invalid for `zoom`) — hence the JS-set variable. Card sections ride along: cards stay 360px pre-zoom, the 3-up grid compresses uniformly. */ :root { --leistung-scale: 1; } @media (max-width: 1439px) and (min-width: 1024px) { .leistungen-hero, .leistungen-cases, .leistungen-zielbild, .leistungen-zielbild-cards, .leistungen-transformieren, .leistungen-prozess, .leistungen-contact { width: 1440px; zoom: var(--leistung-scale); } /* The fixed site-header sits outside these sections — force it to render at viewport scale, never inheriting any zoom cascade. */ .site-header, .site-header * { zoom: 1; } } /* --- 2) Tablet zone (768 ≤ vw ≤ 1023) ---------------------------------- Below 1024 the JS scale floors at 0.711 (== 1024/1440), so the zoom strategy stops compressing further. The rule above is gated to `min-width: 1024px`, so at tablet the sections fall back to their natural `width: 100%` and we apply per-section reflow: • Hero: stack title + lede vertically, hide orbital diagram • Cases: hide peek, stack heading/paging/teaser; teaser becomes image-on-top + body-below • Zielbild diagram: hide rings/dots/lines, render the 7 service labels as a vertical list (Kick-off hidden as it's the visual center marker) • Card grids (sections 4 & 5): switch from 3-up flex/grid to 2-col grid • Prozess: drop the absolute zigzag — heading/subhead centered top, then 5 (circle, copy) pairs stack vertically, line hidden • Contact CTA: card stacks question / details / portrait vertically ------------------------------------------------------------------------ */ @media (max-width: 1023px) { /* ---- Hero ---- */ .leistungen-hero__stage { height: auto; max-width: 100%; padding: 140px 40px 80px; display: flex; flex-direction: column; gap: 40px; } .leistungen-hero__title { position: static; font-size: clamp(64px, 10vw, 110px); line-height: 1; } .leistungen-hero__lede { position: static; width: auto; max-width: 600px; } .leistungen-hero__orbital { display: none; } .leistungen-hero__intro { padding: 64px 40px 80px; } .leistungen-hero__intro-text { padding: 0; max-width: 100%; } /* ---- Cases ---- */ .leistungen-cases { padding-bottom: 64px; } .leistungen-cases__stage { height: auto; max-width: 100%; padding: 64px 40px 0; } .leistungen-cases__peek { display: none; } .leistungen-cases__inner { position: static; width: auto; height: auto; display: flex; flex-direction: column; gap: 24px; } .leistungen-cases__heading { position: static; } .leistungen-cases__paging { position: static; align-self: flex-end; } .leistungen-cases__teaser { position: static; width: 100%; height: auto; flex-direction: column; } .leistungen-cases__teaser-img { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 653 / 436; } .leistungen-cases__teaser-img img { height: 100%; } .leistungen-cases__teaser-body { flex: 0 0 auto; width: 100%; height: auto; } .leistungen-cases__link { min-height: 44px; } /* ---- Zielbild diagram → vertical label list ---- */ .leistungen-zielbild__stage { height: auto; max-width: 100%; padding: 64px 40px; } .leistungen-zielbild__heading { position: static; width: auto; margin-bottom: 32px; } .leistungen-zielbild__ring, .leistungen-zielbild__icon, .leistungen-zielbild__dot, .leistungen-zielbild__line { display: none; } .leistungen-zielbild__label { position: static; width: auto; text-align: left; padding: 16px 0; border-bottom: 1px solid var(--color-navy-900); font-weight: var(--fw-semibold); font-size: var(--fs-card-title-l); line-height: var(--lh-card-title-l); } /* "Kick-off" is the central inner-circle marker on desktop — drop it from the tablet list (Digitaler Reifegrad still represents the inner ring concept). */ .leistungen-zielbild__label--kickoff { display: none; } /* ---- Zielbild cards → 2-col grid ---- */ .leistungen-zielbild-cards { padding: 64px 40px; } .leistungen-zielbild-cards__inner { width: 100%; max-width: 100%; } .leistungen-zielbild-cards__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } /* ---- Service-card primitive (shared section 4 & 5) ---- `minmax(0, 1fr)` on tracks + `min-width: 0` on cards is required because long German compound words ("Prozessmanagement", "Führungskräfte-entwicklung") establish a min-content width larger than the grid track's natural allocation. Without these, cards force the grid wider than the parent. */ .leistungen-service-card { width: auto; flex: initial; min-width: 0; } .leistungen-service-card__title { overflow-wrap: anywhere; } /* ---- Transformieren cards → 2-col grid ---- */ .leistungen-transformieren { padding: 0 40px 64px; } .leistungen-transformieren__inner { width: 100%; max-width: 100%; } .leistungen-transformieren__grid { grid-template-columns: 1fr; gap: 16px; } /* ---- Prozess → vertical step stack ---- */ .leistungen-prozess__stage { height: auto; max-width: 100%; padding: 64px 40px; display: flex; flex-direction: column; align-items: center; gap: 0; } /* Heading + subhead sit on top of the line with their own opaque blue bg so the line is hidden behind the title block. */ .leistungen-prozess__heading, .leistungen-prozess__subhead { position: relative; top: auto; left: auto; width: auto; max-width: 600px; z-index: 2; background: var(--color-blue-500); } .leistungen-prozess__subhead { margin-bottom: 32px; } /* Dashed connector for the vertical stack: anchored to stage center, spans from below the heading block to past the last copy. The opaque circles (z:1) and copy blocks (z:2 with blue bg) render above the line, breaking it visually so it appears only between steps. */ .leistungen-prozess__line { display: block; position: absolute; left: 50%; top: 220px; bottom: 24px; transform: translateX(-50%); width: 1px; height: auto; z-index: 0; } .leistungen-prozess__step { position: relative; left: auto; top: auto; margin-top: 24px; flex-shrink: 0; z-index: 1; } .leistungen-prozess__step--n1, .leistungen-prozess__step--n2, .leistungen-prozess__step--n3, .leistungen-prozess__step--n4, .leistungen-prozess__step--n5 { top: auto; } /* Opaque bg + z-index:2 so each copy block hides the line passing behind it. The line then visually appears only in the gaps between circles and copies — not behind text. */ .leistungen-prozess__copy { position: relative; left: auto; top: auto; width: 100%; max-width: 600px; margin-top: 16px; text-align: center; z-index: 2; background: var(--color-blue-500); } .leistungen-prozess__copy--s1, .leistungen-prozess__copy--s2, .leistungen-prozess__copy--s3, .leistungen-prozess__copy--s4, .leistungen-prozess__copy--s5 { left: auto; top: auto; } /* Cover the stage's bottom padding area so the line doesn't extend below the last copy block. */ .leistungen-prozess__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: var(--color-blue-500); z-index: 1; pointer-events: none; } /* ---- Contact CTA ---- */ .leistungen-contact { padding: 80px 40px; } .leistungen-contact__card { height: auto; max-width: 100%; padding: 40px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; text-align: left; } .leistungen-contact__question { position: static; width: auto; } .leistungen-contact__question br { display: none; } .leistungen-contact__details { position: static; width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .leistungen-contact__name { position: static; } .leistungen-contact__role { position: static; width: auto; } .leistungen-contact__link { position: relative; top: 0; margin-top: 8px; min-height: 44px; display: block; margin-bottom: 10px; } .leistungen-contact__link--mail, .leistungen-contact__link--linkedin { top: 0; left: auto; display: block; margin-bottom: 10px; } .leistungen-contact__link--mail { width: auto; } /* Keep relative (not static) so the inner with position:absolute + left:-252 / top:-44 still resolves against this container. Reset top/left from the base desktop absolute rule (left:927, top:32) so they don't carry over as relative offsets. */ .leistungen-contact__portrait { position: relative; top: 0; left: 0; width: 180px; height: 226px; } } /* --- 3) Mobile zone (480 ≤ vw ≤ 767) ----------------------------------- Header drops to 72px at this breakpoint (main.css 767 rule). Card grids collapse to single column (the 2-col tablet layout becomes too cramped for German compound titles). Gutters tighten from 40 to 24 to match main.css mobile pattern. Heading typography drops from 42 to 32 across the page; body sizes from 28 to 22. Prozess step circles shrink from 100×100 to 80×80 to leave more room for copy. ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* ---- Hero ---- */ .leistungen-hero__stage { padding: 110px 24px 56px; gap: 32px; } .leistungen-hero__title { font-size: clamp(48px, 10vw, 80px); } .leistungen-hero__intro { padding: 48px 24px 64px; } .leistungen-hero__intro-text { font-size: 22px; line-height: 1.4; } /* ---- Cases ---- */ .leistungen-cases { padding-bottom: 48px; } .leistungen-cases__stage { padding: 48px 24px 0; } .leistungen-cases__inner { gap: 20px; } .leistungen-cases__heading { font-size: 32px; line-height: 1.15; } .leistungen-cases__teaser-body { padding: 24px; } .leistungen-cases__title { font-size: 22px; line-height: 1.3; } /* ---- Zielbild label list ---- */ .leistungen-zielbild__stage { padding: 48px 24px; } .leistungen-zielbild__heading { font-size: 32px; line-height: 1.15; margin-bottom: 24px; } .leistungen-zielbild__label { padding: 14px 0; font-size: 22px; line-height: 1.3; } /* ---- Zielbild cards → 1-col ---- */ .leistungen-zielbild-cards { padding: 48px 24px; } .leistungen-zielbild-cards__heading { font-size: 32px; line-height: 1.15; margin-bottom: 24px; } .leistungen-zielbild-cards__grid { grid-template-columns: 1fr; gap: 16px; } .leistungen-service-card { padding: 24px; } .leistungen-service-card__title { font-size: 22px; line-height: 1.3; } /* ---- Transformieren cards → 1-col ---- */ .leistungen-transformieren { padding: 0 24px 48px; } .leistungen-transformieren__heading { font-size: 32px; line-height: 1.15; margin-bottom: 24px; } .leistungen-transformieren__grid { grid-template-columns: 1fr; gap: 16px; } /* ---- Prozess ---- */ .leistungen-prozess__stage { padding: 48px 24px; } .leistungen-prozess__heading { font-size: 32px; line-height: 1.15; } .leistungen-prozess__subhead { font-size: 18px; line-height: 1.45; margin-bottom: 24px; } .leistungen-prozess__step { width: 80px; height: 80px; margin-top: 20px; } .leistungen-prozess__num { font-size: 40px; line-height: 44px; } .leistungen-prozess__copy { margin-top: 12px; } .leistungen-prozess__step-title { font-size: 20px; line-height: 1.3; } .leistungen-prozess__step-body { font-size: 16px; line-height: 1.45; } /* ---- Contact CTA ---- */ .leistungen-contact { padding: 56px 24px; } .leistungen-contact__card { padding: 32px 24px; gap: 24px; } .leistungen-contact__question { font-size: 22px; line-height: 1.3; } .leistungen-contact__name { font-size: 22px; line-height: 1.3; } } /* --- 4) Small mobile zone (vw ≤ 479) ---------------------------------- Header CTA migrates into the drawer (handled in main.css). Gutters tighten from 24 to 20 to mirror main.css's 479 rule across the rest of the site. Hero title floor drops from 48 to 40 so it stays legible at 320. Headings drop 32 → 28, body 22 → 20. ------------------------------------------------------------------------ */ @media (max-width: 479px) { /* ---- Hero ---- */ .leistungen-hero__stage { padding: 110px 20px 48px; gap: 28px; } .leistungen-hero__title { font-size: clamp(40px, 10vw, 80px); } .leistungen-hero__intro { padding: 40px 20px 56px; } .leistungen-hero__intro-text { font-size: 20px; } /* ---- Cases ---- */ .leistungen-cases { padding-bottom: 40px; } .leistungen-cases__stage { padding: 40px 20px 0; } .leistungen-cases__heading { font-size: 28px; } .leistungen-cases__teaser-body { padding: 20px; } .leistungen-cases__title { font-size: 20px; } /* ---- Zielbild label list ---- */ .leistungen-zielbild__stage { padding: 40px 20px; } .leistungen-zielbild__heading { font-size: 28px; margin-bottom: 20px; } .leistungen-zielbild__label { font-size: 20px; } /* ---- Zielbild cards ---- */ .leistungen-zielbild-cards { padding: 40px 20px; } .leistungen-zielbild-cards__heading { font-size: 28px; margin-bottom: 20px; } .leistungen-service-card { padding: 20px; } .leistungen-service-card__title { font-size: 20px; } /* ---- Transformieren cards ---- */ .leistungen-transformieren { padding: 0 20px 40px; } .leistungen-transformieren__heading { font-size: 28px; margin-bottom: 20px; } /* ---- Prozess ---- */ .leistungen-prozess__stage { padding: 40px 20px; } .leistungen-prozess__heading { font-size: 28px; } .leistungen-prozess__subhead { font-size: 17px; margin-bottom: 20px; } .leistungen-prozess__step-title { font-size: 18px; } .leistungen-prozess__step-body { font-size: 15px; } /* ---- Contact CTA ---- */ .leistungen-contact { padding: 48px 20px; } .leistungen-contact__card { padding: 24px 20px; gap: 20px; } .leistungen-contact__question { font-size: 20px; } .leistungen-contact__name { font-size: 20px; } }