/* * GEOhybrid.de — Werbe-Landing trial.php * Dark-Theme im Stil der Marketing-Site geohybrid.de: * BG #0a0a0a, Text #ffffff, Akzent #0cf57e (Neon-Grün) * Scope via .landing-body auf dem , damit das Brutal-App-CSS unangetastet bleibt. */ .landing-body { background: #0a0a0a; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .landing-body main { display: block; } .landing-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ----- Header ----- */ .landing-header { padding: 24px 0; border-bottom: 1px solid #1a1a1a; background: #0a0a0a; } .landing-header .landing-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .landing-header__logo-link { display: inline-flex; align-items: center; text-decoration: none; } .landing-header__logo { height: 28px; width: auto; display: block; } .landing-lang { display: flex; gap: 4px; font-size: 13px; } .landing-lang__link { color: #999999; text-decoration: none; padding: 6px 12px; transition: color 0.15s; } .landing-lang__link:hover, .landing-lang__link:focus { color: #0cf57e; } .landing-lang__link--active { color: #ffffff; font-weight: 600; } /* ----- Hero ----- */ .landing-hero { padding: 112px 0 88px; text-align: center; background: #0a0a0a; position: relative; } .landing-hero::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 80px; height: 2px; background: #0cf57e; transform: translateX(-50%); } .landing-hero__inner { max-width: 860px; } .landing-eyebrow { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #0cf57e; margin: 0 0 28px; font-weight: 700; } .landing-hero__headline { font-size: clamp(2rem, 4.8vw, 3.6rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: #ffffff; margin: 0 0 28px; } .landing-hero__headline .accent { color: #0cf57e; } .landing-hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.6; color: #c8c8c8; max-width: 720px; margin: 0 auto 36px; } /* ----- CTA-Buttons ----- */ .landing-cta { display: inline-block; padding: 16px 40px; font-size: 17px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s, color 0.15s; font-family: inherit; letter-spacing: 0.01em; } .landing-cta--primary { background: #0cf57e; color: #0a0a0a; border-color: #0cf57e; } .landing-cta--primary:hover, .landing-cta--primary:focus { background: #1fff92; color: #0a0a0a; border-color: #1fff92; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(12, 245, 126, 0.35); outline: none; } .landing-cta--primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(12, 245, 126, 0.25); } /* ----- Benefits ----- */ .landing-benefits { padding: 96px 0; background: #0a0a0a; } .landing-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .landing-benefit { padding: 36px 28px; background: #141414; border: 1px solid #242424; transition: border-color 0.2s, transform 0.15s, background 0.2s; } .landing-benefit:hover { border-color: #0cf57e; background: #181818; transform: translateY(-2px); } .landing-benefit__num { font-size: 13px; letter-spacing: 0.2em; color: #0cf57e; font-weight: 700; margin-bottom: 18px; } .landing-benefit__title { font-size: 1.35rem; font-weight: 700; line-height: 1.3; color: #ffffff; margin: 0 0 14px; } .landing-benefit__body { font-size: 1rem; line-height: 1.65; color: #b8b8b8; margin: 0; } /* ----- Trial-Form INTEGRIERT IM HERO (seit 2026-05-04 Abend) ----- */ /* Der Form-Wrap ersetzt den frueheren "Jetzt gratis testen"-Button im Hero — damit der User die E-Mail-Eingabe sofort ohne Scroll-Reise sieht. */ .landing-hero__form-wrap { max-width: 640px; margin: 0 auto; text-align: left; padding: 32px 28px 28px; background: #111111; border: 1px solid #242424; } .landing-hero__form-title { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.25; color: #ffffff; margin: 0 0 10px; text-align: center; } .landing-hero__form-sub { font-size: 0.95rem; color: #b8b8b8; margin: 0 0 26px; text-align: center; line-height: 1.5; } /* Form innerhalb des Hero-Wraps: kein doppelter Border/Background mehr */ .landing-hero__form-wrap .landing-form { background: transparent; padding: 0; border: none; } .landing-hero__form-wrap .landing-trust { text-align: center; margin-top: 24px; } /* ----- Trial-Form Section (LEGACY — wird seit 2026-05-04 Abend nicht mehr genutzt, da Form jetzt im Hero integriert ist; CSS bleibt fuer eventuelle Zweitnutzung) ----- */ .landing-form-section { padding: 96px 0 120px; background: #111111; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; scroll-margin-top: 40px; } .landing-form-section__inner { max-width: 720px; text-align: center; } .landing-form-section__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; color: #ffffff; margin: 0 0 14px; } .landing-form-section__sub { font-size: 1.05rem; color: #b8b8b8; margin: 0 0 40px; } .landing-form { background: #0a0a0a; padding: 36px 32px; border: 1px solid #242424; text-align: left; } .landing-form__label { display: block; font-size: 13px; font-weight: 600; color: #c8c8c8; margin-bottom: 12px; letter-spacing: 0.05em; text-transform: uppercase; } .landing-form__row { display: flex; gap: 12px; align-items: stretch; } .landing-form__input { flex: 1; padding: 15px 16px; font-size: 16px; border: 2px solid #333333; background: #0a0a0a; color: #ffffff; font-family: inherit; transition: border-color 0.15s, background 0.15s; min-width: 0; } .landing-form__input::placeholder { color: #666666; } .landing-form__input:focus { outline: none; border-color: #0cf57e; background: #0f0f0f; } .landing-form__submit { white-space: nowrap; } .landing-form__hint { font-size: 13px; color: #888888; margin: 18px 0 0; line-height: 1.55; } .landing-trust { margin-top: 36px; font-size: 14px; color: #888888; font-style: italic; } /* ----- Confirmation Page (password-requested.php) ----- */ .landing-confirmation { padding: 112px 0 128px; background: #0a0a0a; text-align: center; position: relative; } .landing-confirmation::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 80px; height: 2px; background: #0cf57e; transform: translateX(-50%); } .landing-confirmation__inner { max-width: 680px; } .landing-confirmation__icon { margin: 0 auto 32px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 2px solid #0cf57e; border-radius: 50%; background: rgba(12, 245, 126, 0.08); box-shadow: 0 0 0 6px rgba(12, 245, 126, 0.06); } .landing-confirmation__icon svg { width: 40px; height: 40px; display: block; } .landing-confirmation__heading { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; font-weight: 800; color: #ffffff; margin: 0 0 24px; letter-spacing: -0.01em; } .landing-confirmation__message { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; color: #dcdcdc; margin: 0 auto 20px; max-width: 580px; } .landing-confirmation__note { font-size: 0.95rem; line-height: 1.6; color: #888888; margin: 0 auto 40px; max-width: 560px; } .landing-confirmation__actions { margin-bottom: 32px; } .landing-confirmation__secondary { font-size: 14px; color: #888888; margin: 0; } .landing-confirmation__link { color: #0cf57e; text-decoration: none; border-bottom: 1px solid rgba(12, 245, 126, 0.35); padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; } .landing-confirmation__link:hover, .landing-confirmation__link:focus { color: #1fff92; border-color: #1fff92; outline: none; } /* ----- Flash Messages ----- */ .landing-body .flash { max-width: 1100px; margin: 16px auto; padding: 14px 20px; border: 1px solid; font-size: 15px; } .landing-body .flash--error { background: #1a0a0a; border-color: #5a1a1a; color: #ff8a8a; } .landing-body .flash--success { background: #0a1a10; border-color: #0cf57e; color: #0cf57e; } /* ----- Footer-Override (Dark) ----- */ .landing-body .footer { padding: 48px 0 64px; background: #0a0a0a; border-top: 1px solid #1a1a1a; color: #888888; font-size: 13px; line-height: 1.7; text-align: center; } .landing-body .footer a { color: #cccccc; transition: color 0.15s; } .landing-body .footer a:hover, .landing-body .footer a:focus { color: #0cf57e; } .landing-body .footer__credits { max-width: 860px; margin: 0 auto 18px; } /* ----- Responsive ----- */ @media (max-width: 820px) { .landing-benefits__grid { grid-template-columns: 1fr; gap: 20px; } .landing-hero { padding: 72px 0 56px; } .landing-benefits { padding: 64px 0; } .landing-form-section { padding: 64px 0 80px; } .landing-form__row { flex-direction: column; gap: 12px; } .landing-form__submit { width: 100%; } } @media (max-width: 520px) { .landing-container { padding: 0 20px; } .landing-cta { padding: 14px 28px; font-size: 16px; width: 100%; text-align: center; } .landing-benefit { padding: 28px 22px; } .landing-form { padding: 28px 22px; } .landing-header__logo { height: 24px; } }