/* Lemmerty LLC — Onepager 1 Schrift · 2 Tokens · 3 Grundlagen · 4 Kopf · 5 Hero · 6 Karten 7 Zwei Seiten · 8 Schritte · 9 Kontakt · 10 Fuß · 11 Rechtsseiten 12 Desktop Mobile first. Hell/Dunkel über Tokens: Standard folgt dem Gerät, data-theme auf überschreibt die Wahl. */ /* ---------- 1 Schrift (selbst gehostet, keine Anfrage an Google) ---------- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/PlusJakartaSans-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/PlusJakartaSans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- 2 Tokens ---------- */ :root { --bg: #ffffff; --surface: #ffffff; --hero: #dff3e8; --section: #f5f8f7; --deko: #b9e4cd; --line: #cdd8dc; --ink: #22303a; --muted: #435560; --soft: #5a6b75; --green: #177a55; /* Flächen mit weißer Schrift */ --green-text: #177a55; /* Grün als Schrift */ --green-line: #177a55; --green-fill: #177a55; --pill-bg: #22303a; --pill-ink: #ffffff; --footer-bg: #22303a; --footer-ink: #c9d3d8; --art-line: #a9c9ba; --org-bg: #dff3e8; --org-dot: #ffffff; --org-dash: #22303a; --shadow: 0 18px 40px rgba(34, 48, 58, 0.09), 0 2px 6px rgba(34, 48, 58, 0.05); --btn-shadow: 0 10px 24px rgba(23, 122, 85, 0.28); --glass: rgba(255, 255, 255, 0.4); --glass-line: rgba(255, 255, 255, 0.55); --show-sun: block; --show-moon: none; color-scheme: light; } :root[data-theme="dark"] { --bg: #111a1f; --surface: #1b262c; --hero: #173a30; --section: #16211f; --deko: #24493e; --line: #3a4a52; --ink: #e6eeea; --muted: #b3c2c9; --soft: #a3b3ba; --green-text: #6fd3a6; --green-line: #5fc79a; --green-fill: #2a9d70; --pill-bg: #e6eeea; --pill-ink: #111a1f; --footer-bg: #0b1115; --footer-ink: #a3b3ba; --art-line: #4f7568; --org-bg: #173a30; --org-dot: #e6eeea; --org-dash: #e6eeea; --shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --glass: rgba(27, 38, 44, 0.42); --glass-line: rgba(230, 238, 234, 0.1); --show-sun: none; --show-moon: block; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #111a1f; --surface: #1b262c; --hero: #173a30; --section: #16211f; --deko: #24493e; --line: #3a4a52; --ink: #e6eeea; --muted: #b3c2c9; --soft: #a3b3ba; --green-text: #6fd3a6; --green-line: #5fc79a; --green-fill: #2a9d70; --pill-bg: #e6eeea; --pill-ink: #111a1f; --footer-bg: #0b1115; --footer-ink: #a3b3ba; --art-line: #4f7568; --org-bg: #173a30; --org-dot: #e6eeea; --org-dash: #e6eeea; --shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --glass: rgba(27, 38, 44, 0.42); --glass-line: rgba(230, 238, 234, 0.1); --show-sun: none; --show-moon: block; color-scheme: dark; } } /* ---------- 3 Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p { margin: 0; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } img, svg { display: block; } button, input, textarea { font: inherit; color: inherit; } a { color: var(--green-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--green-line); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 20px; } .skip { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; } .skip:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 30px; border: 0; border-radius: 999px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } .btn:hover { text-decoration: none; filter: brightness(1.06); transform: translateY(-1px); } .btn--primary { background: var(--green); color: #fff; box-shadow: var(--btn-shadow); } .btn--secondary { background: var(--surface); color: var(--ink); } .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; } /* ---------- 4 Kopf ---------- */ :root { --topbar-h: 72px; } /* Die Kopfzeile liegt fest über der Seite und hat keinen eigenen Hintergrund. Der Hero (bzw. .kopfband auf Unterseiten) reicht bis ganz nach oben, so blitzt beim Scrollen nichts Weißes durch. */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none; } .topbar .logo, .topbar .head__right, .topbar .menu { pointer-events: auto; } .kopfband { height: var(--topbar-h); background: var(--hero); } .head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; transition: padding 0.3s ease; } .topbar.is-scrolled .head { padding-block: 6px; } /* Beim Scrollen werden Logo und rechte Gruppe zu zwei getrennten Glasinseln */ .logo, .head__right { border: 1px solid transparent; border-radius: 999px; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease; } .topbar.is-scrolled .logo, .topbar.is-scrolled .head__right { background-color: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .logo { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 8px; color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .logo:hover { text-decoration: none; } .logo svg { width: 28px; height: 28px; } .logo__l { fill: var(--ink); } .logo__r { fill: var(--green-fill); } .nav { display: none; } .nav a { color: var(--ink); font-size: 15px; font-weight: 500; } .head__right { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 3px; } .tools { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--deko); border-radius: 999px; background: var(--surface); font-size: 14px; } .tools__kontakt, .tools__kontakt-sep { display: none; } .tools__lang { display: contents; } .tools__sep { width: 1px; height: 20px; background: var(--deko); margin: 0 4px; } .tools button { min-width: 32px; min-height: 30px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: 13px; font-weight: 600; cursor: pointer; } .tools button[aria-pressed="true"] { background: var(--pill-bg); color: var(--pill-ink); } .tools .theme { display: flex; align-items: center; justify-content: center; width: 32px; padding: 0; color: var(--ink); } .theme .icon-sun { display: var(--show-sun); } .theme .icon-moon { display: var(--show-moon); } .menu-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; } .menu-btn .icon-close { display: none; } .menu-btn[aria-expanded="true"] .icon-open { display: none; } .menu-btn[aria-expanded="true"] .icon-close { display: block; } .menu { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; padding: 8px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); } .menu[hidden] { display: none; } .menu a { padding: 12px 14px; border-radius: 10px; color: var(--ink); font-weight: 600; } .menu a:hover { background: var(--hero); text-decoration: none; } /* Pfeil nach oben */ .nach-oben { position: fixed; right: 16px; bottom: 16px; z-index: 19; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; /* dezent: dieselbe Glasoptik wie die Inseln im Kopf */ background: var(--glass); color: var(--soft); border: 1px solid var(--deko); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; } .nach-oben.is-visible { opacity: 0.85; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease; } .nach-oben:hover { text-decoration: none; opacity: 1; color: var(--green-text); transform: translateY(-2px); } .nach-oben:focus-visible { border-radius: 50%; } /* Weicher Theme-Wechsel: Kreis vom Schalter aus (View Transitions), sonst ein kurzes Überblenden der Farben */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Startet schon als Punkt am Schalter, damit das neue Theme nicht für einen Frame vollflächig aufblitzt, bevor die Animation greift */ ::view-transition-new(root) { z-index: 2; clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 0px)); } /* Während des Wechsels keine CSS-Übergänge, sonst blenden einzelne Elemente (Glas-Inseln, Buttons) innerhalb des Kreises noch von der alten Farbe über */ html.ohne-uebergang *, html.ohne-uebergang *::before, html.ohne-uebergang *::after { transition: none !important; } html.theme-wechsel *, html.theme-wechsel *::before, html.theme-wechsel *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease, box-shadow 0.4s ease !important; } @media (prefers-reduced-motion: reduce) { .topbar, .head, .nach-oben, .nach-oben.is-visible { transition: none; } } /* ---------- 5 Hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--hero); padding-top: var(--topbar-h); padding-bottom: 110px; } .hero__dots { display: none; } .hero__grid { display: flex; flex-direction: column; gap: 36px; padding-top: 12px; } .hero__text { display: flex; flex-direction: column; align-items: flex-start; } .badge { background: var(--surface); color: var(--green-text); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; } .hero h1 { margin-top: 18px; font-size: 34px; line-height: 1.15; font-weight: 300; letter-spacing: -0.02em; } .hero h1 b, .kontakt h2 b { font-weight: 700; } .hero__lead { margin-top: 16px; color: var(--muted); max-width: 500px; } .hero__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; align-self: stretch; } .frame { position: relative; height: 270px; } .frame::before { content: ''; position: absolute; left: 0; top: 24px; right: 24px; bottom: 0; border: 2px solid var(--green-line); border-radius: 14px; } .frame__card { position: absolute; left: 24px; top: 0; right: 0; bottom: 24px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); } .frame__card svg { width: 88%; max-width: 460px; height: auto; } .art-line { stroke: var(--art-line); } .art-seam { stroke: var(--green-line); } /* ---------- 6 Karten ---------- */ .cards { position: relative; display: grid; gap: 14px; margin: -70px 0 0; padding: 0; list-style: none; } .card { display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); } @media (hover: hover) { .card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(34, 48, 58, 0.12), 0 3px 8px rgba(34, 48, 58, 0.06); } } .card__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--hero); color: var(--green-text); } .card h3 { font-size: 18px; font-weight: 700; line-height: 1.3; } .card p { margin-top: 4px; font-size: 14px; color: var(--soft); } /* ---------- 7 Zwei Seiten ---------- */ .seiten { padding-block: 70px 10px; } .seiten > h2, .schritte h2 { font-size: 30px; line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; } .seiten > h2 { text-align: center; color: var(--green-text); } .seite { display: flex; flex-direction: column; gap: 28px; margin-top: 40px; } .seite + .seite { margin-top: 64px; } .seite__art { position: relative; display: flex; justify-content: center; order: -1; } .kreis { display: flex; align-items: center; justify-content: center; width: 230px; height: 230px; border-radius: 50%; overflow: hidden; } .kreis svg { width: 65%; height: auto; } .kreis--tech { background: #2b6652; } .kreis--org { background: var(--org-bg); } .org-dot { fill: var(--org-dot); } .org-main { fill: var(--green-fill); } .org-dash { stroke: var(--org-dash); } .schwebe { position: absolute; display: none; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); color: var(--green-text); } .eyebrow { font-size: 13px; font-weight: 600; color: var(--green-text); } .seite h3 { margin-top: 4px; font-size: 26px; line-height: 1.2; font-weight: 400; } .seite p { margin-top: 10px; font-size: 15px; color: var(--soft); } .check { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .check li { display: flex; align-items: center; gap: 10px; } .check li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--green-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.4L13 6.5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; } /* ---------- 8 Schritte ---------- */ .schritte { margin-top: 60px; padding-block: 56px; background: var(--section); } .schritte ol { position: relative; list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .schritte ol::before { content: ''; position: absolute; left: 21px; top: 20px; bottom: 30px; width: 2px; background: var(--deko); } .schritt { position: relative; display: flex; gap: 16px; } .schritt__nr { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--green-text); border: 2px solid var(--green-line); font-weight: 700; } .schritt:first-child .schritt__nr { background: var(--green); border-color: var(--green); color: #fff; } .schritt h3 { font-size: 17px; font-weight: 700; line-height: 1.4; } .schritt p { margin-top: 2px; font-size: 14px; color: var(--soft); } /* ---------- 9 Kontakt ---------- */ .kontakt { padding-block: 56px; } .kontakt__karte { display: grid; overflow: hidden; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); } .kontakt__intro { display: flex; flex-direction: column; gap: 12px; padding: 30px 24px; background: var(--green); color: #fff; } .kontakt h2 { font-size: 28px; line-height: 1.2; font-weight: 300; } .kontakt__intro p { font-size: 15px; opacity: 0.94; } .kontakt__mail { margin-top: 4px; color: #fff; font-weight: 600; } .kontakt__mail:hover { color: #fff; } .form { display: flex; flex-direction: column; gap: 14px; padding: 24px; } .feld { display: flex; flex-direction: column; gap: 5px; } .feld label { font-size: 13px; font-weight: 600; color: var(--soft); } .feld input, .feld textarea { width: 100%; min-height: 48px; padding: 11px 14px; background: transparent; border: 1.5px solid var(--line); border-radius: 10px; } .feld textarea { min-height: 130px; resize: vertical; } .feld input:focus-visible, .feld textarea:focus-visible { outline-offset: 0; border-color: var(--green-line); } .feld [aria-invalid="true"] { border-color: #c2413b; } .hp { position: absolute; left: -9999px; } .form__hinweis { font-size: 12px; color: var(--soft); } .form__status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.45; } .form__status::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: center / 22px no-repeat; } .form__status:empty { display: none; } .form__status[data-state="ok"] { background: var(--hero); color: var(--ink); } .form__status[data-state="ok"]::before { background-color: var(--green-fill); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 2.8 6-6.2' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .form__status[data-state="fehler"] { background: rgba(194, 65, 59, 0.1); } .form__status[data-state="fehler"]::before { background-color: #c2413b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 6.5v5.5' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='15.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E"); } .btn__icon { display: inline-flex; margin-right: 8px; } .btn__icon[hidden] { display: none; } .form__status[data-state="fehler"] { color: #c2413b; } :root[data-theme="dark"] .form__status[data-state="fehler"] { color: #ff8a80; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form__status[data-state="fehler"] { color: #ff8a80; } } .form .btn { width: 100%; } /* Datenschutz als Pop-up */ .popup { width: min(720px, calc(100% - 32px)); max-height: min(85vh, 900px); padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; } .popup[open] { display: flex; flex-direction: column; } .popup::backdrop { background: rgba(17, 26, 31, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .popup__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 12px 24px; border-bottom: 1px solid var(--line); } .popup__kopf h2 { font-size: 22px; font-weight: 600; } .popup__zu { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hero); color: var(--ink); cursor: pointer; } .popup .popup__inhalt { overflow-y: auto; padding: 0 24px 28px; max-width: none; } .popup .popup__inhalt .legal__lead { margin-top: 18px; } .popup .popup__inhalt section { margin-top: 26px; } /* ---------- Bewegung ---------- Nur aktiv, wenn theme.js die Klasse .motion gesetzt hat (also nicht bei „Bewegung reduzieren“). app.js vergibt .is-in beim Hereinscrollen und .fertig, sobald das Einblenden abgeschlossen ist. */ html.motion :is(.hero__text > *, .frame, .card, .seiten > h2, .seite > div, .schritte h2, .schritt, .kontakt__karte):not(.fertig) { transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } html.motion :is(.hero__text > *, .frame, .card, .seiten > h2, .seite > div, .schritte h2, .schritt, .kontakt__karte):not(.is-in) { opacity: 0; transform: translateY(18px); } /* Die Naht in der Kopfgrafik zeichnet sich einmal nach */ html.motion .art-seam { stroke-dasharray: 1; stroke-dashoffset: 1; animation: naht-zeichnen 1.4s 0.5s cubic-bezier(0.45, 0, 0.2, 1) forwards; } html.motion .art-line { opacity: 0; animation: einblenden 0.9s 0.3s ease forwards; } @keyframes naht-zeichnen { to { stroke-dashoffset: 0; } } @keyframes einblenden { to { opacity: 1; } } /* Kleine Symbol-Kreise schweben ganz leicht */ html.motion .schwebe { animation: schweben 6s ease-in-out infinite; } html.motion .schwebe--org { animation-delay: -3s; } @keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Die Linie der Schritte wächst mit */ html.motion .schritte ol::before { transform: scaleY(0); transform-origin: top; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; } html.motion .schritte ol.is-in::before { transform: none; } @media (min-width: 900px) { html.motion .schritte ol::before { transform: scaleX(0); transform-origin: left; } } /* ---------- 10 Fuß ---------- */ .fuss { background: var(--footer-bg); color: var(--footer-ink); font-size: 14px; } .fuss__inner { display: flex; flex-direction: column; gap: 14px; padding-block: 30px; } .fuss__marke { color: #fff; font-size: 19px; font-weight: 700; } .fuss nav { display: flex; gap: 22px; } .fuss a { color: var(--footer-ink); } .fuss a:hover { color: #fff; } /* ---------- 11 Rechtsseiten ---------- */ .legal { max-width: 760px; padding-block: 48px 72px; } .legal h1 { font-size: 34px; line-height: 1.15; font-weight: 300; letter-spacing: -0.02em; } .legal__lead { margin-top: 14px; color: var(--muted); } .legal section { margin-top: 36px; } .legal h2 { font-size: 19px; font-weight: 700; } .legal p, .legal address { margin-top: 8px; color: var(--muted); font-style: normal; } .zurueck { display: inline-block; margin-bottom: 18px; font-weight: 600; } /* ---------- 12 Desktop ---------- */ @media (min-width: 900px) { .wrap { padding-inline: 40px; } html { scroll-padding-top: 96px; } :root { --topbar-h: 88px; } .head { padding-block: 22px; } .topbar.is-scrolled .head { padding-block: 8px; } .head__right { padding-left: 22px; } .nach-oben { right: 32px; bottom: 32px; } .logo { font-size: 21px; gap: 10px; padding-right: 18px; } .logo svg { width: 30px; height: 30px; } .nav { display: flex; gap: 32px; margin-right: 24px; } .menu-btn, .menu { display: none; } .tools__kontakt { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; background: var(--green); color: #fff; border-radius: 999px; font-weight: 600; } .tools__kontakt-sep { display: block; } .tools__kontakt:hover { color: #fff; text-decoration: none; filter: brightness(1.06); } .hero { padding-bottom: 170px; } .hero__dots { display: block; position: absolute; left: -30px; top: calc(var(--topbar-h) + 10px); fill: var(--deko); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; align-items: center; padding-top: 32px; } .badge { font-size: 13px; padding: 7px 16px; } .hero h1 { margin-top: 22px; font-size: 52px; line-height: 1.12; } .hero__lead { margin-top: 22px; font-size: 18px; } .hero__btns { flex-direction: row; gap: 14px; margin-top: 34px; align-self: flex-start; } .frame { height: 400px; } .frame::before { top: 40px; right: 40px; border-radius: 16px; } .frame__card { left: 40px; bottom: 40px; border-radius: 16px; } .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: -110px; } .card { flex-direction: column; align-items: center; text-align: center; padding: 38px 34px; } .card__icon { width: 64px; height: 64px; } .card h3 { margin-top: 4px; font-size: 21px; } .card p { font-size: 15px; margin-top: 10px; } .seiten { padding-block: 120px 40px; } .seiten > h2, .schritte h2 { font-size: 42px; } .seite { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; margin-top: 70px; } .seite + .seite { margin-top: 90px; } .seite__art { order: 0; } .kreis { width: 340px; height: 340px; } .schwebe { display: flex; } .schwebe--tech { left: calc(50% - 170px); bottom: 30px; } .schwebe--org { right: calc(50% - 170px); top: 30px; } .seite h3 { margin-top: 6px; font-size: 34px; } .seite p { margin-top: 14px; } .check { margin-top: 20px; gap: 10px; } .schritte { margin-top: 90px; padding-block: 90px 100px; } .schritte h2 { text-align: center; } .schritte ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 64px; } .schritte ol::before { left: 12%; right: 12%; top: 27px; bottom: auto; width: auto; height: 2px; } .schritt { flex-direction: column; align-items: center; text-align: center; gap: 0; } .schritt__nr { width: 56px; height: 56px; font-size: 18px; } .schritt h3 { margin-top: 18px; font-size: 18px; } .schritt p { margin-top: 6px; } .kontakt { padding-block: 100px 110px; } .kontakt__karte { max-width: 920px; margin-inline: auto; grid-template-columns: 1fr 1fr; } .kontakt__intro { padding: 48px 44px; } .kontakt__mail { margin-top: auto; } .kontakt h2 { font-size: 34px; } .form { padding: 44px; } .fuss__inner { flex-direction: row; justify-content: space-between; align-items: center; padding-block: 40px; } .legal { padding-block: 72px 110px; } .legal h1 { font-size: 48px; } }