/* My Car Agent – statische Website (Marketing + Rechtsseiten). Marken-Look: Primärrot #E4252B, helles Theme (wie die öffentliche Landing). */ :root { --primary: #E4252B; --primary-dark: #c11d22; --fg: #17181c; --muted: #5a5f68; --faint: #9aa0a8; --bg: #ffffff; --card: #f7f7f8; --border: #e8e9ec; --radius: 16px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Seiten-Hintergrund liegt auf , der bleibt transparent — so können die fixierten Glow-Orbs (z-index -1, siehe unten) ZWISCHEN Hintergrund und Inhalt leuchten. */ html { scroll-behavior: smooth; background: var(--bg); } body { background: transparent; color: var(--fg); font-family: -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .container { max-width: 1080px; margin: 0 auto; padding: 0 22px; } .container.narrow { max-width: 780px; } /* ── Header ─────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .inner { display: flex; align-items: center; gap: 18px; height: 62px; } .brand { display: flex; align-items: center; gap: 10px; } .brand:hover { text-decoration: none; } /* Breites Marken-Logo (logo_transparent.png, 739×401, mit transparentem Innenrand) — Höhe fixieren, Breite automatisch, sonst wird es verzerrt. */ .brand img { height: 58px; width: auto; } .brand .brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.3px; color: var(--fg); white-space: nowrap; } .brand .brand-name em { color: var(--primary); font-style: normal; } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; } .site-nav a { color: var(--muted); font-size: 14.5px; font-weight: 600; } .site-nav a:hover { color: var(--fg); text-decoration: none; } .site-nav a.active { color: var(--fg); } /* Anmelde-Button in der Kopfzeile: führt auf die App-Domain (mycaragent.app). Eigene Farbregel, weil `.site-nav a` sonst das Weiß des .btn überschreibt. Bleibt – anders als .nav-link – auch auf schmalen Displays sichtbar. */ .site-nav a.nav-login { color: #fff; padding: 9px 20px; } .site-nav a.nav-login:hover { color: #fff; } .btn { display: inline-block; background: var(--primary); color: #fff; font-weight: 700; font-size: 14.5px; padding: 10px 22px; border-radius: 999px; white-space: nowrap; transition: background .15s ease, transform .1s ease; } .btn:hover { background: var(--primary-dark); text-decoration: none; } .btn:active { transform: scale(.97); } .btn.big { font-size: 16px; padding: 14px 34px; } .btn.ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--border); } .btn.ghost:hover { background: var(--card); } /* ── Hero ───────────────────────────────────────────────────────── */ .hero { text-align: center; padding: 72px 0 56px; } .hero .logo { width: 116px; height: 116px; border-radius: 26px; box-shadow: 0 10px 30px rgba(228, 37, 43, .18); } .hero .badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; background: rgba(228, 37, 43, .08); border: 1px solid rgba(228, 37, 43, .25); color: var(--primary); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; } .hero h1 { margin: 28px auto 14px; max-width: 780px; font-size: clamp(30px, 5vw, 48px); line-height: 1.12; letter-spacing: -.5px; } .hero h1 em { color: var(--primary); font-style: normal; } .hero p.lead { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: clamp(15px, 2.2vw, 18px); } .hero .actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero .sub { margin-top: 14px; color: var(--faint); font-size: 12.5px; } /* ── Sektionen ──────────────────────────────────────────────────── */ .section { padding: 56px 0; } /* Bewusst KEIN eigener Hintergrund je Sektion — die Seite hat wie die Flutter-Landing EINEN durchgehenden Hintergrund mit Ambient-Glow; Bänder erzeugten harte Kanten. */ .section.alt { background: transparent; } .section h2 { text-align: center; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.4px; margin-bottom: 10px; } .section .section-sub { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 38px; font-size: 15.5px; } .grid { display: grid; gap: 18px; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .grid.cols-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; /* Hover-Lift wie _HoverLift in der App: -6 px + roter Schatten. */ transition: transform .2s ease-out, box-shadow .2s ease-out; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(228, 37, 43, .18); } .card .icon { font-size: 26px; } .card h3 { margin: 10px 0 6px; font-size: 17px; } .card p { color: var(--muted); font-size: 14px; } /* ── Preise ─────────────────────────────────────────────────────── */ .price-card { position: relative; text-align: left; display: flex; flex-direction: column; } .price-card .tier { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .price-card.featured { border: 2px solid var(--primary); box-shadow: 0 14px 34px rgba(228, 37, 43, .12); } .price-card.featured .tier { color: var(--primary); } .price-card .badge { position: absolute; top: -12px; right: 16px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px; } .price-card .price { margin: 10px 0 2px; font-size: 32px; font-weight: 800; } .price-card .price span { font-size: 14px; font-weight: 600; color: var(--muted); } .price-card .price-note { color: var(--faint); font-size: 12px; margin-bottom: 14px; } .price-card ul { list-style: none; margin: 0 0 18px; flex: 1; } .price-card li { padding: 5px 0 5px 24px; position: relative; font-size: 14px; color: var(--fg); } .price-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--primary); font-weight: 800; } .price-card li.off { color: var(--faint); } .price-card li.off::before { content: "–"; color: var(--faint); } .price-card .btn { text-align: center; } /* ── CTA-Band ───────────────────────────────────────────────────── */ .cta-band { background: var(--primary); color: #fff; text-align: center; padding: 56px 22px; } .cta-band h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 10px; } .cta-band p { opacity: .92; max-width: 560px; margin: 0 auto 24px; } .cta-band .btn { background: #fff; color: var(--primary); } .cta-band .btn:hover { background: #f3f3f3; } /* ── Rechtsseiten / Textseiten ──────────────────────────────────── */ .page { padding: 48px 0 64px; } .page h1 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 8px; letter-spacing: -.4px; } .page .doc-meta { color: var(--faint); font-size: 13px; margin-bottom: 30px; } .page h2 { font-size: 19px; margin: 30px 0 10px; } .page h3 { font-size: 15.5px; margin: 18px 0 8px; } .page p { margin-bottom: 12px; font-size: 14.5px; color: #2c2f35; } .page ul { margin: 0 0 12px 0; padding-left: 0; list-style: none; } .page li { position: relative; padding: 3px 0 3px 22px; font-size: 14.5px; color: #2c2f35; } .page li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .legal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; } .legal-card h2 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); } .legal-card p { margin-bottom: 4px; } /* ── Tabellen (Tarif-Limits) ────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } table.limits { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } table.limits th, table.limits td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); } table.limits thead th { background: var(--card); font-size: 13px; } table.limits tbody tr:last-child td { border-bottom: none; } table.limits td:not(:first-child), table.limits th:not(:first-child) { text-align: center; } /* ── Footer ─────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 34px 0 44px; margin-top: 30px; } .site-footer .inner { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; } .site-footer a { color: var(--muted); font-size: 13.5px; } .site-footer .copy { margin-left: auto; color: var(--faint); font-size: 12.5px; } @media (max-width: 600px) { .site-footer .copy { margin-left: 0; width: 100%; } } @media (max-width: 640px) { .site-nav a.nav-link { display: none; } .hero { padding: 52px 0 44px; } } /* ── Ambient-Glow (Orbs erzeugt site.js; Layout wie die Flutter-Landing) ── */ .glow-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .glow-wrap { position: absolute; will-change: transform; } .glow-orb { border-radius: 50%; animation: glow-pulse 5.2s ease-in-out infinite alternate; } @keyframes glow-pulse { from { transform: scale(.85); } to { transform: scale(1.15); } } /* ── Scroll-Reveal (Klassen setzt site.js; ohne JS bleibt alles sichtbar) ── */ .reveal { opacity: 0; transform: translateY(24px); } .reveal-in { opacity: 1; transform: none; transition: opacity .55s ease-out, transform .55s ease-out; } @media (prefers-reduced-motion: reduce) { .glow-orb { animation: none; } .reveal { opacity: 1; transform: none; } .card, .btn { transition: none; } } /* ── Store-Badges (Google Play / App Store) ────────────────────────────── Vor dem Launch bewusst OHNE href (nicht klickbar); sobald die Apps live sind, nur die Links eintragen — siehe TODO(stores) im HTML. */ .stores { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 12px; background: #17181c; color: #fff; border-radius: 13px; padding: 10px 20px; min-width: 180px; text-decoration: none; } .store-badge:hover { text-decoration: none; } a.store-badge[href] { transition: transform .15s ease; } a.store-badge[href]:hover { transform: translateY(-2px); } .store-badge svg { width: 26px; height: 26px; flex: none; fill: #fff; } .store-badge .lines { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .store-badge .small { font-size: 11px; opacity: .8; } .store-badge .big { font-size: 16.5px; font-weight: 700; } /* ── Kontaktformular ─────────────────────────────────────────────────────── */ .contact-form label { display: block; font-size: 13px; font-weight: 700; margin: 16px 0 6px; color: var(--fg); } .contact-form input, .contact-form textarea { width: 100%; font: inherit; font-size: 14.5px; color: var(--fg); background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(228, 37, 43, .12); } .contact-form textarea { min-height: 160px; resize: vertical; } .contact-form .btn { border: none; cursor: pointer; margin-top: 20px; } /* ── Launch-Gate (Schalter: Firestore config/web_access, liest site.js) ── Vor dem offiziellen Launch sind alle Login-/Start-CTAs versteckt (.requires-launch); Coming-soon-Hinweise (.until-launch) verschwinden, sobald site.js `launched` aufs setzt. */ html:not(.launched) .requires-launch { display: none !important; } html.launched .until-launch { display: none !important; } /* Versteckter Team-Zugang wie auf der Flutter-Landing: Klick auf das ©-Copyright im Footer führt zum Login — bewusst nicht als Link gestylt. */ .staff-login { color: inherit; text-decoration: none; cursor: default; } .staff-login:hover { text-decoration: none; }