/* ETSpilot – Produktseite www.etspilot.de * * Gestaltung angelehnt an "ProLand": viel Weissraum, breite ruhige * Abschnitte im Wechsel weiss / hellblaugrau, zentrierte Ueberschriften, * Poppins, Knoepfe als volle Pillen. * * Hell und Dunkel: das Erscheinungsbild folgt der Systemeinstellung. Ein * Inline-Skript im setzt data-theme vor dem ersten Zeichnen, damit * es nicht kurz aufblitzt. Der Schalter im Kopf ueberschreibt das. */ :root { --bg: #ffffff; --tint: #f8fbfd; --surface: #ffffff; --surface-2: #f8fbfd; --surface-3: #eef3f7; --border: #e6edf3; --border-strong: #d2dde6; --text: #374048; --text-muted: #8a9095; --text-faint: #b4bcc3; --primary: #6ab63f; --primary-strong: #5aa233; --primary-press: #4d8c2c; --on-primary: #ffffff; --primary-soft: #edf7e6; --primary-soft-bd:#d3ebc2; --ink-on-tint: #3f7a22; --ok: #5aa233; --ok-soft: #edf7e6; --info: #0084ff; --info-soft: #e6f2ff; /* Zweitfarben. Sie tragen keine Bedeutung, sie bringen nur Farbe in Symbolflaechen, Marken und die Farbschleier im Hintergrund. */ --accent-teal: #12968f; --accent-teal-soft: #e2f5f3; --accent-violet: #6250e0; --accent-violet-soft:#eeebfd; --glow-green: rgba(106, 182, 63, .16); --glow-teal: rgba(18, 150, 143, .10); --glow-violet: rgba(98, 80, 224, .10); --shadow-sm: 0 2px 6px rgba(55, 64, 72, .05); --shadow-md: 0 10px 30px rgba(55, 64, 72, .07); --shadow-lg: 0 20px 60px rgba(55, 64, 72, .10); --footer: #1a1a1a; --radius-btn: 999px; --radius-card: 16px; --radius-sm: 10px; --maxw: 1180px; --section-y: clamp(72px, 8.5vw, 112px); } /* Dunkel bewusst neutralgrau (Vorbild Gira): jede Faerbung der grossen Flaechen wirkt sonst wie ein Schleier ueber der ganzen Seite. Farbe kommt nur aus den Akzenten und den weichen Verlaeufen im Hintergrund. */ [data-theme="dark"] { --bg: #121212; --tint: #171717; --surface: #1c1c1c; --surface-2: #171717; --surface-3: #262626; --border: #2c2c2c; --border-strong: #3d3d3d; --text: #f0f0f0; --text-muted: #a0a0a0; --text-faint: #6e6e6e; --primary: #7ec457; --primary-strong: #8fd169; --primary-press: #6fb549; --on-primary: #12200a; --primary-soft: #1e2618; --primary-soft-bd:#38472e; --ink-on-tint: #a9db8c; --ok: #7ec457; --ok-soft: #1e2618; --info: #4ea3ff; --info-soft: #16202b; --accent-teal: #45cfc4; --accent-teal-soft: #142625; --accent-violet: #a08cff; --accent-violet-soft:#1f1c2e; --glow-green: rgba(126, 196, 87, .13); --glow-teal: rgba(69, 207, 196, .10); --glow-violet: rgba(160, 140, 255, .12); --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45); --shadow-md: 0 10px 30px rgba(0, 0, 0, .50); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .60); --footer: #0d0d0d; } /* ── Grundlagen ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Poppins, "Segoe UI", system-ui, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; } :where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; } section { padding-block: var(--section-y); } section.tint { background: var(--tint); } /* ── Farbschleier ──────────────────────────────────────── * * Grosse, sehr weiche Farbfelder hinter einem Abschnitt. Das Pseudoelement * liegt dank isolation ueber der Flaechenfarbe des Abschnitts und unter * dessen Inhalt. Drei Varianten, damit sich die Seite beim Scrollen * langsam durch die Farben bewegt. */ .glow { position: relative; isolation: isolate; overflow: hidden; } .glow::before { content: ""; position: absolute; inset: -25% -8%; z-index: -1; pointer-events: none; background: radial-gradient(34% 46% at 6% 8%, var(--glow-green), transparent 70%), radial-gradient(38% 52% at 96% 26%, var(--glow-violet), transparent 72%); } .glow.glow-b::before { background: radial-gradient(36% 50% at 92% 4%, var(--glow-teal), transparent 70%), radial-gradient(34% 46% at 4% 40%, var(--glow-green), transparent 72%); } .glow.glow-c::before { background: radial-gradient(46% 58% at 50% 110%, var(--glow-violet), transparent 68%), radial-gradient(34% 44% at 12% -8%, var(--glow-teal), transparent 70%); } /* Feiner Farbstreifen ganz oben, das einzige gesaettigte Element der Seite. */ body::before { content: ""; position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; pointer-events: none; background: linear-gradient(90deg, var(--accent-teal), var(--primary) 45%, var(--accent-violet)); } /* ── Typografie ──────────────────────────────────────── */ h1, h2, h3, h4 { margin: 0; text-wrap: balance; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .h-hero { font-size: clamp(36px, 5.6vw, 62px); font-weight: 600; letter-spacing: -1.6px; line-height: 1.1; } .h-section { font-size: clamp(30px, 4.2vw, 46px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.18; } .h-card { font-size: 21px; font-weight: 600; letter-spacing: -.3px; line-height: 1.35; } .lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; color: var(--text-muted); } .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--primary-strong); margin: 0 0 14px; } .muted { color: var(--text-muted); } .small { font-size: 14.5px; line-height: 1.65; } /* ── Knoepfe ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 34px; border-radius: var(--radius-btn); border: 2px solid transparent; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; } .btn svg { width: 18px; height: 18px; flex: none; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent); } .btn-primary:hover { background: var(--primary-press); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--primary); color: var(--primary-strong); } .btn-ghost { background: transparent; color: var(--text-muted); padding: 10px 16px; border-radius: var(--radius-btn); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); transform: none; } .btn-sm { padding: 10px 22px; font-size: 14.5px; } .btn-sm svg { width: 16px; height: 16px; } /* ── Kopfzeile ───────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; } .site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .site-header .wrap { height: 78px; display: flex; align-items: center; gap: 22px; transition: height .2s; } .site-header.scrolled .wrap { height: 66px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.4px; text-decoration: none; flex: none; } .brand .mark { width: 28px; height: 28px; } .nav-main { display: flex; align-items: center; gap: 4px; margin-inline: auto; } .nav-main a { padding: 8px 13px; border-radius: var(--radius-btn); font-size: 15px; font-weight: 400; white-space: nowrap; color: var(--text-muted); text-decoration: none; transition: color .15s, background-color .15s; } .nav-main a:hover { color: var(--text); background: var(--surface-3); } .header-actions { display: flex; align-items: center; gap: 8px; } .nav-toggle { display: none; } .lang { position: relative; flex: none; } .lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--radius-btn); font-size: 14.5px; color: var(--text-muted); cursor: pointer; } .lang summary::-webkit-details-marker { display: none; } .lang summary:hover { background: var(--surface-3); color: var(--text); } .lang[open] summary { background: var(--surface-3); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); display: grid; gap: 2px; z-index: 60; } .lang-menu a { padding: 9px 12px; border-radius: 9px; font-size: 15px; text-decoration: none; color: var(--text-muted); } .lang-menu a:hover { background: var(--surface-3); color: var(--text); } .lang-menu a[aria-current="true"] { color: var(--primary-strong); font-weight: 600; } /* ── Abschnittskopf ──────────────────────────────────── */ .section-head { max-width: 760px; margin: 0 auto clamp(44px, 5vw, 68px); text-align: center; } .section-head .lead { margin-top: 16px; } .section-head.left { margin-inline: 0; text-align: left; } /* Kurze Verlaufsstriche links und rechts der Ueberzeile. */ .section-head .eyebrow { display: inline-flex; align-items: center; gap: 14px; } .section-head .eyebrow::before, .section-head .eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-teal)); } .section-head .eyebrow::after { background: linear-gradient(90deg, var(--accent-violet), transparent); } /* ── Hero ────────────────────────────────────────────── */ .hero { padding-block: clamp(56px, 7vw, 96px) clamp(64px, 7.5vw, 100px); background: var(--bg); text-align: center; } /* Im Hero steht die Ueberschrift mittig, deshalb liegt das gruene Feld ueber der Mitte und die Zweitfarben liegen aussen. */ .hero.glow::before { background: radial-gradient(46% 64% at 50% -14%, var(--glow-green), transparent 66%), radial-gradient(32% 44% at 92% 8%, var(--glow-violet), transparent 70%), radial-gradient(30% 42% at 6% 16%, var(--glow-teal), transparent 70%); } .hero-text { max-width: 1000px; margin-inline: auto; }.hero .h-hero { max-width: 20ch; margin-inline: auto; } .hero .lead { max-width: 78ch; margin: 24px auto 0; font-size: clamp(17px, 1.5vw, 21px); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; } .trust-row { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center; list-style: none; margin: 32px auto 0; padding: 0; font-size: 15px; color: var(--text-muted); } .trust-row li { display: flex; align-items: center; gap: 9px; } .trust-row svg { width: 18px; height: 18px; color: var(--primary-strong); flex: none; } /* Breiter Videoplatz unter dem Hero. */ .stage { max-width: 1000px; margin: clamp(44px, 5vw, 68px) auto 0; } /* ── ETS-Nachbau ─────────────────────────────────────── */ .mock { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; } .mock-bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 500; color: var(--text-muted); } .mock-dots { display: flex; gap: 6px; } .mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); } .mock-body { padding: 18px; display: grid; gap: 14px; } .bubble { padding: 14px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.6; max-width: 92%; } .bubble-user { justify-self: end; background: var(--primary-soft); border: 1px solid var(--primary-soft-bd); color: var(--ink-on-tint); } .bubble-bot { justify-self: start; background: var(--surface-2); border: 1px solid var(--border); } .bubble p { margin: 0; } .action-summary { margin-top: 12px !important; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ok); } .actionlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--text-muted); } .actionlist li { display: flex; gap: 9px; align-items: flex-start; } .actionlist svg { width: 16px; height: 16px; color: var(--ok); margin-top: 3px; flex: none; } .actionlist .ga { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--text); background: var(--surface-3); border-radius: 5px; padding: 1px 6px; } /* ── Raster und Karten ───────────────────────────────── */ .grid { display: grid; gap: 24px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px 30px; } .card h3 { margin-bottom: 10px; } .card-hover { transition: transform .22s, box-shadow .22s, border-color .22s; } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-soft-bd); } .icon-box { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-soft); margin-bottom: 20px; } .icon-box svg { width: 26px; height: 26px; color: var(--ink-on-tint); } /* Die Symbolflaechen wechseln reihum durch die drei Akzentfarben, sonst wirkt ein Raster aus neun Karten wie eine einzige gruene Wand. */ .grid > *:nth-child(3n+2) .icon-box { background: var(--accent-teal-soft); } .grid > *:nth-child(3n+2) .icon-box svg { color: var(--accent-teal); } .grid > *:nth-child(3n+3) .icon-box { background: var(--accent-violet-soft); } .grid > *:nth-child(3n+3) .icon-box svg { color: var(--accent-violet); } .pain { font-size: 15px; color: var(--text-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-faint) 60%, transparent); margin-bottom: 16px; } /* ── Was ist ETSpilot ────────────────────────────────── */ .explain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); align-items: start; } .explain p { font-size: 17.5px; line-height: 1.8; color: var(--text-muted); } .explain b { color: var(--text); font-weight: 600; } .plainlist { list-style: none; margin: clamp(44px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; } .plainlist li { padding: 28px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .plainlist strong { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; } .plainlist span { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); } /* ── Ablauf ──────────────────────────────────────────── */ .steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); text-align: center; } .step { position: relative; } .step-num { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary-soft-bd); color: var(--primary-strong); font-size: 24px; font-weight: 600; } .step.accent .step-num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 35%, transparent); } /* Pfeile zwischen den Schritten, wie in der Vorlage. */ .step:not(:last-child)::after { content: ""; position: absolute; top: 26px; right: calc(-1 * clamp(28px, 4vw, 56px) / 2 - 5px); width: 11px; height: 11px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); } /* ── Zweispalter ─────────────────────────────────────── */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .phone { width: 274px; margin-inline: auto; background: var(--surface); border: 9px solid var(--footer); border-radius: 34px; box-shadow: var(--shadow-lg); overflow: hidden; } .phone-top { height: 24px; background: var(--footer); display: grid; place-items: center; } .phone-top i { width: 52px; height: 5px; border-radius: 3px; background: #454f57; } .phone-body { padding: 14px; display: grid; gap: 9px; } .telegram { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; } .telegram .t-ga { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--text-muted); } .telegram .t-val { margin-left: auto; font-weight: 600; } .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; } /* ── Vertrauen ───────────────────────────────────────── */ .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .trust-grid .card { padding: 28px 24px; } .trust-grid h3 { font-size: 18px; } .trust-grid p { font-size: 15px; } /* ── Platzhalter fuer Bilder und Video ───────────────── */ .media { display: grid; place-items: center; align-content: center; text-align: center; padding: 32px; border: 2px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--surface-2); color: var(--text-muted); font-size: 14.5px; } .media strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 6px; } .media img, .media video { border-radius: var(--radius-card); } /* Feste Seitenverhaeltnisse, damit die Platzhalter schon jetzt die Hoehe haben, die das spaetere Bild bekommt. */ .media.ratio-video { aspect-ratio: 16 / 9; padding: 24px; } .media.ratio-shot { aspect-ratio: 16 / 10; padding: 24px; } .media.ratio-tall { aspect-ratio: 4 / 5; padding: 24px; } .media .playmark { width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 40%, transparent); } .media .playmark svg { width: 26px; height: 26px; margin-left: 4px; } /* ── Wechselseitige Bild-Text-Abschnitte ─────────────── */ .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .feature + .feature { margin-top: clamp(56px, 7vw, 96px); } .feature.reverse .feature-text { order: 2; } .feature .lead { margin-top: 14px; } .ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; color: var(--text-muted); font-size: 15.5px; } .ticks li { display: flex; gap: 11px; align-items: flex-start; } .ticks svg { width: 19px; height: 19px; color: var(--primary-strong); flex: none; margin-top: 3px; } .ticks b { color: var(--text); font-weight: 600; } /* ── Beispiele: Eingabe und Ergebnis ─────────────────── */ .examples { display: grid; gap: 24px; } .example { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .example-in { padding: 30px 30px 34px; background: var(--surface-2); border-right: 1px solid var(--border); } .example-out { padding: 30px; } .example-label { font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .example-in .example-label { color: var(--primary-strong); } .example-prompt { font-size: 18px; line-height: 1.6; color: var(--text); } .example-note { margin-top: 16px; font-size: 14.5px; color: var(--text-muted); } /* ── Modelle ─────────────────────────────────────────── */ .models { grid-template-columns: repeat(3, minmax(0, 1fr)); } .model { position: relative; } .model.recommended { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); } .badge { display: inline-block; padding: 5px 14px; margin-bottom: 14px; border-radius: var(--radius-btn); background: var(--primary); color: var(--on-primary); font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; } .badge.quiet { background: var(--surface-3); color: var(--text-muted); } .model-name { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 15px; color: var(--text-muted); margin-top: 12px; } /* ── Abschluss ───────────────────────────────────────── */ .cta { text-align: center; background: var(--bg); } .cta .lead { margin-inline: auto; max-width: 60ch; } .cta .h-section { margin-bottom: 16px; } .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; } /* ── Fusszeile ───────────────────────────────────────── */ .site-footer { background: var(--footer); color: #d3d8dd; padding-block: clamp(52px, 6vw, 76px) 28px; } .site-footer a { color: #a6a6a6; text-decoration: none; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 40px; } .site-footer h4 { font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #7d878f; margin-bottom: 16px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; } .site-footer .small { color: #8d959c; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 26px; border-top: 1px solid #2c343a; font-size: 13.5px; color: #7d878f; } /* ── Einblenden beim Scrollen ────────────────────────── */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .btn:hover, .card-hover:hover { transform: none; } } /* ── Rechtstexte ─────────────────────────────────────── */ .legal { padding-block: 64px 88px; position: relative; isolation: isolate; overflow: hidden; } /* Auch die Rechtsseiten bekommen oben etwas Farbe, sonst stehen sie als graue Flaeche neben der Startseite. */ .legal::before { content: ""; position: absolute; inset: -160px 0 auto; height: 620px; z-index: -1; pointer-events: none; background: radial-gradient(36% 60% at 10% 26%, var(--glow-green), transparent 70%), radial-gradient(38% 62% at 92% 14%, var(--glow-violet), transparent 72%); } .legal .wrap { max-width: 800px; } .legal h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 600; letter-spacing: -1.2px; margin-bottom: 10px; } .legal h2 { font-size: 22px; font-weight: 600; margin: 42px 0 12px; letter-spacing: -.4px; } .legal h3 { font-size: 17.5px; font-weight: 600; margin: 26px 0 8px; } .legal p, .legal li { font-weight: 400; } .legal ul { padding-left: 20px; } .legal li { margin: 6px 0; } .legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; } .legal th, .legal td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; } .legal th { background: var(--surface-3); font-weight: 600; } .note { padding: 20px 22px; border-radius: var(--radius-card); background: var(--primary-soft); border: 1px solid var(--primary-soft-bd); color: var(--ink-on-tint); margin: 20px 0; } .note b { font-weight: 600; } /* ── Ablaufkette (Anfrage bis Ausfuehrung) ───────────── */ .flow { margin-top: clamp(36px, 4vw, 52px); } .flow-item { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 26px; position: relative; padding-bottom: 34px; } .flow-item:last-child { padding-bottom: 0; } /* Verbindungslinie zwischen den Punkten. */ .flow-item:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 58px; bottom: 10px; width: 2px; background: linear-gradient(var(--border-strong), var(--border)); } .flow-dot { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--primary-soft-bd); color: var(--primary-strong); font-weight: 600; font-size: 17px; position: relative; z-index: 1; } .flow-item.machine .flow-dot { background: linear-gradient(140deg, var(--primary), var(--accent-teal)); border-color: transparent; color: var(--on-primary); } .flow-body { padding-top: 8px; } .flow-body h3 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; } .flow-body p { color: var(--text-muted); font-weight: 400; margin-top: 8px; } .flow-where { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; } /* ── Zielgruppen ─────────────────────────────────────── */ .audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .audience .card { display: flex; flex-direction: column; } /* Nur der Fliesstext dehnt sich, damit die Schaltflaechen auf einer Linie sitzen. */ .audience .card p.muted { flex: 1; } .aud-tag { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary-strong); margin-bottom: 10px; } .aud-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .audience > *:nth-child(2) .aud-tag { color: var(--accent-teal); } .audience > *:nth-child(3) .aud-tag { color: var(--accent-violet); } /* Die Karte bekommt oben die Farbe ihrer Marke. */ .audience .card { border-top: 3px solid var(--primary); } .audience > *:nth-child(2).card { border-top-color: var(--accent-teal); } .audience > *:nth-child(3).card { border-top-color: var(--accent-violet); } /* ── Haeufige Fragen ─────────────────────────────────── */ .faq { max-width: 860px; margin-inline: auto; } .faq details { border-bottom: 1px solid var(--border); padding: 4px 0; } .faq details[open] { padding-bottom: 8px; } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 500; color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; margin-left: auto; width: 11px; height: 11px; flex: none; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; } .faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq summary:hover { color: var(--primary-strong); } .faq .answer { color: var(--text-muted); font-weight: 400; padding: 0 34px 18px 0; } .faq .answer p + p { margin-top: 12px; } /* ── Schmale Ansichten ───────────────────────────────── */ @media (max-width: 1280px) { .nav-main { display: none; } .nav-toggle { display: inline-flex; } .btn-desktop { display: none; } } @media (max-width: 1040px) { .grid-3, .trust-grid, .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plainlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .audience { grid-template-columns: 1fr; } } @media (max-width: 780px) { body { font-size: 16px; } .split, .feature { grid-template-columns: 1fr; } .feature.reverse .feature-text { order: 0; } .example { grid-template-columns: 1fr; } .example-in { border-right: 0; border-bottom: 1px solid var(--border); } .steps { grid-template-columns: 1fr; gap: 40px; } .step:not(:last-child)::after { display: none; } .explain { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 620px) { .grid-3, .trust-grid, .plainlist, .models { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .hero-actions .btn, .cta-actions .btn { width: 100%; } .card { padding: 26px 22px; } .media.ratio-video { aspect-ratio: 4 / 3; } .flow-item { grid-template-columns: 42px minmax(0, 1fr); gap: 0 18px; } .flow-dot { width: 42px; height: 42px; font-size: 15px; } .flow-item:not(:last-child)::before { left: 20px; top: 46px; } .flow-body { padding-top: 4px; } } /* Aufgeklapptes Menue in schmalen Ansichten. */ .nav-main.open { display: grid; position: fixed; inset: 78px 0 auto; margin: 0; padding: 14px 24px 26px; gap: 4px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); z-index: 45; } .nav-main.open a { padding: 13px 14px; font-size: 16.5px; }