/* mikeheinbuch.com Hell und warm, große zweifarbige Überschriften in ruhigem Maß, eine Akzentfarbe, keine Trennlinien. Farben und Schrift laufen über Tokens, damit Varianten im Prototyp umschaltbar sind. */ @font-face { font-family: "Onest"; src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --bg: #F3F0E9; --bg-2: #ECE7DD; --surface: #FBFAF7; --white: #FFFFFF; --frame: #E8E1D5; --ink: #131313; --ink-2: #2B2A27; --muted: #67625A; --tone: #756F65; --tone-klein: #6B655C; --rand: #948E84; /* Kante von Bedienelementen, 3,1:1 gegen --surface (WCAG 1.4.11) */ --dunkel: #171513; --dunkel-2: #24211D; --auf-dunkel: #F3F0E9; --auf-dunkel-leise: #A8A196; --accent: #FF5A36; --accent-soft: #FFE2D8; --accent-deep: #9A2D13; --on-accent: #131313; --ok: #2E9E5B; --ok-strong: #1B6B3C; --ok-soft: #DCEFE2; --star: #B8730A; --pal-1: #FF5A36; --pal-2: #FFB38F; --pal-3: #F5CFA0; --pal-4: #F3A5C0; --pal-5: #A7CDEF; --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --r-xl: 30px; --r-lg: 24px; --r-md: 18px; --r-sm: 12px; --gutter: clamp(16px, 4vw, 56px); --maxw: 1560px; --fs-hero: clamp(2.5rem, 5.4vw, 5.6rem); --fs-h2: clamp(2rem, 3.75vw, 3.9rem); --fs-side: clamp(1.85rem, 3.05vw, 3.15rem); --fs-xxl: clamp(2.7rem, 6.4vw, 6.75rem); --fs-h3: clamp(1.3rem, 1.7vw, 1.65rem); --fs-lead: clamp(1.0625rem, 1.25vw, 1.25rem); --shadow-lg: 0 60px 120px -60px rgba(74, 48, 22, .32), 0 18px 44px -26px rgba(74, 48, 22, .2); --shadow-sm: 0 14px 34px -20px rgba(74, 48, 22, .32); --ease: cubic-bezier(.16, 1, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); } [data-accent="amber"] { --accent: #F5A524; --accent-soft: #FCEBC9; --accent-deep: #7A4A00; --pal-1: #F5A524; --pal-2: #FFCB80; --pal-3: #F7DDB2; --pal-4: #F49A7B; --pal-5: #A7CDEF; } [data-accent="blau"] { --accent: #2F5BFF; --accent-soft: #DDE5FF; --accent-deep: #1E3BB3; --on-accent: #FFFFFF; --pal-1: #2F5BFF; --pal-2: #8DBAF5; --pal-3: #F2D8B6; --pal-4: #FFC6B2; --pal-5: #BDE2F2; } [data-font="outfit"] { --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } /* ---------- Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; hyphens: manual; overflow-x: clip; } body.no-scroll { overflow: hidden; } img, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } p, figure, dl, dd { margin: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1; letter-spacing: -.035em; text-wrap: balance; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 10px; } ::selection { background: var(--accent); color: var(--on-accent); } .sprite { display: none; } .i { width: 1em; height: 1em; flex: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip { position: fixed; left: 16px; top: -100px; z-index: 400; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; } .skip:focus { top: 16px; } .container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; } .section { padding-block: clamp(3.75rem, 6.6vw, 6.75rem); } /* ---------- Typografie ---------- */ .display { margin: 0; font-size: var(--fs-hero); font-weight: 600; line-height: .98; letter-spacing: -.04em; text-wrap: balance; } .h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.042em; } .h2--side { font-size: var(--fs-side); line-height: 1.03; letter-spacing: -.04em; } /* Schmale Spalten: lange Wörter trennen statt über den Rand laufen */ .h2--side { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 20 8 8; overflow-wrap: break-word; } .h2, .phero__title, .display { overflow-wrap: break-word; } /* Zeilenmasken der Einblendung: Luft nach unten und oben, sonst schneiden sie Unterlängen und Umlautpunkte ab */ .zeile-mask { padding-block: .1em .2em; margin-block: -.1em -.2em; } .tone { color: var(--tone); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 44ch; } .kicker { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .9rem; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .875rem; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; } .kicker--bg { background: var(--bg); } .kicker--ok { gap: .45rem; background: var(--ok-soft); color: var(--ok-strong); font-weight: 600; } .kicker--ok .i { width: 16px; height: 16px; } .link { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--ease); } .link .i { width: 18px; height: 18px; transition: transform .45s var(--ease); } .link:hover { background-size: 100% 2px; } .link:hover .i { transform: translateX(4px); } @media (max-width: 640px) { .display, .h2, .h2--side, .cta__title, .svc__title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } } .section-head { display: grid; justify-items: start; gap: clamp(.85rem, 1.4vw, 1.15rem); margin-bottom: clamp(2rem, 3.4vw, 3.25rem); } /* Luft für Umlautpunkte, die sonst auf dem Kicker darüber sitzen */ .section-head .h2 { margin-top: clamp(.3rem, .7vw, .6rem); } .section-head--row { grid-template-columns: 1fr; } .section-head--row > :last-child:not(:first-child) { justify-self: end; max-width: 46ch; } .section-head.section-head--row > .filters { max-width: none; } .section-foot { display: flex; justify-content: center; margin-top: clamp(2rem, 3.4vw, 3rem); } @media (max-width: 960px) { .section-head--row > :last-child:not(:first-child) { justify-self: start; } } /* ---------- Dunkler Block: setzt einen Abschnitt als ruhigen Kontrast ab ---------- */ .section--dunkel { margin-inline: clamp(8px, 1.2vw, 20px); border-radius: var(--r-xl); background: var(--dunkel); color: var(--auf-dunkel); } .section--dunkel .tone { color: #8F887C; } .section--dunkel .lead, .section--dunkel .product__text, .section--dunkel .mini p { color: var(--auf-dunkel-leise); } .section--dunkel .kicker { background: rgba(255, 255, 255, .08); color: var(--auf-dunkel); } .section--dunkel .product, .section--dunkel .mini { background: var(--dunkel-2); } .section--dunkel .product:hover { background: #2F2B26; } .section--dunkel .mini strong { color: var(--auf-dunkel); } /* Startseite: Übergang von den eigenen Produkten zur Software für Kunden */ .software__weiter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); } .software__weiter p { max-width: 46ch; margin: 0; color: var(--auf-dunkel-leise); font-size: 1.0625rem; } .section--dunkel :focus-visible { outline-color: var(--auf-dunkel); } /* ---------- Buttons und Chips ---------- */ .btn { --h: 54px; position: relative; display: inline-flex; align-items: center; gap: .9rem; min-height: var(--h); padding: 0 1.45rem; border-radius: 999px; font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; transition: background-color .3s, color .3s; will-change: transform; } .btn:has(.btn__icon) { padding-right: 6px; } .btn > .i { width: 18px; height: 18px; } .btn--ink { background: var(--ink); color: #fff; } .btn--ink:hover { background: #000; } .btn--light { background: var(--white); color: var(--ink); } .btn--light:hover { background: var(--surface); } .btn--sm { --h: 46px; padding-left: 1.2rem; font-size: .9375rem; gap: .7rem; } .btn__icon { position: relative; display: grid; place-items: center; width: calc(var(--h) - 12px); height: calc(var(--h) - 12px); border-radius: 50%; background: var(--accent); color: var(--on-accent); overflow: hidden; flex: none; isolation: isolate; } .btn__icon .i { width: 18px; height: 18px; transition: transform .5s var(--ease); } .btn__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; pointer-events: none; transform: translateY(110%) scale(.7) rotate(-30deg); transition: transform .6s var(--ease-back); } .btn:hover .btn__icon .i, .btn:focus-visible .btn__icon .i { transform: translateX(170%); } .btn:hover .btn__face, .btn:focus-visible .btn__face { transform: none; } .chips { display: flex; flex-wrap: wrap; gap: .45rem; } .chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .9rem; border-radius: 999px; background: rgba(19, 19, 19, .06); color: var(--ink-2); font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .25s, color .25s; } a.chip:hover, .chip--ink { background: var(--ink); color: #fff; } /* ---------- Header ---------- */ .hdr { position: fixed; inset: 0 0 auto; z-index: 100; padding-top: 12px; pointer-events: none; transition: transform .6s var(--ease); } .hdr.is-hidden { transform: translateY(calc(-100% - 12px)); } .hdr__wrap { position: relative; } .hdr__bar { pointer-events: auto; display: flex; align-items: center; gap: 1rem; height: 70px; padding: 0 11px 0 22px; border-radius: 999px; transition: background-color .4s, box-shadow .4s; } .hdr.is-solid .hdr__bar, .hdr.is-open .hdr__bar { background: var(--surface); box-shadow: var(--shadow-sm); } .logo { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; } .logo__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 18%; background: #141414; color: #fff; transition: transform .6s var(--ease-back); } .logo__m { width: 100%; height: 100%; } /* Das Logo bleibt beim Hover in seinen Farben, es kippt nur leicht */ .logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); } .nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; } .nav > a, .nav__mega > a { display: inline-flex; align-items: center; height: 46px; padding: 0 1rem; border-radius: 999px; font-size: .96875rem; font-weight: 500; color: var(--ink-2); transition: background-color .25s, color .25s; } .nav__mega { display: flex; align-items: center; } .nav__mega > a { padding-right: .35rem; } .nav__toggle { display: grid; place-items: center; width: 34px; height: 46px; border-radius: 999px; color: var(--ink-2); } .nav__toggle .i { width: 15px; height: 15px; transition: transform .45s var(--ease); } .nav__toggle[aria-expanded="true"] .i { transform: rotate(180deg); } .nav > a:hover, .nav__mega:hover > a, .nav a[aria-current="page"] { background: rgba(19, 19, 19, .06); color: var(--ink); } .hdr__actions { display: flex; align-items: center; gap: .5rem; margin-left: 1rem; } .menu-btn { display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; } .menu-btn .i { width: 22px; height: 22px; grid-area: 1 / 1; transition: transform .45s var(--ease), opacity .3s; } .menu-btn__close { opacity: 0; transform: rotate(-90deg) scale(.6); } .menu-btn[aria-expanded="true"] .menu-btn__open { opacity: 0; transform: rotate(90deg) scale(.6); } .menu-btn[aria-expanded="true"] .menu-btn__close { opacity: 1; transform: none; } .hdr__remote { display: inline-flex; align-items: center; gap: .45rem; height: 48px; padding: 0 1.05rem; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9375rem; font-weight: 600; white-space: nowrap; transition: background-color .3s; } .hdr__remote:hover, .hdr__remote:focus-visible { background: var(--white); } .hdr__remote .i { width: 20px; height: 20px; } @media (max-width: 1280px) { .hdr__remote { width: 48px; padding: 0; justify-content: center; } .hdr__remote span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 1100px) { .nav { display: none; } .menu-btn { display: grid; } .hdr__actions { margin-left: auto; } .mega { display: none; } } @media (max-width: 560px) { .hdr__remote { display: none; } } @media (max-width: 560px) { .hdr__actions .btn { display: none; } .hdr__bar { height: 62px; padding-left: 16px; } .logo__text { font-size: 1.05rem; } } .mega { position: absolute; left: 0; right: 0; top: calc(100% + 10px); visibility: hidden; pointer-events: none; } /* Support im Kopfbereich: Telefon, E-Mail, WhatsApp und Fernwartung an einer Stelle */ .hdr__support { position: relative; display: flex; } .hdr__support-pfeil { width: 14px; height: 14px; margin-left: -.15rem; transition: transform .3s var(--ease); } .hdr__support.is-offen .hdr__support-pfeil { transform: rotate(180deg); } .support { position: absolute; right: 0; top: calc(100% + 10px); z-index: 2; width: min(340px, 86vw); visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility .3s; } .support.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; } .support__panel { display: grid; gap: .25rem; padding: .9rem; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); } .support__titel { margin: .2rem .6rem .5rem; color: var(--muted); font-size: .8125rem; font-weight: 500; } .support__eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: .6rem; border-radius: var(--r-md); transition: background-color .25s; } .support__eintrag:hover { background: var(--white); } .support__eintrag strong { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; } .support__eintrag span span { display: block; color: var(--muted); font-size: .8125rem; } .support__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--white); } .support__eintrag:hover .support__icon { background: var(--bg); } .support__icon .i { width: 20px; height: 20px; } .support__eintrag--laden { margin-top: .3rem; background: var(--bg); } @media (max-width: 1100px) { .hdr__support { display: none; } } .mega.is-open { visibility: visible; pointer-events: auto; } .mega__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, .8fr); gap: 2rem 1.75rem; padding: clamp(1.5rem, 2.2vw, 2.25rem); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); max-height: calc(100vh - 110px); overflow: auto; } .mega__title { display: inline-flex; margin-bottom: .7rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease); } .mega__title:hover { background-size: 100% 2px; } .mega__col ul + .mega__title { margin-top: 1.4rem; } .mega__col li a { display: inline-block; padding: .28rem 0; font-size: .9375rem; line-height: 1.35; color: var(--muted); transition: color .2s, transform .35s var(--ease); } .mega__col li a:hover { color: var(--ink); transform: translateX(4px); } .mega__col li a.mega__mehr { font-weight: 600; color: var(--ink); } .mega__feature { position: relative; grid-column: 4; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; min-height: 340px; padding: 1.4rem; border-radius: var(--r-md); overflow: hidden; isolation: isolate; } .mega__feature .art { z-index: -1; } .mega__feature-img { position: absolute; left: 50%; top: 6%; width: 70%; height: auto; pointer-events: none; transform: translateX(-50%); transition: transform .8s var(--ease); } .mega__feature:hover .mega__feature-img { transform: translateX(-50%) translateY(-8px) rotate(-1.5deg); } .mega__feature::after { content: ""; position: absolute; inset: auto 0 0; height: 62%; background: linear-gradient(to bottom, rgba(251, 250, 247, 0), rgba(251, 250, 247, .86) 45%, rgba(251, 250, 247, .96)); pointer-events: none; } .mega__feature-label, .mega__feature strong, .mega__feature-text { position: relative; z-index: 1; } .mega__feature-label { align-self: flex-start; margin-bottom: auto; z-index: 1; padding: .35rem .75rem; border-radius: 999px; background: var(--white); font-size: .8125rem; font-weight: 600; } .mega__feature strong { font-size: 1.6rem; line-height: 1.02; letter-spacing: -.04em; } .mega__feature-text { font-size: .9375rem; color: var(--ink-2); } @media (max-width: 1320px) { .mega__panel { gap: 1.6rem 1.25rem; } } .mnav { position: fixed; inset: 0; z-index: 90; background: var(--bg); overflow-y: auto; } .mnav[hidden] { display: none; } .mnav__inner { display: flex; flex-direction: column; gap: .25rem; min-height: 100%; padding: 104px var(--gutter) 32px; } .mnav__inner > a, .mnav__group summary { display: flex; align-items: center; justify-content: space-between; padding: .3rem 0; font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; list-style: none; cursor: pointer; } .mnav__group summary::-webkit-details-marker { display: none; } .mnav__group summary .i { width: 30px; height: 30px; transition: transform .4s var(--ease); } .mnav__group[open] summary .i { transform: rotate(45deg); } .mnav__links { display: grid; gap: .1rem; padding: .5rem 0 1rem; } .mnav__links a { font-size: 1.2rem; font-weight: 500; color: var(--muted); padding: .3rem 0; } .mnav__inner > a.mnav__item--remote { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .mnav__item--remote span { display: block; margin-top: .2rem; font-size: .9375rem; font-weight: 500; color: var(--muted); letter-spacing: 0; } .mnav__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .35rem; font-size: 1.05rem; color: var(--muted); } /* ---------- Seitenübergang und Cursor ---------- */ .pt { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--frame); pointer-events: none; transform: translateY(100%); } .pt-in .pt { transform: none; } .pt__mark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 18%; background: #141414; color: #fff; } /* Einstieg der Startseite: reine CSS-Einblendung ab dem ersten Bild, damit die Hauptüberschrift nicht auf Skripte wartet */ @media (prefers-reduced-motion: no-preference) { .js [data-hero-in] { animation: hero-in 1.05s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms + 60ms); } [data-hero-in="1"] { --i: 1; } [data-hero-in="2"] { --i: 2; } [data-hero-in="3"] { --i: 3; } [data-hero-in="4"] { --i: 4; } [data-hero-in="5"] { --i: 6; } } @keyframes hero-in { from { opacity: 0; transform: translateY(26px); } } .cursor { position: fixed; left: 0; top: 0; z-index: 150; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .9375rem; font-weight: 600; pointer-events: none; opacity: 0; visibility: hidden; } @media (hover: none) { .cursor { display: none; } } /* ---------- Gemalte Farbflächen ---------- */ .art { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; background: var(--frame); isolation: isolate; } .art__blob { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--c) 0%, color-mix(in oklab, var(--c) 70%, transparent) 48%, transparent 100%); transform: translate(-50%, -50%); will-change: transform; } .art__grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .2 0 0 0 0 .14 0 0 0 .75 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; opacity: .38; mix-blend-mode: multiply; pointer-events: none; } .art--a .art__blob:nth-child(1) { --c: var(--pal-1); --x: 25%; --y: 72%; --s: 88%; } .art--a .art__blob:nth-child(2) { --c: var(--pal-2); --x: 72%; --y: 28%; --s: 82%; } .art--a .art__blob:nth-child(3) { --c: var(--pal-4); --x: 88%; --y: 88%; --s: 62%; } .art--b .art__blob:nth-child(1) { --c: var(--pal-3); --x: 28%; --y: 30%; --s: 84%; } .art--b .art__blob:nth-child(2) { --c: var(--pal-1); --x: 80%; --y: 66%; --s: 72%; } .art--b .art__blob:nth-child(3) { --c: var(--pal-2); --x: 18%; --y: 92%; --s: 58%; } .art--c .art__blob:nth-child(1) { --c: var(--pal-5); --x: 28%; --y: 42%; --s: 88%; } .art--c .art__blob:nth-child(2) { --c: var(--pal-3); --x: 78%; --y: 70%; --s: 78%; } .art--c .art__blob:nth-child(3) { --c: var(--pal-1); --x: 90%; --y: 14%; --s: 44%; } .art--d .art__blob:nth-child(1) { --c: var(--pal-4); --x: 22%; --y: 36%; --s: 78%; } .art--d .art__blob:nth-child(2) { --c: var(--pal-1); --x: 66%; --y: 82%; --s: 86%; } .art--d .art__blob:nth-child(3) { --c: var(--pal-3); --x: 90%; --y: 20%; --s: 58%; } .art--e .art__blob:nth-child(1) { --c: var(--pal-2); --x: 34%; --y: 62%; --s: 92%; } .art--e .art__blob:nth-child(2) { --c: var(--pal-5); --x: 86%; --y: 28%; --s: 62%; } .art--e .art__blob:nth-child(3) { --c: var(--pal-4); --x: 72%; --y: 92%; --s: 58%; } .art--site .art__blob:nth-child(1) { --c: var(--pal-1); --x: 80%; --y: 32%; --s: 72%; } .art--site .art__blob:nth-child(2) { --c: var(--pal-2); --x: 94%; --y: 90%; --s: 62%; } .art--site .art__blob:nth-child(3) { --c: var(--pal-4); --x: 58%; --y: 96%; --s: 52%; } .art--hero { background: transparent; } .art--hero .art__blob:nth-child(1) { --c: var(--pal-1); --x: 64%; --y: 34%; --s: 44%; } .art--hero .art__blob:nth-child(2) { --c: var(--pal-2); --x: 84%; --y: 56%; --s: 42%; } .art--hero .art__blob:nth-child(3) { --c: var(--pal-4); --x: 50%; --y: 66%; --s: 40%; } .art--hero .art__blob:nth-child(4) { --c: var(--pal-3); --x: 30%; --y: 40%; --s: 32%; } .art--hero .art__blob:nth-child(5) { --c: var(--pal-5); --x: 94%; --y: 16%; --s: 28%; } .art--hero .art__grain { opacity: .22; } .art--cta .art__blob:nth-child(1) { --c: var(--pal-1); --x: 14%; --y: 26%; --s: 58%; } .art--cta .art__blob:nth-child(2) { --c: var(--pal-2); --x: 56%; --y: 88%; --s: 64%; } .art--cta .art__blob:nth-child(3) { --c: var(--pal-4); --x: 88%; --y: 22%; --s: 54%; } .art--cta .art__blob:nth-child(4) { --c: var(--pal-3); --x: 44%; --y: 18%; --s: 42%; } /* ---------- Hero ---------- */ .hero { position: relative; isolation: isolate; padding-top: clamp(7.5rem, 10.5vw, 10rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); overflow: clip; } .hero__bg { position: absolute; z-index: -1; top: -8%; right: -12%; width: min(78vw, 1250px); aspect-ratio: 1.15; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); } .hero__title { max-width: 16ch; margin-top: 1.25rem; } .nowrap { white-space: nowrap; } .hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem clamp(2rem, 6vw, 7rem); margin-top: clamp(1.75rem, 3vw, 2.75rem); } .hero__swap { font-size: clamp(1.25rem, 1.9vw, 1.8rem); font-weight: 500; line-height: 1.25; letter-spacing: -.03em; } .swap { display: block; margin-top: .3em; } .swap__box { position: relative; display: inline-block; vertical-align: bottom; padding: .02em .38em .1em; border-radius: .34em; background: var(--accent); color: var(--on-accent); white-space: nowrap; overflow: hidden; } .swap__word { display: inline-block; } /* Ohne JavaScript steht nur die erste Aussage, sonst laufen alle vier nebeneinander */ .swap__word + .swap__word { display: none; } .swap__box.ist-bereit .swap__word + .swap__word { display: inline-block; } .hero__lead { max-width: 46ch; margin-top: 1.1rem; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; } .hero__side { display: grid; gap: 1.4rem; justify-items: start; } .hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; } .trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .9375rem; font-weight: 500; color: var(--ink-2); } .trust li { display: inline-flex; align-items: center; gap: .45rem; } .trust > li > .i { width: 17px; height: 17px; color: var(--ok-strong); } .trust__stars { display: inline-flex; gap: 1px; color: var(--star); } .trust__stars .i { width: 15px; height: 15px; } /* Bewertungsfeld wie ein Google-Widget, rein lokal: Logo, Sterne, Note, Verweis auf /bewertungen/ */ .trust__google { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .65rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rand); color: var(--ink); text-decoration: none; transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .trust__google:hover { box-shadow: inset 0 0 0 1px var(--ink-2); } .trust__google img { width: 18px; height: 18px; flex: none; } .trust__logo { width: 18px; height: 18px; flex: none; } .trust__note { font-weight: 700; } .trust__trenner { width: 1px; height: 1em; background: var(--rand); } @media (max-width: 1000px) { .hero__row { grid-template-columns: 1fr; } } /* ---------- Projektwand ---------- */ /* Zwölf Kacheln, in denen die Kundenseiten langsam durchlaufen. Die Wand ragt in das dunkle Band mit den Kundenlogos. */ .wand { position: relative; margin-top: clamp(3rem, 5vw, 4.5rem); } .wand::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: 46%; bottom: calc(-1 * clamp(2.5rem, 4vw, 4rem) - 3px); background: var(--dunkel); } .wand__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px; border-radius: var(--r-xl); background: var(--dunkel); box-shadow: var(--shadow-lg); } .wand__kachel { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: calc(var(--r-xl) - 12px); overflow: hidden; background: var(--dunkel-2); isolation: isolate; } .wand__kachel img { width: 100%; height: auto; will-change: transform; backface-visibility: hidden; } .wand__video { display: block; width: 100%; height: 100%; object-fit: cover; } .wand__name { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: .4rem .75rem; border-radius: 999px; background: var(--white); color: var(--ink); font-size: .8125rem; font-weight: 600; line-height: 1; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease); } .wand__kachel:hover .wand__name, .wand__kachel:focus-visible .wand__name { opacity: 1; transform: none; } .wand__kachel:focus-visible { outline-color: var(--accent); box-shadow: 0 0 0 3px #fff; } @media (max-width: 1000px) { .wand__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wand__raster > li:nth-child(n+10) { display: none; } } @media (max-width: 620px) { .wand__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; } .wand__raster > li:nth-child(n+7) { display: none; } .wand__kachel { border-radius: calc(var(--r-xl) - 16px); } } /* ---------- Kunden-Laufband ---------- */ .logos { margin-top: -2px; padding-block: calc(clamp(2.5rem, 4vw, 3.5rem) + 2px) clamp(3rem, 5vw, 4.5rem); overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--dunkel); color: var(--auf-dunkel); } .logos__label { margin-bottom: 1.25rem; color: var(--auf-dunkel-leise); font-size: .9375rem; font-weight: 500; } .logos__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1.25rem; } .logos__kopf .logos__label { margin-bottom: 0; } /* Schalter für alle Endlos-Animationen der Seite (WCAG 2.2.2) */ .bewegung { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .95rem; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--auf-dunkel-leise); font-size: .8125rem; font-weight: 600; transition: background-color .25s, color .25s; } .bewegung:hover { background: rgba(255, 255, 255, .14); color: #fff; } .bewegung .i { width: 14px; height: 14px; } .bewegung__play, .bewegung.ist-aus .bewegung__pause { display: none; } .bewegung.ist-aus .bewegung__play { display: block; } .bewegung[hidden] { display: none; } .footer__bewegung { min-height: 24px; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .footer__bewegung:hover { color: #fff; } .logos__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logos__row + .logos__row { margin-top: .75rem; } .logos__track { display: flex; width: max-content; will-change: transform; } .logos__set { display: flex; gap: .75rem; padding-right: .75rem; } .logos__set li { display: flex; align-items: center; height: clamp(56px, 5.4vw, 72px); padding: 0 clamp(1.3rem, 2vw, 1.9rem); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--auf-dunkel); font-size: clamp(1.05rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -.035em; white-space: nowrap; transition: background-color .3s, color .3s; } .logos__set li:hover { background: var(--white); } .logos__set li img { width: auto; height: clamp(22px, 2vw, 30px); object-fit: contain; filter: brightness(0) invert(1); opacity: .72; transition: filter .45s var(--ease), opacity .45s var(--ease); } .logos__set li:hover img { filter: none; opacity: 1; } /* ---------- Statement ---------- */ .statement { padding-block: clamp(4rem, 7.5vw, 7.5rem); } .statement__grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, .38fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } .statement__person { display: grid; gap: .2rem; margin-top: clamp(2rem, 4vw, 3rem); } .statement .kicker { margin-bottom: clamp(1rem, 2vw, 1.6rem); } .statement__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; } .statement__rolle { color: var(--muted); font-size: .9375rem; } .statement__foto { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: var(--frame); } .statement__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } @media (max-width: 900px) { .statement__grid { grid-template-columns: 1fr; } .statement__foto { max-width: 360px; } } .statement__text { max-width: 25ch; margin: 0; font-size: clamp(1.9rem, 3.5vw, 3.6rem); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; } /* ---------- Leistungen ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } .svc { display: flex; flex-direction: column; padding: 10px; border-radius: var(--r-xl); background: var(--surface); transform-style: preserve-3d; will-change: transform; } .svc__art { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: calc(var(--r-xl) - 10px); overflow: hidden; isolation: isolate; } .svc__art .art { transition: transform 1s var(--ease); } .svc:hover .svc__art .art { transform: scale(1.05); } .svc__tag { position: absolute; left: 16px; top: 16px; z-index: 2; padding: .35rem .75rem; border-radius: 999px; background: var(--white); font-size: .875rem; font-weight: 600; } .svc__play { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--white); } .svc__play .i { width: 24px; height: 24px; margin-left: 3px; } .svc__body { display: grid; gap: .8rem; padding: clamp(1.2rem, 1.7vw, 1.6rem) clamp(.8rem, 1.1vw, 1.1rem) clamp(.9rem, 1.2vw, 1.15rem); } .svc__title { font-size: clamp(1.55rem, 2.2vw, 2.25rem); line-height: 1.02; letter-spacing: -.04em; } .svc__title a { background: linear-gradient(currentColor, currentColor) 0 96% / 0 .06em no-repeat; transition: background-size .5s var(--ease); } .svc__title a:hover { background-size: 100% .06em; } .svc__body p { max-width: 48ch; color: var(--muted); font-size: 1rem; } /* Sieben Karten: drei, drei und eine breite. Darunter zwei je Reihe plus die breite, mobil einspaltig */ @media (min-width: 761px) { .svc-grid > .svc:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; } .svc-grid > .svc:last-child .svc__art { aspect-ratio: 16 / 8; height: 100%; } .svc-grid > .svc:last-child .svc__body { padding-inline: clamp(1.5rem, 3vw, 3rem); } } @media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc__art { aspect-ratio: 2 / 1; } } .mini-ui { position: absolute; z-index: 1; left: 50%; top: 54%; display: block; transform: translate(-50%, -50%); } .mini-ui--browser { width: 56%; padding: 10px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); } .mini-ui__bar { display: flex; gap: 5px; margin-bottom: 8px; } .mini-ui__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--frame); } .mini-ui__hero { display: block; height: 70px; border-radius: 8px; background: var(--ink); } .mini-ui__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; } .mini-ui__row i { height: 34px; border-radius: 7px; background: var(--bg); } .mini-ui--kanban { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; padding: 10px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); } .mini-ui__col { display: grid; align-content: start; gap: 6px; padding: 6px; border-radius: 9px; background: var(--bg); } .mini-ui__col i { height: 26px; border-radius: 6px; background: var(--white); } .mini-ui__col i.is-accent { background: var(--accent); } .mini-ui__col i.is-ink { background: var(--ink); } .mini-ui--rack { display: grid; gap: 7px; width: 46%; padding: 12px; border-radius: 14px; background: var(--ink); box-shadow: var(--shadow-sm); } .mini-ui--rack i { position: relative; height: 22px; border-radius: 5px; background: #2A2A28; } .mini-ui--rack i::after { content: ""; position: absolute; right: 10px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } .mini-ui--rack i::before { content: ""; position: absolute; left: 10px; top: 8px; width: 55%; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, #4A4945 0 7px, transparent 7px 10px); } .mini-ui--chart { display: flex; align-items: flex-end; gap: 8px; width: 46%; height: 42%; padding: 14px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); } .mini-ui--chart i { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--ink); } .mini-ui--chart i:nth-child(1) { height: 30%; } .mini-ui--chart i:nth-child(2) { height: 42%; } .mini-ui--chart i:nth-child(3) { height: 38%; } .mini-ui--chart i:nth-child(4) { height: 58%; } .mini-ui--chart i:nth-child(5) { height: 74%; background: var(--accent); } .mini-ui--chart i:nth-child(6) { height: 92%; background: var(--accent); } .mini-ui--chat { display: grid; gap: 8px; width: 54%; padding: 14px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); } .mini-ui--chat i { display: block; height: 22px; border-radius: 11px; background: var(--bg); } .mini-ui--chat i.b1 { width: 76%; } .mini-ui--chat i.b2 { width: 58%; margin-left: auto; background: var(--ink); } .mini-ui--chat i.b3 { width: 86%; background: var(--accent); } .mini-ui--swatches { display: grid; grid-template-columns: repeat(4, 50px); align-items: center; gap: 8px; padding: 14px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); } .mini-ui--swatches i { height: 50px; border-radius: 50%; } .mini-ui--swatches i:nth-child(1) { background: var(--ink); } .mini-ui--swatches i:nth-child(2) { background: var(--accent); } .mini-ui--swatches i:nth-child(3) { background: var(--pal-3); } .mini-ui--swatches i:nth-child(4) { background: var(--bg); } .mini-ui--swatches b { grid-column: 1 / -1; font-size: 2.6rem; line-height: 1; letter-spacing: -.05em; } .mini-ui--film { width: 56%; padding: 10px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); } .mini-ui__sucher { position: relative; display: block; height: 78px; border-radius: 10px; background: var(--ink); } .mini-ui__sucher::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 22px; transform: translate(-40%, -50%); background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); } .mini-ui__streifen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; } .mini-ui__streifen i { height: 26px; border-radius: 6px; background: var(--bg); } .mini-ui__streifen i:nth-child(2) { background: var(--frame); } @media (max-width: 520px) { .mini-ui { scale: .78; } } /* ---------- Technikleiste ---------- */ .tech { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .tech__label { margin-bottom: 1.25rem; color: var(--muted); font-size: .9375rem; font-weight: 500; } .tech__row { display: flex; flex-wrap: wrap; gap: .5rem; } .tech__row li { display: inline-flex; align-items: center; gap: .6rem; height: 54px; padding: 0 1.2rem; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .9375rem; font-weight: 600; transition: background-color .3s; } .tech__row li:hover { background: var(--white); } .tech__row img { width: 22px; height: 22px; filter: grayscale(1); opacity: .5; transition: filter .4s var(--ease), opacity .4s var(--ease); } .tech__row li:hover img { filter: none; opacity: 1; } .tech__note { margin-top: 1.1rem; color: var(--tone-klein); font-size: .8125rem; } .tech__gruppen { display: grid; gap: .6rem; } .tech__gruppe { display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: center; gap: 1rem; } .tech__gruppe dt { color: var(--muted); font-size: .9375rem; font-weight: 500; } @media (max-width: 760px) { .tech__gruppe { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .tech__gruppe + .tech__gruppe { margin-top: .5rem; } .tech__row li { height: 44px; padding: 0 .95rem; font-size: .875rem; } .tech__row li:has(img) { padding-left: .8rem; } } /* ---------- Referenzen ---------- */ .filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; padding-bottom: .5rem; } .refs .filters { margin-bottom: clamp(1.75rem, 3vw, 3rem); } .filters button { height: 44px; padding: 0 1.05rem; border-radius: 999px; background: var(--surface); font-size: .9375rem; font-weight: 500; transition: background-color .25s, color .25s; } .filters button:hover { background: var(--white); } .filters button[aria-pressed="true"] { background: var(--ink); color: #fff; } @media (max-width: 960px) { .filters { justify-content: flex-start; } } .ref-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem) clamp(1rem, 1.6vw, 1.5rem); } /* Drei je Reihe. Bleiben zwei übrig, teilen sie sich die Reihe; bleibt eine, laufen die letzten vier als zwei Paare */ .ref-grid > .ref { grid-column: span 2; } .ref-grid > .ref.ist-breit { grid-column: span 3; } .ref-grid > .ref.ist-mitte { grid-column: 3 / span 2; } .ref { display: grid; align-content: start; gap: .85rem; } .ref[hidden] { display: none; } .ref__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--frame); isolation: isolate; } .ref__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .ref:hover .ref__media img, .ref:hover .ref__media .art { transform: scale(1.045); } .ref__media .art { transition: transform 1s var(--ease); } .ref__title { display: block; margin-top: .35rem; font-size: clamp(1.25rem, 1.6vw, 1.55rem); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; } .ref__text { display: block; color: var(--muted); font-size: 1rem; line-height: 1.5; } .ref__media picture { display: block; width: 100%; height: 100%; } .ref__veil { position: absolute; inset: 0; background: var(--surface); opacity: .93; transition: opacity .7s var(--ease); } .ref__logo { position: absolute; inset: 0; display: grid; place-items: center; padding: 12% 14%; transition: opacity .5s var(--ease), transform .8s var(--ease); } .ref__logo img { width: auto; max-width: 78%; max-height: clamp(48px, 5.2vw, 78px); object-fit: contain; } .ref__logo--tafel img { padding: 14px 20px; border-radius: 18px; background: var(--dunkel); box-shadow: var(--shadow-sm); } .ref:hover .ref__veil, .ref:focus-visible .ref__veil { opacity: 0; } .ref:hover .ref__logo, .ref:focus-visible .ref__logo { opacity: 0; transform: scale(.92); } .ref--dunkel .ref__veil { background: var(--ink); opacity: .62; } .ref--badge .ref__logo { padding-bottom: 32%; } .ref__badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: grid; gap: .2rem; max-width: 74%; padding: 15px 19px; border-radius: var(--r-md); background: var(--white); } .ref__badge-num { font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 600; line-height: .88; letter-spacing: -.055em; } .ref__badge-text { color: var(--muted); font-size: .875rem; line-height: 1.3; } /* Zwei je Reihe. Bei ungerader Zahl stehen die letzten drei nebeneinander */ @media (max-width: 1000px) { .ref-grid > .ref, .ref-grid > .ref.ist-breit { grid-column: span 3; } .ref-grid > .ref.ist-drittel { grid-column: span 2; } .ref-grid > .ref.ist-mitte { grid-column: 2 / span 4; } } @media (max-width: 620px) { .ref-grid { grid-template-columns: minmax(0, 1fr); } .ref-grid > .ref, .ref-grid > .ref.ist-breit, .ref-grid > .ref.ist-drittel, .ref-grid > .ref.ist-mitte { grid-column: 1 / -1; } /* Handy: Auswahl als Reihe zum Wischen, die nächste Karte schaut an der Seite hervor */ .ref-grid--reihe { display: flex; gap: .75rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .ref-grid--reihe::-webkit-scrollbar { display: none; } .ref-grid--reihe > .ref { flex: 0 0 80%; scroll-snap-align: start; } } /* ---------- Eigene Software ---------- */ .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } .product { display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s; } .product:hover { background: var(--white); } .product__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; border-radius: calc(var(--r-xl) - 10px); overflow: hidden; isolation: isolate; } .product__art .product__logo { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 52px; height: 52px; padding: 8px; border-radius: 15px; background: var(--white); box-shadow: var(--shadow-sm); object-fit: contain; } .product__body { display: grid; gap: .8rem; padding: 1.6rem 1.2rem 1.2rem; } .product__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .product__name { font-size: clamp(1.6rem, 2.3vw, 2.3rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; } .product__text { color: var(--muted); } .product__proof { font-weight: 600; } /* Produktkarten auf der Übersicht: Screenshot, Logo und zwei Wege */ .produkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.6rem); } .produkt { display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s; } .produkt:hover { background: var(--white); } .produkt__bild { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: calc(var(--r-xl) - 10px); overflow: hidden; background: var(--frame); } .produkt__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 1s var(--ease); } .produkt:hover .produkt__bild img { transform: scale(1.04); } .produkt__bild .produkt__logo { position: absolute; left: 16px; bottom: 16px; width: 54px; height: 54px; inset-block-start: auto; padding: 8px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); object-fit: contain; } .produkt__text { display: grid; gap: .8rem; padding: 1.5rem 1.2rem 1.2rem; } .produkt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .produkt__name { font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; } .produkt__text p { color: var(--muted); } .produkt__wege { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; } @media (max-width: 860px) { .produkte { grid-template-columns: minmax(0, 1fr); } } .status { padding: .35rem .75rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok-strong); font-size: .8125rem; font-weight: 600; } .status--alpha { background: var(--accent-soft); color: var(--accent-deep); } @media (max-width: 1000px) { .products { grid-template-columns: 1fr; } .product__art { aspect-ratio: 16 / 10; } } .ui-cal, .ui-map { position: relative; z-index: 1; width: 72%; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-lg); } .ui-cal { padding: 14px; } .ui-cal__head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; font-size: .75rem; font-weight: 600; color: var(--muted); text-align: center; } .ui-cal__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 26px); gap: 6px; } .ui-cal__grid i { border-radius: 7px; background: var(--bg); } .ui-cal__grid i:nth-child(1) { grid-column: 1; grid-row: 1 / 3; background: var(--ink); } .ui-cal__grid i:nth-child(2) { grid-column: 2; grid-row: 2 / 4; background: var(--accent); } .ui-cal__grid i:nth-child(3) { grid-column: 3; grid-row: 1 / 2; } .ui-cal__grid i:nth-child(4) { grid-column: 4; grid-row: 3 / 6; background: var(--pal-3); } .ui-cal__grid i:nth-child(5) { grid-column: 5; grid-row: 1 / 3; } .ui-cal__grid i:nth-child(6) { grid-column: 1; grid-row: 4 / 6; } .ui-cal__grid i:nth-child(7) { grid-column: 3; grid-row: 3 / 5; background: var(--ink); } .ui-cal__grid i:nth-child(8) { grid-column: 5; grid-row: 4 / 6; background: var(--accent); } .ui-map { padding: 10px; } .ui-map svg { width: 100%; height: auto; border-radius: 10px; background: var(--bg); } .ui-map__road { fill: none; stroke: var(--white); stroke-width: 12; stroke-linecap: round; } .ui-map__route { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; } .ui-map__pin { fill: var(--white); stroke: var(--ink); stroke-width: 3; } .ui-map__pin.is-next { fill: var(--accent); stroke: var(--accent); } .mini { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1rem, 1.8vw, 1.6rem); padding: 1.1rem 1.4rem; border-radius: var(--r-lg); background: var(--surface); } .mini p { flex: 1; } .mini__marke { flex: none; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--auf-dunkel-leise); font-size: .8125rem; font-weight: 600; } /* Voice17 mit seinem echten App-Icon. Der feine Ring hebt das schwarze Icon vom dunklen Block ab */ .mini__app { flex: none; width: 52px; height: 52px; border-radius: 21%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); } .mini__text { flex: 1; min-width: 0; } @media (max-width: 560px) { .mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; } .mini__marke { grid-column: 2; justify-self: start; } } .mini .mini__name { display: block; margin: 0 0 .1rem; font-size: 1.0625rem; letter-spacing: -.02em; } .mini p { color: var(--muted); font-size: .98rem; } .mini strong { margin-right: .35rem; color: var(--ink); } /* ---------- IT-Service ---------- */ .it__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; } .it__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .it__copy .h2 { margin-top: .25rem; } .linklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; } .linklist > li:last-child:nth-child(odd) { grid-column: span 2; } .linklist a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; padding: 0 1.15rem; border-radius: var(--r-sm); background: var(--surface); font-weight: 500; transition: background-color .3s, color .3s; } .linklist a .i { width: 18px; height: 18px; transition: transform .45s var(--ease); } .linklist a:hover { background: var(--ink); color: #fff; } .linklist a:hover .i { transform: translateX(4px); } .it__visual { display: grid; gap: 1rem; } .net { padding: clamp(1rem, 2.5vw, 2rem); border-radius: var(--r-xl); background: var(--surface); } .net svg { width: 100%; height: auto; overflow: visible; } .net__link { fill: none; stroke: var(--frame); stroke-width: 4; stroke-linecap: round; } .net__packet { fill: var(--accent); } .net__node rect, .net__node circle { fill: var(--white); stroke: var(--ink); stroke-width: 2; } .net__node text { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--ink); text-anchor: middle; } .net__node--key rect { fill: var(--ink); } .net__node--key text { fill: #fff; } .net__ap text { font-size: 13px; font-weight: 500; fill: var(--muted); } .net .net__wave { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; } .net__ap-icon { color: var(--ink); overflow: visible; } .net__ap-icon * { fill: none; stroke: currentColor; stroke-width: 2; } .case { display: grid; gap: .6rem; padding: clamp(1.4rem, 2.6vw, 2.2rem); border-radius: var(--r-xl); background: var(--accent-soft); transition: background-color .3s; } .case:hover { background: var(--white); } .case__label { font-size: .875rem; font-weight: 600; color: var(--accent-deep); } .case__text { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.4; letter-spacing: -.02em; } .case__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; font-weight: 600; } .case__more .i { width: 18px; height: 18px; } @media (max-width: 1000px) { .it__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .linklist { grid-template-columns: minmax(0, 1fr); } .linklist > li:last-child:nth-child(odd) { grid-column: auto; } } /* ---------- Foto und Video ---------- */ .sound-toggle { display: inline-flex; align-items: center; gap: .6rem; justify-self: end; height: 50px; padding: 0 1.2rem; border-radius: 999px; background: var(--surface); font-weight: 600; transition: background-color .3s, color .3s; } .sound-toggle .i { width: 20px; height: 20px; } .sound-toggle__on { display: none; } .sound-toggle[aria-pressed="true"] { background: var(--ink); color: #fff; } .sound-toggle[aria-pressed="true"] .sound-toggle__on { display: block; } .sound-toggle[aria-pressed="true"] .sound-toggle__off { display: none; } .sound-toggle[hidden] { display: none; } .medien-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-self: end; } .video-toggle__play, [data-video-toggle].ist-pausiert .video-toggle__pause { display: none; } [data-video-toggle].ist-pausiert .video-toggle__play { display: block; } @media (max-width: 960px) { .sound-toggle { justify-self: start; } } .media-band { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 24fr); gap: clamp(.6rem, 1.2vw, 1rem); align-items: stretch; } .buehne { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); } .buehne__video { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; } .buehne--einzeln { max-width: 460px; margin-inline: auto; } /* Bei reduzierter Bewegung zeigt das Video seine eigene Leiste, die Bildunterschrift rückt darüber */ @media (prefers-reduced-motion: reduce) { .buehne__zeile { bottom: 3.4rem; } } .section-head .lead { margin-top: clamp(.9rem, 1.6vw, 1.4rem); } .buehne::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgba(19, 19, 19, .82), transparent); pointer-events: none; } .buehne__zeile { position: absolute; left: clamp(1.1rem, 2vw, 1.8rem); right: 1rem; bottom: clamp(1.1rem, 2vw, 1.6rem); z-index: 1; display: grid; gap: .1rem; color: #fff; } .buehne__titel { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; } .buehne__kunde { font-size: .9375rem; color: rgba(255, 255, 255, .76); } .galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 220px; gap: clamp(.6rem, 1.2vw, 1rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); } .galerie__item { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--frame); } .galerie__item img { display: block; width: 100%; height: 100%; object-fit: cover; } .galerie__item:first-child { grid-row: span 2; } .galerie__item:nth-child(2) { grid-row: span 2; } .galerie--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 22vw, 300px); } .galerie--drei .galerie__item:nth-child(2) { grid-row: auto; } @media (max-width: 860px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; } } .galerie--eins { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .galerie--eins .galerie__item:first-child { grid-row: auto; aspect-ratio: 4 / 3; max-height: 78vh; } .galerie__unterschrift { margin-top: .9rem; color: var(--muted); font-size: .9375rem; } .stimmen { columns: 3 300px; column-gap: clamp(.8rem, 1.4vw, 1.2rem); } .stimme { display: grid; gap: .9rem; break-inside: avoid; margin: 0 0 clamp(.8rem, 1.4vw, 1.2rem); padding: 1.5rem 1.5rem 1.3rem; border-radius: var(--r-md); background: var(--surface); } .stimme__sterne { display: flex; gap: 2px; color: var(--star); } .stimme__sterne .i { width: 16px; height: 16px; } .stimme__text { margin: 0; font-size: 1.0625rem; line-height: 1.5; } .stimme__quelle { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .875rem; font-weight: 500; } .stimmen__hinweis { margin-top: .4rem; color: var(--muted); font-size: .9375rem; } .stimmen--n2, .stimmen--n3 { display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); columns: auto; gap: clamp(.8rem, 1.4vw, 1.2rem); margin-bottom: clamp(.8rem, 1.4vw, 1.2rem); } .stimmen--n2 { --spalten: 2; } .stimmen--n3 { --spalten: 3; } .stimmen--n2 .stimme, .stimmen--n3 .stimme { grid-template-rows: auto 1fr auto; margin: 0; } @media (max-width: 900px) { .stimmen--n2, .stimmen--n3 { --spalten: 1; } } .stimme__logo { width: 22px; height: 22px; flex: none; } .stimme__logo[src*="fiverr"] { width: 38px; height: 38px; margin-block: -9px; } .stimmen--start { margin-top: clamp(1rem, 1.6vw, 1.5rem); } /* Handy: drei Stimmen reichen, alle stehen auf der Bewertungsseite */ @media (max-width: 620px) { .stimmen--start > :nth-child(n+4) { display: none; } } .reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; } .fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); } .fotos__item { position: relative; min-height: 0; border-radius: var(--r-md); overflow: hidden; background: var(--frame); } .fotos__item img { display: block; width: 100%; height: 100%; object-fit: cover; } .fotos__item--text { display: grid; align-content: center; gap: .7rem; padding: clamp(1.3rem, 2.4vw, 2rem); background: var(--surface); } .fotos__titel { font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; } .fotos__text { color: var(--muted); font-size: .9375rem; } @media (max-width: 860px) { .media-band { grid-template-columns: minmax(0, 1fr); } .buehne__video { aspect-ratio: 4 / 5; } .fotos { grid-auto-rows: auto; } .fotos__item { aspect-ratio: 1 / 1; } } .media__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(1rem, 2vw, 1.6rem); } .media-hint { max-width: 46ch; color: var(--muted); font-size: .9375rem; } /* ---------- Reels: mehrere Videos groß nebeneinander (Werbevideos, 3D, Startseite) ---------- */ .reels { display: grid; grid-template-columns: repeat(var(--reel-spalten, 3), minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.4rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; } .reels--n1 { --reel-spalten: 1; } .reels--n2 { --reel-spalten: 2; } .reels--n4 { --reel-spalten: 4; } /* Zwei Videos außerhalb des Einstiegs: nicht über die ganze Breite, sonst wird jedes Video riesig */ .reels-sec .reels--n2 { max-width: 46rem; margin-inline: auto; } /* Bezugspunkt für den Beschreibungstext: sonst ragt er aus der Wischreihe und macht die Seite auf dem Handy breiter */ .reel { position: relative; min-width: 0; } .reel__figur { margin: 0; } .reel__rahmen { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px rgba(19, 19, 19, .07), var(--shadow-lg); } .reel__video { display: block; width: 100%; height: 100%; object-fit: cover; } /* 3D auf weißem Grund: im Hochformat-Raster ganz zu sehen, allein im eigenen Format 4:5 */ .reel--4x5 .reel__rahmen { background: #fff; } .reel--4x5 .reel__video { object-fit: contain; } .reels--n1 .reel--4x5 .reel__rahmen { aspect-ratio: 4 / 5; } .reel__knoepfe { position: absolute; right: .75rem; bottom: .75rem; display: flex; gap: .45rem; } .reel__knopf { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(19, 19, 19, .62); color: #fff; transition: background-color .25s; } .reel__knopf:hover { background: rgba(19, 19, 19, .88); } .reel__knopf:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); border-radius: 50%; } .reel__knopf .i { width: 20px; height: 20px; } .reel__knopf[hidden] { display: none; } .reel__play, .reel__an { display: none; } .reel__knopf.ist-pausiert .reel__play, .reel__knopf[aria-pressed="true"] .reel__an { display: block; } .reel__knopf.ist-pausiert .reel__pause, .reel__knopf[aria-pressed="true"] .reel__aus { display: none; } .reel__zeile { display: grid; gap: .15rem; margin-top: .9rem; } .reel__titel { font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } .reel__kunde { color: var(--muted); font-size: .9375rem; } @media (max-width: 1000px) { .reels--n4 { --reel-spalten: 2; } } /* Handy: Reihe zum Wischen, das nächste Video schaut an der Seite hervor */ @media (max-width: 620px) { .reels-sec .reels, .media .reels { display: flex; gap: .75rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .reels-sec .reels::-webkit-scrollbar, .media .reels::-webkit-scrollbar { display: none; } .reels-sec .reel, .media .reel { flex: 0 0 76%; scroll-snap-align: start; } } /* Folien eines Karussells oder Standbilder im Format 4:5 */ .folien { display: grid; grid-template-columns: repeat(var(--folien-spalten, 4), minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; } .folien--n3 { --folien-spalten: 3; } .folien__item { aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--frame); } .folien__item picture, .folien__item img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px) { .folien--n4 { --folien-spalten: 2; } } @media (max-width: 620px) { .folien { display: flex; gap: .75rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .folien::-webkit-scrollbar { display: none; } .folien__item { flex: 0 0 72%; scroll-snap-align: start; } } .strip { margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; } .strip__track { display: flex; width: max-content; will-change: transform; } .strip__set { display: flex; gap: 12px; padding-right: 12px; } .strip__set img { width: auto; height: clamp(230px, 27vw, 400px); border-radius: var(--r-md); object-fit: cover; } /* ---------- Über uns ---------- */ .about__box { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); padding: 12px; border-radius: var(--r-xl); background: var(--surface); } .about__photo { position: relative; min-height: clamp(360px, 38vw, 540px); } .about__bild { margin: 0; overflow: hidden; background: var(--frame); } .about__bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .about__bild--gross { position: absolute; inset: 0; border-radius: calc(var(--r-xl) - 10px); } .about__bild--gross img { object-position: 50% 28%; } .about__bild--klein { position: absolute; right: 5%; bottom: 5%; width: 56%; aspect-ratio: 3 / 2; border-radius: var(--r-sm); box-shadow: 0 18px 40px rgba(19, 19, 19, .28); outline: 6px solid var(--surface); } .about__content { display: grid; align-content: center; justify-items: start; gap: 1.5rem; padding: clamp(1rem, 3vw, 3rem) clamp(.6rem, 2vw, 2rem); } .about__text { max-width: 54ch; color: var(--muted); font-size: 1.0625rem; } .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; width: 100%; } .stat { display: flex; flex-direction: column-reverse; gap: .45rem; padding: 1.3rem 1.3rem 1.15rem; border-radius: var(--r-md); background: var(--bg); } .stat__num { font-size: clamp(1.7rem, 2.4vw, 2.4rem); font-weight: 600; line-height: .9; letter-spacing: -.06em; white-space: nowrap; } .stat__label { color: var(--muted); font-size: .9375rem; line-height: 1.35; } @media (max-width: 900px) { .about__box { grid-template-columns: 1fr; } .about__photo { aspect-ratio: 4 / 4.2; min-height: 0; } } @media (max-width: 420px) { .stats { grid-template-columns: 1fr; } } /* ---------- Bewertungen ---------- */ .platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } .platform { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 250px; padding: clamp(1.4rem, 2.1vw, 2rem); border-radius: var(--r-xl); background: var(--surface); } .platform--accent { background: var(--accent-soft); } .platform__word { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.04em; } .platform__word img { width: 30px; height: 30px; } .platform--link { transition: background-color .3s, transform .3s var(--ease); } .platform--link:hover { background: var(--white); transform: translateY(-2px); } .platform__word img[src*="fiverr"] { width: 52px; height: 52px; margin-block: -12px; } .platform__score { font-size: clamp(3.6rem, 5.6vw, 5.6rem); font-weight: 600; line-height: .85; letter-spacing: -.06em; } .stars { display: flex; gap: 4px; margin-top: 1rem; color: var(--star); } .stars .i { width: 20px; height: 20px; } .platform__count { margin-top: .6rem; color: var(--muted); } .platform__badge { display: inline-flex; align-items: center; gap: .6rem; font-size: clamp(2.2rem, 3.3vw, 3.2rem); font-weight: 600; line-height: .9; letter-spacing: -.06em; } .platform__badge .i { width: .8em; height: .8em; } .review__note { margin-top: 1.25rem; color: var(--muted); font-size: .9375rem; } @media (max-width: 900px) { .platforms { grid-template-columns: 1fr; } .platform { min-height: 0; } } /* ---------- Einsatzgebiet ---------- */ .area__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .area__grid > div { display: grid; gap: 1.5rem; justify-items: start; } /* Startseite ohne Karte (Mike, 03.10.2026): Überschrift links, Text und Orte rechts, oben bündig */ .area__grid--text { align-items: start; } .area__chips { margin-top: .5rem; } .area__chips .chip { min-height: 42px; padding: 0 1.1rem; font-size: .9375rem; background: var(--surface); } /* Sehr schmale Fenster (400 % Zoom): lange Ortschips dürfen umbrechen statt seitlich überzustehen */ @media (max-width: 480px) { .chip { max-width: 100%; white-space: normal; line-height: 1.25; padding-block: .45rem; } } .area__chips a.chip:hover, .area__chips .chip--ink { background: var(--ink); color: #fff; } /* Ortsreihe unter „Passt dazu“ und auf den Ortsseiten */ .verwandt__orte { margin-top: clamp(2rem, 3.5vw, 3rem); } .container > .verwandt__orte:first-child { margin-top: 0; } .map { padding: clamp(.8rem, 2vw, 1.6rem); border-radius: var(--r-xl); background: var(--surface); } .map svg { width: 100%; height: auto; overflow: visible; } .map__land { fill: var(--bg); stroke: var(--frame); stroke-width: 2.5; stroke-linejoin: round; } .map__land--stark { fill: #EDE8DE; stroke: var(--tone); stroke-width: 3; } .map__dot { fill: var(--tone); opacity: .38; } .map__dot.is-key { fill: var(--ink); opacity: .85; } .map__dot.is-launch { fill: var(--accent); opacity: 1; } .map__pulse { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0; } .map__label { font-family: var(--font); font-size: 24px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 7px; stroke-linejoin: round; } .map__label--sm { font-size: 18px; font-weight: 500; fill: var(--muted); } @media (max-width: 1000px) { .area__grid { grid-template-columns: 1fr; } } /* ---------- FAQ ---------- */ .faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; } .faq__head { display: grid; gap: 1.5rem; justify-items: start; } .faq__list { display: grid; gap: .6rem; } .faq__item { border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: background-color .3s; } .faq__item[open] { background: var(--white); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.05rem 1.35rem; font-size: clamp(1.0625rem, 1.25vw, 1.2rem); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; list-style: none; cursor: pointer; } .faq__item summary::-webkit-details-marker { display: none; } .faq__plus { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); transition: transform .5s var(--ease), background-color .3s; } .faq__plus .i { width: 18px; height: 18px; } .faq__item[open] .faq__plus { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); } .faq__a { padding: 0 1.35rem 1.4rem; color: var(--muted); max-width: 70ch; overflow: hidden; } .faq__a a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } } /* ---------- Abschluss ---------- */ .cta-wrap { padding-top: clamp(2rem, 4vw, 4rem); } .cta { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 38vw, 560px); padding: clamp(1.6rem, 4vw, 4rem); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; } .cta > .art { z-index: -1; } .cta__content { display: grid; justify-items: start; gap: 1.4rem; } .cta__title { max-width: 12ch; font-size: var(--fs-xxl); line-height: .95; letter-spacing: -.05em; } .cta__lead { font-size: var(--fs-lead); color: var(--ink-2); } .cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; } .pill { display: inline-flex; align-items: center; gap: .65rem; min-height: 40px; padding: .55rem 1.1rem; border-radius: 999px; background: var(--white); font-size: .9375rem; font-weight: 600; line-height: 1.2; } /* ---------- Grafiken auf den Leistungsseiten ---------- */ .vis { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; } .vis .art { z-index: -1; } .vis__fenster, .vis__karte { display: grid; gap: 10px; width: 74%; padding: 16px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-lg); } .vis__bar { display: flex; align-items: center; gap: 6px; } .vis__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--frame); } .vis__bar b { flex: 1; height: 14px; margin-left: 8px; border-radius: 7px; background: var(--bg); } .vis__hero { display: block; height: 84px; border-radius: 12px; background: var(--ink); transform-origin: 50% 50%; } .vis__zeile { display: block; height: 12px; border-radius: 6px; background: var(--bg); transform-origin: 0 50%; } .vis__zeile--kurz { width: 62%; } .vis__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .vis__reihe i { height: 40px; border-radius: 10px; background: var(--bg); } .vis__kopf { display: flex; align-items: center; justify-content: space-between; } .vis__kopf b { width: 42%; height: 14px; border-radius: 7px; background: var(--ink); } .vis__kopf i { width: 26px; height: 26px; border-radius: 9px; background: var(--bg); } .vis__raster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .vis__raster i { height: 20px; border-radius: 6px; background: var(--bg); } .vis__slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .vis__slots i { padding: 8px 0; border-radius: 10px; background: var(--bg); color: var(--muted); font-size: .72rem; font-style: normal; font-weight: 600; text-align: center; transition: background-color .3s, color .3s; } .vis__slots i.is-on { background: var(--ink); color: #fff; } .vis__toast { position: absolute; right: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; background: var(--ok-strong); color: #fff; font-size: .72rem; font-weight: 600; opacity: 0; } .vis__zeilen { display: grid; gap: 8px; } .vis__zeilen i { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 11px; background: var(--bg); } .vis__zeilen i s { width: 18px; height: 18px; border-radius: 50%; background: var(--frame); text-decoration: none; transition: background-color .3s; } .vis__zeilen i.is-on s { background: var(--ok); } .vis__zeilen i::after { content: ""; flex: 1; height: 8px; border-radius: 4px; background: var(--frame); } .vis__balken { display: block; height: 10px; margin-top: 4px; border-radius: 5px; background: var(--bg); overflow: hidden; } .vis__balken em { display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(.2); } .vis__svg { width: 78%; height: auto; overflow: visible; } .vis__pfad { fill: none; stroke: var(--frame); stroke-width: 4; stroke-linecap: round; } .vis__punkt { fill: var(--accent); } .vis__box { fill: var(--white); stroke: var(--ink); stroke-width: 2.5; } .vis__box--voll { fill: var(--ink); } .vis__kreis { fill: var(--white); stroke: var(--ink); stroke-width: 2.5; } .vis__strasse { fill: none; stroke: var(--white); stroke-width: 14; stroke-linecap: round; } .vis__pin { fill: var(--accent); } .vis__pin--klein { fill: var(--ink); opacity: .45; } .vis__puls { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0; } .vis__blase { display: block; height: 30px; border-radius: 15px; background: var(--bg); } .vis__blase--links { width: 76%; } .vis__blase--rechts { width: 58%; margin-left: auto; background: var(--ink); } .vis__blase--kurz { width: 48%; } .vis__welle { display: flex; align-items: center; gap: 4px; height: 34px; margin-top: 4px; } .vis__welle i { flex: 1; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: 50% 50%; transform: scaleY(.3); } /* ---------- Weitere Projekte ---------- */ .alt-projekte { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } .alt-projekte > * { grid-column: span 3; } /* 11 Einträge: zwei Vierer-Reihen, darunter eine volle Dreier-Reihe */ .alt-projekte > :nth-child(n+9) { grid-column: span 4; } /* Sieben Kacheln: vier oben, drei breitere darunter */ .alt-projekte--n7 > :nth-child(n+5) { grid-column: span 4; } @media (max-width: 1000px) { .alt-projekte > :nth-child(n) { grid-column: span 6; } .alt-projekte > :last-child:nth-child(odd) { grid-column: span 12; } } .alt-projekt { display: grid; gap: .75rem; margin: 0; } .alt-projekt picture { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--frame); } .alt-projekt img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .alt-projekt:hover img { transform: scale(1.04); } .alt-projekt figcaption { display: grid; gap: .15rem; } .alt-projekt__name { font-size: 1.0625rem; font-weight: 600; } .alt-projekt__meta { color: var(--muted); font-size: .875rem; } /* Videos im Archiv: gleiches Format wie die Bilder, Steuerung wie bei den Reels */ .alt-projekt__rahmen { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--frame); } .alt-projekt__video { display: block; width: 100%; height: 100%; object-fit: cover; } .alt-projekt__video--oben { object-position: 50% 22%; } .alt-projekt--video .reel__knoepfe { right: .6rem; bottom: .6rem; } .alt-projekte__hinweis { max-width: 68ch; margin-top: clamp(1.5rem, 3vw, 2.25rem); color: var(--muted); } /* ---------- Skala, Zitat, Produktseiten ---------- */ .skala { display: grid; gap: 1.6rem; } .skala__track { height: 8px; border-radius: 4px; background: var(--frame); overflow: hidden; } .skala__fill { display: block; width: 100%; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: 0 50%; } .skala__stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } @media (max-width: 1000px) { .skala__stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .skala__stufen { grid-template-columns: minmax(0, 1fr); } } .skala__stufe { display: grid; gap: .5rem; padding: clamp(1.2rem, 2vw, 1.8rem); border-radius: var(--r-lg); background: var(--surface); } .skala__groesse { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 600; letter-spacing: -.035em; } .skala__text { color: var(--muted); font-size: .9375rem; } .zitat { display: grid; justify-items: start; gap: 1.2rem; max-width: 62ch; margin: 0; } .zitat__foto { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; } .zitat__foto img { width: 100%; height: 100%; object-fit: cover; } .zitat blockquote { margin: 0; font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.16; letter-spacing: -.035em; } .zitat figcaption { color: var(--muted); font-weight: 600; } .produkt__status { display: inline-block; margin-left: .5rem; } .ref-schau__media--breit { aspect-ratio: 16 / 10; } .ref-schau .container:has(.ref-schau__media--breit) { grid-template-columns: minmax(0, 1fr); } /* ---------- Kontakt und Formular ---------- */ .kontakt__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } @media (max-width: 1000px) { .kontakt__grid { grid-template-columns: 1fr; } } .wizard { position: relative; padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: var(--r-xl); background: var(--surface); } .wizard__fortschritt { display: grid; gap: .8rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); } .wizard__balken { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; } .wizard__balken span { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(.25); } .wizard__punkte { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; color: var(--tone-klein); font-size: .8125rem; font-weight: 600; } .wizard__punkte li.is-on { color: var(--ink); } .wizard__punkte li.is-done { color: var(--muted); } .wizard__step { margin: 0; padding: 0; border: 0; } .wizard.ist-bereit .wizard__step { display: none; } .wizard.ist-bereit .wizard__step.is-on { display: block; } .wizard__step + .wizard__step { margin-top: 2.5rem; } .wizard.ist-bereit .wizard__step + .wizard__step { margin-top: 0; } .wizard__frage { margin-bottom: 1.2rem; padding: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; } .wizard__hinweis { display: block; margin-top: .35rem; color: var(--muted); font-size: .9375rem; font-weight: 500; letter-spacing: 0; } .wizard__fehler { margin-top: 1rem; padding: .85rem 1.1rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-deep); font-size: .9375rem; font-weight: 600; } .wizard__hinweisbox { margin-bottom: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; } .wizard__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.5rem, 3vw, 2.2rem); } .wizard__senden { margin-left: auto; } .wizard.ist-bereit .wizard__senden { display: none; } .wizard.ist-bereit.is-letzter .wizard__senden { display: inline-flex; } .wizard.ist-bereit.is-letzter .wizard__weiter { display: none; } /* Ohne JavaScript steht das ganze Formular untereinander, die Schrittknöpfe haben dann keine Aufgabe */ .wizard:not(.ist-bereit) .wizard__weiter, .wizard:not(.ist-bereit) .wizard__zurueck, .wizard:not(.ist-bereit) .wizard__fortschritt { display: none; } .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .6rem; } .wahl > li { display: grid; } @media (max-width: 1080px) { .wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .wahl { grid-template-columns: minmax(0, 1fr); } } .wahl--zeile { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wahl__box { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; gap: .25rem .9rem; height: 100%; padding: 1rem 1.15rem; border-radius: var(--r-md); background: var(--bg); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .2s; } .wahl__box input { position: absolute; width: 1px; height: 1px; opacity: 0; } .wahl__icon { display: grid; place-items: center; grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; background: var(--white); transition: background-color .25s, color .25s; } .wahl__icon .i { width: 22px; height: 22px; } .wahl__name { font-weight: 600; } .wahl__text { color: var(--muted); font-size: .875rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .wahl--zeile .wahl__box { grid-template-columns: minmax(0, 1fr); text-align: left; } .wahl__box { box-shadow: inset 0 0 0 1px var(--rand); } .wahl__box:hover { background: var(--white); } .wahl__box:has(input:checked) { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink); } .wahl__box:has(input:checked) .wahl__text { color: rgba(255, 255, 255, .7); } .wahl__box:has(input:checked) .wahl__icon { background: var(--accent); color: var(--on-accent); } .wahl__box:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--rand), 0 0 0 3px var(--ink); } .feld { display: grid; gap: .45rem; margin-top: 1.1rem; } .feld__label { font-size: .9375rem; font-weight: 600; } .feld__opt { color: var(--muted); font-weight: 500; } .feld__eingabe { width: 100%; padding: .95rem 1.1rem; border: 1px solid var(--rand); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: inherit; resize: vertical; } .feld__eingabe::placeholder { color: var(--tone-klein); } .feld__eingabe:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .feld__hilfe { color: var(--muted); font-size: .875rem; } .feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } @media (max-width: 620px) { .feld-paar { grid-template-columns: 1fr; } } .zustimmung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; margin-top: 1.5rem; color: var(--muted); font-size: .9375rem; } .zustimmung input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--ink); } .zustimmung a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .zustimmung--hinweis { display: block; } .kontakt__seite { position: sticky; top: 100px; display: grid; gap: 1rem; } .kontakt__karte { display: grid; gap: 1rem; padding: clamp(1.3rem, 2.4vw, 2rem); border-radius: var(--r-xl); background: var(--surface); } .kontakt__karte--weich { background: var(--accent-soft); } .kontakt__karte .pill { justify-self: start; } .kontakt__text { color: var(--muted); } .kontakt__wege { display: grid; gap: .5rem; } .kontakt__wege a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--bg); transition: background-color .25s; } .kontakt__wege a:hover { background: var(--white); } .kontakt__wege strong { display: block; color: var(--muted); font-size: .8125rem; font-weight: 600; } .kontakt__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--white); } .kontakt__icon .i { width: 20px; height: 20px; } .kontakt__icon img { width: 22px; height: 22px; } .kontakt__label { color: var(--accent-deep); font-size: .875rem; font-weight: 600; line-height: 1.6; letter-spacing: normal; } .kontakt__ablauf { display: grid; gap: .9rem; color: var(--ink-2); font-size: .9375rem; } .kontakt__ablauf strong { display: block; } @media (max-width: 1000px) { .kontakt__seite { position: static; } } /* ---------- Footer ---------- */ .footer { margin-top: clamp(1rem, 2vw, 2rem); padding-top: clamp(3.5rem, 6vw, 5.5rem); overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--dunkel); color: var(--auf-dunkel); } .footer .tone { color: #8F887C; } .footer :focus-visible { outline-color: var(--auf-dunkel); } .footer__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); } .footer__claim { max-width: 24ch; font-size: clamp(1.6rem, 2.7vw, 2.7rem); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; } .footer__cols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2.5rem 1.75rem; } .footer__col h2 { margin-bottom: .9rem; font-size: .9375rem; font-weight: 600; letter-spacing: 0; } .footer__col li a { display: inline-block; padding: .22rem 0; color: var(--auf-dunkel-leise); font-size: .9375rem; line-height: 1.35; transition: color .2s; } .footer__col li a:hover, .footer__col h2 a:hover { color: #fff; } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); color: var(--auf-dunkel-leise); font-size: .875rem; } .footer__bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; } .footer__bottom a:hover { color: #fff; } .footer__word { margin: clamp(1.5rem, 3vw, 3rem) 0 0; padding: .06em 0 .04em; color: #2B2722; font-size: 15.4vw; font-weight: 600; line-height: .82; letter-spacing: -.065em; text-align: center; white-space: nowrap; overflow: hidden; } .footer__word .char { display: inline-block; will-change: transform; } @media (max-width: 1280px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Prototyp-Panel (nur lokal) ---------- */ .proto { position: fixed; left: 12px; bottom: 12px; z-index: 260; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; max-width: calc(100vw - 24px); padding: .45rem; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-lg); font-size: .8125rem; } .proto__label { padding: 0 .45rem; font-weight: 700; } .proto__group { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; background: var(--bg); } .proto button { display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .65rem; border-radius: 10px; font-weight: 500; } .proto button[aria-pressed="true"] { background: var(--ink); color: #fff; } .sw { width: 11px; height: 11px; border-radius: 50%; } .sw--koralle { background: #FF5A36; } .sw--amber { background: #F5A524; } .sw--blau { background: #2F5BFF; } @media (max-width: 640px) { .proto__label { display: none; } .proto button { padding: 0 .45rem; } } /* ---------- Reduzierte Bewegung ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- Unterseiten: Kopfbereich ---------- */ .phero { position: relative; isolation: isolate; padding-top: clamp(7.5rem, 11vw, 10rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); overflow: clip; } .phero__inner { display: grid; justify-items: start; gap: 1.35rem; } /* Kontakt: Schild und großer Satz bilden zusammen die H1, der Abstand bleibt wie zwischen getrennten Zeilen */ .phero__h1 { display: grid; justify-items: start; gap: 1.35rem; font-weight: inherit; letter-spacing: normal; line-height: inherit; text-wrap: wrap; } .phero .display:not(.phero__title) { max-width: 14ch; } .phero__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; } /* ---------- Unterseiten: Breadcrumb, Fallstudie, Text, Karten ---------- */ .crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--muted); font-size: .875rem; } .crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--tone-klein); } .crumbs a:hover { color: var(--ink); } .phero__title { max-width: min(100%, 24ch); font-size: clamp(2.1rem, 4vw, 4.1rem); line-height: 1.02; letter-spacing: -.04em; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 18 6 6; } .phero .lead { max-width: 54ch; } /* Fallstudie mit Partner: Stichwort und „In Zusammenarbeit mit …“ stehen in einer Zeile, auf dem Handy untereinander */ .phero__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.25rem; } .partner { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.3; } .partner__name { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 600; } .partner__logo { flex: none; width: 28px; height: 28px; } a.partner__name:hover span { text-decoration: underline; text-underline-offset: 3px; } /* Zusammengesetzte Wörter in der H1 erst auf schmalen Bildschirmen am Bindestrich trennen */ @media (min-width: 700px) { .nowrap-breit { white-space: nowrap; } } .phero + .section { padding-top: clamp(1rem, 2vw, 2.5rem); } .ref-schau { padding-bottom: clamp(3rem, 6vw, 5rem); } .ref-schau .container { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .ref-schau__media { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--frame); } .ref-schau__media img, .ref-schau__media picture { display: block; width: 100%; height: 100%; object-fit: cover; } .ref-schau__logo { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: min(62%, 420px); aspect-ratio: 16 / 9; padding: 7%; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); } .ref-schau__media .ref-schau__logo img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; } .facts { display: grid; gap: .5rem; min-width: 0; margin: 0; } .facts .chip { height: auto; min-height: 30px; padding-block: .4rem; line-height: 1.25; white-space: normal; } .facts__item { display: grid; gap: .35rem; padding: 1.1rem 1.3rem; border-radius: var(--r-md); background: var(--surface); } .facts dt { color: var(--muted); font-size: .8125rem; font-weight: 600; } .facts dd { margin: 0; font-weight: 500; } .facts .chips { margin-top: .2rem; } @media (max-width: 1000px) { .ref-schau .container { grid-template-columns: 1fr; } } .prose-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; } .prose { display: grid; gap: 1.1rem; max-width: 64ch; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; } .prose strong { color: var(--ink); font-weight: 600; } .prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .prose-grid { grid-template-columns: 1fr; } } .cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } .cards > * { grid-column: span 4; } /* Volle Reihen je Anzahl: 4 und 8 laufen vierspaltig, 5 als 3 plus 2, 7 als 3 plus 4 */ .cards--n2 > * { grid-column: span 6; } .cards--n4 > *, .cards--n8 > * { grid-column: span 3; } .cards--n5 > :nth-child(n+4) { grid-column: span 6; } .cards--n7 > :nth-child(n+4) { grid-column: span 3; } .card { display: grid; align-content: start; gap: .6rem; padding: clamp(1.3rem, 1.9vw, 1.8rem); border-radius: var(--r-xl); background: var(--surface); } .card__title { font-size: clamp(1.2rem, 1.45vw, 1.4rem); line-height: 1.2; letter-spacing: -.025em; } .card p { color: var(--muted); font-size: 1rem; } @media (max-width: 1000px) { .cards > *, .cards--n2 > *, .cards--n4 > *, .cards--n5 > :nth-child(n), .cards--n7 > :nth-child(n), .cards--n8 > * { grid-column: span 6; } .cards > :last-child:nth-child(odd) { grid-column: span 12; } } /* Handy: eine Spalte. Die Spannweiten der vollen Reihen würden sonst stille Zusatzspalten erzeugen. */ @media (max-width: 620px) { .cards, .steps, .leistungsgrid, .alt-projekte { grid-template-columns: minmax(0, 1fr); } .cards > *, .steps > *, .leistungsgrid > *, .alt-projekte > * { grid-column: 1 / -1 !important; } } .next__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s; } .next__link:hover { background: var(--white); } .next__text { display: grid; gap: .6rem; } .next__label { color: var(--muted); font-size: .875rem; font-weight: 600; } .next__name { font-size: clamp(1.7rem, 3.1vw, 3.1rem); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; } .next__kurz { max-width: 46ch; color: var(--muted); } .next__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--frame); isolation: isolate; } /* Nur das Projektbild füllt die Fläche, das Logo darüber behält seine Form wie auf den Karten */ .next__media > picture, .next__media > picture img { display: block; width: 100%; height: 100%; object-fit: cover; } .next__link:hover .ref__veil { opacity: 0; } .next__link:hover .ref__logo { opacity: 0; transform: scale(.92); } @media (max-width: 800px) { .next__link { grid-template-columns: 1fr; } } /* ---------- Bereichs- und Leistungsseiten ---------- */ .phero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .phero__visual { position: relative; aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; } .phero__visual--foto { margin: 0; aspect-ratio: 4 / 5; background: var(--frame); } .phero__visual--foto img, .phero__visual--foto picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; } @media (max-width: 1000px) { .phero__grid { grid-template-columns: 1fr; } .phero__visual { aspect-ratio: 16 / 9; } } /* Einstieg mit Videos: zwei Reels versetzt nebeneinander, ein 3D-Film allein */ .phero__grid.phero__grid--reels { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .phero__visual.phero__visual--reels { aspect-ratio: auto; overflow: visible; border-radius: 0; } .phero__visual--reels .reels { margin: 0; } .phero__visual--reels .reels--n2 .reel:nth-child(2) { margin-top: 16%; } .phero__visual--reels .reels--n1 { max-width: 480px; margin-inline: auto; } .phero__visual--reels .reel__zeile { margin-top: .7rem; } .phero__visual--reels .reel__titel { font-size: 1rem; } @media (max-width: 1000px) { .phero__grid.phero__grid--reels { grid-template-columns: minmax(0, 1fr); } .phero__visual--reels .reels--n2 { max-width: 560px; } } .steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } .steps > * { grid-column: span 3; } .steps--n3 > * { grid-column: span 4; } .steps--n5 > :nth-child(-n+3) { grid-column: span 4; } .steps--n5 > :nth-child(n+4) { grid-column: span 6; } @media (max-width: 1000px) { .steps > *, .steps--n3 > *, .steps--n5 > :nth-child(n) { grid-column: span 6; } .steps > :last-child:nth-child(odd) { grid-column: span 12; } } .step { display: grid; align-content: start; gap: .6rem; padding: clamp(1.3rem, 1.9vw, 1.8rem); border-radius: var(--r-xl); background: var(--surface); } .step__num { color: var(--tone); font-size: clamp(2rem, 2.7vw, 2.6rem); font-weight: 600; line-height: .95; letter-spacing: -.05em; transition: color .5s var(--ease); } .step__title { font-size: clamp(1.2rem, 1.45vw, 1.4rem); line-height: 1.2; letter-spacing: -.025em; } .step p { color: var(--muted); font-size: 1rem; } .step .chips { margin-top: .4rem; } .step .chip { min-height: 30px; padding: 0 .75rem; font-size: .8125rem; } /* Fortschritt beim Scrollen: erreichte Schritte werden hell, die Ziffer dunkel */ .step { transition: background-color .5s var(--ease); } .steps.is-live .step.is-on { background: var(--white); } .steps.is-live .step.is-on .step__num { color: var(--ink); } .leistungsgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } .leistungsgrid > * { grid-column: span 4; } .leistungsgrid--n2 > *, .leistungsgrid--n4 > * { grid-column: span 6; } .leistungsgrid--n5 > :nth-child(n+4) { grid-column: span 6; } .leistungsgrid--n7 > :nth-child(n+4) { grid-column: span 3; } @media (max-width: 1000px) { .leistungsgrid > *, .leistungsgrid--n4 > *, .leistungsgrid--n5 > :nth-child(n), .leistungsgrid--n7 > :nth-child(n) { grid-column: span 6; } .leistungsgrid > :last-child:nth-child(odd) { grid-column: span 12; } } .leistungskarte { position: relative; display: grid; align-content: start; gap: .45rem; padding: clamp(1.3rem, 1.9vw, 1.8rem); padding-right: 4.5rem; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s; } .leistungskarte:hover { background: var(--white); } .leistungskarte__name { font-size: clamp(1.25rem, 1.55vw, 1.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; } .leistungskarte__text { color: var(--muted); font-size: 1rem; } .leistungskarte__pfeil { position: absolute; right: 1.5rem; top: 1.6rem; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bg); transition: background-color .3s, color .3s, transform .5s var(--ease); } .leistungskarte__pfeil .i { width: 18px; height: 18px; } .leistungskarte:hover .leistungskarte__pfeil { background: var(--accent); color: var(--on-accent); transform: translateX(4px); } .tech__text { max-width: 62ch; margin-top: 1rem; color: var(--muted); } .tech__row li:has(img) { padding-left: 1rem; } /* Drucken: alle Einblendungen zurücksetzen, Kopf, Vorhang, Laufbänder und Bedienelemente weglassen */ @media print { .skip, .hdr, .pt, .logos, .wand, .mnav, .mega, .support, .cursor, .bewegung, .footer__bewegung, .medien-knoepfe, .sound-toggle, .footer__word, [data-proto] { display: none !important; } main *, .cta * { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; } body { background: #fff; color: #000; } #smooth-wrapper, #smooth-content { position: static !important; overflow: visible !important; height: auto !important; transform: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }