/* arades — Design-Prototyp v2 (Ondustry-Style: Navy + Orange, bold typography, image-driven) */ /* === Self-hosted Montserrat (no third-party request) =================== */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/montserrat-400.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-500.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/montserrat-600.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/montserrat-700.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/montserrat-800.woff2') format('woff2'); } :root { /* Brand — arades */ --color-primary: #06609C; /* arades brand blue */ --color-primary-deep: #003D63; /* deeper navy for hero/footer */ --color-primary-light: #4D8FBF; --color-primary-soft: #E1ECF4; --color-accent: #B07900; /* refined dark gold */ --color-accent-hover: #8E6300; --color-accent-soft: #FBEFD3; /* Neutrals */ --color-bg: #ffffff; --color-bg-soft: #F5F8FB; --color-bg-section: #ECF1F6; --color-text: #0F1A2A; --color-text-strong: #0A1220; --color-text-secondary: #475569; --color-text-muted: #64748B; --color-text-on-dark: #ffffff; --color-text-on-dark-muted: rgba(255,255,255,.74); --color-border: #E2E8F0; --color-border-subtle: #EEF2F7; /* Status */ --color-live: #16A34A; --color-live-soft: #DCFCE7; --color-pilot: #F59E0B; --color-pilot-soft: #FEF3C7; --color-mark: #4F46E5; --color-mark-soft: #EEF2FF; /* Radii / Shadows / Spacing */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --shadow-sm: 0 1px 2px rgba(6,96,156,.06); --shadow-md: 0 8px 24px rgba(6,96,156,.08); --shadow-lg: 0 20px 48px rgba(6,96,156,.12); --shadow-image: 0 30px 60px -20px rgba(6,96,156,.35); --container: 1240px; --container-narrow: 800px; --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Safety net against accidental horizontal overflow (long URLs in copy, extra-wide elements on mobile, etc.). `clip` is preferred over `hidden` because it doesn't establish a new scroll container — `position: sticky` on header.site-header keeps working. Fallback `hidden` for iOS Safari before 16.4 / Android browsers that ignore `clip`. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; /* Body bekommt nur `clip` (kein `hidden`), weil `hidden` einen Scroll- Container etablieren würde — das brächte den Sticky-Header auf einigen Browsern. `clip` bricht sticky nicht. Auf alten Browsern ohne clip- Support reicht das `overflow-x: hidden` auf als Schutz. */ overflow-x: clip; font-family: var(--font-sans); font-size: 16.5px; line-height: 1.65; color: var(--color-text-secondary); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } /* Inputs/Selects/Textareas haben default `min-width: auto`, was sie nicht unter ihre intrinsische Size (size-Attribut, default ~20 chars) schrumpfen lässt. In Grid- oder Flex-Containern führt das zu Overflow auf Mobile. Globaler Schutz: min-width: 0 + max-width: 100%. */ input, select, textarea { min-width: 0; max-width: 100%; } /* === Layout === */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; } .container-narrow { max-width: var(--container-narrow); } section { padding: 110px 0; position: relative; } section.tight { padding: 70px 0; } section.bg-soft { background: var(--color-bg-soft); } section.bg-section { background: var(--color-bg-section); } section.bg-dark { background: var(--color-primary); color: var(--color-text-on-dark); } @media (max-width: 800px) { section { padding: 70px 0; } } /* === Typography (refined hierarchy with clearer steps) === */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; color: var(--color-text-strong); letter-spacing: -0.022em; font-weight: 800; } /* Hero H1 (largest, most dominant) */ h1 { font-size: clamp(44px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.030em; } /* Page-Hero H1 (slightly more restrained for detail pages) */ .detail-hero h1, .hub-header h1 { font-size: clamp(38px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -0.026em; } /* Section H2 — clear step down from H1 */ h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.022em; } /* Sub-section H3 — clear step down from H2 */ h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.28; font-weight: 700; letter-spacing: -0.012em; } /* Inline H4 (card titles, small section labels) */ h4 { font-size: 17px; line-height: 1.4; font-weight: 700; letter-spacing: -0.005em; } h5 { font-size: 15px; font-weight: 700; line-height: 1.4; } h6 { font-size: 13.5px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 16px 0; } .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--color-accent); } .eyebrow.muted-bar::before { background: var(--color-text-muted); } .eyebrow.muted-bar { color: var(--color-text-muted); } .eyebrow.on-dark { color: #D9B873; } .eyebrow.on-dark::before { background: var(--color-accent); } .lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--color-text-secondary); max-width: 760px; } .lead.on-dark { color: var(--color-text-on-dark-muted); } .muted { color: var(--color-text-muted); } .secondary { color: var(--color-text-secondary); } .text-accent { color: var(--color-accent); } /* === Buttons === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; border: 2px solid transparent; transition: all .18s ease; cursor: pointer; white-space: nowrap; font-family: var(--font-display); } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--color-accent); color: white; } .btn-accent:hover { background: var(--color-accent-hover); box-shadow: 0 12px 24px -8px rgba(176,121,0,.45); } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: var(--color-primary-deep); box-shadow: 0 12px 24px -8px rgba(6,96,156,.4); } .btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-border); } .btn-outline:hover { border-color: var(--color-primary); background: var(--color-bg-soft); } .btn-on-dark { background: white; color: var(--color-primary); } .btn-on-dark:hover { background: #f3f4f6; } .btn-outline-dark { background: transparent; color: white; border-color: rgba(255,255,255,.3); } .btn-outline-dark:hover { border-color: white; background: rgba(255,255,255,.06); } .btn-link { background: transparent; color: var(--color-primary); padding: 0; font-weight: 700; border: none; font-family: var(--font-display); } .btn-link:hover { color: var(--color-accent); } .btn-link.on-dark { color: white; } .btn-link.on-dark:hover { color: var(--color-accent); } .btn-arrow::after { content: "→"; display: inline-block; transition: transform .18s ease; font-weight: 600; } .btn-arrow:hover::after { transform: translateX(4px); } /* === Header === */ header.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--color-border-subtle); } .header-inner { display: flex; align-items: center; justify-content: space-between; /* Vertical padding only — horizontal padding is inherited from .container because the same element carries both classes. */ padding-top: 20px; padding-bottom: 20px; gap: 32px; } .logo { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.04em; color: var(--color-primary); display: inline-flex; align-items: center; gap: 10px; } .logo img.logo-mark { height: 36px; width: auto; display: block; } .logo-dot { width: 10px; height: 10px; background: var(--color-accent); display: inline-block; transform: rotate(45deg); } /* Logo on dark backgrounds — invert to white */ .footer-brand .logo img.logo-mark { filter: brightness(0) invert(1); opacity: .92; } /* Trust Badges (CMMI, BVMW etc.) */ .trust-badges { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 24px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.1); } .trust-badges .label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; font-family: var(--font-display); } .trust-badges .badge-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; font-size: 13px; color: rgba(255,255,255,.82); font-weight: 600; } .trust-badges .badge-item::before { content: "✓"; color: var(--color-accent); font-weight: 800; } nav.main-nav { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; } nav.main-nav a { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); padding: 10px 12px; border-radius: 6px; transition: all .15s ease; position: relative; white-space: nowrap; } nav.main-nav a:hover { color: var(--color-accent); } nav.main-nav a.active { color: var(--color-accent); } nav.main-nav a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--color-accent); } .header-actions { display: flex; align-items: center; gap: 14px; } .lang-switch { font-size: 13px; color: var(--color-text-muted); display: inline-flex; gap: 6px; align-items: center; } .lang-switch a { color: var(--color-text-muted); cursor: pointer; } .lang-switch a.active { color: var(--color-primary); font-weight: 700; } .lang-switch span { color: var(--color-border); } @media (max-width: 900px) { nav.main-nav { display: none; } } /* === Mega Menu (Top-Nav Dropdown Pro Item) === */ nav.main-nav .nav-item { position: relative; } nav.main-nav .nav-item > a { display: inline-block; } nav.main-nav .nav-item > a::after { /* downward chevron on items that have a mega menu */ content: ""; display: none; } nav.main-nav .nav-item[data-has-mega="true"] > a::after { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; margin-left: 6px; vertical-align: middle; opacity: .55; transition: transform .15s ease; } nav.main-nav .nav-item.open[data-has-mega="true"] > a::after { transform: rotate(180deg); opacity: 1; } .mega-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 720px; max-width: 1080px; background: white; border: 1px solid var(--color-border-subtle); border-radius: 10px; box-shadow: 0 18px 48px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06); padding: 22px 26px; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .mega-menu::before { /* invisible bridge so cursor can travel from nav link to menu without losing hover */ content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } nav.main-nav .nav-item.open .mega-menu, nav.main-nav .nav-item:focus-within .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s; } .mega-menu-grid { display: grid; gap: 24px; } .mega-menu-grid.cols-2 { grid-template-columns: 1fr 1fr; } .mega-menu-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .mega-menu-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .mega-menu-col h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-subtle); } .mega-menu-col ul { list-style: none; margin: 0; padding: 0; } .mega-menu-col li { margin: 2px 0; } .mega-menu-col li a { display: block; padding: 7px 8px; margin-left: -8px; border-radius: 5px; font-size: 13.5px; font-weight: 600; color: var(--color-text); text-decoration: none; letter-spacing: 0; text-transform: none; transition: background .12s, color .12s; white-space: normal; } .mega-menu-col li a:hover { background: rgba(6,96,156,.07); color: var(--color-primary); } .mega-menu-col li a .mega-meta { display: block; font-size: 11.5px; font-weight: 500; color: var(--color-text-muted); margin-top: 1px; letter-spacing: 0; } .mega-menu-col li a.mega-coming { color: var(--color-text-muted); } .mega-menu-col li a.mega-coming::after { content: " ◐"; color: var(--color-accent); font-size: 10px; } .mega-menu-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border-subtle); font-size: 12.5px; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .mega-menu-footer a { color: var(--color-primary); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12.5px; padding: 0; } .mega-menu-footer a:hover { color: var(--color-accent); } @media (max-width: 1180px) { .mega-menu { min-width: 620px; padding: 20px 22px; } } @media (max-width: 1080px) { .mega-menu { min-width: 520px; left: auto; right: 0; transform: translateX(0) translateY(-6px); } nav.main-nav .nav-item.open .mega-menu, nav.main-nav .nav-item:focus-within .mega-menu { transform: translateX(0) translateY(0); } .mega-menu-grid.cols-3 { grid-template-columns: 1fr 1fr; } .mega-menu-grid.cols-4 { grid-template-columns: 1fr 1fr; } } /* === Hero (Image background) === */ .hero { position: relative; min-height: 720px; display: flex; align-items: center; color: white; overflow: hidden; padding: 120px 0; } .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; z-index: 0; } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(0,40,68,.94) 0%, rgba(0,61,99,.84) 50%, rgba(6,96,156,.55) 100%); } .hero .container { position: relative; z-index: 1; } .hero-inner { max-width: 880px; } .hero-inner:has(.hero-pillars-4) { max-width: 1240px; } .hero h1 { color: white; margin-bottom: 24px; } .hero h1 .accent { color: var(--color-accent); } .hero .lead { color: rgba(255,255,255,.85); margin-bottom: 36px; max-width: 640px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 60px; } .hero-stats { display: flex; gap: 60px; flex-wrap: wrap; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.18); max-width: 760px; } .hero-stat .num { font-family: var(--font-display); font-size: 42px; font-weight: 800; color: var(--color-accent); line-height: 1; letter-spacing: -0.02em; } .hero-stat .label { font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 8px; letter-spacing: 0.04em; } @media (max-width: 700px) { .hero { min-height: auto; padding: 90px 0 70px; } .hero-stats { gap: 30px; } .hero-stat .num { font-size: 32px; } } /* === Section heading === */ .section-heading { max-width: 760px; margin-bottom: 64px; } .section-heading.center { margin-left: auto; margin-right: auto; text-align: center; } .section-heading h2 { margin-bottom: 18px; } .section-heading .lead { margin: 0; } .section-heading.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; max-width: 100%; } .section-heading.split > div:first-child { max-width: 720px; } /* === Customer logo strip === */ /* Used on /de/unternehmen/referenzen/ to show partner-* logos in a tidy responsive grid. Logos are small PNGs (~5–20 KB each). */ .logo-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 28px; align-items: center; margin-top: 28px; padding: 28px 16px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .logo-strip img { width: 100%; max-height: 72px; height: auto; object-fit: contain; filter: grayscale(0.25); opacity: 0.92; transition: filter .25s ease, opacity .25s ease, transform .25s ease; } .logo-strip img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.04); } @media (max-width: 980px) { .logo-strip { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .logo-strip { grid-template-columns: repeat(2, 1fr); gap: 16px 18px; } } /* === Logo Carousel (Referenzen) — 5 logos per slide, auto-rotate === */ .logo-carousel { position: relative; margin-top: 28px; padding: 44px 64px 56px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .logo-carousel-viewport { overflow: hidden; width: 100%; } .logo-carousel-track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; } .logo-carousel-slide { flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 44px; align-items: center; padding: 0 4px; } .logo-carousel-slide img { width: 100%; max-height: 130px; height: auto; object-fit: contain; filter: grayscale(0.2); opacity: 0.95; transition: filter .25s ease, opacity .25s ease, transform .25s ease; } .logo-carousel-slide img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.05); } .logo-carousel-dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; padding: 0; } .logo-carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--color-border); cursor: pointer; transition: background .2s ease, transform .2s ease; } .logo-carousel-dots button:hover { background: var(--color-text-secondary); } .logo-carousel-dots button.active { background: var(--color-pilot, #06609C); transform: scale(1.25); } .logo-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: white; cursor: pointer; font-size: 20px; line-height: 1; color: var(--color-pilot, #06609C); display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; z-index: 2; } .logo-carousel-arrow:hover { background: var(--color-pilot-soft, #EAF3FA); border-color: var(--color-pilot, #06609C); } .logo-carousel-arrow.prev { left: 12px; } .logo-carousel-arrow.next { right: 12px; } @media (max-width: 980px) { .logo-carousel { padding: 36px 48px 50px; } .logo-carousel-slide { grid-template-columns: repeat(3, 1fr); gap: 22px 24px; } .logo-carousel-slide img { max-height: 100px; } } @media (max-width: 600px) { .logo-carousel { padding: 28px 14px 50px; } .logo-carousel-slide { grid-template-columns: repeat(2, 1fr); gap: 18px 18px; } .logo-carousel-slide img { max-height: 80px; } .logo-carousel-arrow { display: none; } } /* === Microsoft product image grid (used on Microsoft Cloud pillar pages) === */ .ms-product-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 22px; align-items: center; margin-top: 22px; } .ms-product-grid figure { margin: 0; text-align: center; } .ms-product-grid img { width: 100%; max-height: 64px; height: auto; object-fit: contain; } .ms-product-grid figcaption { margin-top: 8px; font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; } @media (max-width: 900px) { .ms-product-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .ms-product-grid { grid-template-columns: repeat(2, 1fr); } } /* === Cards === */ .card-grid { display: grid; gap: 24px; } .card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 980px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; } } /* Card with image */ .image-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: all .25s ease; text-decoration: none; color: inherit; } .image-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .image-card .image { position: relative; height: 230px; overflow: hidden; background: var(--color-bg-section); } .image-card .image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .image-card:hover .image img { transform: scale(1.04); } .image-card .image-overlay { position: absolute; bottom: 14px; left: 14px; } /* Variant: small product-icon block at top of an image-card (used to show one official Microsoft product logo per module/product). Lives next to .image (which is a hero image) — not used together. */ .image-card .image-card-icon { display: flex; align-items: center; justify-content: center; height: 140px; padding: 24px; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border-subtle); } .image-card .image-card-icon img { max-height: 88px; max-width: 80%; width: auto; height: auto; object-fit: contain; } .image-card .body { padding: 28px; display: flex; flex-direction: column; flex: 1; } .image-card h3 { margin-bottom: 12px; } .image-card p { color: var(--color-text-secondary); margin: 0 0 20px; flex-grow: 1; } .image-card .footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Plain card */ .card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 36px 32px; transition: all .2s ease; display: flex; flex-direction: column; height: 100%; } .card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .card .icon-box { width: 56px; height: 56px; background: var(--color-accent-soft); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: 12px; flex-shrink: 0; } .card .icon-box svg { width: 28px; height: 28px; } .card h3 { margin-bottom: 12px; } .card p { color: var(--color-text-secondary); margin: 0 0 20px; flex-grow: 1; } .card .footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Status Badges */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: white; color: var(--color-text); border: 1px solid var(--color-border); } .badge::before { content: "●"; font-size: 10px; } .badge-live { background: var(--color-live-soft); color: var(--color-live); border-color: transparent; } .badge-pilot { background: var(--color-pilot-soft); color: #B45309; border-color: transparent; } .badge-mark { background: var(--color-mark-soft); color: var(--color-mark); border-color: transparent; } .badge-accent { background: var(--color-accent); color: white; border-color: transparent; } .badge-accent::before { color: white; } /* === Three pillars === */ .pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 980px) { .pillar-grid { grid-template-columns: 1fr; } } .pillar { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px 32px; position: relative; /* overflow visible so überlappende Badges (top:-14px) sichtbar bleiben */ transition: all .2s ease; } .pillar:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-md); } .pillar-num { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 18px; text-transform: uppercase; } .pillar-logo { position: absolute; top: 28px; right: 28px; width: 56px; height: auto; max-height: 56px; object-fit: contain; opacity: .92; pointer-events: none; } .pillar:has(.pillar-logo) .pillar-num, .pillar:has(.pillar-logo) h3, .pillar:has(.pillar-logo) p { padding-right: 76px; } @media (max-width: 600px) { .pillar-logo { width: 44px; max-height: 44px; top: 22px; right: 22px; } .pillar:has(.pillar-logo) .pillar-num, .pillar:has(.pillar-logo) h3, .pillar:has(.pillar-logo) p { padding-right: 60px; } } .pillar h3 { font-size: 26px; margin-bottom: 14px; } .pillar > p { color: var(--color-text-secondary); margin: 0 0 28px; } .pillar ul { list-style: none; padding: 0; margin: 0 0 28px; } .pillar ul li { font-size: 14.5px; color: var(--color-text); padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); display: flex; align-items: center; gap: 10px; } .pillar ul li::before { content: "■"; color: var(--color-accent); font-size: 8px; } /* === Stats Strip === */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: var(--color-primary); border-radius: var(--radius-lg); padding: 50px 40px; color: white; position: relative; overflow: hidden; } .stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 100%, rgba(176,121,0,.18), transparent 60%); pointer-events: none; } .stats-item { position: relative; padding: 0 14px; } .stats-item:not(:first-child) { border-left: 1px solid rgba(255,255,255,.12); } .stats-item .num { font-family: var(--font-display); font-size: clamp(40px, 4vw, 56px); font-weight: 800; color: white; line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 4px; } .stats-item .num small { font-size: 0.5em; color: var(--color-accent); font-weight: 700; } .stats-item .label { font-size: 13.5px; color: rgba(255,255,255,.72); margin-top: 12px; letter-spacing: 0.04em; } @media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); padding: 32px 24px; gap: 28px 8px; } .stats-item:not(:first-child) { border-left: none; } .stats-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); } } /* === Image content (split with image) === */ .split-image { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .split-image.reverse { grid-template-columns: 1fr 1.05fr; } .split-image.reverse .image-block { order: 2; } .split-image.reverse .text-block { order: 1; } @media (max-width: 900px) { .split-image, .split-image.reverse { grid-template-columns: 1fr; gap: 50px; } .split-image.reverse .image-block { order: -1; } } .image-block { position: relative; } .image-block img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-image); aspect-ratio: 4/5; } .image-block .image-accent { position: absolute; width: 100px; height: 100px; background: var(--color-accent); border-radius: var(--radius-md); bottom: -30px; left: -30px; z-index: -1; } .image-block .image-stat { position: absolute; bottom: 30px; right: -30px; background: white; padding: 24px 28px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 200px; } .image-block .image-stat .num { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--color-accent); line-height: 1; } .image-block .image-stat .label { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; } @media (max-width: 900px) { .image-block .image-stat { right: 20px; bottom: 20px; } .image-block .image-accent { display: none; } } /* === Case Study === */ .case-study { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--color-primary); color: white; border-radius: var(--radius-lg); overflow: hidden; } @media (max-width: 900px) { .case-study { grid-template-columns: 1fr; } } .case-study-image { position: relative; min-height: 480px; background-size: cover; background-position: center; } .case-study-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,96,156,.4)); } .case-study-image .badge-accent { position: absolute; top: 24px; left: 24px; } .case-study-content { padding: 60px 50px; } .case-study-content h2 { color: white; margin-bottom: 20px; } .case-study-content p { color: rgba(255,255,255,.8); margin-bottom: 30px; font-size: 17px; } .case-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 30px; } .case-meta strong { display: block; color: var(--color-accent); font-family: var(--font-display); font-size: 28px; font-weight: 800; margin-bottom: 4px; line-height: 1; } .case-meta span { font-size: 13px; color: rgba(255,255,255,.65); } /* === Process === */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } @media (max-width: 980px) { .process { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .process { grid-template-columns: 1fr; } } .process-step { background: white; border-radius: var(--radius-lg); padding: 36px 28px; position: relative; border: 1px solid var(--color-border); transition: all .2s ease; } .process-step:hover { transform: translateY(-3px); border-color: var(--color-accent); } .process-step .num { font-family: var(--font-display); font-size: 56px; font-weight: 800; color: var(--color-accent); line-height: 1; letter-spacing: -0.04em; margin-bottom: 16px; display: block; } .process-step h4 { margin-bottom: 10px; } .process-step p { font-size: 14.5px; color: var(--color-text-secondary); margin: 0; } /* === CTA Stripe (image bg version) === */ .cta-stripe { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-primary); color: white; padding: 80px 60px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; } .cta-stripe-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .14; z-index: 0; } .cta-stripe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, var(--color-primary-deep) 30%, rgba(6,96,156,.85)); z-index: 1; } /* Make text + action children sit above gradient overlay, but DON'T override the absolute-positioning of .cta-stripe-bg */ .cta-stripe > *:not(.cta-stripe-bg) { position: relative; z-index: 2; } .cta-stripe h2 { color: white; margin-bottom: 14px; } .cta-stripe p { color: rgba(255,255,255,.8); margin: 0; max-width: 560px; } .cta-stripe .actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 220px; } .cta-stripe .actions .btn { justify-content: center; text-align: center; } @media (max-width: 800px) { .cta-stripe { grid-template-columns: 1fr; padding: 50px 32px; } } /* === Footer (compact) === */ footer.site-footer { background: var(--color-primary-deep); color: rgba(255,255,255,.7); padding: 48px 0 18px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 28px; } /* When the JS-injected partner block is present, the stacked dual-

.footer-cols have already been split into separate single-section cols by footer-partner-block.js. That flattens the tallest column → shorter footer overall. Layout becomes: brand + 6 link cols + slim partner col. */ .footer-grid.has-partner-block { grid-template-columns: 1.3fr repeat(6, 1fr) 0.95fr; gap: 22px; } @media (max-width: 1280px) { .footer-grid.has-partner-block { gap: 18px; } } @media (max-width: 1100px) { .footer-grid.has-partner-block { grid-template-columns: 1.15fr repeat(6, 1fr) 1fr; gap: 14px; } } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .footer-grid.has-partner-block { grid-template-columns: 1fr 1fr; gap: 24px; } } /* Split sub-columns inherit the same look — no extra margin from the old inline style="margin-top:32px" on the second h4 (footer-partner-block.js strips that attribute). */ .footer-col.footer-col-split { /* placeholder for future tuning */ } .footer-brand .logo { color: white; } .footer-brand .logo .logo-dot { background: var(--color-accent); } .footer-brand p { font-size: 14px; color: rgba(255,255,255,.6); margin: 12px 0 0; max-width: 320px; line-height: 1.45; } .footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: 12px; font-weight: 700; } .footer-col h4 + ul + h4 { margin-top: 20px !important; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 7px; } .footer-col a { font-size: 14px; color: rgba(255,255,255,.7); transition: color .15s ease; } .footer-col a:hover { color: white; } /* Legacy inline trust-badges row inside .footer-brand is replaced by the JS-injected .footer-trust-strip — hide to avoid duplication and save height. */ .footer-brand .trust-badges { display: none; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; flex-wrap: wrap; gap: 10px; } .footer-bottom .legal { display: flex; gap: 24px; flex-wrap: wrap; } .footer-bottom a { color: rgba(255,255,255,.6); } .footer-bottom a:hover { color: white; } /* === Breadcrumb === */ .breadcrumb { font-size: 13px; color: var(--color-text-muted); margin-bottom: 24px; letter-spacing: 0.02em; } .breadcrumb a { color: var(--color-text-muted); } .breadcrumb a:hover { color: var(--color-accent); } .breadcrumb span { padding: 0 10px; color: var(--color-border); } .breadcrumb.on-dark { color: rgba(255,255,255,.6); } .breadcrumb.on-dark a { color: rgba(255,255,255,.6); } .breadcrumb.on-dark a:hover { color: var(--color-accent); } .breadcrumb.on-dark span { color: rgba(255,255,255,.25); } /* === Hub-Header (image background) === */ .hub-header { position: relative; padding: 140px 0 100px; color: white; overflow: hidden; } .hub-header-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .hub-header-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,40,68,.94) 0%, rgba(6,96,156,.78) 60%, rgba(6,96,156,.5)); } .hub-header .container { position: relative; z-index: 1; } .hub-header h1 { color: white; max-width: 880px; margin-bottom: 20px; } .hub-header h1 .accent { color: var(--color-accent); } .hub-header .lead { color: rgba(255,255,255,.82); max-width: 720px; } /* === Detail-Hero (with mockup) === */ .detail-hero { padding: 70px 0 100px; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-bg-soft); } .detail-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; } @media (max-width: 900px) { .detail-hero-grid { grid-template-columns: 1fr; gap: 40px; } } .detail-hero h1 { font-size: clamp(36px, 4.2vw, 56px); margin-bottom: 22px; } .detail-hero .lead { margin-bottom: 32px; } .detail-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; } .detail-hero-image { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-image); aspect-ratio: 4/3; } .detail-hero-image img { width: 100%; height: 100%; object-fit: cover; } .detail-hero-image .image-stat { position: absolute; bottom: 24px; left: 24px; background: rgba(6,96,156,.92); backdrop-filter: blur(12px); color: white; padding: 18px 22px; border-radius: var(--radius-md); border-left: 4px solid var(--color-accent); } .detail-hero-image .image-stat .num { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--color-accent); line-height: 1; } .detail-hero-image .image-stat .label { font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 6px; letter-spacing: 0.04em; } /* === Two col === */ .two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; align-items: start; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 40px; } } /* Numbered list */ .num-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; } .num-list li { display: flex; gap: 18px; align-items: flex-start; } .num-list .n { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: white; background: var(--color-accent); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .num-list strong { display: block; color: var(--color-text-strong); font-weight: 700; margin-bottom: 4px; font-size: 16.5px; } .num-list span.body { color: var(--color-text-secondary); } /* Solution row (Hub list) */ .solution-list { display: grid; gap: 16px; } .solution-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 32px; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: white; align-items: center; transition: all .2s ease; } .solution-row:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .solution-row .thumb { height: 130px; background-size: cover; background-position: center; border-radius: var(--radius-md); position: relative; overflow: hidden; } .solution-row .thumb .num { position: absolute; top: 12px; left: 12px; background: rgba(6,96,156,.9); color: white; font-family: var(--font-display); font-weight: 800; font-size: 14px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .solution-row h3 { font-size: 22px; margin: 0 0 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .solution-row p { color: var(--color-text-secondary); margin: 0; font-size: 15px; } @media (max-width: 800px) { .solution-row { grid-template-columns: 1fr; } .solution-row .thumb { height: 180px; } } /* === FAQ === */ .faq-list { border-top: 1px solid var(--color-border); } .faq-item { border-bottom: 1px solid var(--color-border); padding: 24px 0; } .faq-q { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17.5px; color: var(--color-text-strong); cursor: pointer; font-family: var(--font-display); } .faq-q .plus { color: var(--color-accent); font-size: 22px; font-weight: 800; } .faq-a { color: var(--color-text-secondary); margin-top: 14px; max-width: 760px; } /* === Misc === */ .divider { height: 1px; background: var(--color-border); margin: 60px 0; } .text-center { text-align: center; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } /* Tag/pill list */ .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; padding: 6px 14px; background: var(--color-bg-soft); color: var(--color-text); border-radius: 999px; border: 1px solid var(--color-border); } .pill.accent { background: var(--color-accent-soft); color: #B45309; border-color: transparent; } .pill.tech { background: var(--color-primary-soft); color: var(--color-primary); border-color: transparent; } .pill.tech-mark { background: var(--color-mark-soft); color: var(--color-mark); border-color: transparent; } .pill.tech-live { background: var(--color-live-soft); color: var(--color-live); border-color: transparent; } /* === Tech-Tag-Bar (für Lösungs-Headers, unter dem H1) === */ .tech-tag-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; } .tech-tag-bar .pill { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; } /* === Floating Contact Widget — FAB-Stil mit Hover-Expansion === */ .fcw { position: fixed; bottom: 28px; right: 28px; z-index: 200; font-family: var(--font-display); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; /* The container reserves vertical space for the (hidden) options stack. Without this rule, that whole rectangle would block clicks on whatever is underneath (e.g. footer links). Only the trigger and visible options should be interactive. */ pointer-events: none; } .fcw-trigger { pointer-events: auto; } .fcw.is-open .fcw-option { pointer-events: auto; } .fcw-options { display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .fcw.is-open .fcw-options { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .fcw-option { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 16px; background: white; color: var(--color-primary-deep); border: 1px solid var(--color-border); border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--shadow-md); transition: all .18s ease; cursor: pointer; white-space: nowrap; } .fcw-option:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .fcw-option .fcw-icon { width: 22px; height: 22px; color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .fcw-option svg { width: 100%; height: 100%; } .fcw-trigger { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); color: white; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 40px -8px rgba(6,96,156,.55); transition: all .22s ease; position: relative; } .fcw-trigger:hover { background: var(--color-primary-deep); transform: scale(1.05); } .fcw-trigger svg { width: 26px; height: 26px; transition: transform .25s ease; } .fcw.is-open .fcw-trigger svg { transform: rotate(135deg); } .fcw-trigger .fcw-pulse { position: absolute; inset: -4px; border-radius: 50%; background: var(--color-primary); opacity: .35; animation: fcw-pulse 2.4s ease-out infinite; z-index: -1; } @keyframes fcw-pulse { 0% { transform: scale(.95); opacity: .35; } 60% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* Mobile: only the trigger button visible, options stack above */ @media (max-width: 640px) { .fcw { bottom: 18px; right: 18px; gap: 10px; } .fcw-trigger { width: 56px; height: 56px; } .fcw-trigger svg { width: 22px; height: 22px; } .fcw-option { padding: 10px 14px; font-size: 13px; } } /* === Calendly Modal === */ .fcw-modal { position: fixed; inset: 0; z-index: 300; background: rgba(15,26,42,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; } .fcw-modal.is-open { display: flex; } .fcw-modal-content { background: white; border-radius: var(--radius-lg); width: 100%; max-width: 980px; max-height: 92vh; overflow: auto; position: relative; box-shadow: 0 40px 80px rgba(0,0,0,.4); } .fcw-modal-close { position: absolute; top: 14px; right: 14px; background: white; border: 1px solid var(--color-border); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: all .18s ease; font-size: 16px; color: var(--color-text-secondary); } .fcw-modal-close:hover { border-color: var(--color-primary); color: var(--color-primary); } /* The Calendly inline-widget container is 700px tall — reduce padding accordingly */ .fcw-modal .calendly-inline-widget { border-radius: var(--radius-lg); overflow: hidden; } /* === Hero (Doppel-Säulen-Variante für Pillar-Hubs und Home) === */ .hero-pillars { display: flex; gap: 32px; margin-top: 60px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.18); max-width: 880px; flex-wrap: wrap; } .hero-pillars.hero-pillars-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1240px; margin-top: 40px; padding-top: 24px; } .hero-pillars.hero-pillars-4 .pillar-link { flex: none; padding: 14px 16px; } .hero-pillars.hero-pillars-4 .pillar-link .label { font-size: 10.5px; letter-spacing: 0.16em; } .hero-pillars.hero-pillars-4 .pillar-link .title { font-size: 16px; margin: 6px 0 6px; } .hero-pillars.hero-pillars-4 .pillar-link p { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.72); } @media (max-width: 1000px) { .hero-pillars.hero-pillars-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .hero-pillars.hero-pillars-4 { grid-template-columns: 1fr; } } .hero-pillars .pillar-link { flex: 1 1 240px; display: block; text-decoration: none; color: white; padding: 22px 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); transition: all .2s ease; } .hero-pillars .pillar-link:hover { background: rgba(255,255,255,.10); border-color: var(--color-accent); transform: translateY(-2px); } .hero-pillars .pillar-link .label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; } .hero-pillars .pillar-link .title { font-size: 22px; font-weight: 800; margin: 8px 0 8px; letter-spacing: -0.01em; } .hero-pillars .pillar-link p { font-size: 14px; color: rgba(255,255,255,.78); margin: 0; line-height: 1.5; } /* === Pillar-Hub-Header (kombinierter Hero + Intro für Microsoft Cloud / Independent Engineering) === */ .pillar-hero { position: relative; background: var(--color-primary-deep); color: white; padding: 100px 0 80px; overflow: hidden; } /* Variant with a thematic hero photo as backdrop. Use:
The deep-blue base color stays as fallback; an overlay keeps text readable. */ .pillar-hero.pillar-hero-photo { background-size: cover; background-position: center; background-repeat: no-repeat; } .pillar-hero.pillar-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 28, 51, .92) 0%, rgba(6, 47, 79, .82) 60%, rgba(6, 96, 156, .65) 100%); pointer-events: none; } .pillar-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(176,121,0,.16), transparent 55%); pointer-events: none; z-index: 1; } .pillar-hero .container { position: relative; z-index: 1; } .pillar-hero .breadcrumb { color: rgba(255,255,255,.65); margin-bottom: 28px; } .pillar-hero .breadcrumb a { color: rgba(255,255,255,.85); } .pillar-hero .breadcrumb span { color: rgba(255,255,255,.45); } .pillar-hero h1 { color: white; } .pillar-hero h1 .accent { color: var(--color-accent); } .pillar-hero .lead { color: rgba(255,255,255,.82); margin-top: 18px; max-width: 760px; } @media (max-width: 700px) { .pillar-hero { padding: 70px 0 60px; } } /* === Sub-Page-Grid (Modul-Listen, Decision-Pages) === */ .subpage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 760px) { .subpage-grid { grid-template-columns: 1fr; } } .subpage-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0; text-decoration: none; color: inherit; transition: all .2s ease; position: relative; overflow: hidden; } /* Fallback padding for subpage cards that have no explicit body wrapper */ .subpage-card:not(:has(.subpage-card-body)) { padding: 28px 28px 24px; } .subpage-card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); } .subpage-card .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; margin-bottom: 12px; } .subpage-card { position: relative; overflow: hidden; padding: 0; } .subpage-card .subpage-card-image { display: block; width: 100%; height: 180px; background-size: cover; background-position: center; background-color: var(--color-bg-section); } .subpage-card .subpage-card-body { display: flex; flex-direction: column; flex: 1; padding: 28px 32px 32px; } .subpage-card .label { display: block; margin-bottom: 10px; } .subpage-card h3 { margin: 0 0 10px; font-size: 19px; } .subpage-card p { color: var(--color-text-secondary); margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; flex-grow: 1; } .subpage-card .arrow { margin-top: auto; } @media (max-width: 760px) { .subpage-card .subpage-card-image { height: 150px; } .subpage-card .subpage-card-body { padding: 22px 22px 26px; } } .subpage-card .arrow { font-size: 14px; font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; } .subpage-card .arrow::after { content: "→"; transition: transform .18s ease; } .subpage-card:hover .arrow::after { transform: translateX(4px); } /* === Decision-Card (für Beratung/Implementierung/Schulungen/Support) === */ .decision-card { position: relative; background: var(--color-bg-soft); border-left: 3px solid var(--color-primary); } .decision-card .label { color: var(--color-primary); } /* === Knowledge-Card (für Insights ERP-Wissens-Pages — markiert „Wissen, kein Service") === */ .knowledge-card { background: white; border-style: dashed !important; border-color: var(--color-border) !important; } .knowledge-card .label { color: var(--color-text-muted); } /* === Section-Intro (kompakter als Section-Heading, für Sub-Sektionen) === */ .section-intro { max-width: 720px; margin-bottom: 40px; } .section-intro .eyebrow { margin-bottom: 12px; } .section-intro h2 { margin-bottom: 14px; } .section-intro p { color: var(--color-text-secondary); margin: 0; font-size: 17px; } /* === Body-Prose (für Detail-Page-Content) === */ .prose { max-width: 760px; font-size: 17px; line-height: 1.75; color: var(--color-text); } .prose p { margin: 0 0 22px; } .prose h2 { margin: 56px 0 18px; font-size: clamp(26px, 2.6vw, 36px); } .prose h3 { margin: 36px 0 14px; } .prose ul, .prose ol { padding-left: 24px; margin: 0 0 22px; color: var(--color-text-secondary); } .prose li { margin-bottom: 8px; } .prose strong { color: var(--color-text-strong); font-weight: 700; } .prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--color-accent); } .prose blockquote { margin: 28px 0; padding: 22px 26px; background: var(--color-primary-soft); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); color: var(--color-primary-deep); font-style: italic; } .prose code { background: var(--color-bg-soft); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; color: var(--color-primary-deep); } /* === Trust-Strip (kompakte Vertrauens-Indikatoren) === */ .trust-strip { display: flex; justify-content: center; align-items: center; gap: 36px; padding: 20px 0; flex-wrap: wrap; background: var(--color-bg-soft); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-secondary); } .trust-strip strong { color: var(--color-primary-deep); font-weight: 700; } /* === FAQ-Page Schema-friendly markup === */ .faq-section { background: white; } .faq-list-rich { border-top: 1px solid var(--color-border); } .faq-list-rich details { border-bottom: 1px solid var(--color-border); padding: 22px 0; } .faq-list-rich summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; font-size: 17.5px; color: var(--color-text-strong); font-family: var(--font-display); } .faq-list-rich summary::-webkit-details-marker { display: none; } .faq-list-rich summary::after { content: "+"; color: var(--color-accent); font-size: 22px; font-weight: 800; transition: transform .2s ease; } .faq-list-rich details[open] summary::after { transform: rotate(45deg); } .faq-list-rich details > :not(summary) { margin-top: 14px; color: var(--color-text-secondary); max-width: 760px; font-size: 15.5px; line-height: 1.65; } /* =============================================================== */ /* === Cookie Consent (TDDDG / DSGVO) === */ /* === Banner: bottom-center, three EQUAL-prominence buttons === */ /* === Modal: full-screen overlay, accessible toggles === */ /* =============================================================== */ /* Banner --------------------------------------------------------- */ .cc-banner { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); width: calc(100% - 32px); max-width: 780px; background: #ffffff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(15,26,42,.18); padding: 24px 28px; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; opacity: 0; transition: opacity .26s ease, transform .26s ease; z-index: 400; } .cc-banner.is-open { opacity: 1; transform: translateX(-50%) translateY(0); } /* Text on top, buttons in a row at the bottom. The previous horizontal layout squeezed the lead text to ~150px on desktop because three min-width:130px buttons consumed ~400px of the 720px banner. */ .cc-banner-inner { display: flex; flex-direction: column; gap: 18px; } .cc-banner-text { max-width: 100%; } .cc-banner-text h2 { font-family: var(--font-display); font-size: 19px; line-height: 1.3; margin: 0 0 8px 0; color: var(--color-text-strong); font-weight: 700; letter-spacing: -0.012em; } .cc-banner-text p { margin: 0; color: var(--color-text-secondary); font-size: 14.5px; line-height: 1.55; max-width: 65ch; } .cc-banner-link { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .cc-banner-link:hover { color: var(--color-primary-deep); } .cc-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } /* Buttons — accept and reject must be visually equal-prominent. Both: same height, same border-weight, same font-size. The only difference is the colour pair. */ .cc-button { font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: 0; padding: 12px 18px; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; flex: 1 1 0; min-width: 130px; text-align: center; line-height: 1.2; } .cc-button-primary { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } .cc-button-primary:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); } .cc-button-secondary { background: #ffffff; color: var(--color-text-strong); border-color: var(--color-text-strong); } .cc-button-secondary:hover { background: var(--color-text-strong); color: #ffffff; } .cc-button-tertiary { background: var(--color-bg-soft); color: var(--color-text-strong); border-color: var(--color-border); } .cc-button-tertiary:hover { background: var(--color-bg-section); border-color: var(--color-text-secondary); } .cc-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Modal ---------------------------------------------------------- */ .cc-modal { position: fixed; inset: 0; z-index: 500; background: rgba(15,26,42,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .cc-modal.is-open { opacity: 1; pointer-events: auto; } .cc-modal-content { background: #ffffff; width: 100%; max-width: 540px; max-height: 88vh; overflow: auto; border-radius: var(--radius-lg); box-shadow: 0 40px 80px rgba(0,0,0,.32); position: relative; transform: translateY(8px); transition: transform .2s ease; } .cc-modal.is-open .cc-modal-content { transform: translateY(0); } .cc-modal-close { position: absolute; top: 14px; right: 14px; background: #ffffff; border: 1px solid var(--color-border); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-secondary); transition: border-color .18s ease, color .18s ease; } .cc-modal-close:hover { border-color: var(--color-primary); color: var(--color-primary); } .cc-modal-close svg { width: 16px; height: 16px; } .cc-modal-header { padding: 28px 30px 12px 30px; } .cc-modal-header h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; margin: 0 0 6px 0; color: var(--color-text-strong); font-weight: 700; } .cc-modal-header p { margin: 0; color: var(--color-text-secondary); font-size: 14.5px; line-height: 1.55; } .cc-modal-body { padding: 8px 30px 6px 30px; } .cc-modal-footer { padding: 16px 30px 28px 30px; display: flex; justify-content: flex-end; } /* Category row --------------------------------------------------- */ .cc-category { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--color-border-subtle); } .cc-category:last-child { border-bottom: 0; } .cc-category-text { flex: 1; } .cc-category-text h3 { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; margin: 0 0 4px 0; color: var(--color-text-strong); letter-spacing: -0.005em; } .cc-category-text p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); } /* Toggle --------------------------------------------------------- */ .cc-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; flex-shrink: 0; } .cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .cc-toggle-track { width: 40px; height: 22px; background: #cdd5df; border-radius: 999px; position: relative; transition: background-color .18s ease; } .cc-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #ffffff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s ease; } .cc-toggle input:checked + .cc-toggle-track { background: var(--color-primary); } .cc-toggle input:checked + .cc-toggle-track .cc-toggle-knob { transform: translateX(18px); } .cc-toggle input:focus-visible + .cc-toggle-track { outline: 2px solid var(--color-accent); outline-offset: 2px; } .cc-toggle.locked { cursor: not-allowed; opacity: 1; } .cc-toggle.locked .cc-toggle-track { background: var(--color-primary); opacity: .55; } .cc-toggle.locked .cc-toggle-knob { transform: translateX(18px); } .cc-always-on { font-size: 12.5px; color: var(--color-text-muted); font-style: italic; white-space: nowrap; } /* Eyebrow strip above the banner / modal title --------------------- */ .cc-banner-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; } .cc-banner-eyebrow svg { width: 14px; height: 14px; } /* Category row v2 — icon + text + toggle on top row, details below -- */ .cc-category { display: block; padding: 18px 0; } .cc-category-top { display: flex; align-items: flex-start; gap: 14px; } .cc-category-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: rgba(6, 96, 156, .08); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; } .cc-category-icon svg { width: 18px; height: 18px; } .cc-category[data-cc-id="functional"] .cc-category-icon, .cc-category .cc-category-icon { /* default blue */ } .cc-category-top .cc-category-text { flex: 1; } /* Expandable details panel ----------------------------------------- */ .cc-details { margin-top: 10px; margin-left: 50px; } .cc-details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-primary); user-select: none; padding: 4px 0; } .cc-details > summary::-webkit-details-marker { display: none; } .cc-details > summary:hover { color: var(--color-primary-deep); } .cc-details-chevron { display: inline-flex; transition: transform .18s ease; } .cc-details-chevron svg { width: 14px; height: 14px; } .cc-details[open] .cc-details-chevron { transform: rotate(180deg); } .cc-details .cc-details-hide { display: none; } .cc-details[open] .cc-details-show { display: none; } .cc-details[open] .cc-details-hide { display: inline; } .cc-details-list { margin-top: 10px; padding: 14px 16px; background: var(--color-bg-soft); border-radius: 8px; border: 1px solid var(--color-border-subtle); } .cc-details-item + .cc-details-item { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border-subtle); } .cc-details-item h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; color: var(--color-text-strong); } .cc-details-item dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 4px; font-size: 12.5px; line-height: 1.5; } .cc-details-item dt { color: var(--color-text-muted); font-weight: 600; } .cc-details-item dd { margin: 0; color: var(--color-text-secondary); } .cc-details-note { margin: 0; font-size: 13px; font-style: italic; color: var(--color-text-secondary); } /* Modal footer now has 2 buttons (reject + save) — left-align reject */ .cc-modal-footer { justify-content: space-between; gap: 10px; } /* Responsive ----------------------------------------------------- */ @media (min-width: 720px) { .cc-banner-actions { flex-wrap: nowrap; } .cc-button { flex: 0 0 auto; min-width: 140px; } } @media (max-width: 600px) { .cc-banner { bottom: 12px; padding: 20px 20px; border-radius: var(--radius-md); } .cc-banner-text h2 { font-size: 17px; } .cc-banner-actions { flex-direction: column; align-items: stretch; } .cc-button { width: 100%; min-width: 0; } .cc-modal-header { padding: 24px 22px 10px 22px; } .cc-modal-body { padding: 6px 22px 4px 22px; } .cc-modal-footer { padding: 14px 22px 22px 22px; } } /* Reduced motion ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cc-banner, .cc-modal, .cc-modal-content, .cc-toggle-track, .cc-toggle-knob { transition: none; } } /* ===================================================================== AI Chat Demo (Click-Demo, ai-chat-demo.js) ===================================================================== */ :root { --ai-ms-color: var(--color-primary); --ai-ie-color: #4F46E5; } /* Overlay */ .ai-modal { position: fixed; inset: 0; z-index: 320; background: rgba(8, 16, 28, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .22s ease; } .ai-modal.is-open { display: flex; opacity: 1; } /* Card */ .ai-modal-content { background: white; border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; position: relative; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); overflow: hidden; transform: translateY(8px) scale(.98); transition: transform .22s ease; } .ai-modal.is-open .ai-modal-content { transform: translateY(0) scale(1); } /* Close */ .ai-modal-close { position: absolute; top: 14px; right: 14px; background: white; border: 1px solid var(--color-border); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: all .18s ease; color: var(--color-text-secondary); } .ai-modal-close svg { width: 16px; height: 16px; } .ai-modal-close:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Header */ .ai-modal-header { padding: 22px 26px 14px 26px; border-bottom: 1px solid var(--color-border-subtle); } .ai-modal-title-row { display: inline-flex; align-items: center; gap: 10px; } .ai-modal-title-row h2 { margin: 0; font-size: 18px; color: var(--color-text-strong); letter-spacing: -0.01em; } .ai-modal-spark { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ai-modal-spark svg { width: 22px; height: 22px; } /* Body */ .ai-modal-body { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; } /* Footer */ .ai-modal-footer { padding: 10px 26px 14px 26px; border-top: 1px solid var(--color-border-subtle); text-align: center; } .ai-pill { display: inline-block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; } /* ----- Mode Selection ----- */ .ai-modal-body[data-step="select"] { padding: 22px 26px 22px 26px; gap: 16px; } .ai-mode-intro { margin: 0 0 4px 0; font-size: 14.5px; color: var(--color-text-secondary); line-height: 1.55; } .ai-mode-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .ai-mode-card { display: grid; grid-template-columns: 44px 1fr 24px; gap: 14px; align-items: center; text-align: left; padding: 16px 18px; background: white; border: 1.5px solid var(--color-border); border-radius: 12px; cursor: pointer; font: inherit; color: inherit; transition: all .18s ease; } .ai-mode-card:hover { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-md); } .ai-mode-card.microsoft:hover { border-color: var(--ai-ms-color); box-shadow: 0 8px 24px rgba(6, 96, 156, 0.14); } .ai-mode-card.independent:hover { border-color: var(--ai-ie-color); box-shadow: 0 8px 24px rgba(79, 70, 229, 0.18); } .ai-mode-icon { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #F8FAFC; border: 1px solid var(--color-border-subtle); } .ai-mode-card.microsoft .ai-mode-icon { background: #F2F8FC; } .ai-mode-card.independent .ai-mode-icon { background: #EEF0FF; } .ai-mode-icon svg { width: 22px; height: 22px; } .ai-mode-text { display: flex; flex-direction: column; gap: 4px; } .ai-mode-text strong { font-size: 14.5px; color: var(--color-text-strong); font-weight: 700; letter-spacing: -0.01em; } .ai-mode-text span { font-size: 13px; color: var(--color-text-secondary); line-height: 1.45; } .ai-mode-arrow { color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; } .ai-mode-arrow svg { width: 18px; height: 18px; } .ai-mode-card:hover .ai-mode-arrow { color: var(--color-primary); transform: translateX(2px); transition: all .18s ease; } .ai-mode-card.microsoft:hover .ai-mode-arrow { color: var(--ai-ms-color); } .ai-mode-card.independent:hover .ai-mode-arrow { color: var(--ai-ie-color); } /* ----- Chat Step ----- */ .ai-modal-body[data-step="chat"] { padding: 0; } .ai-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 26px; border-bottom: 1px solid var(--color-border-subtle); background: #FCFDFE; } .ai-mode-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: white; border: 1px solid var(--color-border); color: var(--color-text-strong); } .ai-mode-badge svg { width: 16px; height: 16px; } .ai-mode-badge.microsoft { color: var(--ai-ms-color); border-color: rgba(6, 96, 156, 0.4); } .ai-mode-badge.independent { color: var(--ai-ie-color); border-color: rgba(79, 70, 229, 0.4); } .ai-mode-switch { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all .18s ease; } .ai-mode-switch svg { width: 14px; height: 14px; } .ai-mode-switch:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Thread */ .ai-chat-thread { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 50vh; background: #FAFBFD; } .ai-chat-bubble { max-width: 88%; font-size: 14px; line-height: 1.55; } .ai-chat-bubble .ai-bubble-body { padding: 10px 14px; border-radius: 14px; } .ai-chat-bubble.user { align-self: flex-end; } .ai-chat-bubble.user .ai-bubble-body { background: #E1ECF4; color: var(--color-text-strong); border-bottom-right-radius: 4px; } .ai-modal-body[data-mode="independent"] .ai-chat-bubble.user .ai-bubble-body { background: #EEF0FF; } .ai-chat-bubble.assistant { align-self: flex-start; } .ai-chat-bubble.assistant .ai-bubble-body { background: white; color: var(--color-text); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; } .ai-chat-bubble.assistant p { margin: 0 0 8px 0; } .ai-chat-bubble.assistant p:last-child { margin-bottom: 0; } .ai-chat-bubble.assistant ul { margin: 0 0 8px 0; padding-left: 18px; } .ai-chat-bubble.assistant li { margin: 2px 0; } .ai-chat-bubble.assistant strong { color: var(--color-text-strong); } /* CTA inside answer */ .ai-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; background: var(--color-primary); color: white; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; transition: all .18s ease; } /* Related pages — clickable list of arades.de pages with further reading about the topic of the current AI answer. Rendered between reply text and the Calendly CTA. */ .ai-related-pages { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(6, 96, 156, 0.12); } .ai-related-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary, #4b5563); margin-bottom: 8px; } .ai-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ai-related-link { display: inline-flex; align-items: flex-start; gap: 8px; padding: 7px 10px; background: rgba(6, 96, 156, 0.04); border: 1px solid rgba(6, 96, 156, 0.10); border-radius: 7px; color: var(--color-primary, #06609C); font-weight: 600; font-size: 13px; line-height: 1.4; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .ai-related-link:hover { background: rgba(6, 96, 156, 0.10); border-color: rgba(6, 96, 156, 0.22); text-decoration: none; } .ai-related-link-icon { flex-shrink: 0; font-size: 13px; line-height: 1.4; opacity: 0.8; } .ai-related-link-text { flex: 1; word-break: break-word; } .ai-modal-body[data-mode="independent"] .ai-related-link { background: rgba(79, 70, 229, 0.05); border-color: rgba(79, 70, 229, 0.12); color: var(--ai-ie-color, #4F46E5); } .ai-modal-body[data-mode="independent"] .ai-related-link:hover { background: rgba(79, 70, 229, 0.12); border-color: rgba(79, 70, 229, 0.25); } .ai-cta:hover { background: var(--color-primary-deep); transform: translateY(-1px); } .ai-modal-body[data-mode="independent"] .ai-cta { background: var(--ai-ie-color); } .ai-modal-body[data-mode="independent"] .ai-cta:hover { background: #3F35C7; } /* Inline-consent variants used inside the .consent bubble. .primary keeps the accent (functional grant); .secondary is outlined (open the full cookie settings). */ .ai-cta.secondary { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .ai-cta.secondary:hover { background: var(--color-primary); color: white; transform: translateY(-1px); } .ai-chat-bubble.consent { border-left: 3px solid var(--color-accent, #F59E0B); background: rgba(245,158,11,.06); padding-left: 12px; } .ai-chat-bubble.consent .ai-consent-title { margin: 0 0 6px; font-size: 14px; color: var(--color-text-strong); } .ai-chat-bubble.consent .ai-consent-detail { margin: 0 0 12px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; } .ai-chat-bubble.consent .ai-consent-detail a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .ai-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; } .ai-bubble-actions { margin-top: 6px; padding-left: 4px; } .ai-link-btn { background: none; border: none; padding: 0; color: var(--color-primary); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .ai-link-btn:hover { color: var(--color-primary-deep); } /* Typing dots */ .ai-typing-dots { display: inline-flex; align-items: center; gap: 4px; } .ai-typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); opacity: .35; animation: ai-blink 1.2s infinite ease-in-out; } .ai-typing-dots span:nth-child(2) { animation-delay: .15s; } .ai-typing-dots span:nth-child(3) { animation-delay: .30s; } @keyframes ai-blink { 0%, 80%, 100% { opacity: .25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } /* Suggestion chips */ .ai-suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px 12px 22px; border-top: 1px solid var(--color-border-subtle); background: white; } .ai-chip { background: #F1F5FA; border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 12px; font-size: 12.5px; color: var(--color-text); cursor: pointer; transition: all .18s ease; font-family: inherit; text-align: left; line-height: 1.3; } .ai-chip:hover { border-color: var(--color-primary); background: white; color: var(--color-primary); } .ai-modal-body[data-mode="independent"] .ai-chip:hover { border-color: var(--ai-ie-color); color: var(--ai-ie-color); } /* Input */ .ai-input-area { display: flex; gap: 8px; padding: 12px 22px 18px 22px; border-top: 1px solid var(--color-border-subtle); background: white; } .ai-input { flex: 1 1 auto; border: 1px solid var(--color-border); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-family: inherit; color: var(--color-text); background: white; outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .ai-input::placeholder { color: var(--color-text-muted); } .ai-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(6, 96, 156, 0.12); } .ai-modal-body[data-mode="independent"] .ai-input:focus { border-color: var(--ai-ie-color); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16); } .ai-submit { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--color-primary); color: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .18s ease; flex-shrink: 0; } .ai-submit svg { width: 18px; height: 18px; } .ai-submit:hover { background: var(--color-primary-deep); transform: translateY(-1px); } .ai-modal-body[data-mode="independent"] .ai-submit { background: var(--ai-ie-color); } .ai-modal-body[data-mode="independent"] .ai-submit:hover { background: #3F35C7; } /* Mobile */ @media (max-width: 640px) { .ai-modal { padding: 0; } .ai-modal-content { max-width: 100%; width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; } .ai-modal-header { padding: 18px 18px 12px 18px; } .ai-modal-body[data-step="select"] { padding: 16px 18px 18px 18px; } .ai-chat-header { padding: 10px 16px; } .ai-chat-thread { padding: 14px 16px; max-height: none; } .ai-suggestion-chips { padding: 10px 16px; } .ai-input-area { padding: 10px 16px 16px 16px; } .ai-modal-footer { padding: 8px 18px 12px 18px; } } @media (prefers-reduced-motion: reduce) { .ai-modal, .ai-modal-content, .ai-mode-card, .ai-cta, .ai-submit, .ai-mode-arrow { transition: none; } .ai-typing-dots span { animation: none; opacity: .6; } } /* ============================================================ * Mobile Typography & Layout Optimizations * Fixes H1/H2 overflow on small viewports for long German words * (e.g. "Organisationen", "Branchenreferenzen") and tightens * paddings/spacing on phones. * ============================================================ */ @media (max-width: 640px) { h1, h2, h3 { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } h1 { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.08; letter-spacing: -0.022em; } .detail-hero h1, .hub-header h1, .pillar-hero h1 { font-size: clamp(30px, 8.5vw, 44px); } h2 { font-size: clamp(24px, 6.5vw, 36px); line-height: 1.15; } h3 { font-size: clamp(19px, 5vw, 24px); line-height: 1.2; } .pillar-hero { padding: 60px 0 50px; } .pillar-hero .breadcrumb { margin-bottom: 18px; font-size: 13px; } .pillar-hero .lead { font-size: 16px; line-height: 1.55; } .section-heading h2 { margin-bottom: 8px; } .section-heading .lead { font-size: 16px; line-height: 1.55; } .cta-stripe { padding: 36px 22px !important; } .cta-stripe h2 { font-size: clamp(22px, 6.5vw, 30px); } .cta-stripe p { font-size: 15px; line-height: 1.55; } .card { padding: 22px 20px; } .card h3, .card h4 { hyphens: auto; } } @media (max-width: 380px) { h1 { font-size: clamp(26px, 8vw, 32px); } .detail-hero h1, .hub-header h1, .pillar-hero h1 { font-size: clamp(26px, 8vw, 32px); } .lang-switch { font-size: 12px; gap: 4px; } .lang-switch span { display: none; } } /* ============================================================ * Contact Modal (assets/contact-modal.js) — overlay with multi-step form * Triggered by any data-fcw-open outside the .fcw floating widget. * ============================================================ */ .contact-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; } .contact-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .contact-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 25, 45, .65); cursor: pointer; } .contact-modal-panel { position: relative; z-index: 1; width: min(720px, 100%); max-height: calc(100vh - 48px); background: white; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 6px 24px rgba(0,0,0,.18); overflow: hidden; display: flex; flex-direction: column; transform: translateY(8px) scale(.985); transition: transform .25s cubic-bezier(.4,0,.2,1), width .25s ease; } /* On the Calendly step Calendly's inline widget renders the calendar side-by-side with the time picker when it has ≥760px of room — widen the panel so users see the full picker without scrolling. */ .contact-modal.is-calendly .contact-modal-panel { width: min(900px, 100%); } /* `is-wide` is used for long-form modals (e.g. Beratergruppe application form) where the dialog content benefits from extra breathing room. */ .contact-modal.is-wide .contact-modal-panel { width: min(960px, 100%); } .contact-modal.is-open .contact-modal-panel { transform: translateY(0) scale(1); } .contact-modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: white; border: 1px solid var(--color-border); color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease; z-index: 2; } .contact-modal-close:hover { background: var(--color-bg-soft); color: var(--color-primary); border-color: var(--color-primary); } .contact-modal-body { padding: 36px 36px 28px; overflow-y: auto; flex: 1; } .contact-modal-head { margin-bottom: 22px; } .contact-modal #contact-modal-form { display: grid; gap: 18px; } /* Bewerbungs-Modal nutzt die eigenen margin-tops der einzelnen Form-Sections. Inputs/Selects/Textarea/.cf-row greifen über Class-Selektoren, damit die Mobile-Regeln (Touch-Targets, iOS-Zoom-Schutz, 1-Spalten-cf-row) auch hier gelten. */ @media (max-width: 600px) { .contact-modal { padding: 0; align-items: stretch; } .contact-modal-panel { max-height: 100vh; border-radius: 0; } .contact-modal-body { padding: 28px 20px 20px; } } body.contact-modal-open { overflow: hidden; } /* ============================================================ * Footer Trust Badges (Microsoft Partner / CMMI / BVMW) * ============================================================ */ .footer-trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: 24px; } .footer-trust-badge { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,.78); font-family: var(--font-display); font-size: 13px; line-height: 1.35; font-weight: 600; text-decoration: none; } .footer-trust-badge:hover { color: white; } .footer-trust-badge .ftb-mark { flex-shrink: 0; width: 32px; height: 32px; background: transparent; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .footer-trust-badge .ftb-mark img { display: block; max-width: 100%; max-height: 100%; } .footer-trust-badge .ftb-mark-wide { width: auto; min-width: 32px; height: 32px; } .footer-trust-badge .ftb-mark-wide img { height: 32px; width: auto; max-width: 80px; } .footer-trust-badge .ftb-text { display: flex; flex-direction: column; } .footer-trust-badge .ftb-line1 { font-weight: 700; color: white; letter-spacing: 0.01em; } .footer-trust-badge .ftb-line2 { font-size: 11.5px; font-weight: 500; opacity: .75; letter-spacing: 0.04em; text-transform: uppercase; } @media (max-width: 600px) { /* Stack trust-badges vertikal auf Mobile, damit Microsoft Partner + CMMI + BVMW sich nicht überlappen */ .footer-trust-strip { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 16px; } .footer-trust-badge { flex-shrink: 0; width: 100%; justify-content: flex-start; } .footer-trust-badge .ftb-mark { width: 32px; height: 32px; } .footer-trust-badge .ftb-mark-wide { min-width: 60px; } } /* ============================================================ * Footer Beratergruppe Block — Side-by-side mit Partner-Block * ============================================================ */ /* Standard-Layout (Page hat reichlich footer-col Spalten): Partner + Beratergruppe sind die zwei kompakten Karten am rechten Ende. */ .footer-grid.has-partner-block.has-beratergruppe-block { grid-template-columns: 1.1fr repeat(4, 1fr) 0.85fr 0.85fr; gap: 18px; } @media (max-width: 1280px) { .footer-grid.has-partner-block.has-beratergruppe-block { grid-template-columns: 1fr repeat(4, 1fr) 0.85fr 0.85fr; gap: 14px; } } @media (max-width: 1100px) { .footer-grid.has-partner-block.has-beratergruppe-block { grid-template-columns: 1fr repeat(3, 1fr) 0.85fr 0.85fr; } } @media (max-width: 900px) { .footer-grid.has-partner-block.has-beratergruppe-block { grid-template-columns: 1fr 1fr; gap: 24px; } } /* Slim-Footer-Variant: nur Brand + 1 footer-col + Partner + Beratergruppe (4 Kinder total). Volle Breite nutzen, sonst 3 Spalten leer. JS markiert den Grid mit Klasse .is-slim, wenn er die Slim-Konstellation erkennt. */ .footer-grid.has-partner-block.has-beratergruppe-block.is-slim { grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; } @media (max-width: 1100px) { .footer-grid.has-partner-block.has-beratergruppe-block.is-slim { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; } } @media (max-width: 900px) { .footer-grid.has-partner-block.has-beratergruppe-block.is-slim { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ============================================================ * Footer Partner Block (right column, separate card) * Höhe richtet sich nach Inhalt (kein artificial min-height) — * JS gleicht die beiden Blocks via Style nach DOM-Render an, sodass * sie gleich groß sind, aber ohne Leerraum unten. */ .footer-partner-block { margin-top: 0; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; align-self: start; } @media (max-width: 900px) { .footer-partner-block { grid-column: 1 / -1; } } .footer-partner-block h4 { margin: 0; font-size: 14px; font-weight: 700; color: white; letter-spacing: 0.01em; text-transform: none; } .footer-partner-block p { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.72); } .footer-partner-block .footer-partner-cta { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-accent, #F59E0B); text-decoration: none; align-self: flex-start; } .footer-partner-block .footer-partner-cta:hover { color: white; } .footer-partner-block .footer-partner-cta::after { content: '→'; font-weight: 700; transition: transform .15s ease; } .footer-partner-block .footer-partner-cta:hover::after { transform: translateX(2px); } /* ============================================================ * Decision Matrix Table (loesungen/microsoft-vs-independent-engineering) * ============================================================ */ .decision-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; font-size: 14.5px; line-height: 1.5; } .decision-table th, .decision-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border-subtle); } .decision-table thead th { background: var(--color-bg-soft); font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-strong); border-bottom: 1px solid var(--color-border); } .decision-table tbody tr:last-child td { border-bottom: 0; } .decision-table tbody td:first-child { font-weight: 600; color: var(--color-text-strong); } @media (max-width: 760px) { .decision-table { font-size: 13px; } .decision-table th, .decision-table td { padding: 11px 12px; } } /* ============================================================ * Microsoft Partner Trust Strip (Homepage) * ============================================================ */ .designations-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto; } .designation-badge { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--color-bg-soft, #f4f6f8); border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-md); } .designation-badge .designation-icon { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: white; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-primary, #06609C); } .designation-badge strong { display: block; font-family: var(--font-display); font-size: 14px; color: var(--color-text-strong); font-weight: 800; letter-spacing: -0.01em; } .designation-badge span { display: block; font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; } @media (max-width: 900px) { .designations-wall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .designations-wall { grid-template-columns: 1fr; gap: 12px; } } /* ============================================================ * Multi-Step Contact Form (assets/contact-form.js) * ============================================================ */ #contact-form { display: grid; gap: 24px; max-width: 720px; margin: 0 auto; } .cf-step { display: grid; gap: 18px; } .cf-step[hidden] { display: none; } .cf-step-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .cf-step-head .eyebrow { font-size: 11.5px; } #cf-step-indicator { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-secondary); } .cf-audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } @media (max-width: 720px) { .cf-audience-grid { grid-template-columns: 1fr; } } .cf-audience-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: white; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .cf-audience-card:hover, .cf-audience-card:focus-visible { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(6,96,156,.25); outline: none; } .cf-audience-card .cf-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-pilot-soft, #FEF3C7); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; } .cf-audience-card h4 { margin: 0; font-size: 17px; } .cf-audience-card p { margin: 0; font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; } .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .cf-row { grid-template-columns: 1fr; } } .cf-label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text); } .cf-label > span { line-height: 1.3; } .cf-input, .cf-select, .cf-textarea { width: 100%; min-width: 0; /* allow shrinking inside grid/flex */ max-width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 15px; font-family: inherit; background: white; color: var(--color-text); transition: border-color .15s ease, box-shadow .15s ease; } /* Prevent