/* Tokens */ :root{ --od-ink: #0B2A6B; --od-blue: #1668FF; --od-cyan: #1AB6FF; --od-teal: #0FB6A6; --od-bg: #FBFCFE; --od-bg-tint: #F2F5FA; --od-card: #FFFFFF; --od-line: rgba(11,42,107,.10); --od-line-strong: rgba(11,42,107,.18); --od-text: #0B2A6B; --od-text-2: #4A5878; --od-text-3: #8895AD; --od-accent-a: var(--od-blue); --od-accent-b: var(--od-cyan); --od-accent-c: var(--od-teal); --od-font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --od-font-body: "Inter", system-ui, sans-serif; --od-font-mono: "IBM Plex Mono", ui-monospace, monospace; --od-radius-m: 14px; --od-radius-l: 22px; --od-radius-xl: 28px; --od-shadow-s: 0 1px 2px rgba(11,42,107,.05), 0 1px 1px rgba(11,42,107,.04); --od-shadow-m: 0 8px 24px -8px rgba(11,42,107,.12), 0 2px 6px rgba(11,42,107,.06); --od-shadow-l: 0 30px 60px -20px rgba(11,42,107,.18), 0 12px 28px -12px rgba(11,42,107,.10); } html, html:focus-within, body{ scroll-behavior:auto !important; } /* Optional Dark-Variante: */ .odoso-dark{ --od-bg:#07101F; --od-bg-tint:#0B1730; --od-card:#0E1B36; --od-line:rgba(255,255,255,.08); --od-line-strong:rgba(255,255,255,.16); --od-text:#F5F8FF; --od-text-2:#B7C2DB; --od-text-3:#7E8CAD; } /* Section Wrapper */ .odoso{ font-family: var(--od-font-body); color: var(--od-text); background: var(--od-bg); line-height: 1.55; overflow-x:clip; } .odoso *{box-sizing:border-box} .odoso .od-wrap{max-width:1240px;margin:0 auto;padding:0 32px} @media (max-width:720px){ .odoso .od-wrap{padding:0 20px} } @media (max-width:380px){ .odoso .od-wrap{padding:0 16px} } .odoso h1,.odoso h2,.odoso h3,.odoso h4{ font-family: var(--od-font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--od-text); margin: 0; overflow-wrap:normal; word-break:normal; hyphens:none; } .odoso h1{font-size:clamp(26px,5.4vw,76px);line-height:1.02;letter-spacing:-0.035em} .odoso h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-0.028em} .odoso h3{font-size:clamp(20px,1.5vw,24px);line-height:1.2;letter-spacing:-0.018em} .odoso p{margin:0;color:var(--od-text-2)} @media (max-width:420px){ .odoso h1{font-size:36px;line-height:1.06} .odoso h2{font-size:28px;line-height:1.12} } .odoso .od-mono{font-family:var(--od-font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase} /* Buttons */ .odoso .od-btn{ display:inline-flex;align-items:center;gap:8px; padding:13px 20px;border-radius:999px; font-weight:600;font-size:15px;line-height:1; border:1px solid transparent;cursor:pointer;text-decoration:none; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; min-height:44px; } .odoso .od-btn-primary{ color:#fff !important; background:linear-gradient(135deg, var(--od-accent-a), color-mix(in oklab, var(--od-accent-b) 60%, var(--od-accent-c))); box-shadow:0 10px 24px -10px color-mix(in oklab, var(--od-accent-a) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25); } .odoso .od-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px color-mix(in oklab, var(--od-accent-a) 80%, transparent)} .odoso .od-btn-ghost{color:var(--od-text);background:transparent;border-color:var(--od-line-strong)} .odoso .od-btn-ghost:hover{background:var(--od-bg-tint)} /* Häkchen-Pille: Unicode-Zeichen wird zuverlässig versteckt, das SVG-Häkchen sitzt pixelgenau mittig im Gradient-Kreis. */ .odoso .od-check{ width:18px;height:18px;border-radius:999px;flex:0 0 auto; display:inline-block;vertical-align:middle; position:relative;overflow:hidden; text-indent:-9999px;color:transparent;line-height:0;font-size:0; background: url("data:image/svg+xml;utf8,") center/10px 10px no-repeat, linear-gradient(135deg, var(--od-accent-a), var(--od-accent-c)); } .odoso .od-check *{display:none !important} /* ─── Section Rhythm ─── */ /* Mehr Luft zwischen Sektionen, ohne dass Gradients in Nachbarblöcke laufen. Jede Sektion isoliert ihren Hintergrund mit `isolation:isolate` + overflow. */ .odoso .od-hero, .odoso .od-trust, .odoso .od-section, .odoso .od-tour, .odoso .od-cta{ isolation:isolate; position:relative; overflow:hidden } /* größere vertikale Abstände generell */ .odoso .od-section{padding:160px 0} @media (max-width:880px){ .odoso .od-section{padding:104px 0} } .odoso .od-section + .od-section{ margin-top:0 } /* Beta-/CTA-Sektion bekommt extra Atemraum nach unten zum Footer */ .odoso #beta{ padding-top: 160px !important; padding-bottom: 240px !important } @media (max-width:880px){ .odoso #beta{ padding-top:104px !important; padding-bottom:140px !important } } .odoso .od-cta{padding:64px 0 200px} @media (max-width:880px){ .odoso .od-cta{padding:40px 0 128px} } /* Trenn-Spacer vor dem Footer, damit auch Theme-Footer Luft bekommen */ .odoso > section:last-of-type{ margin-bottom: 80px } @media (max-width:880px){ .odoso > section:last-of-type{ margin-bottom: 48px } } /* Trust-Bar bekommt eigene Atemzone */ .odoso .od-trust{ margin: 64px 0 } @media (max-width:880px){ .odoso .od-trust{ margin: 40px 0 } } /* Tour: extra Innen-Padding, damit Tabs/Frame nicht an Sektionsgrenzen kleben */ .odoso .od-tour{ padding: 160px 0 } @media (max-width:880px){ .odoso .od-tour{ padding: 104px 0 } } /* Section-Head bekommt mehr Abstand zum Inhalt */ .odoso .od-head{max-width:720px;margin:0 auto 72px;text-align:center} @media (max-width:880px){ .odoso .od-head{margin-bottom:48px} } /* HERO */ .odoso .od-hero{position:relative;padding:160px 0 128px;overflow:hidden} @media (max-width:880px){ .odoso .od-hero{padding:112px 0 80px} } .odoso .od-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center} .odoso .od-hero-copy{min-width:0} @media (max-width:980px){ .odoso .od-hero-grid{grid-template-columns:1fr;gap:48px;text-align:center} .odoso .od-hero-copy{margin:0 auto;max-width:700px} .odoso .od-hero-cta,.odoso .od-hero-meta{justify-content:center} } .odoso .od-hero h1{text-wrap:normal;max-width:100%;overflow:visible} .odoso .od-hero h1 br{display:none} .odoso .od-eyebrow{ display:inline-flex;align-items:center;gap:8px; padding:6px 12px 6px 8px;border-radius:999px; background:var(--od-bg-tint);border:1px solid var(--od-line); font-size:12.5px;color:var(--od-text-2);margin-bottom:24px; } .odoso .od-eyebrow .od-dot{width:14px;height:14px;border-radius:999px; background:linear-gradient(135deg,var(--od-accent-a),var(--od-accent-c)); box-shadow:0 0 0 3px color-mix(in oklab, var(--od-accent-a) 12%, transparent)} .odoso .od-accent{ background:linear-gradient(120deg, var(--od-accent-a) 0%, var(--od-accent-b) 55%, var(--od-accent-c) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .odoso .od-lede{font-size:clamp(17px,1.3vw,19px);max-width:560px;margin-top:22px;line-height:1.55} .odoso .od-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center} .odoso .od-hero-meta{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:34px;color:var(--od-text-2);font-size:13.5px} .odoso .od-hero-meta span{display:inline-flex;align-items:center;gap:8px} .odoso .od-hero-bg{ position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.55; background: radial-gradient(60% 50% at 18% 30%, color-mix(in oklab, var(--od-accent-a) 35%, transparent) 0%, transparent 60%), radial-gradient(45% 60% at 85% 20%, color-mix(in oklab, var(--od-accent-b) 30%, transparent) 0%, transparent 60%), radial-gradient(50% 60% at 70% 90%, color-mix(in oklab, var(--od-accent-c) 30%, transparent) 0%, transparent 60%); filter:blur(20px) saturate(120%); animation: od-hero-drift 22s ease-in-out infinite alternate; } @keyframes od-hero-drift{ 0% { transform: translate3d(0,0,0) scale(1); opacity:.55 } 50% { transform: translate3d(2%,-1%,0) scale(1.04); opacity:.65 } 100% { transform: translate3d(-1%,2%,0) scale(1.02); opacity:.55 } } @media (prefers-reduced-motion: reduce){ .odoso .od-hero-bg{ animation:none } } .odoso .od-hero .od-wrap{position:relative;z-index:1} .odoso .od-showcase{ position:relative;border-radius:var(--od-radius-xl);overflow:hidden; background:linear-gradient(180deg, color-mix(in oklab, var(--od-accent-a) 18%, var(--od-bg)) 0%, color-mix(in oklab, var(--od-accent-c) 14%, var(--od-bg)) 100%); padding:18px;border:1px solid var(--od-line);box-shadow:var(--od-shadow-l); } .odoso .od-showcase img{display:block;width:100%;border-radius:18px;border:1px solid var(--od-line)} /* Trust */ .odoso .od-trust{padding:36px 0;border-top:1px solid var(--od-line);border-bottom:1px solid var(--od-line);background:var(--od-bg-tint)} .odoso .od-trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px} .odoso .od-trust-row .od-mono{color:var(--od-text-3)} .odoso .od-pills{display:flex;flex-wrap:wrap;gap:8px} .odoso .od-pill{ display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px; background:var(--od-card);border:1px solid var(--od-line); font-size:12.5px;font-weight:500;color:var(--od-text-2) } .odoso .od-pill .od-dot{width:6px;height:6px;border-radius:999px;background:var(--od-accent-c)} /* Sections common */ .odoso .od-section{padding:96px 0;position:relative} .odoso .od-head{max-width:720px;margin:0 auto 56px;text-align:center} .odoso .od-head.center{margin-left:auto;margin-right:auto;text-align:center} .odoso .od-head .od-mono{color:var(--od-text-3);margin-bottom:14px;display:block} .odoso .od-head p{margin-top:14px;font-size:17px} /* Steps */ .odoso .od-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media (max-width:880px){ .odoso .od-steps{grid-template-columns:1fr} } .odoso .od-step{ position:relative;padding:32px;border-radius:var(--od-radius-l); background:var(--od-card);border:1px solid var(--od-line);box-shadow:var(--od-shadow-s); display:flex;flex-direction:column;gap:16px;transition:transform .25s, box-shadow .25s; } .odoso .od-step:hover{transform:translateY(-2px);box-shadow:var(--od-shadow-m)} .odoso .od-step .od-num{font-family:var(--od-font-mono);font-size:12px;letter-spacing:.06em;color:var(--od-text-3)} .odoso .od-step .od-ico{ width:48px;height:48px;border-radius:14px; background:linear-gradient(135deg, color-mix(in oklab, var(--od-accent-a) 18%, var(--od-card)) 0%, color-mix(in oklab, var(--od-accent-c) 18%, var(--od-card)) 100%); border:1px solid var(--od-line);display:grid;place-items:center;color:var(--od-accent-a) } .odoso .od-step h3{font-size:21px} .odoso .od-step p{font-size:14.5px;line-height:1.6} /* Produkttour */ .odoso .od-tour{ background:linear-gradient(180deg, var(--od-bg) 0%, var(--od-bg-tint) 100%); border-top:1px solid var(--od-line);border-bottom:1px solid var(--od-line); } .odoso .od-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;background:var(--od-card);border:1px solid var(--od-line);border-radius:14px;margin-bottom:32px} .odoso .od-tab{ flex:1;min-width:130px;appearance:none;border:0;background:transparent; padding:11px 14px;border-radius:10px;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:500;color:var(--od-text-2); display:flex;align-items:center;gap:8px;justify-content:center; transition:background .2s, color .2s; } .odoso .od-tab:hover{color:var(--od-text)} .odoso .od-tab.is-active{ color:#fff; background:linear-gradient(135deg, var(--od-accent-a), color-mix(in oklab, var(--od-accent-b) 50%, var(--od-accent-c))); box-shadow:var(--od-shadow-s); } .odoso .od-tour-frame{ border-radius:var(--od-radius-xl);overflow:hidden; border:1px solid var(--od-line);background:var(--od-card);box-shadow:var(--od-shadow-l); } .odoso .od-tour-grid{display:grid;grid-template-columns:280px 1fr;min-height:460px} @media (max-width:880px){ .odoso .od-tour-grid{grid-template-columns:1fr} } .odoso .od-tour-side{background:var(--od-bg-tint);border-right:1px solid var(--od-line);padding:22px;display:flex;flex-direction:column;gap:18px} .odoso .od-tour-side h4{font-size:15px;font-weight:600} .odoso .od-tour-side p{font-size:13.5px;line-height:1.55} .odoso .od-tour-side ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .odoso .od-tour-side li{font-size:13px;color:var(--od-text-2);display:flex;gap:10px;align-items:flex-start} .odoso .od-tour-stage{ position:relative;padding:28px; background:linear-gradient(135deg, color-mix(in oklab, var(--od-accent-a) 8%, var(--od-card)) 0%, color-mix(in oklab, var(--od-accent-c) 8%, var(--od-card)) 100%); background-image: radial-gradient(color-mix(in oklab, var(--od-accent-a) 18%, transparent) 1px, transparent 1px), linear-gradient(135deg, color-mix(in oklab, var(--od-accent-a) 8%, var(--od-card)) 0%, color-mix(in oklab, var(--od-accent-c) 8%, var(--od-card)) 100%); background-size: 18px 18px, auto; } .odoso .od-tour-stage img{ display:block;max-width:100%;border-radius:14px; border:1px solid var(--od-line);box-shadow:var(--od-shadow-m);margin:0 auto; } .odoso .od-tour-pane{display:none} .odoso .od-tour-pane.is-active{display:block} .odoso .od-tour-hint{display:flex;align-items:center;gap:10px;color:var(--od-text-3);font-family:var(--od-font-mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;justify-content:center;margin-top:48px} .odoso .od-tour-hint .od-line{width:60px;height:1px;background:var(--od-line-strong)} /* Features */ .odoso .od-features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} @media (max-width:880px){ .odoso .od-features{grid-template-columns:1fr} } .odoso .od-feature{ padding:28px;border-radius:var(--od-radius-l); background:var(--od-card);border:1px solid var(--od-line); display:flex;flex-direction:column;gap:14px; transition:transform .25s, box-shadow .25s, border-color .25s; } .odoso .od-feature:hover{transform:translateY(-2px);box-shadow:var(--od-shadow-m);border-color:var(--od-line-strong)} .odoso .od-feature .od-badge{ align-self:flex-start;padding:6px 10px;border-radius:8px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; background:color-mix(in oklab, var(--od-accent-a) 12%, transparent);color:var(--od-accent-a); font-family:var(--od-font-mono) } .odoso .od-feature h3{font-size:22px} .odoso .od-feature p{font-size:14.5px;line-height:1.6} .odoso .od-feature .od-stat{display:flex;align-items:baseline;gap:8px;margin-top:6px} .odoso .od-feature .od-stat b{font-family:var(--od-font-display);font-size:38px;font-weight:600;letter-spacing:-.02em;background:linear-gradient(135deg,var(--od-accent-a),var(--od-accent-c));-webkit-background-clip:text;background-clip:text;color:transparent} .odoso .od-feature .od-stat span{font-size:13px;color:var(--od-text-3)} /* Pricing */ .odoso .od-pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:920px;margin:0 auto} @media (max-width:880px){ .odoso .od-pricing{grid-template-columns:1fr} } .odoso .od-price{ padding:32px;border-radius:var(--od-radius-l); background:var(--od-card);border:1px solid var(--od-line); display:flex;flex-direction:column;gap:18px;position:relative; } .odoso .od-price.pro{ background:linear-gradient(180deg, color-mix(in oklab, var(--od-accent-a) 6%, var(--od-card)) 0%, var(--od-card) 50%); border-color:color-mix(in oklab, var(--od-accent-a) 35%, var(--od-line)); box-shadow:var(--od-shadow-m); } .odoso .od-price h3{font-size:22px} .odoso .od-price .od-amount{display:flex;align-items:baseline;gap:6px;font-family:var(--od-font-display)} .odoso .od-price .od-amount b{font-size:54px;font-weight:600;letter-spacing:-.03em} .odoso .od-price .od-amount span{color:var(--od-text-3);font-size:14px} .odoso .od-price ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px} .odoso .od-price li{font-size:14px;color:var(--od-text-2);display:flex;gap:10px;align-items:flex-start} .odoso .od-price-tag{position:absolute;top:18px;right:18px;font-family:var(--od-font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--od-accent-a);background:color-mix(in oklab,var(--od-accent-a) 12%, transparent);padding:5px 9px;border-radius:6px} /* CTA Band */ .odoso .od-cta-band{ border-radius:var(--od-radius-xl);padding:64px 48px; background: radial-gradient(60% 80% at 80% 10%, color-mix(in oklab, var(--od-accent-b) 35%, transparent) 0%, transparent 60%), radial-gradient(60% 80% at 0% 100%, color-mix(in oklab, var(--od-accent-c) 35%, transparent) 0%, transparent 60%), linear-gradient(135deg, color-mix(in oklab, var(--od-accent-a) 90%, #000) 0%, color-mix(in oklab, var(--od-accent-b) 70%, var(--od-accent-c)) 100%); color:#fff;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; box-shadow:var(--od-shadow-l);position:relative;overflow:hidden; } .odoso .od-cta-band > *{min-width:0} .odoso .od-cta-band > div:first-child{text-align:center} .odoso .od-cta-band h2{color:#fff;max-width:620px} .odoso .od-cta-band p{color:rgba(255,255,255,.85);max-width:520px;margin-top:10px} .odoso .od-cta-band .od-btn-primary{background:#fff !important;color:var(--od-ink) !important;box-shadow:0 10px 30px -10px rgba(0,0,0,.35)} .odoso .od-cta-band .od-btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)} .odoso .od-cta-band .od-btn-ghost:hover{background:rgba(255,255,255,.08)} /* ─── Beta Waitlist Form (im od-cta-band) ─── */ .odoso .od-waitlist{ flex:1 1 420px;min-width:0;width:100%;max-width:560px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:18px;padding:22px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:flex;flex-direction:column; } .odoso .od-wl-label{ display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:rgba(255,255,255,.75);margin:0 0 6px; } .odoso .od-wl-input{ width:100%;padding:10px 12px;border-radius:10px; background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.2); color:var(--od-ink);font:inherit;font-size:14px;outline:none; transition:box-shadow .15s, background .15s; } .odoso .od-wl-input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.35);background:#fff} .odoso select.od-wl-input{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px} .odoso .od-wl-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12px;color:rgba(255,255,255,.85);line-height:1.45} .odoso .od-wl-check input{margin-top:2px;accent-color:#fff;flex:0 0 auto} .odoso .od-wl-hint{margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.65);text-align:center} .odoso .od-cta-band .od-waitlist .od-btn-primary{box-shadow:0 6px 20px -6px rgba(0,0,0,.3)} .odoso .od-wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .odoso .od-wl-notice{ margin:0 0 14px;padding:10px 12px;border-radius:10px; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25); color:#fff;font-size:13px;line-height:1.4; } .odoso .od-wl-notice-success{background:rgba(15,182,166,.24);border-color:rgba(255,255,255,.28)} .odoso .od-wl-notice-error, .odoso .od-wl-notice-invalid, .odoso .od-wl-notice-consent{background:rgba(220,38,38,.22);border-color:rgba(255,255,255,.3)} /* Beta-Badge */ .odoso .od-beta-tag{ display:inline-block;margin-left:8px;padding:2px 8px;border-radius:6px; font-family:var(--od-font-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; background:linear-gradient(135deg, var(--od-accent-a), var(--od-accent-c));color:#fff;vertical-align:middle; } /* Neve-Reset Schutz */ .odoso button{font-family:inherit} .odoso a{color:inherit} .odoso img{max-width:100%;height:auto;display:block} /* ───────────────────────────────────────────────────────── ANIMATION & MOTION ───────────────────────────────────────────────────────── */ /* 1) Reveal-on-Scroll: Elemente mit [data-od-reveal] starten unsichtbar und werden via IntersectionObserver in odoso.js sichtbar geschaltet. */ .odoso [data-od-reveal]{ opacity:0; transform:translate3d(0,18px,0); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .odoso [data-od-reveal].is-in{ opacity:1; transform:none } .odoso [data-od-reveal][data-od-delay="1"]{ transition-delay:.08s } .odoso [data-od-reveal][data-od-delay="2"]{ transition-delay:.16s } .odoso [data-od-reveal][data-od-delay="3"]{ transition-delay:.24s } .odoso [data-od-reveal][data-od-delay="4"]{ transition-delay:.32s } .odoso [data-od-reveal][data-od-delay="5"]{ transition-delay:.40s } .odoso [data-od-reveal][data-od-delay="6"]{ transition-delay:.48s } /* 2) Hero-Eyebrow pulsiert sanft */ @keyframes od-pulse-dot{ 0%,100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--od-accent-a) 12%, transparent) } 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--od-accent-a) 6%, transparent) } } .odoso .od-eyebrow .od-dot{ animation: od-pulse-dot 2.6s ease-in-out infinite } /* 3) Buttons: Gradient-Shift on hover */ .odoso .od-btn-primary{ background-size: 180% 180%; background-position: 0% 0%; transition: transform .15s, box-shadow .25s, background-position .6s ease; } .odoso .od-btn-primary:hover{ background-position: 100% 100% } /* 4) Showcase-Karte: subtiler Float */ @keyframes od-float{ 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(0,-6px,0) } } .odoso .od-hero .od-showcase{ animation: od-float 7s ease-in-out infinite } /* 5) Step-Cards: Icon spielt beim Hover an */ .odoso .od-step .od-ico{ transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s } .odoso .od-step:hover .od-ico{ transform: rotate(-6deg) scale(1.08) } /* 6) Feature-Stat-Zahl shimmert dezent */ @keyframes od-shimmer{ 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } } .odoso .od-feature .od-stat b{ background: linear-gradient(90deg, var(--od-accent-a), var(--od-accent-c), var(--od-accent-a)); background-size: 200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: od-shimmer 8s linear infinite; } /* 7) Tour: Pane-Wechsel weicher */ .odoso .od-tour-pane{ transition: opacity .35s ease } .odoso .od-tour-pane:not(.is-active){ opacity:0 } .odoso .od-tour-pane.is-active{ opacity:1; animation: od-fade-up .5s cubic-bezier(.2,.7,.2,1) both } @keyframes od-fade-up{ from{ opacity:0; transform: translate3d(0,8px,0) } to { opacity:1; transform:none } } /* 8) Pricing: Pro-Card hebt sich on hover sanft an */ .odoso .od-price{ transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s } .odoso .od-price:hover{ transform: translateY(-3px); box-shadow: var(--od-shadow-m) } .odoso .od-price.pro:hover{ box-shadow: var(--od-shadow-l) } /* 9) CTA-Band: animierter Glanz, der gemächlich übers Band wandert */ .odoso .od-cta-band::before{ content:""; position:absolute; inset:-50% -20%; background: radial-gradient(35% 50% at 50% 50%, rgba(255,255,255,.18), transparent 70%); animation: od-cta-sweep 14s linear infinite; pointer-events:none; } @keyframes od-cta-sweep{ 0% { transform: translate3d(-30%,-10%,0) } 50% { transform: translate3d(30%,10%,0) } 100% { transform: translate3d(-30%,-10%,0) } } .odoso .od-cta-band > *{ position:relative; z-index:1 } /* 10) Reduced motion: alle Endlos-Animationen still */ @media (prefers-reduced-motion: reduce){ .odoso .od-eyebrow .od-dot, .odoso .od-hero .od-showcase, .odoso .od-feature .od-stat b, .odoso .od-cta-band::before { animation:none !important } .odoso [data-od-reveal]{ opacity:1 !important; transform:none !important; transition:none !important } } /* ───────────────────────────────────────────────────────── NEVE / GUTENBERG LAYOUT FIXES (volle Breite + Spacing) body.odoso-front wird via functions.php auf der Startseite gesetzt. Wir brechen Neves Content-Container auf und stellen sicher, dass Sektions-Paddings nicht überschrieben werden. ───────────────────────────────────────────────────────── */ body.odoso-front .nv-single-post-wrap > .entry-header, body.odoso-front .neve-main > .entry-header, body.odoso-front article > .entry-header, body.odoso-front .single-page-container > header, body.odoso-front .entry-title, body.odoso-front .nv-page-title-wrap{ display:none !important; } /* Container: NUR die Page-Content-Container aufbrechen — Header & Footer bleiben unangetastet! */ body.odoso-front .neve-main .container, body.odoso-front .single-page-container, body.odoso-front .single-page-container > .row, body.odoso-front .nv-single-post-wrap, body.odoso-front .nv-content-wrap, body.odoso-front .entry-content, body.odoso-front .wp-block-post-content, body.odoso-front article.post, body.odoso-front article.page{ max-width:100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; } /* Padding am main-Element entfernen (Neve setzt das) */ body.odoso-front #content, body.odoso-front .neve-main{ padding-top:0 !important; padding-bottom:0 !important; } /* Gutenberg/Neve setzen `> * + * { margin-top: 1.5em }` auf entry-content. Das erzeugt unkontrollierte Lücken zwischen unseren Sektionen. */ body.odoso-front .entry-content > *, body.odoso-front .wp-block-post-content > *, body.odoso-front .single-page-container > *{ margin-top:0 !important; margin-bottom:0 !important; } /* Sidebar auf der Startseite ausblenden, falls aktiv */ body.odoso-front .nv-sidebar-wrap, body.odoso-front aside.nv-sidebar-wrap{ display:none !important; } body.odoso-front .neve-main{ flex:0 0 100% !important; max-width:100% !important } /* ─── Garantierte Sektionsabstände (unabhängig von Theme-Reset) ─── */ .odoso .od-hero{ padding:160px 0 128px !important } /* Trust-Bar: kontrastiert vom Hero und Steps mit klarem Spacing davor und danach */ .odoso .od-trust{ margin: 80px 0 !important; padding:36px 0 !important } @media (max-width:880px){ .odoso .od-trust{ margin:48px 0 !important; padding:28px 0 !important } } .odoso .od-section{ padding:160px 0 !important } .odoso .od-tour{ padding:160px 0 !important } .odoso .od-cta{ padding:96px 0 200px !important } .odoso #beta{ padding:160px 0 240px !important } @media (max-width:880px){ .odoso .od-hero{ padding:112px 0 80px !important } .odoso .od-section, .odoso .od-tour{ padding:104px 0 !important } .odoso .od-cta{ padding:64px 0 128px !important } .odoso #beta{ padding:104px 0 140px !important } } /* Sichtbare Atemzone unter dem letzten Block (vor Theme-Footer) */ .odoso + *{ margin-top:0 } body.odoso-front .neve-main > *:last-child{ margin-bottom:0 !important } /* Sicher gehen, dass nichts horizontales scrollt */ body.odoso-front{ overflow-x:hidden } /* ─── Responsive hardening ─── */ @media (max-width:980px){ .odoso h1, .odoso .od-hero h1{ font-size:clamp(26px, 7.1vw, 34px); line-height:1.14; letter-spacing:-.012em; overflow-wrap:normal; word-break:normal; hyphens:none; } .odoso .od-hero h1 br{display:none} .odoso .od-hero h1 .od-accent{display:inline} .odoso .od-hero-grid{gap:36px} .odoso .od-hero-copy{width:100%;max-width:440px} .odoso .od-beta-tag{display:inline-flex;margin-left:6px;transform:translateY(-2px);white-space:nowrap} .odoso .od-hero-cta{align-items:stretch} .odoso .od-hero-cta .od-btn{width:100%;justify-content:center} .odoso .od-hero-meta{gap:12px;justify-content:flex-start;text-align:left} .odoso .od-showcase{padding:10px;border-radius:20px} .odoso .od-showcase img{border-radius:14px} .odoso .od-steps, .odoso .od-features, .odoso .od-pricing{gap:16px} .odoso .od-step, .odoso .od-feature, .odoso .od-price{padding:24px;border-radius:18px} .odoso .od-tabs{display:grid;grid-template-columns:1fr;gap:8px} .odoso .od-tab{min-width:0;width:100%;justify-content:flex-start} .odoso .od-tour-grid{min-height:0} .odoso .od-tour-side{border-right:0;border-bottom:1px solid var(--od-line);padding:20px} .odoso .od-tour-stage{padding:18px} .odoso .od-tour-hint{display:none} .odoso .od-price-tag{position:static;align-self:flex-start} .odoso .od-price .od-amount b{font-size:44px} .odoso #beta .od-wrap{ max-width:none; padding-left:0; padding-right:0; } .odoso #beta{padding-left:0 !important;padding-right:0 !important} .odoso .od-cta-band{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; width:100%; padding:34px 0; border-radius:22px; gap:28px; } .odoso .od-cta-band > div:first-child{ flex:0 0 auto !important; min-width:0 !important; width:100% !important; max-width:none !important; } .odoso .od-cta-band h2, .odoso .od-cta-band p{max-width:none} .odoso .od-waitlist{ flex:0 0 auto; align-self:stretch; width:100%; max-width:100%; margin:0; padding:20px 12px; border-left:0; border-right:0; border-radius:0; } .odoso .od-wl-input{min-height:54px;font-size:16px} } @media (max-width:680px){ .odoso h1, .odoso .od-hero h1{font-size:clamp(25px, 7.05vw, 30px)} } @media (max-width:380px){ .odoso h1, .odoso .od-hero h1{font-size:25px;line-height:1.16} .odoso .od-btn{padding-left:16px;padding-right:16px;font-size:14px} .odoso .od-step, .odoso .od-feature, .odoso .od-price{padding:20px} .odoso #beta .od-wrap{padding-left:0;padding-right:0} .odoso .od-cta-band{padding:28px 0} .odoso .od-waitlist{padding:18px 10px} } /* Final mobile/touch overrides: hit iOS Safari even when viewport breakpoints are unreliable. */ @media (max-width:980px), (hover:none) and (pointer:coarse){ .odoso .od-hero h1{ display:block !important; max-width:100% !important; overflow:visible !important; text-wrap:normal !important; white-space:normal !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; font-size:clamp(24px, 6.2vw, 28px) !important; line-height:1.18 !important; letter-spacing:-.006em !important; } .odoso .od-hero h1 br{display:none !important} .odoso .od-hero h1 .od-accent{display:inline !important} .odoso .od-hero .od-wrap{padding-left:20px !important;padding-right:20px !important} .odoso .od-hero-copy{ width:100% !important; max-width:100% !important; min-width:0 !important; } .odoso .od-beta-tag{ display:inline-flex !important; margin-left:6px !important; vertical-align:middle !important; white-space:nowrap !important; transform:translateY(-1px) !important; } .odoso #beta .od-wrap{ width:100% !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; } .odoso #beta .od-cta-band{ width:100% !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; align-items:stretch !important; } .odoso #beta .od-waitlist{ flex:0 0 auto !important; align-self:stretch !important; width:100% !important; max-width:none !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; padding-left:12px !important; padding-right:12px !important; border-left:0 !important; border-right:0 !important; border-radius:0 !important; } }