/* ========================================================================== Penduline - Website Stylesheet 1 Fonts · 2 Tokens · 3 Base · 4 Layout · 5 Komponenten · 6 Sektionen 7 Footer · 8 Responsive · 9 Motion ========================================================================== */ @import url("cabinet-grotesk.css"); /* ---------- 1 · Schriften ------------------------------------------------ Aktuell: Google Fonts via im aller HTML-Seiten („Hanken Grotesk" für Headlines, „Montserrat" für Body). Self-hosted: Cabinet Grotesk (siehe @import oben, assets/fonts/). Alternative (DSGVO-konform, self-hosted): Google-Fonts-Links im entfernen, Dateien in /assets/fonts/ ablegen und die @font-face-Blöcke unterhalb einkommentieren - siehe README.md, Abschnitt 5. @font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/CabinetGrotesk-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } ------------------------------------------------------------------------- */ /* ---------- 2 · Design Tokens (Hex-Werte aus dem XD-Styleguide) ---------- */ :root { --c-white: #ffffff; --c-offwhite: #f6fafb; --c-grey: #f5f5f5; --c-lavender: #d9c3f9; --c-violet: #b388f5; --c-blue: #4083ff; --c-blue-light: #9fc1ff; --c-navy: #253058; --c-navy-deep: #1a2c58; --c-navy-dark: #10173a; --c-yellow: #ffda79; --c-yellow-dark: #f4c95a; --c-lavender-dark: #c9acf5; --c-text: var(--c-navy); --c-text-soft: #5a6488; --c-muted: #7a8299; --c-line: #e4eaf2; --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --sh-sm: 0 2px 10px rgba(16, 23, 58, .06); --sh: 0 14px 38px rgba(16, 23, 58, .10); --sh-lg: 0 34px 80px rgba(16, 23, 58, .22); --sh-soft: 0 16px 34px rgba(120, 130, 145, .16); /* kaum sichtbarer Grauschatten (Hero-Screenshots) */ --f-head: "CabinetGrotesk-Variable", "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --f-body: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --f-quote: var(--f-head); --container: 1240px; --header-h: 92px; --dropdown-gap: 16px; /* Abstand Menüpunkt → Dropdown (per Brücke überbrückt) */ /* Links-Versatz, mit dem ein Element in .container (1240) auf die linke Kante eines Elements aus .container--narrow (940) + hero-Visual-Einrückung ausgerichtet wird. 620px = 1240/2, 470px = 940/2. – onemessenger.html */ --om-rail: calc( (min(1240px, 100vw - 48px) - min(940px, 100vw - 48px)) / 2 + clamp(0px, 3vw, 40px) ); --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- 3 · Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f-body); font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.1; color: var(--c-text); background: var(--c-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; display: block; height: auto; } a { color: var(--c-blue); text-decoration: none; } a:hover { text-decoration: underline; } strong, b { font-weight: 600; } h1, h2, h3, h4 { font-family: var(--f-head); margin: 0 0 .5em; color: var(--c-navy); line-height: 1.02; letter-spacing: -.015em; } /* Die vw-Kurve hält „Designed to simplify." in der halben Spalte auf einer Zeile. */ h1 { font-size: clamp(2.3rem, 5.3vw - 2.7px, 4.1rem); font-weight: 700; } h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem); font-weight: 500; } h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.7rem); font-weight: 500; } h4 { font-size: 1.1rem; font-weight: 500; } p { margin: 0 0 1.15em; } ::selection { background: var(--c-lavender); color: var(--c-navy-dark); } :focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 20px; background: var(--c-navy-dark); color: #fff; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* ---------- 4 · Layout ---------- */ .container { width: min(100% - 48px, var(--container)); margin-inline: auto; } .container--narrow { width: min(100% - 48px, 940px); margin-inline: auto; } .section { padding: clamp(64px, 8vw, 130px) 0; } .section--tight { padding: clamp(40px, 5vw, 72px) 0; } .section--soft { background: var(--c-offwhite); } .section--dark { background: var(--c-navy-dark); color: rgba(255, 255, 255, .82); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-white); } .section--clip { overflow: hidden; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; } .grid-2--top { align-items: start; } .grid-2--aside { grid-template-columns: 1fr 2fr; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); } .eyebrow { display: block; font-family: var(--f-body); font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 16px; } .eyebrow--white { color: var(--c-white); } .lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.28rem); color: var(--c-text-soft); max-width: 60ch; } /* Startet auf Höhe der Überschrift statt der Eyebrow in der Nachbarspalte. */ .lead--align-heading { margin-top: 30px; } .section--dark .lead, .on-gradient .lead { color: rgba(255, 255, 255, .85); } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .stack-sm > * + * { margin-top: 14px; } /* ---------- 5 · Komponenten ---------- */ /* 5.1 Header */ .header { position: sticky; top: 0; z-index: 100; background: var(--c-white); border-bottom: 1px solid var(--c-line); } .header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { flex: 0 0 auto; } .logo img { height: 42px; width: auto; max-width: none; } .logo:hover { text-decoration: none; } .nav { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; } /* Produkte / Über uns / Kontakt formieren sich als eigenes, zentrales Segment: .nav füllt den gesamten Bereich zwischen Logo (links) und CTA. Dadurch wächst .nav__links (flex:1) im dazwischenliegenden Raum und zentriert die Links mittig in der Viewport-Breite, während der CTA-Button am rechten Rand bleibt – entspricht home.png. Auf Mobile wird das Segment zum Spaltenbaustein (Media Query). */ .nav__links { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; } /* Spec Designer: normal normal medium … Cabinet Grotesk (--f-head, weight 500). Größe vom Kunden um 2Px geschmälert: 20px/17px statt 22px/19px. */ .nav__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--r-pill); color: var(--c-navy); font-family: var(--f-head); font-weight: 500; font-size: 20px; line-height: 17px; white-space: nowrap; transition: color .2s var(--ease), background .2s var(--ease); } .nav__link:hover { color: var(--c-violet); text-decoration: none; } .nav__link[aria-current="page"] { color: var(--c-violet); font-weight: 600; } .nav__item { position: relative; } /* Nur die Button-Defaults ersetzen – Größe/Schnitt/Höhe kommen aus .nav__link. font-family explicit wiederholen: Buttons erben Schriftarten nicht, und diese Regel hat dieselbe Spezifität wie .nav__link, steht aber später im Stylesheet. */ .nav__toggle { background: none; border: 0; cursor: pointer; color: inherit; font-family: var(--f-head); } .nav__chevron { transition: transform .25s var(--ease); flex: 0 0 auto; } .nav__item.is-open > .nav__toggle { background: var(--c-offwhite); } .nav__item.is-open > .nav__toggle .nav__chevron { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + var(--dropdown-gap)); left: 0; transform: translate(0, 8px); min-width: 420px; padding: 18px 22px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translate(0, 0); } /* Unsichtbare Brücke über den Abstand zwischen Menüpunkt und Dropdown. Ohne sie verlässt der Mauszeiger beim Herunterfahren kurz den Hover-Bereich und das Menü schließt sich, bevor ein Produkt angeklickt werden kann. */ .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--dropdown-gap) * -1 - 2px); height: calc(var(--dropdown-gap) + 4px); } .dropdown__item { display: flex; align-items: flex-end; gap: 20px; padding: 16px 4px; color: var(--c-navy); font-weight: 600; font-size: 1.25rem; } .dropdown__item:hover { text-decoration: none; color: var(--c-blue); } /* Produktname sitzt unten (Basislinie an der Kachelkante) mit lila Linie darunter bis zum Pfeil am rechten Rand – entspricht Produkte.png. */ .dropdown__label { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--c-lavender); } .dropdown__icon { flex: 0 0 auto; width: 92px; height: 58px; border-radius: 14px; overflow: hidden; background-color: var(--c-navy-deep); background-position: center; background-size: cover; background-repeat: no-repeat; display: grid; place-items: center; } /* Deko-Hintergrund der Produkt-Kacheln (Entwurf: Produkte.png). Rechteck2 = OneMessenger, Rechteck1 = OneConnector. Die Navy-Fallback-Farbe bleibt, falls das Bild fehlt. */ .dropdown__item[href="onemessenger.html"] .dropdown__icon { background-image: url("../img/Rechteck2.png"); } .dropdown__item[href="oneconnector.html"] .dropdown__icon { background-image: url("../img/Rechteck1.png"); } .dropdown__icon img { width: 40px; height: auto; } /* Pfeil in derselben Lila-Farbe wie die Linie unter der Produktbezeichnung. */ .dropdown__arrow { margin-left: auto; color: var(--c-lavender); transition: transform .2s var(--ease); } .dropdown__item:hover .dropdown__arrow { transform: translateX(5px); } /* 5.2 Buttons */ .btn { display: inline-flex; align-items: center; gap: 16px; padding: 11px 12px 11px 28px; border: 0; border-radius: var(--r-pill); font-family: var(--f-body); font-size: 1rem; font-weight: 500; color: var(--c-navy); background: var(--c-lavender); cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .btn:hover { text-decoration: none; box-shadow: var(--sh); } .btn:disabled { opacity: .6; cursor: progress; } .btn--primary:hover { background: var(--c-lavender-dark); } .btn--yellow { background: var(--c-yellow); } .btn--yellow:hover { background: var(--c-yellow-dark); } .btn--wide { width: 100%; justify-content: center; padding: 15px 28px; } .btn__icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--c-navy-dark); color: var(--c-white); } .btn__icon svg { width: 16px; height: 16px; } /* 5.3 Pfeil-Links */ .arrow-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 300px; padding: 8px 0; border-bottom: 1.5px solid currentColor; font-weight: 500; color: var(--c-white); } .arrow-link:hover { text-decoration: none; opacity: .75; } .arrow-link svg { transition: transform .2s var(--ease); flex: 0 0 auto; } .arrow-link:hover svg { transform: translateX(6px); } .arrow-link--dark { color: var(--c-navy); } /* 5.4 Burger */ .burger { display: none; width: 48px; height: 48px; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--r-pill); background: var(--c-offwhite); color: var(--c-navy); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .burger:hover { background: var(--c-lavender); } .burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: var(--r-pill); transition: transform .28s var(--ease), opacity .18s var(--ease); } .nav-open .burger { background: var(--c-lavender); } .nav-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); } .nav-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* 5.5 Verlaufsflächen (Originalassets) */ .gradient-hero, .gradient-bright, .gradient-contact, .gradient-om-hero, .gradient-om-tall { background-repeat: no-repeat; background-position: center; background-size: cover; } .gradient-hero { background-image: url("../img/gradient-hero.webp"); } .gradient-bright { background-image: url("../img/gradient-bright.webp"); } .gradient-contact { background-image: url("../img/gradient-contact.webp"); } .gradient-om-hero { background-image: url("../img/om-gradient-hero.webp"); } .gradient-om-tall { background-image: url("../img/om-gradient-tall.webp"); } .on-gradient, .on-gradient h1, .on-gradient h2, .on-gradient h3 { color: var(--c-white); } /* 5.6 Karten */ .card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 44px); box-shadow: var(--sh-sm); } .card--dark { background: var(--c-navy-deep) center/cover no-repeat; border: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); } .card--dark h3 { color: var(--c-white); } .card--bg1 { background-image: url("../img/card-bg-1.webp"); } .card--bg2 { background-image: url("../img/card-bg-2.webp"); } .card__icon { width: clamp(52px, 6vw, 72px); margin-bottom: clamp(24px, 4vw, 44px); } /* 5.7 Produktkarten */ .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); } .product-card { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--r-lg); overflow: hidden; /* Einzelwerte statt Kurzform - sonst löscht die Kurzform das background-image von .card--bg1/2 */ background-color: var(--c-navy-deep); background-position: center; background-size: cover; background-repeat: no-repeat; color: rgba(255, 255, 255, .82); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .product-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); text-decoration: none; } .product-card__icon { width: clamp(110px, 13vw, 158px); margin: clamp(18px, 3vw, 42px) auto clamp(26px, 4vw, 52px); } /* Fertige Lockups – Wortmarke und Produktname sitzen dadurch auf einer Grundlinie. */ .product-card__name { width: min(100%, 300px); height: auto; margin: 0 0 16px; } .product-card p { font-size: .95rem; line-height: 1.6; margin: 0; } /* 5.8 Listen, Features, Notizzeilen */ .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .check-list li { display: flex; gap: 14px; align-items: flex-start; font-weight: 500; line-height: 1.5; } .check-list svg { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 3px; color: var(--c-violet); } .feature { display: flex; gap: 18px; align-items: flex-start; } .feature__icon { flex: 0 0 auto; width: 42px; margin-top: 2px; } .feature h3 { font-size: 1.15rem; margin-bottom: 4px; } .feature p { font-size: .95rem; color: var(--c-text-soft); margin: 0; } .on-gradient .feature p, .section--dark .feature p { color: rgba(255, 255, 255, .78); } .note { display: flex; gap: 16px; align-items: flex-start; max-width: 34ch; } .note img { flex: 0 0 auto; width: 44px; } .note p { margin: 0; font-size: .95rem; line-height: 1.45; font-weight: 500; } /* Handgezeichnete Deko-Pfeile */ .deco-arrow { position: absolute; pointer-events: none; user-select: none; z-index: 2; } .deco-arrow--hero { top: 9%; right: 4%; width: clamp(36px, 5vw, 62px); opacity: .9; } .deco-arrow--down { width: clamp(40px, 5vw, 66px); } /* 5.9 Testimonial */ .quote { position: relative; padding: clamp(28px, 4vw, 56px); margin: 0; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh); } .quote__logo { width: min(100%, 250px); height: auto; margin-bottom: 30px; } .quote__text { margin: 0 0 30px; color: var(--c-text-soft); } /* Großes Anführungszeichen sitzt dekorativ auf der linken Kartenkante, auf Höhe der Autorenzeile (siehe Testimonial.png). */ .quote__mark { position: absolute; left: 0; bottom: clamp(18px, 2.6vw, 38px); transform: translateX(-50%); font-family: var(--f-quote); font-size: clamp(7rem, 13vw, 13rem); line-height: .3; color: var(--c-lavender); font-weight: 800; } .quote__author { font-weight: 600; } .quote__role { color: var(--c-muted); font-size: .9rem; display: block; } /* 5.10 Team */ .logo-mark { width: clamp(96px, 9vw, 132px); height: auto; margin: 0 auto clamp(28px, 4vw, 48px); } .team-card { text-align: center; } .team-card img { width: 224px; height: 224px; border-radius: 50%; object-fit: cover; margin: 0 auto 24px; background: var(--c-offwhite); } .team-card h3 { margin-bottom: 2px; font-size: 1.45rem; font-weight: 500; } .team-card p { color: var(--c-muted); margin: 0 0 8px; font-size: .95rem; } /* 5.11 Kontaktformular */ .form-card { width: min(100%, 580px); margin-inline: auto; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-lg); background: var(--c-navy); color: var(--c-white); box-shadow: var(--sh-lg); text-align: left; /* .page-hero zentriert sonst Personenblock und Labels */ } .form-card h2 { text-align: center; color: var(--c-white); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-bottom: 30px; } .form-person { display: flex; gap: 20px; align-items: center; margin-bottom: 32px; } .form-person img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,.1); } .form-person p { margin: 0 0 10px; font-size: 1rem; line-height: 1.45; } .form-person strong { display: block; font-weight: 600; } .form-person span { color: rgba(255, 255, 255, .65); font-size: .88rem; } .field { margin-bottom: 20px; } .field label { display: block; font-size: .95rem; font-weight: 500; margin-bottom: 8px; } .field label em { font-style: italic; font-weight: 400; opacity: .7; } .field input, .field textarea { width: 100%; padding: 14px 16px; border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--c-white); color: var(--c-navy); font-family: var(--f-body); font-size: 1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--c-yellow); box-shadow: 0 0 0 4px rgba(255, 218, 121, .32); } .field--consent { display: flex; gap: 12px; align-items: flex-start; font-size: .85rem; line-height: 1.5; } .field--consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--c-yellow); } .field--consent a { color: var(--c-yellow); } .hp { position: absolute; left: -9999px; height: 0; overflow: hidden; } .form-status { display: none; margin-top: 18px; padding: 22px 24px; border-radius: var(--r-sm); font-size: .98rem; line-height: 1.45; } .form-status.is-ok { display: block; background: #eef9e9; color: var(--c-navy); } .form-status.is-ok strong { display: block; font-weight: 700; } .form-status.is-error { display: block; background: rgba(255, 122, 122, .16); color: #ffc0c0; } /* 5.12 Hero-Visual Das Chatfenster ragt unten aus der Verlaufsfläche heraus - am Desktop absichtlich in die darunter eingeschobene Partnerleiste hinein. */ .hero-visual { position: relative; padding-left: clamp(0px, 3vw, 40px); } .hero-visual__stage { position: relative; border-radius: var(--r-xl); aspect-ratio: 774 / 704; } .hero-visual__label { position: absolute; top: clamp(16px, 3vw, 34px); left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--f-head); font-weight: 500; font-size: clamp(1.15rem, .8rem + 1.5vw, 2.3rem); color: var(--c-white); white-space: nowrap; } /* Hängt rechts neben dem Label, damit der Text mittig bleibt. */ .hero-visual__arrow { position: absolute; left: 100%; top: .1em; margin-left: .25em; width: clamp(26px, 2.4vw, 42px); opacity: .9; pointer-events: none; user-select: none; } .hero-visual__chat { position: absolute; left: 50%; transform: translateX(-50%); width: 78%; top: 24%; z-index: 3; border-radius: 22px; box-shadow: var(--sh-soft); } .hero-visual--wide { padding-bottom: 8%; } .hero-visual--wide .hero-visual__stage { aspect-ratio: 1285 / 675; border-radius: var(--r-lg); } .hero-visual--wide .hero-visual__chat { left: 50%; transform: translateX(-50%); width: 47%; top: 20%; } .hero-visual--wide .deco-arrow--hero { top: 12%; right: 22%; } /* Hero-Screenshots (chat-widget, om-threaded, om-notifications, …): 22px-Ecken + kaum sichtbarer, weicher Grauschatten. Alle Screenshot-Bilder sind voll opak, daher folgt der Schatten dem gerundeten Rechteck. */ .screenshot { border-radius: 22px; box-shadow: var(--sh-soft); } /* 5.13 Split mit angeschnittenem Screenshot */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .split__media { position: relative; } .split__media img { border-radius: 22px; box-shadow: var(--sh-soft); } /* "Gesplittert" an der Seitengrenze: Container clippt, das Bild bleibt komplett sichtbar (keine abgeschnittenen Ecken), Schatten wirkt über die rechte Kante nach außen. */ .split__media--bleed { overflow: hidden; } .split__media--bleed img { width: 100%; max-width: none; } /* „Nichts Wichtiges verpassen": großes Medienbild, wächst nach links ins freie Feld neben dem Text (nur Desktop; mobile 1fr-Regel überschreibt). */ .split--media-lg { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } /* 5.14 Partnerleiste */ .partners { display: flex; align-items: center; gap: clamp(32px, 9vw, 130px); flex-wrap: wrap; } .partners img { height: clamp(40px, 4.1vw, 60px); width: auto; } .partners__sep { width: 1px; align-self: stretch; min-height: clamp(72px, 8vw, 116px); background: var(--c-line); } /* Schiebt sich unter das Hero-Visual, sodass Verlauf und Chatfenster hineinragen. Das Logo sitzt dabei nah an der Oberkante, nicht mittig. */ .partners-band { position: relative; margin-top: calc(-1 * clamp(80px, 10vw, 160px)); padding-top: clamp(18px, 2.6vw, 38px); } /* 5.15 AppSource-Badge */ .appsource-cta { margin: clamp(18px, 2.6vw, 30px) 0 0; } .appsource-link { display: inline-block; transition: opacity .2s var(--ease); } .appsource-link:hover { opacity: .75; text-decoration: none; } .appsource-link img { width: clamp(180px, 18vw, 230px); height: auto; } /* OneMessenger-Hero: Text links und AppSource-Badge rechts auf einer Zeile, direkt unter dem Business-Central-Visual. padding-left gleicht die Einrückung von .hero-visual aus, damit Text- und Badge-Rand exakt die Boxkanten treffen. */ .om-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 48px); padding-left: clamp(0px, 3vw, 40px); } /* Überschrift auf dieselbe Left-Rail wie der Hero-Text (onemessenger.html). */ .rail-left { margin-left: var(--om-rail); } .om-hero-foot .lead { margin-bottom: 0; } .om-hero-foot .appsource-link img { width: clamp(160px, 16vw, 200px); } /* 5.16 Rechtstexte */ .legal { max-width: 780px; margin-inline: auto; } .legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); } .legal h2 { font-size: 1.22rem; font-weight: 600; margin-top: 2em; } .legal h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.7em; } .legal p, .legal li { color: var(--c-text-soft); font-size: .98rem; } /* ---------- 6 · Sektionen ---------- */ .hero { position: relative; z-index: 1; padding: clamp(48px, 6vw, 100px) 0 clamp(40px, 5vw, 80px); } .hero h1 { margin-bottom: 26px; } .hero p { max-width: 48ch; } .page-hero { padding: clamp(80px, 11vw, 150px) 0 clamp(60px, 8vw, 110px); text-align: center; } .page-hero h1 { max-width: 20ch; margin-inline: auto; } .page-hero p { max-width: 60ch; margin-inline: auto; } .contact-band { padding: clamp(60px, 8vw, 110px) 0 0; } .contact-band .form-card { transform: translateY(clamp(40px, 6vw, 96px)); } .contact-band__spacer { height: clamp(70px, 9vw, 130px); background: var(--c-offwhite); } /* ---------- 7 · Footer ---------- */ .footer { padding: clamp(56px, 7vw, 96px) 0 32px; background: var(--c-white); border-top: 1px solid var(--c-line); } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(32px, 5vw, 64px); } .footer__logo { height: 42px; width: auto; margin-bottom: 24px; } .footer__about { color: var(--c-text-soft); font-size: .95rem; max-width: 36ch; } .footer__ms { height: 38px; width: auto; margin-top: 30px; } .footer h4 { font-family: var(--f-body); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; margin: 0 0 22px; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .footer ul a { color: var(--c-navy); font-size: .98rem; } .footer ul a:hover { color: var(--c-blue); } .footer__bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .86rem; color: var(--c-muted); } .footer__bottom nav { display: flex; gap: 30px; } .footer__bottom a { color: var(--c-muted); } /* ---------- 8 · Responsive ---------- */ /* Tablet: Navigation enger setzen, damit nichts umbricht und das Logo nicht gestaucht wird. */ @media (min-width: 901px) and (max-width: 1080px) { .header__inner { gap: 16px; } .nav { gap: 0; } .nav__link { padding: 10px 11px; } .nav .btn { padding: 10px 10px 10px 18px; gap: 10px; } .nav .btn__icon { width: 34px; height: 34px; } } @media (max-width: 1050px) { /* Schmale Kacheln würden den einzeiligen Produktnamen brechen. */ .grid-2--aside { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > :first-child { grid-column: 1 / -1; } } @media (max-width: 900px) { :root { --header-h: 76px; } .burger { display: flex; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 18px 24px 30px; background: var(--c-white); border-bottom: 1px solid var(--c-line); box-shadow: 0 28px 60px rgba(16, 23, 58, .35); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } /* Zentrales Desktop-Segment wird im mobilen Menü zum Spaltenbaustein. */ .nav__links { flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 2px; } /* Abdunkelnder Schleier hinter dem ausgefahrenen Menü. */ body::after { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(16, 23, 58, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility .25s; } body.nav-open::after { opacity: 1; visibility: visible; pointer-events: auto; } .nav-open .nav { opacity: 1; visibility: visible; transform: translateY(0); } .nav__link { padding: 15px 4px; font-size: 1.08rem; justify-content: space-between; } .nav .btn { margin-top: 16px; justify-content: space-between; } .dropdown { display: none; position: static; transform: none; min-width: 0; padding: 0 0 8px 4px; border: 0; box-shadow: none; opacity: 1; visibility: visible; } .nav__item.is-open .dropdown { display: block; transform: none; } .dropdown::before { content: none; } /* Brücke nur am Desktop nötig */ /* Bodenebenen Text + Linie + Pfeil sind ein Desktop-Design – im Burger-Menü wird die Produktzeile wieder kompakt zentriert. */ .dropdown__item { align-items: center; padding: 10px 4px; font-size: 1.12rem; } .dropdown__icon { width: 70px; height: 48px; border-radius: 10px; } .dropdown__icon img { width: 32px; height: auto; } .dropdown__label { padding-bottom: 0; border-bottom: 0; gap: 10px; } .dropdown__arrow { display: none; } .grid-2, .grid-2--aside, .split { grid-template-columns: 1fr; } .lead--align-heading { margin-top: 0; } .partners-band { margin-top: 0; } .split__media--bleed img { width: 100%; border-radius: 22px; } .hero-visual { padding-left: 0; padding-bottom: 26%; } .om-hero-foot { padding-left: 0; } .contact-band .form-card { transform: translateY(clamp(32px, 6vw, 60px)); } .note { max-width: none; } } @media (max-width: 600px) { .container, .container--narrow { width: min(100% - 32px, var(--container)); } .grid-3 { grid-template-columns: 1fr; } .product-grid { grid-template-columns: 1fr; } .product-card { min-height: 0; } .team-card img { width: 180px; height: 180px; } .btn { width: 100%; justify-content: space-between; } .hero-visual { padding-bottom: 28%; } .hero-visual__stage { aspect-ratio: 1 / 1.05; } .hero-visual__chat { width: 88%; top: 26%; } .hero-visual--wide { padding-bottom: 7%; } .hero-visual--wide .hero-visual__stage { aspect-ratio: 1 / 1.15; } .hero-visual--wide .hero-visual__chat { width: 74%; top: 28%; } .deco-arrow { display: none; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; gap: 14px; } .footer__bottom nav { gap: 22px; } } /* ---------- 9 · Motion ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease), transform .75s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } } @media print { .header, .footer, .contact-band, .contact-band__spacer, .btn, .deco-arrow { display: none !important; } body { color: #000; background: #fff; } }