/* ============================================================ landing-apple.css — Apple.com Light Theme Scope: .landing-apple (set on ) Vollstaendige Ueberschreibung des Dark-Themes ============================================================ */ /* ── Reset Dark Variables ────────────────────────────────── */ .landing-apple { --bg-black: #ffffff; --bg-navy: #f5f5f7; --electric-blue: #007aff; --gold-light: #0071e3; --gold-dark: #007aff; --text-white: #1d1d1f; --text-sub: #6e6e73; --border-glow: rgba(0,0,0,0.08); } /* ── Base ────────────────────────────────────────────────── */ .landing-apple body { background: #ffffff; color: #1d1d1f; font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } /* ── Typography ──────────────────────────────────────────── */ .landing-apple h1, .landing-apple h2, .landing-apple h3, .landing-apple h4 { color: #1d1d1f; font-weight: 700; letter-spacing: -0.02em; } .landing-apple p, .landing-apple span, .landing-apple li { color: #1d1d1f; } .landing-apple .section-sub, .landing-apple .page-sub { color: #374151; font-size: 17px; line-height: 1.6; } .landing-apple .label { color: #374151; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .landing-apple .section-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; color: #1d1d1f; line-height: 1.1; letter-spacing: -0.03em; } /* ── Navigation ──────────────────────────────────────────── */ .landing-apple .nav-header { background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: none; } .landing-apple .nav-link { color: #1d1d1f; font-size: 14px; font-weight: 400; } .landing-apple .nav-link:hover { color: #007aff; } .landing-apple .btn-outline { color: #007aff; border-color: #007aff; background: transparent; border-radius: 980px; font-size: 13px; } .landing-apple .btn-outline:hover { background: #007aff; color: #ffffff; } /* ── Logo ────────────────────────────────────────────────── */ .landing-apple .nav-logo-dark { display: none !important; } .landing-apple .nav-logo-light { display: block !important; } /* ── Canvas & Overlays ausblenden ────────────────────────── */ .landing-apple #hero-canvas, .landing-apple #about-canvas, .landing-apple #footer-canvas { display: none !important; } .landing-apple .hero-overlay { display: none !important; } .landing-apple .footer-canvas-wrap { display: none !important; } /* ── Hero ────────────────────────────────────────────────── */ .landing-apple .hero { background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 60%); min-height: 90vh; display: flex; align-items: center; text-align: center; padding-top: 80px; } .landing-apple .hero-content { max-width: 800px; margin: 0 auto; padding: 60px 24px; } .landing-apple .hero-badge { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); color: #1d1d1f; border-radius: 980px; padding: 6px 16px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; } .landing-apple .pulse-dot { background: #007aff; box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4); } .landing-apple .hero-title { color: #1d1d1f; font-size: clamp(48px, 7vw, 80px); font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 20px; } .landing-apple .hero-subtitle { color: #374151; font-size: clamp(17px, 2.5vw, 21px); line-height: 1.5; max-width: 600px; margin: 0 auto 36px; } .landing-apple .hero-subtitle strong { color: #1d1d1f; font-weight: 600; } .landing-apple .gradient-text { background: linear-gradient(135deg, #007aff 0%, #34aadc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Hero CTA Buttons ────────────────────────────────────── */ .landing-apple .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; } .landing-apple .btn-gold { background: #0071e3; color: #ffffff !important; border-color: #0071e3; border-radius: 980px; font-size: 15px; font-weight: 500; padding: 12px 24px; transition: background 0.2s; } .landing-apple .btn-gold:hover { background: #0077ed; border-color: #0077ed; } .landing-apple .btn-gold i, .landing-apple .btn-gold svg { color: #ffffff !important; } /* ── Hero Stats ──────────────────────────────────────────── */ .landing-apple .hero-stats { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; padding: 20px 32px; display: inline-flex; gap: 0; max-width: 100%; } .landing-apple .stat-value { display: flex; align-items: baseline; gap: 2px; } .landing-apple .stat-num, .landing-apple .stat-suf { background: linear-gradient(135deg, #007aff, #5856d6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; } .landing-apple .stat-label { color: #374151; font-size: 12px; } .landing-apple .stat-divider { background: rgba(0, 0, 0, 0.1); width: 1px; margin: 0 24px; } .landing-apple .hero-scroll-hint { color: #374151; } /* ── Trust Bar ───────────────────────────────────────────── */ .landing-apple .trust-bar { background: #f5f5f7; border-top: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 20px 0; } .landing-apple .trust-item { color: #1d1d1f; font-size: 13px; font-weight: 500; } .landing-apple .trust-item i { color: #007aff; } .landing-apple .trust-label { color: #374151; } /* ── Sections ────────────────────────────────────────────── */ .landing-apple .section { background: #ffffff; padding: 96px 0; } .landing-apple .section:nth-child(even) { background: #f5f5f7; } .landing-apple .about-section { background: #f5f5f7; } .landing-apple .cta-section { background: #ffffff; } .landing-apple .contact-section { background: #f5f5f7; } .landing-apple .section-header { text-align: center; margin-bottom: 64px; } /* ── Service Cards ───────────────────────────────────────── */ .landing-apple .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .landing-apple .service-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 20px; padding: 28px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05); transition: box-shadow 0.2s, transform 0.2s; } .landing-apple .service-card:hover { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); transform: translateY(-2px); border-color: rgba(0, 122, 255, 0.15); } .landing-apple .service-card h3 { color: #1d1d1f; font-size: 18px; font-weight: 600; margin: 16px 0 8px; } .landing-apple .service-card p { color: #374151; font-size: 14px; line-height: 1.6; } .landing-apple .service-features li { color: #1d1d1f; font-size: 13px; } .landing-apple .service-features li i { color: #007aff; } /* Service icons */ .landing-apple .service-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .landing-apple .service-icon.blue { background: rgba(0,122,255,0.10); color: #007aff; } .landing-apple .service-icon.indigo { background: rgba(88,86,214,0.10); color: #5856d6; } .landing-apple .service-icon.gold { background: rgba(255,149,0,0.10); color: #ff9500; } .landing-apple .service-icon.red { background: rgba(215,0,21,0.10); color: #d70015; } .landing-apple .service-icon.lavender{ background: rgba(175,82,222,0.10); color: #af52de; } .landing-apple .service-icon.white { background: rgba(0,0,0,0.06); color: #1d1d1f; } /* Featured Service Card */ .landing-apple .service-card--featured { background: linear-gradient(145deg, #0071e3 0%, #0055b3 100%); border-color: transparent; box-shadow: 0 8px 32px rgba(0,113,227,0.25); } .landing-apple .service-card--featured:hover { box-shadow: 0 16px 48px rgba(0,113,227,0.35); border-color: transparent; } .landing-apple .service-card--featured h3, .landing-apple .service-card--featured p, .landing-apple .service-card--featured li { color: #ffffff; } .landing-apple .service-card--featured .service-features li i { color: rgba(255,255,255,0.85); } .landing-apple .service-card--featured .service-icon.white { background: rgba(255,255,255,0.20); color: #ffffff; } .landing-apple .service-featured-badge { background: rgba(255,255,255,0.20); color: #ffffff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 980px; display: inline-block; margin-bottom: 12px; } /* ── Process Steps ───────────────────────────────────────── */ .landing-apple .process-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: flex-start; gap: 0; } .landing-apple .step-number { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #0071e3 0%, #34aadc 100%); color: #ffffff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; } .landing-apple .step-content h3 { color: #1d1d1f; font-size: 17px; font-weight: 600; margin-bottom: 8px; } .landing-apple .step-content p { color: #374151; font-size: 14px; line-height: 1.6; } .landing-apple .process-connector { width: 48px; height: 2px; background: rgba(0, 0, 0, 0.1); margin-top: 26px; flex-shrink: 0; } /* ── About ───────────────────────────────────────────────── */ /* Die About-Card BLEIBT bewusst dunkel mit Sternenhimmel-Effekt (dramatisches Markenelement). Statt Hintergrund hell zu zwingen sorgen wir hier dafür, dass der Text auf dem dunklen Card weiß bleibt — auch im Apple-Light-Theme. Verhindert das "schwarz auf schwarz"-Lesbarkeitsproblem. */ .landing-apple .about-card { /* keine background-Überschreibung — dunkler Look bleibt erhalten */ border: 1px solid rgba(0,0,0,0.08); border-radius: 24px; overflow: hidden; } .landing-apple .about-avatar { background: linear-gradient(135deg, #0071e3 0%, #34aadc 100%); color: #ffffff; font-weight: 700; border-radius: 50%; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 24px; } /* Hell auf dunkel — anstelle der Apple-Default-Schwarz-Texte */ .landing-apple .about-card h3, .landing-apple .about-card .about-info h3 { color: #ffffff !important; font-size: 20px; font-weight: 700; } .landing-apple .about-card p, .landing-apple .about-card .about-info p { color: rgba(255,255,255,.75) !important; } .landing-apple .about-card .about-highlight { color: #ffffff !important; display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 15px; } .landing-apple .about-card .about-highlight i { color: #f5cc4a; /* Gold statt Apple-Blau — Kontrast auf dunkel */ } /* Badges innerhalb der dunklen Card mit dunkler Hintergrundfläche damit sie nicht im Apple-Mode mit hellen Farben rauskommen */ .landing-apple .about-card .badge-blue { background: rgba(94,170,255,.15); color: #5eaaff; } .landing-apple .about-card .badge-violet { background: rgba(167,139,250,.15); color: #a78bfa; } .landing-apple .about-card .badge-gold, .landing-apple .about-card .badge-orange { background: rgba(245,204,74,.15); color: #f5cc4a; } .landing-apple .badge-blue { background: rgba(0,122,255,0.10); color: #007aff; border: none; } .landing-apple .badge-violet { background: rgba(88,86,214,0.10); color: #5856d6; border: none; } .landing-apple .badge-gold { background: rgba(255,149,0,0.10); color: #b36c00; border: none; } /* ── Pricing Cards ───────────────────────────────────────── */ .landing-apple .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; padding-top: 20px; /* Platz für den herausragenden Badge */ } .landing-apple .pricing-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; padding: 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.05); position: relative; } .landing-apple .pricing-card h3 { color: #1d1d1f; font-size: 20px; font-weight: 700; margin-bottom: 8px; } .landing-apple .pricing-card p { color: #374151; font-size: 14px; } .landing-apple .pricing-price span { color: #1d1d1f; font-size: 28px; font-weight: 700; } .landing-apple .pricing-price small { color: #374151; font-size: 13px; } .landing-apple .pricing-features { margin: 20px 0; list-style: none; padding: 0; } .landing-apple .pricing-features li { color: #1d1d1f; font-size: 14px; padding: 6px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); } .landing-apple .pricing-features li:last-child { border-bottom: none; } .landing-apple .pricing-features li i.fa-check { color: #007aff; width: 14px; flex-shrink: 0; } .landing-apple .pricing-features li.inactive { color: #aeaeb2; } .landing-apple .pricing-features li.inactive i { color: #c7c7cc; } .landing-apple .pricing-card--featured { background: linear-gradient(145deg, #0071e3 0%, #0055b3 100%); border-color: transparent; box-shadow: 0 12px 40px rgba(0,113,227,0.30); transform: scale(1.03); overflow: visible; } .landing-apple .pricing-card--featured h3, .landing-apple .pricing-card--featured p, .landing-apple .pricing-card--featured li, .landing-apple .pricing-card--featured .pricing-price span, .landing-apple .pricing-card--featured .pricing-price small { color: #ffffff; } .landing-apple .pricing-card--featured .pricing-features li { border-bottom-color: rgba(255,255,255,0.1); } .landing-apple .pricing-card--featured .pricing-features li i.fa-check { color: rgba(255,255,255,0.9); } .landing-apple .pricing-card--featured .btn-gold { background: #ffffff; color: #0071e3 !important; border-color: #ffffff; } .landing-apple .pricing-card--featured .btn-gold:hover { background: rgba(255,255,255,0.9); } .landing-apple .pricing-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #ffffff; color: #0071e3; font-size: 10px; font-weight: 700; padding: 4px 14px; border-radius: 980px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,113,227,0.18); } /* ── Contact Section ─────────────────────────────────────── */ .landing-apple .contact-content h2 { color: #1d1d1f; } .landing-apple .contact-item { color: #1d1d1f; display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; } .landing-apple .contact-item i { color: #007aff; background: rgba(0,122,255,0.10); width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; } .landing-apple .contact-item strong { color: #1d1d1f; font-weight: 600; } .landing-apple .contact-item p { color: #374151; font-size: 14px; margin: 0; } /* ── Contact Form Card ───────────────────────────────────── */ .landing-apple .card-gold { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; padding: 36px; box-shadow: 0 4px 32px rgba(0,0,0,0.08); } .landing-apple .contact-form-title { color: #1d1d1f; font-size: 22px; font-weight: 700; margin-bottom: 24px; } .landing-apple .form-label { color: #1d1d1f; font-size: 13px; font-weight: 500; } .landing-apple .form-control { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.10); border-radius: 10px; color: #1d1d1f; font-size: 15px; padding: 10px 14px; width: 100%; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .landing-apple .form-control:focus { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0,122,255,0.12); background: #ffffff; outline: none; } .landing-apple .form-control::placeholder { color: #86868b; } .landing-apple .form-check label { color: #374151; font-size: 13px; } .landing-apple .form-check label a, .landing-apple .link { color: #007aff; } /* ── Footer ──────────────────────────────────────────────── */ .landing-apple .footer { background: #1a1a2e; border-top: 1px solid rgba(255,255,255,0.08); color: #e8e8ed; } .landing-apple .footer-tagline { color: #f5f5f7; font-weight: 600; } .landing-apple .footer-links-group h4 { color: #f5f5f7; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .landing-apple .footer-links-group a { color: #aeaeb2; font-size: 13px; text-decoration: none; display: block; padding: 3px 0; } .landing-apple .footer-links-group a:hover { color: #ffffff; } .landing-apple .footer-contact-group h4 { color: #f5f5f7; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .landing-apple .footer-contact-item { color: #aeaeb2; font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 3px 0; } .landing-apple .footer-contact-item:hover { color: #ffffff; } .landing-apple .footer-contact-item i { color: #60a5fa; } .landing-apple .footer-bottom { color: #aeaeb2; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 0; } .landing-apple .footer-social a { color: #aeaeb2; font-size: 16px; } .landing-apple .footer-social a:hover { color: #ffffff; } .landing-apple .divider { border-color: rgba(255,255,255,0.08); } /* ── Footer logo ─────────────────────────────────────────── */ .landing-apple .footer-brand img { filter: brightness(0) invert(1); opacity: 0.9; } /* ── Animate ─────────────────────────────────────────────── */ .landing-apple .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .landing-apple .reveal.visible { opacity: 1; transform: none; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 900px) { .landing-apple .services-grid { grid-template-columns: 1fr 1fr; } .landing-apple .pricing-grid { grid-template-columns: 1fr; } .landing-apple .pricing-card--featured { transform: none; } .landing-apple .process-steps { grid-template-columns: 1fr; } .landing-apple .process-connector { width: 2px; height: 32px; margin: 0 0 0 25px; } } @media (max-width: 600px) { .landing-apple .services-grid { grid-template-columns: 1fr; } .landing-apple .hero-title { font-size: 40px; } .landing-apple .hero-stats { flex-direction: column; gap: 12px; } .landing-apple .stat-divider { width: 100%; height: 1px; margin: 4px 0; } }