.kamano-cookie-hidden{display:none !important} .kamano-cookie{position:fixed;inset:0;z-index:999999;font-family:var(--kai-font,Arial,sans-serif)} .kamano-cookie__backdrop{position:absolute;inset:0;background:rgba(18,30,42,0.72)} .kamano-cookie__panel{position:relative;width:min(640px,calc(100vw - 40px));background:#fff;border-radius:14px;padding:30px;box-shadow:0 18px 60px rgba(18,30,42,0.22);z-index:1} .kamano-cookie:not(.kamano-cookie-hidden){display:flex;align-items:center;justify-content:center} .kamano-cookie__text{margin:0 0 22px;color:#121e2a;font-size:15px;line-height:1.55;text-align:center} .kamano-cookie__heading{margin:0 0 18px;color:#121e2a;font-size:22px;line-height:1.2} .kamano-cookie__btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-radius:6px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer} .kamano-cookie__btn+.kamano-cookie__btn{margin-top:10px} .kamano-cookie__btn--primary{background:#3C91AA;color:#fff} .kamano-cookie__btn--secondary{background:#f0f3f5;color:#23313A} .kamano-cookie__option{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 0;border-top:1px solid #E4EEF2;color:#23313A} .kamano-cookie__option small{display:block;margin-top:4px;color:#5F6F78;font-size:13px;line-height:1.4;font-weight:400 !important} .kamano-cookie__option input{width:22px;height:22px;accent-color:#3C91AA} .kamano-cookie__actions{margin-top:18px} @media(max-width:767px){.kamano-cookie:not(.kamano-cookie-hidden){display:block}.kamano-cookie__panel{position:absolute;left:0;right:0;bottom:0;width:100%;border-radius:18px 18px 0 0;padding:24px 20px 22px}} :root { --hero-h1-size-desktop: 46px; --hero-h1-size-mobile: 38px; --kai-blue: #3C91AA; --kai-ai-blue: #78B4C3; --kai-navy: #121E2A; --kai-bg: #FFFFFF; --kai-bg-soft: #F7FAFB; --kai-gold: #D4B045; --kai-text: #23313A; --kai-text-muted: #5F6F78; --kai-claim-grey: #6A6A6A; --kai-border: #E4EEF2; --kai-gold-bg: #FBF6E9; --kai-gold-text: #9A7210; --kai-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 10px; --shadow-sm: 0 4px 16px rgba(18,30,42,0.05); --shadow-md: 0 8px 30px rgba(18,30,42,0.06); --shadow-lg: 0 16px 48px rgba(18,30,42,0.10); --ease: cubic-bezier(0.16,1,0.3,1); --container-w: 1200px; --section-v: 112px; --section-v-sm: 64px; } /* ─── LOCAL FONTS (@font-face) ────────────────────────────────────── WOFF2-Dateien unter /assets/fonts/ ablegen (siehe -Kommentar) ─────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/Manrope-Regular.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/Manrope-Medium.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/Manrope-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/Manrope-Bold.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/Manrope-ExtraBold.woff2") format("woff2"); } /* ═══════════════════════════════════════════════════════════════════════ KAMANOAI DESIGN SYSTEM – CSS TOKENS (verbindlich, Design System v1.0) Alles aus der Datei, nichts erfunden. ═══════════════════════════════════════════════════════════════════════ */ /* ─── RESET ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--kai-font); font-size: 16px; line-height: 1.65; color: var(--kai-text); background: var(--kai-bg); overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* Textlinks – Kamano Blue, unterstrichen */ p a, li a, address a { color: var(--kai-blue); text-decoration: underline; text-decoration-color: rgba(60,145,170,0.35); text-underline-offset: 3px; transition: color 0.18s, text-decoration-color 0.18s; } p a:hover, li a:hover, address a:hover { color: #327D94; text-decoration-color: #327D94; } ul, ol { list-style: none; } button { font-family: var(--kai-font); cursor: pointer; border: none; background: none; } /* ─── TYPOGRAPHY – nach Design System §08 ───────────────────────────── */ .t-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kai-blue); display: block; } .t-h1 { font-size: var(--hero-h1-size-desktop, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; color: var(--kai-navy); } @media (max-width: 860px) { .t-h1 { font-size: var(--hero-h1-size-mobile, 36px) !important; } } .t-h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; color: var(--kai-navy); } .t-h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.2; color: var(--kai-navy); } .t-body-lg { font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--kai-text); } .t-body { font-size: 16px; line-height: 1.65; color: var(--kai-text); } .t-small { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--kai-text-muted); } /* ─── LAYOUT ─────────────────────────────────────────────────────────── */ .container { max-width: var(--container-w); margin: 0 auto; padding: 0 32px; } .section { padding: var(--section-v) 0; } .section--sm { padding: var(--section-v-sm) 0; } .section--soft { background: var(--kai-bg-soft); } .section--dark { background: var(--kai-navy); color: #fff; } .section--dark .t-h2, .section--dark .t-h3 { color: #fff; } .section-head { margin-bottom: var(--space-16); } .section-head .t-eyebrow { margin-bottom: var(--space-4); } .section-head .t-h2 { margin-top: var(--space-3); } .section-head--center { text-align: center; } /* ─── BUTTONS – nach Design System §09 ─────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--kai-font); font-size: 15px; font-weight: 700; padding: 14px 26px; border-radius: var(--radius-full); transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease); white-space: nowrap; cursor: pointer; border: none; } .btn--primary { background: var(--kai-blue); color: #fff; } .btn--primary:hover { background: #327D94; transform: translateY(-1px); } .btn--secondary { background: var(--kai-bg); color: var(--kai-blue); border: 1px solid #CFE2E8; } .btn--secondary:hover { background: var(--kai-bg-soft); } .btn--dark { background: var(--kai-navy); color: #fff; } .btn--dark:hover { background: #1B2B3A; transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--kai-blue); border: 1px solid var(--kai-blue); padding: 13px 25px; box-sizing: border-box; } .btn--ghost:hover { background: rgba(60,145,170,0.06); color: #327D94; border-color: #327D94; } .btn--outline-white { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.22); } .btn--outline-white:hover { color: #fff; border-color: rgba(255,255,255,0.5); } .btn-sm { padding: 10px 20px; font-size: 14px; } /* Nav Demo-Button: Ghost mit blauem Rand */ .btn--nav-ghost { background: transparent; color: var(--kai-blue); border: 1px solid var(--kai-blue); border-radius: var(--radius-full); padding: 7px 16px; font-size: 13px; font-weight: 700; font-family: var(--kai-font); display: inline-flex; align-items: center; cursor: pointer; transition: background 0.18s, color 0.18s; white-space: nowrap; } .btn--nav-ghost:hover { background: rgba(60,145,170,0.08); } /* Nav Login-Button: dezenter Ghost grau */ .btn--nav-login { background: transparent; color: var(--kai-text-muted); border: 1px solid rgba(0,0,0,0.13); border-radius: var(--radius-full); padding: 7px 14px; font-size: 13px; font-weight: 600; font-family: var(--kai-font); display: inline-flex; align-items: center; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; white-space: nowrap; text-decoration: none; } .btn--nav-login:hover { background: rgba(0,0,0,0.04); color: var(--kai-text); border-color: rgba(0,0,0,0.22); } .nav__actions { display: flex; align-items: center; gap: var(--space-2); } /* ─── BURGER BUTTON ───────────────────────────────────────────────── */ .nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; position: relative; z-index: 300; } .nav__burger span { display: block; width: 22px; height: 2px; background: var(--kai-navy); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.15s; transform-origin: center; } .nav__burger.is-open span { background: var(--kai-navy); } .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── MOBILE MENU OVERLAY ─────────────────────────────────────────── */ .nav__mobile-menu { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: linear-gradient(225deg, #ffffff 0%, #ffffff 40%, #C3E8EE 75%, #8FCFDB 100%); transform: translateY(-100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); min-height: 100dvh; pointer-events: none; visibility: hidden; } .nav__mobile-menu.is-open { transform: translateY(0); pointer-events: all; visibility: visible; } .nav__mobile-inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 100dvh; padding: 100px 28px 40px; } .nav__mobile-links { display: flex; flex-direction: column; gap: 4px; } .nav__mobile-link { font-size: 26px; font-weight: 700; color: var(--kai-navy); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(18,30,42,0.08); transition: color 0.15s, padding-left 0.15s; } .nav__mobile-link:hover { color: var(--kai-blue); padding-left: 6px; } .nav__mobile-cta { padding-top: 32px; } .nav__mobile-demo { width: 100%; justify-content: center; font-size: 16px; padding: 16px; } /* Gold Badge §09 */ /* ─── NAV – §15 ──────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 250; height: 72px; background: rgba(255,255,255,0.88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(228,238,242,0.8); transition: border-color 0.3s, box-shadow 0.3s; } .nav.scrolled { box-shadow: var(--shadow-sm); } .nav__inner { max-width: var(--container-w); margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); } @media (max-width: 860px) { :root { --section-v: 56px; --section-v-sm: 36px; } .nav__inner { padding: 0 20px; } .container { padding: 0 20px; } .nav__links { display: none; } .nav__actions { display: none; } .nav__burger { display: flex; } .hero__sub { font-size: 16px; } .t-h2 { font-size: 32px; } .t-h3 { font-size: 22px; } /* Hero: 1 Spalte auf Mobile, min-height entfernen damit kein Leerraum unten */ .hero { min-height: 0 !important; height: auto !important; align-items: flex-start !important; } .hero__inner { grid-template-columns: 1fr !important; align-items: start !important; gap: 0 !important; padding: 80px 0 0 !important; width: 100%; } .hero__left { width: 100%; min-width: 0; overflow-x: hidden; } .hero__img-wrap { display: none !important; } .hero__title { width: 100%; overflow-x: hidden; } .t-h1, .t-h1 p { width: 100%; box-sizing: border-box; } /* Buttons auf Mobile: volle Breite */ .hero__cta { flex-direction: column; } .btn, .btn--ghost, .btn--primary, .btn--secondary, .btn--dark, .btn--outline-white, .btn--nav-ghost { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; } /* Ausnahme: Nav-Button bleibt kompakt */ .nav .btn--nav-ghost { width: auto; } /* Final-CTA Buttons nebeneinander → untereinander */ .final-cta__btns { flex-direction: column; align-items: stretch; } /* Science ghost button */ .science-grid .btn--ghost { display: flex; } } /* Logo als Text-Fallback bis echtes PNG/SVG vorhanden */ .nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .nav__logo-img { display: block; height: 36px; width: 160px; object-fit: contain; object-position: left center; } .nav__links { display: flex; align-items: center; gap: var(--space-10); flex: 1; justify-content: center; } .nav__link { font-size: 14px; font-weight: 500; color: var(--kai-text); transition: color 0.18s, background 0.18s; position: relative; padding: 6px 12px; border-radius: 8px; } .nav__link:hover, .nav__link.active { color: var(--kai-blue); background: rgba(60,145,170,0.09); } /* ─── HERO ───────────────────────────────────────────────────────────── */ .hero { min-height: 100vh; padding-top: 72px; display: flex; align-items: center; /* Minimaler Verlauf: reines Weiss oben → Soft Background unten */ background: linear-gradient(180deg, #ffffff 0%, #EDF5F8 100%); position: relative; overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; padding: 120px 0 120px; width: 100%; position: relative; } .hero__left { display: flex; flex-direction: column; gap: 0; } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: 4px; } @keyframes dot-pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.35; transform:scale(0.65); } } .hero__title { margin-bottom: 15px; } .hero__title .t-h1 { display: block; } .hero__title .line--accent { white-space: nowrap; } .hero__title .line--accent { color: var(--kai-blue); } .hero__sub { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--kai-text-muted); max-width: 660px; margin-bottom: 15px; } .hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-12); } .hero__trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); } .hero__trust-item { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--kai-text-muted); letter-spacing: 0.02em; white-space: nowrap; } /* ─── LLM BADGES ───────────────────────────────────────────────────── Zeile mit LLM-Logos im Hero. Badges in hero__llms ein-/auskommentieren um anzupassen. ─────────────────────────────────────────────────────────────────── */ .hero__llms { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-10); margin-top: 15px; } .hero__llms-label { font-size: 11px; font-weight: 600; color: var(--kai-text-muted); letter-spacing: 0.04em; white-space: nowrap; width: 100%; display: block; margin-bottom: 6px; } .llm-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 8px; background: var(--kai-bg); border: 1px solid var(--kai-border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--kai-text); white-space: nowrap; transition: border-color 0.18s, box-shadow 0.18s; } .llm-badge:hover { border-color: #c8dce3; box-shadow: var(--shadow-sm); } .llm-badge__icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .llm-badge__icon img { width: 16px; height: 16px; object-fit: contain; display: block; } /* ─── BROWSER MOCKUP ─────────────────────────────────────────────────── */ @keyframes gentle-float { 0%,100%{ transform:translateY(0) rotate(0.5deg); } 50%{ transform:translateY(-12px) rotate(0.5deg); } } .bmock { background: #1e3448; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg), 0 40px 80px rgba(18,30,42,0.15); } /* Slider */ .bmock__body { padding: 20px; min-height: 0; position: relative; } .bmock__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 18px; } .bkpi__val span { font-size: 12px; color: var(--kai-ai-blue); font-weight: 500; } /* Floating badge */ .hero__badge-icon svg { stroke: var(--kai-blue); } /* ─── TICKER – Signature Element ────────────────────────────────────── */ @keyframes ticker-run { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } } .ticker__item strong { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: rgba(255,255,255,0.75); text-transform: none; } .ticker__item .t-blue { color: var(--kai-ai-blue); } .ticker__item .t-gold { color: var(--kai-gold); } /* ─── PROBLEM CARDS ──────────────────────────────────────────────────── */ .problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--kai-border); border-radius: var(--radius-xl); overflow: hidden; margin-top: var(--space-12); } .problem-teaser { margin-top: 18px; max-width: 660px !important; display: block; font-size: 16px; color: var(--kai-text-muted); line-height: 1.7; } .problem-card { background: var(--kai-bg); padding: 44px 36px; } .problem-card__num { font-size: 52px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--kai-blue); margin-bottom: var(--space-4); } .problem-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kai-text-muted); margin-bottom: var(--space-4); } .problem-card__title { font-size: 20px; font-weight: 600; color: var(--kai-navy); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--space-3); } .problem-card__body { font-size: 15px; color: var(--kai-text-muted); line-height: 1.65; } /* ─── FEATURE CARD – §14 ──────────────────────────────────────────────── */ .feature-card__icon svg { stroke: var(--kai-blue); } /* ─── DIMENSION SPLIT ────────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; } .dim-list { display: flex; flex-direction: column; } .dim-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-6); align-items: start; padding: 28px 0; border-bottom: 1px solid var(--kai-border); } .dim-row:first-child { padding-top: 0; } .dim-row:last-child { border-bottom: none; } .dim-row__label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--kai-text-muted); padding-top: 3px; } .dim-row__title { font-size: 20px; font-weight: 600; color: var(--kai-navy); line-height: 1.3; } .kpi-section { margin-top: var(--space-10); } .kpi-section__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kai-text-muted); margin-bottom: 32px; } .kpi-tags { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); width: 100%; align-items: flex-start; } .kpi-tag { display: inline-flex; align-items: center; padding: 5px 12px; background: none; border: 1px solid rgba(60,145,170,0.3); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--kai-blue); letter-spacing: 0.01em; } /* ─── LOGOS ──────────────────────────────────────────────────────────── */ .logos-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-12); } .logos-item { height: 60px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1) brightness(0.7); opacity: 0.75; transition: filter 0.25s var(--ease), opacity 0.25s var(--ease); } .logos-item:hover { filter: grayscale(0) brightness(1); opacity: 1; } /* ─── SCIENCE / METHODIK ──────────────────────────────────────────────── */ .science-grid { display: grid; grid-template-columns: 0.55fr 1fr; gap: 64px; align-items: flex-start; } .science-portrait { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-xl); aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Echtes Foto: Pascal Meier einsetzen */ } .science-portrait-wrap { position: relative; padding-bottom: 58px; } .science-portrait-mobile-wrap { display: none; } .portrait-label { position: absolute; bottom: 0; left: 14px; right: 14px; background: rgba(30,52,72,0.97); padding: 11px 13px; border-radius: 8px; border: 1px solid rgba(60,145,170,0.2); } .portrait-label__name { font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.88); margin: 0 0 6px; } .portrait-label__role { font-size: 12px; font-weight: 700; color: var(--kai-blue); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; line-height: 1.5; } .science-logos { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; flex-direction: row; } .science-logos__label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); white-space: nowrap; flex-shrink: 0; } .science-logos__img { height: 55px; width: auto; max-width: 160px; filter: brightness(0) invert(1); opacity: 0.6; object-fit: contain; flex-shrink: 0; mix-blend-mode: screen; } .science-logos__img--sm { height: 44px; max-width: 100px; } .science-portrait__initials { font-size: 72px; font-weight: 700; color: rgba(120,180,195,0.3); letter-spacing: -0.04em; } .science-bullets { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) 0; } .science-bullet { display: flex; align-items: flex-start; gap: var(--space-4); font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.65; } .science-bullet span:not(.science-bullet__dot) { flex: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; } .science-bullet__dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(60,145,170,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 3px; } .science-bullet__dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--kai-blue); } .science-qcite { padding: 18px 20px; background: rgba(255,255,255,0.07); border-radius: var(--radius-sm); margin-top: var(--space-10); margin-bottom: 15px; } .science-qcite__text { font-size: 17px; color: rgba(255,255,255,0.88); line-height: 1.6; } .science-qcite__attr { display: none; } /* ─── USP GRID ───────────────────────────────────────────────────────── */ .usp-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--kai-border); border-radius: var(--radius-xl); overflow: hidden; } @media (max-width: 1100px) { .usp-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 860px) { .usp-grid { grid-template-columns: 1fr; } .usp-card { padding: 24px 20px; } } @media (min-width: 861px) and (max-width: 1080px) { .usp-grid { grid-template-columns: repeat(3,1fr); } } .usp-card { background: var(--kai-bg); padding: 36px 28px; transition: background 0.18s; } .usp-card:hover { background: var(--kai-bg-soft); } .usp-card__num { font-size: 28px; font-weight: 700; color: var(--kai-blue); letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--space-5); } .usp-card__eye { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kai-text-muted); margin-bottom: var(--space-2); } .usp-card__title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--kai-navy); margin-bottom: var(--space-2); } .usp-card__body { font-size: 15px; color: var(--kai-text-muted); line-height: 1.65; } /* ─── STEPS ──────────────────────────────────────────────────────────── */ .steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-12); } .step__num { width: 52px; height: 52px; border-radius: 50%; background: rgba(60,145,170,0.09); border: 1px solid rgba(60,145,170,0.2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--kai-blue); margin-bottom: var(--space-6); position: relative; z-index: 1; } .step__title { font-size: 20px; font-weight: 600; color: var(--kai-navy); margin-bottom: var(--space-3); } .step__body { font-size: 15px; color: var(--kai-text-muted); line-height: 1.65; } .steps-cta { margin-top: var(--space-12); padding-top: var(--space-10); border-top: 1px solid var(--kai-border); text-align: center; } /* ─── PRICING ────────────────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: var(--space-6); align-items: stretch; margin-top: var(--space-16); } .plan { border: 1px solid var(--kai-border); border-radius: var(--radius-xl); padding: 44px 36px; background: var(--kai-bg); position: relative; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow 0.2s; } .plan:hover { box-shadow: var(--shadow-md); } .plan--featured:hover { box-shadow: 0 0 0 1px rgba(60,145,170,0.65), 0 12px 48px rgba(60,145,170,0.38), 0 24px 72px rgba(18,30,42,0.15); } .plan--featured { border-color: var(--kai-blue); background: var(--kai-navy); box-shadow: 0 0 0 1px rgba(60,145,170,0.5), 0 8px 40px rgba(60,145,170,0.28), 0 20px 60px rgba(18,30,42,0.12); margin-top: -20px; margin-bottom: -20px; padding: 56px 36px; } .plan--featured .plan__eye { color: var(--kai-ai-blue); } .plan--featured .plan__tagline { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.45); } .plan--featured .plan__price { color: #fff; } .plan--featured .plan__price small { color: rgba(255,255,255,0.65); letter-spacing: normal; } .plan--featured .plan__price-sub { color: rgba(255,255,255,0.35); } .plan--featured .plan__divider { border-color: rgba(255,255,255,0.1); } .plan--featured .plan__feature { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.82); } .plan--featured .plan__feature::before { display: none; } .plan--featured .plan__feat-icon--bullet::after { background: var(--kai-ai-blue); } .plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #F0C040 0%, #C8960C 100%); color: #5C3800; border: none; box-shadow: none; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 14px; border-radius: var(--radius-full); white-space: nowrap; } .plan__eye { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kai-blue); margin-bottom: var(--space-2); } .plan__tagline { font-size: 14px; color: var(--kai-text-muted); margin-bottom: var(--space-6); } .plan__price { font-size: 42px; font-weight: 700; letter-spacing: -0.04em; color: var(--kai-navy); line-height: 1; margin-bottom: 5px; } .plan__price small { font-size: 15px; font-weight: 400; color: var(--kai-text-muted); letter-spacing: normal; } .plan__price-sub { font-size: 13px; color: var(--kai-text-muted); margin-bottom: var(--space-6); } .plan__price-strike { font-size: 16px; font-weight: 500; color: rgba(220,50,50,0.9); position: relative; display: inline-flex; align-items: center; margin: 0; } .plan__price-strike::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: rgba(200,0,0,0.75); transform: rotate(-6deg); } .plan__divider { border: none; border-bottom: 1px solid var(--kai-border); margin-bottom: var(--space-6); } .plan__features { display: flex; flex-direction: column; flex: 1; margin-bottom: var(--space-10); } .plan__feature { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--kai-navy); padding: 7px 0; line-height: 1.4; } .plan__feature::before { display: none; } .plan__feat-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .plan__feat-img { display: block; } .plan__feat-img--checkbox { width: 20px; height: 20px; } .plan__feat-img--star { width: 18px; height: 18px; } .plan__feat-icon--bullet::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--kai-ai-blue); display: block; } .plan__feat-text { flex: 1; min-width: 0; } /* Featured (dark) plan: checkbox→white, star→unverändert (gold bleibt) */ .plan--featured .plan__feat-img--checkbox { filter: none; opacity: 1; } .plan--featured .plan__feat-img--star { filter: none; opacity: 1; } .plan__cta { margin-top: auto !important; display: block; text-align: center; width: 100%; box-sizing: border-box; } .pricing-note { text-align: center; margin-top: var(--space-8); font-size: 13px; color: var(--kai-text-muted); } /* TESTIMONIAL removed */ /* ─── FINAL CTA ──────────────────────────────────────────────────────── */ .final-cta { text-align: center; max-width: 600px; margin: 0 auto; } .final-cta .t-eyebrow { justify-content: center; margin-bottom: var(--space-4); } .final-cta .t-h2 { color: #fff; margin-bottom: var(--space-4); } .final-cta__sub, .final-cta__sub p { font-size: 17px; color: #d4d6d9; line-height: 1.7; max-width: 580px; margin: 14px auto 0; text-align: center; } .final-cta__btns { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); } /* ─── FAQ ────────────────────────────────────────────────────────────── */ .faq { max-width: 700px; margin: 0 auto; } .faq details { border-bottom: 1px solid var(--kai-border); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 22px 0; font-size: 16px; font-weight: 600; color: var(--kai-navy); cursor: pointer; list-style: none; user-select: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '›'; font-size: 24px; font-weight: 300; color: var(--kai-blue); flex-shrink: 0; transition: transform 0.25s var(--ease); transform: rotate(90deg); display: inline-block; } .faq details[open] > summary::after { transform: rotate(270deg); } .faq__body { padding: 0 0 22px; font-size: 15px; color: var(--kai-text-muted); line-height: 1.7; max-width: 580px; } /* ─── KONTAKT ────────────────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 88px; align-items: start; } .contact__heading { font-size: clamp(28px, 3vw, 42px); font-weight: 700; color: var(--kai-navy); letter-spacing: -0.03em; line-height: 1.1; margin: var(--space-4) 0 var(--space-5); } .contact__text { font-size: 16px; color: var(--kai-text-muted); margin-bottom: var(--space-10); line-height: 1.65; } .contact__details { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); margin-bottom: var(--space-10); } .contact__item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 16px; color: var(--kai-text-muted); } .contact__icon { color: var(--kai-blue); flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; } /* Form card */ .form-card { background: var(--kai-bg-soft); border-radius: var(--radius-xl); padding: 44px; border: 1px solid var(--kai-border); } .frow { margin-bottom: var(--space-5); } .frow--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .fgroup { display: flex; flex-direction: column; gap: 6px; } label { font-size: 13px; font-weight: 700; color: var(--kai-navy); letter-spacing: 0.01em; } .req { color: var(--kai-blue); } input, select, textarea { font-family: var(--kai-font); font-size: 15px; color: var(--kai-text); background: var(--kai-bg); border: 1px solid #DCE8ED; border-radius: var(--radius-md); padding: 14px 16px; outline: none; transition: border-color 0.18s, box-shadow 0.18s; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--kai-blue); box-shadow: 0 0 0 3px rgba(60,145,170,0.14); } textarea { resize: vertical; min-height: 112px; } .fhint { font-size: 12px; color: var(--kai-text-muted); margin-top: 2px; } .fsubmit { padding-top: var(--space-2); } .fsubmit .btn { width: 100%; justify-content: center; padding: 16px; font-size: 15px; } /* ─── RADIO GROUP ─────────────────────────────────────────────────────── */ .fradio-group { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; } .fradio { display: flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; } .fradio input[type="radio"] { width: 16px; height: 16px; min-width: 16px; accent-color: var(--kai-blue); cursor: pointer; border: none; box-shadow: none; padding: 0; order: 0; } .fradio input[type="radio"]:focus { box-shadow: none; border-color: transparent; } .fradio span { font-size: 14px; color: var(--kai-text); font-weight: 400; line-height: 1.3; order: 1; } /* ─── FOOTER ─────────────────────────────────────────────────────────── */ /* ─── FOOTER ─────────────────────────────────────────────────────── */ /* ─── FOOTER ─────────────────────────────────────────────────────── */ .footer { background: var(--kai-navy); color: rgba(255,255,255,0.55); padding: 56px 0 0; } .footer__inner { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--space-8); } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px 64px; margin-bottom: 48px; align-items: start; } .footer__col-brand {} .footer__col { min-width: 0; } .footer__brand-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .footer__brand-logo { display: block; filter: brightness(0) invert(1); opacity: 0.85; } .footer__brand-logo--color { filter: none !important; opacity: 1 !important; } .footer__eye { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kai-blue); margin-bottom: 16px; display: block; } .footer__list { list-style: none; padding: 0; margin: 0; } .footer__list li { margin-bottom: 8px; } .footer__list a { font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; line-height: 1.8; transition: color 0.15s; } .footer__list a:hover { color: #fff; } .footer__addr { font-style: normal; font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; } .footer__addr a { color: rgba(255,255,255,0.55); text-decoration: none; } .footer__addr a:hover { color: #fff; } .footer__hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 0; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; gap: var(--space-6); } .footer__copy { font-size: 13px; color: rgba(255,255,255,0.30); } .footer__legal { display: flex; gap: var(--space-6); } .footer__legal a { font-size: 13px; color: rgba(255,255,255,0.40); text-decoration: none; transition: color 0.15s; } .footer__legal a:hover { color: #fff; } @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__col-brand { grid-column: 1 / -1; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } } /* ─── NEWS TICKER ─────────────────────────────────────────────────── */ .news-ticker { background: var(--kai-navy); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 10px 0; } .news-ticker .container { overflow: hidden; } .news-ticker__inner { display: flex; align-items: center; overflow: hidden; } .news-ticker__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kai-blue); white-space: nowrap; padding: 0 16px 0 0; flex-shrink: 0; } .news-ticker__divider { width: 1px; height: 14px; background: rgba(255,255,255,0.15); flex-shrink: 0; } .news-ticker__track-wrap { overflow: hidden; flex: 1; } .news-ticker__track { display: inline-flex; align-items: center; animation: ticker 26s linear infinite; } .news-ticker__track.paused { animation-play-state: paused; } .news-ticker__item { display: inline-flex; align-items: center; padding: 0 32px; height: 36px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.55); white-space: nowrap; letter-spacing: 0.01em; line-height: 1; } .news-ticker__dot { display: none; } .news-ticker__text { white-space: nowrap; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.55); letter-spacing: 0.01em; line-height: 1; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ─── SCIENCE PORTRAIT MOBILE ─────────────────────────────────────── */ .science-portrait-mobile { display: none; } @media (max-width: 860px) { .science-grid > div:last-child { display: flex; flex-direction: column; } .science-portrait-mobile { order: 1; } .science-qcite { order: 3; margin-top: 0; margin-bottom: 28px; } .science-bullets { order: 2; margin-top: 0; } .science-grid > div:last-child > .t-eyebrow, .science-grid > div:last-child > .t-h2 { order: 0; } .science-grid > div:last-child > .btn, .science-grid > div:last-child > .science-logos { order: 4; } .science-grid > div:last-child > .btn { margin-left: 0 !important; margin-top: 12px !important; } .science-grid > div:last-child > .btn:first-of-type { margin-top: 24px !important; } .science-portrait { display: none; } .science-portrait-wrap { display: none; } .science-portrait-mobile-wrap { display: block; position: relative; padding-bottom: 50px; margin-top: 32px; margin-bottom: 24px; } .portrait-label--mobile { bottom: 0; left: 10px; right: 10px; padding: 9px 11px; } .portrait-label--mobile .portrait-label__name { font-size: 21px; } .portrait-label--mobile .portrait-label__role { font-size: 11px; } .science-portrait-mobile { display: block; width: 100%; max-height: 280px; overflow: hidden; border-radius: var(--radius-lg); } .science-portrait-mobile img { width: 100%; height: 280px; object-fit: cover; object-position: center 20%; } } /* ─── MOBILE NAV ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .nav__links { display: none; } } /* ─── REVEAL ANIMATIONS ──────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .rd1 { transition-delay: 0s; } .rd2 { transition-delay: 0.1s; } .rd3 { transition-delay: 0.2s; } /* ─── MOBILE GRID OVERRIDES ─────────────────────────────────────── */ @media (max-width: 860px) { .pricing-grid { display: flex; flex-direction: column; gap: 10px; } .plan { cursor: pointer; padding: 20px; position: relative; } .plan--featured { margin-top: 0; margin-bottom: 0; padding: 20px; box-shadow: none; } .plan .plan__divider, .plan .plan__features, .plan .plan__cta { display: none; } .plan--open .plan__divider { display: block; } .plan--open .plan__features { display: flex; } .plan--open .plan__cta { display: block; } .plan .plan__price { font-size: 24px; } .plan--open .plan__price { font-size: 42px; } .plan .plan__price small { font-size: 12px; } .plan--open .plan__price small { font-size: 15px; } .plan::after { content: '›'; position: absolute; right: 16px; top: 16px; font-size: 24px; font-weight: 300; color: var(--kai-blue); transition: transform 0.25s var(--ease); line-height: 1; transform: rotate(90deg); } .plan--featured::after { color: var(--kai-ai-blue); } .plan--open::after { transform: rotate(270deg); } .plan--featured .plan__badge { position: absolute; top: 18px; right: 48px; left: auto; transform: none; font-size: 9px; padding: 3px 8px; } .split { grid-template-columns: 1fr !important; } .steps-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 30px; } .contact__details { margin-bottom: 0; } .frow--2 { grid-template-columns: 1fr; } .form-card { padding: 20px 16px; } .fgroup input, .fgroup select, .fgroup textarea { width: 100%; box-sizing: border-box; } .science-grid { grid-template-columns: 1fr; } .dim-list { grid-template-columns: 1fr; } .problem-grid { grid-template-columns: 1fr; } } /* ─── ANCHOR SCROLL OFFSET (fixed nav compensation) ─────────────── */ #warum, #leistung, #methodik, #pakete, #final-cta, #faq, #kontakt { scroll-margin-top: 72px; } .hero__img-wrap { overflow: visible; } /* ─── LLM FLOAT ANIMATION (global, auch von Problem-Section genutzt) ── */ @keyframes llm-fl { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(var(--y,-10px)) rotate(var(--r,0deg)); } } /* ─── HERO IMAGE FLOAT WRAP ────────────────────────────────────── */ .hero__img-float { position: relative; display: block; width: 100%; overflow: visible; padding: 40px 0; } .hero__img-float > img { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 16px 40px rgba(18,30,42,0.13)); animation: gentle-float 7s ease-in-out infinite; } .hero__float-badge { position: absolute; background: var(--kai-bg); border: 1px solid var(--kai-border); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--kai-font); animation: llm-fl var(--d,5s) ease-in-out infinite; animation-delay: var(--dl,0s); z-index: 10; } .hero__float-badge__icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero__float-badge__title { font-size: 12px; font-weight: 700; color: var(--kai-navy); } .hero__float-badge__sub { font-size: 11px; color: var(--kai-text-muted); margin-top: 1px; } .hero__float-badge__val { font-size: 20px; font-weight: 700; line-height: 1; } .hero__float-badge__lbl { font-size: 9px; font-weight: 700; color: var(--kai-text-muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; } .hero__float-badge__delta { font-size: 10px; font-weight: 700; margin-top: 2px; } .hero__float-badge__delta--up { color: #15803D; } .hero__float-badge__delta--down { color: #EF4444; } /* ─── NAV LOGO ───────────────────────────────────────────────────────── */ /* ─── LLM FLOATING BADGES (Problem section) ─────────────────────────── */ .llm-fw { position: relative; width: 240px; height: 340px; flex-shrink: 0; } .llm-b { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--kai-bg); border: 1px solid var(--kai-border); border-radius: 12px; padding: 10px 16px 10px 10px; font-family: var(--kai-font); font-weight: 600; color: var(--kai-text); white-space: nowrap; box-shadow: var(--shadow-sm); animation: llm-fl var(--d) ease-in-out infinite; animation-delay: var(--dl); } .llm-i { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .problem-top { display: flex; gap: 48px; align-items: flex-start; } .problem-top__text { flex: 1; min-width: 0; } @media (max-width: 860px) { .llm-fw { display: none; } .problem-top { display: block; } } /* ─── PROBLEM HEADLINE ───────────────────────────────────────────────── */ .problem-headline { max-width: 580px; } /* ─── H2 OHNE EYEBROW (kein top-margin nötig bei fehlendem Eyebrow-Label) */ .t-h2--no-eyebrow { margin-top: 12px; } /* ─── MARKUP PARAGRAPHEN (aus markup()-Funktion) ─────────────────────── */ .hero__sub p, .problem-teaser p { margin: 0 0 0.75em; } .hero__sub p:last-child, .problem-teaser p:last-child { margin-bottom: 0; } /* ─── SECTION KPI (Unter Leistung) ──────────────────────────────────── */ .section--kpi { padding-top: 0; padding-bottom: 32px; margin-top: -40px; background: #fff; } /* ─── LOGOS LABEL ────────────────────────────────────────────────────── */ .logos-label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kai-text-muted); margin-bottom: 32px; } /* ─── PASCAL MEIER PORTRAIT IMG ─────────────────────────────────────── */ .science-portrait__img { width: 100%; height: 100%; object-fit: cover; } /* ─── METHODIK BUTTONS ───────────────────────────────────────────────── */ .science-cta { margin-top: 24px; } .science-cta--sec { margin-left: 12px; } /* ─── PAKETE SUBLINE ─────────────────────────────────────────────────── */ .pricing-subline { margin-top: 10px; font-size: 14px; color: var(--kai-text-muted); text-align: center; } /* ─── BMOCK CHART VARIANTE ───────────────────────────────────────────── */ .bmock__body--chart { display: flex; align-items: center; justify-content: center; padding: 31px 20px 14px; } .bmock__label--overlay { position: absolute; top: 14px; left: 20px; color: rgba(255,255,255,0.65); } .bmock-chart { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; width: 100%; margin-top: 8px; } .bmock-chart__donut { display: flex; align-items: center; justify-content: center; } .bmock-chart__legend { display: flex; flex-direction: column; gap: 7px; justify-content: center; } .bmock-legend__row { display: flex; align-items: center; gap: 8px; } .bmock-legend__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .bmock-legend__name { font-size: 12px; color: rgba(255,255,255,0.45); } .bmock-legend__val { font-size: 12px; font-weight: 700; color: #fff; margin-left: auto; } /* ── Donut-Segmente initial unsichtbar ───────────── */ .bmock-chart__donut svg circle:nth-child(2), .bmock-chart__donut svg circle:nth-child(3), .bmock-chart__donut svg circle:nth-child(4), .bmock-chart__donut svg circle:nth-child(5) { stroke-dasharray: 0 176; } /* ── @keyframes pro Segment ──────────────────────── */ @keyframes donut-seg-1 { to { stroke-dasharray: 59.8 116.1; } } @keyframes donut-seg-2 { to { stroke-dasharray: 44.0 131.9; } } @keyframes donut-seg-3 { to { stroke-dasharray: 31.7 144.2; } } @keyframes donut-seg-4 { to { stroke-dasharray: 21.1 154.8; } } /* ── Animation ausgelöst durch .reveal.visible ───── */ .reveal.visible .bmock-chart__donut svg circle:nth-child(2) { animation: donut-seg-1 0.75s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; } .reveal.visible .bmock-chart__donut svg circle:nth-child(3) { animation: donut-seg-2 0.65s cubic-bezier(0.16,1,0.3,1) 0.4s forwards; } .reveal.visible .bmock-chart__donut svg circle:nth-child(4) { animation: donut-seg-3 0.55s cubic-bezier(0.16,1,0.3,1) 0.7s forwards; } .reveal.visible .bmock-chart__donut svg circle:nth-child(5) { animation: donut-seg-4 0.45s cubic-bezier(0.16,1,0.3,1) 1.0s forwards; } /* ── TABLET NAVIGATION (861px–1100px) ──────────────────────────────────── */ .nav__txt--tab { display: none; } @media (min-width: 861px) and (max-width: 1100px) { .nav__txt { display: none; } .nav__txt--tab { display: inline; } .nav__inner { gap: var(--space-5); } .nav__link { font-size: 13px; padding: 6px 10px; } } /* ── NEWS TICKER — Vertikale Zentrierung ───────────────────────────────── */ .news-ticker__inner { height: 25px; } .news-ticker__item { height: 25px; } .news-ticker__label { line-height: 25px; } .news-ticker__text { line-height: 25px; } @media (max-width: 767px) { .contact__details { margin-bottom: 0; } .form-card { padding: 20px 16px !important; } .fgroup { margin-bottom: 10px; } .fgroup label { font-size: 11px; } .fgroup textarea { min-height: 80px; } .fradio span { font-size: 13px; } .fsubmit { margin-top: 12px; } } /* ─── HERO MOBILE SCREEN (innerhalb hero__left, nach Trust-Badges) ── */ .hero__mobile-img { display: none; } @media (max-width: 860px) { .hero__trust { justify-content: center; } } @keyframes gentle-float-mobile { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (max-width: 860px) { .hero__mobile-img { display: block; width: 85%; margin-left: auto; margin-right: auto; margin-top: 28px; padding-top: 8px; margin-bottom: 34px; border-radius: var(--radius-md); overflow: hidden; } .hero__mobile-img img { display: block; width: 100%; height: auto; animation: gentle-float-mobile 7s ease-in-out infinite; } } /* ─── LOGOS MOBILE (untereinander zentriert) ─────────────────────────── */ @media (max-width: 860px) { .logos-row { flex-direction: column; align-items: center; gap: var(--space-6); } .logos-item { height: 80px; max-width: 200px; } }