/* ========================================================================== Alphahub GmbH — styles.css Vanilla CSS3, BEM naming, mobile-first (base 375px → 768 → 1280 → 1440). All design tokens live in :root. No hardcoded hex values outside :root. Image overlays use --overlay-hero / --overlay-contacts exclusively. ========================================================================== */ /* Manrope — self-hosted (no external font services). One variable file covers weights 400–700. Preloaded in each page's . */ @font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-variable.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 1. Design tokens (:root) — verbatim from the technical spec. Helper token --color-carbon-rgb is derived from --color-carbon (#171717 = 23,23,23) so image overlays can be built with rgba() while keeping every hex value inside :root. -------------------------------------------------------------------------- */ :root { /* Farben */ --color-papaya: #ea7b4d; --color-papaya-hover: #d4693e; --color-carbon: #171717; --color-dust: #e3ded6; --color-card-dark: #2a2a2a; --color-card-light: #d4cfc8; --color-white: #ffffff; /* Derived helper: carbon as an RGB triplet for rgba() overlays */ --color-carbon-rgb: 23, 23, 23; /* Bild-Overlays — individuell anpassbar */ --overlay-hero: 0.30; --overlay-contacts: 0.72; /* Typografie */ --font-family: 'Manrope', Arial, Helvetica, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Manrope variable wght axis reaches 800 (spec H1/H2) */ /* Schriftgrössen — mobile-first base; H1/H2 grow via :root overrides at 768/1440 to hit the spec's breakpoint values (mobile 40/32 · laptop 48/40 · desktop 64/48). */ --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 20px; --fs-eyebrow: 12px; --fs-body-large: 18px; --fs-body: 16px; --fs-body-small: 14px; --fs-nav: 15px; --fs-button: 15px; /* Abstände */ --section-gap: 80px; --section-padding-v: 80px; --section-padding-h: 56px; --container-padding-h: 40px; --container-padding-v: 64px; --card-padding: 24px; --card-radius: 16px; --container-radius: 24px; /* Responsive horizontal insets (overridden in media queries). --content-pad = page text inset (used by .section and coloured containers alike, so container text lines up flush with the rest of the page). --container-inner-pad = inner padding of coloured containers / the footer card. */ --content-pad: 16px; --container-inner-pad: 16px; /* Animationen */ --transition-fast: 0.2s ease; --transition-medium: 0.35s ease; --transition-slow: 0.4s ease-in-out; /* accordion — organic, spec §3 */ /* Komponenten */ --nav-height: 64px; --nav-bottom: 20px; --nav-bg: rgba(23, 23, 23, 0.92); --nav-bg-dark: rgba(55, 55, 55, 0.95); --nav-blur: blur(8px); --nav-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5); --nav-radius: 32px; --btn-radius: 100px; --card-border-top: 3px solid var(--color-papaya); --team-card-shadow: 0 2px 16px rgba(23, 23, 23, 0.08); } /* -------------------------------------------------------------------------- 2. Reset / normalize -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-family); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.6; color: var(--color-carbon); background: var(--color-dust); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, figure, ul { margin: 0; } ul { padding: 0; list-style: none; } img, picture { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Visible focus for keyboard users (WCAG 2.1 AA) */ :focus-visible { outline: 2px solid var(--color-papaya); outline-offset: 2px; border-radius: 2px; } /* Skip link — visible only when focused */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--color-papaya); color: var(--color-white); border-radius: 8px; font-weight: var(--fw-semibold); transition: top var(--transition-fast); } .skip-link:focus { top: 16px; } /* Screen-reader-only utility */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Typography scale (mobile-first; :root values are the desktop ceiling) clamp() gives fluid mobile→desktop scaling capped at the spec's desktop size. -------------------------------------------------------------------------- */ .eyebrow { display: block; font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-papaya); margin-bottom: 16px; } /* Binding rule — eyebrow colour follows the section background: Dust Grey → Carbon Black · Carbon Black → white 60% · Papaya Orange → white 80% */ .section--dust .eyebrow { color: var(--color-carbon); } .section-container-dark .eyebrow, .contact-card__intro .eyebrow { color: rgba(255, 255, 255, 0.6); } .section-container-orange .eyebrow { color: rgba(255, 255, 255, 0.8); } .section__title { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); line-height: 1.15; letter-spacing: -0.01em; /* Break only at spaces (spec §2: hyphens:none on the heading); a single word wider than its column hard-breaks via overflow-wrap so columns never overlap. */ overflow-wrap: break-word; hyphens: none; } .section__intro { font-size: var(--fs-body-large); color: var(--color-carbon); max-width: 60ch; } /* Intro text on the dark container (Angebot) → white (spec §3: rgba 255,255,255,0.70) */ .section-container-dark .section__intro { color: rgba(255, 255, 255, 0.7); } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-size: var(--fs-button); font-weight: var(--fw-semibold); line-height: 1; border: 2px solid transparent; border-radius: var(--btn-radius); transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: var(--color-papaya); color: var(--color-white); border-color: var(--color-papaya); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--color-papaya-hover); border-color: var(--color-papaya-hover); } .btn-ghost { background: transparent; color: var(--color-papaya); border-color: var(--color-papaya); } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--color-papaya); color: var(--color-white); } .btn-text { background: transparent; color: var(--color-carbon); border-color: transparent; padding: 12px 16px; } .btn-text:hover, .btn-text:focus-visible { color: var(--color-papaya); } /* -------------------------------------------------------------------------- 5. Layout: sections and containers -------------------------------------------------------------------------- */ main { display: block; } .section { padding-block: var(--section-padding-v); padding-inline: var(--content-pad); } .section--dust { background: var(--color-dust); } .section__header { margin-bottom: 40px; } /* Subtext sits 16px under the H2 (spec §5 Team; also spaces the Angebot intro) */ .section__header .section__intro { margin-top: 16px; } /* Dark container (Angebot) and orange container (Ablauf). margin + inner padding are token-driven so the container is wide and its text sits at exactly --content-pad — flush with the dust sections. */ .section-container-dark, .section-container-orange { border-radius: var(--container-radius); padding-block: var(--container-padding-v); padding-inline: var(--container-inner-pad); margin-inline: calc(var(--content-pad) - var(--container-inner-pad)); } .section-container-dark { background: var(--color-carbon); color: var(--color-white); } .section-container-orange { background: var(--color-papaya); color: var(--color-white); } /* Full-width section: the coloured container (child) manages the horizontal inset */ .section--contained { padding-inline: 0; } /* -------------------------------------------------------------------------- 6. Navigation pill (fixed, bottom-centred) -------------------------------------------------------------------------- */ .nav-pill { position: fixed; left: 50%; bottom: var(--nav-bottom); transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); max-width: 1180px; min-height: var(--nav-height); padding: 8px 8px 8px 16px; background: var(--nav-bg); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur); border-radius: var(--nav-radius); box-shadow: var(--nav-shadow); color: var(--color-white); transition: background-color var(--transition-medium); } /* Background switches on data-nav-theme="dark" sections */ .nav-pill.on-dark { background: var(--nav-bg-dark); } .nav-pill__links { display: none; /* hidden on mobile (base); shown ≥768px */ flex: 1; align-items: center; gap: 4px; } .nav-link { display: inline-block; padding: 8px 12px; font-size: var(--fs-nav); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.7); border-radius: var(--btn-radius); transition: color var(--transition-fast), background-color var(--transition-fast); } .nav-link:hover, .nav-link:focus-visible { color: var(--color-white); } /* Active section link (set by nav.js via aria-current) */ .nav-link[aria-current='true'] { color: var(--color-white); font-weight: var(--fw-bold); } .nav-pill__meta { display: flex; align-items: center; gap: 8px; margin-left: auto; } .lang-switch { display: flex; align-items: center; gap: 4px; font-size: var(--fs-nav); font-weight: var(--fw-medium); } .lang-switch__link { color: rgba(255, 255, 255, 0.6); padding: 4px 6px; border-radius: 8px; } .lang-switch__link:hover, .lang-switch__link:focus-visible { color: var(--color-white); } .lang-switch__link.is-active { color: var(--color-white); font-weight: var(--fw-bold); } .lang-switch__sep { color: rgba(255, 255, 255, 0.3); } /* Hamburger — visible on mobile only */ .nav-pill__hamburger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--color-white); } .nav-pill__hamburger svg { width: 22px; height: 22px; } /* Mobile navigation overlay */ .nav-overlay { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; background: var(--nav-bg); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur); opacity: 0; visibility: hidden; transition: opacity var(--transition-medium), visibility var(--transition-medium); } .nav-overlay.is-open { opacity: 1; visibility: visible; } .nav-overlay__list { display: flex; flex-direction: column; align-items: center; gap: 24px; } .nav-overlay__link { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-white); } .nav-overlay__link:hover, .nav-overlay__link:focus-visible { color: var(--color-papaya); } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--color-white); isolation: isolate; } .hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; } /* Carbon overlay + directional gradient — driven by --overlay-hero */ .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top right, rgba(var(--color-carbon-rgb), 0.7) 0%, transparent 60% ), rgba(var(--color-carbon-rgb), var(--overlay-hero)); } .hero__logo { position: absolute; top: 20px; right: 20px; width: 140px; /* spec §1: 140px mobile → 160px from tablet up (bewusst gross) */ height: auto; z-index: 1; } .hero__content { padding: 0 24px calc(var(--nav-height) + var(--nav-bottom) + 48px); max-width: 720px; } .hero__title { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: 1.08; letter-spacing: -0.02em; } .hero__subtext { margin-top: 16px; font-size: var(--fs-body); /* 16px mobile → 20px SemiBold from tablet up (spec §1) */ font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.9); max-width: 480px; } /* -------------------------------------------------------------------------- 8. "Warum Alphahub" (#warum-alphahub) -------------------------------------------------------------------------- */ .why__header { display: flex; flex-direction: column; margin-bottom: 40px; } /* H2 + intro row; the eyebrow sits ABOVE this row so the intro aligns to the H2, not to the eyebrow (spec §2). */ .why__header-cols { display: flex; flex-direction: column; gap: 16px; } .why__grid, .offer__grid, .process__grid, .team__grid { display: grid; gap: 24px; grid-template-columns: 1fr; /* mobile: single column */ align-items: stretch; /* equalises card heights per row */ } /* -------------------------------------------------------------------------- 9. Cards + expand animation -------------------------------------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; padding: var(--card-padding); border-radius: var(--card-radius); border-top: var(--card-border-top); } .card--light { background: var(--color-card-light); color: var(--color-carbon); } .card--dark { background: var(--color-card-dark); color: var(--color-white); } .card--white-on-orange { background: var(--color-white); color: var(--color-carbon); } .card__step { font-size: var(--fs-body-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--color-papaya); margin-bottom: 12px; } .card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); /* content-card title 20px/700 (spec §Typografie-Konsistenz) */ line-height: 1.25; overflow-wrap: break-word; } /* Only expandable cards reserve room for the "+" button */ .card-expandable .card__title { padding-right: 40px; } .card__text { margin-top: 12px; font-size: var(--fs-body); color: inherit; opacity: 0.9; } /* Whole expandable card is clickable (spec §3) */ .card-expandable { cursor: pointer; } /* Expandable extra content: max-height + opacity transition */ .card-extra { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--transition-slow), opacity var(--transition-slow), margin-top var(--transition-slow); } .card-extra p { font-size: var(--fs-body-small); } .card-extra p + p { margin-top: 12px; } .card.is-expanded .card-extra { max-height: 800px; /* headroom for the longer v1.1 detail texts (e.g. why.card4.extra) */ opacity: 1; margin-top: 16px; } /* Expand / collapse button (+ / ×) */ .card-expand-btn { position: absolute; top: var(--card-padding); right: var(--card-padding); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: var(--fw-medium); line-height: 1; color: var(--color-papaya); background: transparent; border: 2px solid var(--color-papaya); border-radius: 50%; transition: background-color var(--transition-fast), color var(--transition-fast); } .card-expand-btn:hover, .card-expand-btn:focus-visible { background: var(--color-papaya); color: var(--color-white); } /* -------------------------------------------------------------------------- 10. Team cards (#team) — no expand -------------------------------------------------------------------------- */ .card--team { background: var(--color-white); color: var(--color-carbon); border-top: 0; padding: 0; overflow: hidden; border-radius: var(--card-radius); box-shadow: var(--team-card-shadow); } /* Portrait placeholder — 3:4 aspect ratio, ready for image replacement. Replace .team-card__portrait div with . */ .team-card__portrait { aspect-ratio: 3 / 4; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: var(--color-card-light); color: var(--color-carbon); font-weight: var(--fw-semibold); object-fit: cover; } .team-card__body { padding: var(--card-padding); } .team-card__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .team-card__role { margin-top: 4px; font-size: var(--fs-body-small); font-weight: var(--fw-semibold); color: var(--color-papaya); } .team-card__spec { margin-top: 12px; font-size: var(--fs-body-small); color: var(--color-carbon); opacity: 0.8; } .team-card__divider { height: 1px; margin: 16px 0; background: var(--color-card-light); border: 0; } .team-card__contact { display: flex; gap: 12px; } .team-card__icon-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-carbon); background: var(--color-dust); transition: background-color var(--transition-fast), color var(--transition-fast); } .team-card__icon-link:hover, .team-card__icon-link:focus-visible { background: var(--color-papaya); color: var(--color-white); } .team-card__icon-link svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- 11. Contact + footer — ONE rounded card (photo top, carbon bottom). The card is aligned with the same tokens as the coloured containers, so its text is flush with the rest of the page. Reuses .footer__* below. -------------------------------------------------------------------------- */ .site-footer { /* Full-width band; the card manages the horizontal inset (like .section--contained) */ padding-top: var(--section-padding-v); } .contact-card { border-radius: var(--container-radius); overflow: hidden; margin-inline: calc(var(--content-pad) - var(--container-inner-pad)); /* clearance so the fixed bottom nav pill never covers the card */ margin-bottom: calc(var(--nav-height) + var(--nav-bottom) + 24px); } /* Legal pages reuse this card as a stand-alone footer (no intro photo, no nav pill). */ .contact-card--legal { margin-bottom: 40px; } /* Upper area — contacts1 photo + overlay */ .contact-card__intro { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; /* text block vertically centred in the image area (spec §6) */ min-height: 400px; /* fixed height per spec §6 (verbindlich): 400px cinematic */ padding: 48px var(--container-inner-pad); color: var(--color-white); } .contact-card__bg, .contact-card__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; } .contact-card__intro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(var(--color-carbon-rgb), var(--overlay-contacts)); } .contact-card__intro-content { max-width: 640px; } .contact-card__title { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); line-height: 1.1; } .contact-card__subtext { margin: 20px 0 32px; font-size: var(--fs-body-large); color: rgba(255, 255, 255, 0.9); } /* Lower area — carbon-black footer info */ .contact-card__foot { background: var(--color-carbon); color: var(--color-white); padding: 40px var(--container-inner-pad); /* 40px vertical per spec §6 */ } .contact-card__foot-main { display: grid; gap: 32px; } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .footer { background: var(--color-carbon); color: var(--color-white); padding: 56px 24px calc(56px + var(--nav-height) + var(--nav-bottom)); } .footer__inner { display: grid; gap: 32px; } .footer__brand { font-size: var(--fs-body); font-weight: var(--fw-bold); } .footer__address { margin-top: 8px; font-style: normal; } /* Address on a single comma-separated line, no country (spec §6) */ .footer__address-line { display: block; font-size: var(--fs-body-small); color: rgba(255, 255, 255, 0.6); } /* Phone + email as two separate Papaya pills with white text, side by side */ .footer__contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .footer__contact-link { display: inline-flex; align-items: center; padding: 10px 24px; /* spec §6 pills */ font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-white); background: var(--color-papaya); border-radius: var(--btn-radius); transition: background-color var(--transition-fast); } .footer__contact-link:hover, .footer__contact-link:focus-visible { background: var(--color-papaya-hover); color: var(--color-white); } .footer__logo { width: 148px; height: auto; } .footer__sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; margin-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: var(--fs-body-small); } .footer__copy { color: rgba(255, 255, 255, 0.45); } .footer__legal-links { display: flex; gap: 20px; } .footer__legal-links a { color: rgba(255, 255, 255, 0.8); } .footer__legal-links a:hover, .footer__legal-links a:focus-visible { color: var(--color-white); } /* Current subpage: its own name is shown as plain text, not a link (spec §Impressum). */ .footer__legal-current { color: var(--color-white); font-weight: var(--fw-semibold); } /* -------------------------------------------------------------------------- 13. Subpages (Impressum / Datenschutz) + 404 -------------------------------------------------------------------------- */ /* Full-width band that caps the header at 1440px, mirroring .site-footer. */ .site-header { padding-top: 24px; } /* Subpage header — carbon rounded container with the same width/alignment as the footer card. Logo left (→ home) + DE/EN switch (reuses .lang-switch). No nav pill, no hamburger (spec §"Impressum und Datenschutz"). */ .subpage-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-inline: calc(var(--content-pad) - var(--container-inner-pad)); padding: 20px var(--container-inner-pad); background: var(--color-carbon); border-radius: var(--container-radius); } .subpage-header__logo { width: 120px; height: auto; } .legal { max-width: 800px; margin: 0 auto; padding: 80px var(--content-pad) 96px; } .legal h1 { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); margin-bottom: 24px; } .legal h2 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin: 40px 0 12px; } .legal h3 { font-size: var(--fs-body-large); font-weight: var(--fw-semibold); margin: 24px 0 8px; } .legal p { margin-bottom: 16px; color: var(--color-carbon); } .legal ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } .legal li { margin-bottom: 6px; } .legal__meta { margin-top: -8px; margin-bottom: 32px; font-size: var(--fs-body-small); color: var(--color-carbon); opacity: 0.6; } .legal a { color: var(--color-papaya); text-decoration: underline; } /* 404 */ .error-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: var(--color-carbon); color: var(--color-white); } .error-page__logo { position: absolute; top: 24px; right: 24px; width: 132px; height: auto; } .error-page__code { font-size: clamp(72px, 20vw, 140px); font-weight: var(--fw-bold); line-height: 1; color: var(--color-papaya); } .error-page__title { margin: 16px 0 32px; font-size: clamp(22px, 6vw, var(--fs-h2)); font-weight: var(--fw-semibold); } /* -------------------------------------------------------------------------- 15. Responsive breakpoints (mobile-first, min-width) -------------------------------------------------------------------------- */ /* Tablet — 768px */ @media (min-width: 768px) { :root { --content-pad: 56px; --container-inner-pad: 40px; /* Tablet/laptop heading step (spec: laptop 1280 → H1 48 / H2 40) */ --fs-h1: 48px; --fs-h2: 40px; } /* Hero logo prominent from tablet up (spec §1: 160px desktop reference) */ .hero__logo { top: 32px; right: 32px; width: 160px; } /* Hero subline 20px SemiBold (spec §1) */ .hero__subtext { font-size: var(--fs-h3); } /* Warum + Angebot are 2×2; Ablauf is 2×2 here and 4-across from 1280 */ .why__grid, .offer__grid, .process__grid { grid-template-columns: repeat(2, 1fr); /* 2×2 */ } /* Team: centred row — 2 cards for go-live, 3 once Drenusha is added (2026-09-01) */ .team__grid { display: flex; flex-wrap: wrap; justify-content: center; } .card--team { flex: 1 1 280px; max-width: calc(33.333% - 16px); } /* Nav pill: reveal inline links, hide hamburger. Spec names 768px as the breakpoint where the mobile treatment ends. */ .nav-pill__links { display: flex; } .nav-pill__hamburger { display: none; } .hero__content { padding-left: 56px; padding-right: 56px; } .footer__inner, .contact-card__foot-main { grid-template-columns: 1fr auto; align-items: center; } .footer__logo { justify-self: end; /* right within the card padding, not at the screen edge */ } } /* Warum two-column (spec §2): from 768px up — 45% heading / 50% intro, gap 5%, top-aligned so the intro lines up with the H2. break-word on the heading guarantees the columns never overlap. Below 768px the header is single-column. */ @media (min-width: 768px) { .why__header-cols { flex-direction: row; align-items: flex-start; gap: 5%; } .why__header-cols > .section__title { flex: 0 0 45%; max-width: 45%; min-width: 0; } .why__header-cols > .section__intro { flex: 0 0 50%; max-width: 50%; min-width: 280px; } } /* Laptop — 1280px: full desktop layout */ @media (min-width: 1280px) { :root { --content-pad: 80px; --container-inner-pad: 56px; } .process__grid { grid-template-columns: repeat(4, 1fr); /* four across */ } .hero__content { padding-left: 80px; } } /* Desktop — 1440px reference */ @media (min-width: 1440px) { :root { /* Desktop heading step (spec: H1 64 / H2 48) */ --fs-h1: 64px; --fs-h2: 48px; } .section, .site-footer, .site-header { max-width: 1440px; margin-inline: auto; } }