/* ============================================================ assets/order-glow.css Premium-Layer ("voll modern & glaenzend") ueber order-dark.css. Wird NACH order-dark.css geladen -> overridet bei gleicher Spezifitaet. Re-skinnt Palette + Glas/Glow/Gradient + Motion. Aktiv nur bei . ============================================================ */ /* ── Palette-Tuning: vibranterer Akzent + brillanteres Glas ───────── */ body.order-dark { --glow-accent: #8dc63f; /* Electric Indigo */ --glow-accent-2: #b6e05a; /* Cyan-Mint Highlight */ --glow-accent-3: #5a9e1f; /* Violet */ --glow-ink: #08080a; --c-accent: var(--glow-accent); --c-accent-hover: #a3d65e; --c-accent-bg: rgba(141,198,63,.16); --c-text: #f2f6ea; --c-text-muted: #a1a1a4; --c-border: rgba(176,176,182,.16); --c-border-md: rgba(176,176,182,.34); --slate-text: #f2f6ea; color-scheme: dark; scroll-behavior: smooth; } /* ── Hintergrund: lebendige Aurora ueber dem Grid ─────────────────── */ body.order-dark { background-image: radial-gradient(ellipse 100% 70% at 15% -10%, rgba(141,198,63,.22) 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 110% 10%, rgba(182,224,90,.12) 0%, transparent 50%), radial-gradient(ellipse 90% 70% at 100% 110%, rgba(90,158,31,.16) 0%, transparent 55%), linear-gradient(180deg, #0c0c0e 0%, var(--glow-ink) 55%, #050506 100%); } /* sanft wandernde Aurora-Schicht */ body.order-dark::after { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(40% 40% at 30% 30%, rgba(141,198,63,.10), transparent 70%), radial-gradient(35% 35% at 75% 65%, rgba(182,224,90,.08), transparent 70%); filter: blur(30px); animation: glowDrift 22s ease-in-out infinite alternate; } @keyframes glowDrift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(2%, -3%, 0) scale(1.08); } } /* ── Header: Gradient-Headline + Glow-Eyebrow ─────────────────────── */ body.order-dark .order-header__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(141,198,63,.10); border: 1px solid rgba(141,198,63,.28); color: #dcefc0; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(8px); } body.order-dark .order-header__eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--glow-accent-2); box-shadow: 0 0 10px 2px var(--glow-accent-2); animation: pulseDot 2.4s ease-in-out infinite; } @keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.45} } body.order-dark .order-header h1 { background: linear-gradient(110deg, #ffffff 0%, #dff0c8 40%, var(--glow-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.02em; text-shadow: 0 0 40px rgba(141,198,63,.18); } /* ── Glas-Cards ───────────────────────────────────────────────────── */ body.order-dark .order-card { background: linear-gradient(180deg, rgba(34,34,40,.78), rgba(22,22,26,.72)); border: 1px solid rgba(182,182,188,.14); border-radius: 22px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(141,198,63,.04); } /* feine Lichtkante oben */ body.order-dark .order-card::before { background: linear-gradient(90deg, transparent, rgba(141,198,63,.5), rgba(182,224,90,.4), transparent); height: 1px; opacity: .8; } body.order-dark .order-section-title { color: #b8b8bd; letter-spacing: .08em; } /* ── Felder: dunkles Glas + Fokus-Glow ────────────────────────────── */ body.order-dark .order-card .field input, body.order-dark .order-card .field select, body.order-dark .order-card .field textarea, body.order-dark .order-card input[type="text"], body.order-dark .order-card input[type="email"], body.order-dark .order-card input[type="tel"], body.order-dark .order-card input[type="number"], body.order-dark .order-card select { background: rgba(12,12,14,.55); border: 1px solid rgba(182,182,188,.18); border-radius: 12px; color: #f2f6ea; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } body.order-dark .order-card .field input:focus, body.order-dark .order-card .field select:focus, body.order-dark .order-card .field textarea:focus { border-color: var(--glow-accent); background: rgba(16,16,20,.8); box-shadow: 0 0 0 3px rgba(141,198,63,.22), 0 0 24px -6px rgba(141,198,63,.5); outline: none; } /* ── Buttons: Gradient + Sheen + Glow ─────────────────────────────── */ body.order-dark .order-card .button, body.order-dark .button { position: relative; overflow: hidden; border: none; border-radius: 12px; font-weight: 600; letter-spacing: .01em; color: #f6f6f4; background: linear-gradient(120deg, var(--glow-accent) 0%, #74b52e 45%, var(--glow-accent-3) 100%); box-shadow: 0 10px 26px -10px rgba(141,198,63,.7), 0 2px 0 rgba(255,255,255,.12) inset; transition: transform .15s ease, box-shadow .25s ease, filter .2s ease; } body.order-dark .order-card .button:hover, body.order-dark .button:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 38px -12px rgba(141,198,63,.85), 0 2px 0 rgba(255,255,255,.16) inset; } body.order-dark .order-card .button:active, body.order-dark .button:active { transform: translateY(0) scale(.99); } /* wandernder Sheen */ body.order-dark .order-card .button::after, body.order-dark .button::after { content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s ease; } body.order-dark .order-card .button:hover::after, body.order-dark .button:hover::after { left: 130%; } body.order-dark .order-card .button--secondary, body.order-dark .button--secondary { background: rgba(255,255,255,.04); border: 1px solid rgba(182,182,188,.22); color: #d2ddc2; box-shadow: none; } body.order-dark .order-card .button--secondary:hover, body.order-dark .button--secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(141,198,63,.5); color: #fff; transform: translateY(-1px); } /* ── Pill-Toggles (Lead-Typ + Region) ─────────────────────────────── */ body.order-dark .order-card .lt-btn, body.order-dark .region-btn { border-radius: 999px; border: 1px solid rgba(182,182,188,.2); background: rgba(255,255,255,.03); color: #bdbdc2; transition: all .2s ease; } body.order-dark .order-card .lt-btn:hover, body.order-dark .region-btn:hover { border-color: rgba(141,198,63,.5); color: #fff; transform: translateY(-1px); } body.order-dark .order-card .lt-btn.is-active, body.order-dark .region-btn.is-active { background: linear-gradient(120deg, rgba(141,198,63,.9), rgba(90,158,31,.9)); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -10px rgba(141,198,63,.8), 0 0 0 1px rgba(255,255,255,.1) inset; } /* ── Paket-Cards ──────────────────────────────────────────────────── */ body.order-dark .order-card .pkg-card { border-radius: 18px; background: linear-gradient(180deg, rgba(40,40,48,.7), rgba(26,26,32,.7)); border: 1px solid rgba(182,182,188,.14); transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease; } body.order-dark .order-card .pkg-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -28px rgba(0,0,0,.8), 0 0 30px -12px rgba(141,198,63,.4); border-color: rgba(141,198,63,.4); } /* Featured: animierter Gradient-Rahmen */ body.order-dark .order-card .pkg-card--featured { border: 1px solid transparent; background: linear-gradient(180deg, rgba(36,36,42,.85), rgba(24,24,30,.85)) padding-box, linear-gradient(130deg, var(--glow-accent), var(--glow-accent-2), var(--glow-accent-3)) border-box; } body.order-dark .order-card .pkg-card.is-active { border-color: transparent; box-shadow: 0 0 0 2px var(--glow-accent), 0 18px 50px -22px rgba(141,198,63,.7), 0 0 40px -16px rgba(182,224,90,.5); } body.order-dark .order-card .pkg-price { background: linear-gradient(110deg, #ffffff, var(--glow-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.order-dark .order-card .pkg-badge--navy { background: linear-gradient(120deg, var(--glow-accent), var(--glow-accent-3)); color: #fff; box-shadow: 0 6px 18px -8px rgba(141,198,63,.8); } body.order-dark .order-card .feat-check--ok { background: linear-gradient(120deg, var(--glow-accent), var(--glow-accent-2)); color: #0a0a0c; box-shadow: 0 0 12px -2px rgba(182,224,90,.6); } /* ── Mengen-Stepper + Total-Bar ───────────────────────────────────── */ body.order-dark .qty-stepper__btn { border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(182,182,188,.2); color: #e3e3e5; transition: all .15s ease; } body.order-dark .qty-stepper__btn:hover:not(:disabled) { background: rgba(141,198,63,.2); border-color: var(--glow-accent); color: #fff; } body.order-dark .qty-totbar { border-radius: 14px; background: linear-gradient(120deg, rgba(141,198,63,.14), rgba(182,224,90,.08)); border: 1px solid rgba(141,198,63,.25); } body.order-dark .qty-totbar__total { background: linear-gradient(110deg, #fff, var(--glow-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* ── Step-Bar: gluehende aktive Stufe ─────────────────────────────── */ body.order-dark .step-bar__item.is-active .step-bar__dot { background: linear-gradient(120deg, var(--glow-accent), var(--glow-accent-3)); color: #fff; box-shadow: 0 0 0 4px rgba(141,198,63,.18), 0 0 22px -2px rgba(141,198,63,.8); border: none; } body.order-dark .step-bar__item.is-done .step-bar__dot { background: linear-gradient(120deg, var(--glow-accent-2), var(--glow-accent)); color: #0a0a0c; border: none; } /* ── Summary / Chips / Pay-Box ────────────────────────────────────── */ body.order-dark .summary-row--total { border-top: 1px solid rgba(141,198,63,.3); margin-top: 6px; padding-top: 14px; } body.order-dark .re-chip { background: linear-gradient(120deg, rgba(141,198,63,.22), rgba(182,224,90,.16)); border: 1px solid rgba(141,198,63,.4); color: #f2f6ea; border-radius: 8px; padding: 3px 10px; font-family: 'DM Mono', monospace; } body.order-dark .pay-box { background: linear-gradient(120deg, rgba(141,198,63,.08), rgba(182,224,90,.05)); border: 1px solid rgba(141,198,63,.24); border-left: 3px solid var(--glow-accent); border-radius: 12px; } /* ── Dankeseite: pulsierendes Erfolgs-Icon ────────────────────────── */ body.order-dark .payment-status__icon--ok { background: linear-gradient(135deg, var(--glow-accent-2), var(--glow-accent)); box-shadow: 0 0 0 8px rgba(182,224,90,.1), 0 0 40px -4px rgba(182,224,90,.7); animation: okPop .6s cubic-bezier(.22,1.2,.4,1) both; } @keyframes okPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } /* Entrance-Animationen laufen rein per JS (assets/order-motion.js). Bewusst KEIN CSS-Default-Hide -> faellt Motion aus, bleibt alles sichtbar. */ /* ── Feinschliff ──────────────────────────────────────────────────── */ body.order-dark ::selection { background: rgba(141,198,63,.35); color: #fff; } body.order-dark *:focus-visible { outline: 2px solid var(--glow-accent); outline-offset: 2px; } body.order-dark ::-webkit-scrollbar { width: 10px; } body.order-dark ::-webkit-scrollbar-thumb { background: rgba(141,198,63,.3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } /* ============================================================ KONTRAST-FIX: order-dark.css baute helle Inseln mit dunkler Schrift (weisser Mengen-Kasten, dunkle Summary/Pay-Texte). Da unsere Card jetzt dunkles Glas ist, ziehen wir ALLE Innen-Boxen auf dunkel + helle Schrift. Volle Spezifitaet (body.order-dark .order-card .X), damit es order-dark schlaegt. ============================================================ */ /* Mengen-Block */ body.order-dark .order-card .qty-block { background: rgba(12,12,14,.5); border: 1px solid rgba(182,182,188,.16); border-radius: 14px; } body.order-dark .order-card .qty-row { border-bottom: 1px solid rgba(182,182,188,.12); } body.order-dark .order-card .qty-row__label, body.order-dark .order-card .qty-row__label span { color: #f2f6ea; } body.order-dark .order-card .qty-row__sub { color: #a1a1a4; } body.order-dark .order-card .qty-stepper__input { background: rgba(12,12,14,.65); border: 1px solid rgba(182,182,188,.22); color: #f2f6ea; } body.order-dark .order-card .qty-totbar { color: #f2f6ea; border-top: 1px solid rgba(141,198,63,.3); } body.order-dark .order-card .qty-totbar__label { color: #f2f6ea; } /* Region-Pills (order-dark hatte hier weisse Buttons) */ body.order-dark .order-card .region-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(182,182,188,.2); color: #bdbdc2; box-shadow: none; } body.order-dark .order-card .region-btn:hover { border-color: rgba(141,198,63,.5); color: #fff; transform: translateY(-1px); box-shadow: none; } body.order-dark .order-card .region-btn.is-active { background: linear-gradient(120deg, rgba(141,198,63,.92), rgba(90,158,31,.92)); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -10px rgba(141,198,63,.85); } /* Bestelluebersicht */ body.order-dark .order-card .summary-row { color: #f2f6ea; border-bottom: 1px solid rgba(182,182,188,.12); } body.order-dark .order-card .summary-row__label { color: #a1a1a4; } body.order-dark .order-card .summary-row--total { color: #ffffff; border-top: 1px solid rgba(141,198,63,.3); border-bottom: none; } /* Vorkasse/Hinweis-Box */ body.order-dark .order-card .pay-box { background: linear-gradient(120deg, rgba(141,198,63,.12), rgba(182,224,90,.06)); border: 1px solid rgba(141,198,63,.28); border-left: 3px solid var(--glow-accent); color: #dededf; } body.order-dark .order-card .pay-box strong { color: #ffffff; } body.order-dark .order-card .pay-box__next { color: #a1a1a4; } /* AGB / Checkbox-Zeilen + Mengen-Block-Texte generell hell */ body.order-dark .order-card .check-row { color: #d6d6d8; } /* Zustimmungs-Labels (AGB/Datenschutz, Widerrufs-Verzicht) klar weiss. */ body.order-dark .order-card .check-row label { color: #fff; } body.order-dark .order-card .check-row a { color: var(--glow-accent-2); } body.order-dark .order-card .field small { color: #a1a1a4; } /* ── Footer ───────────────────────────────────────────────────────── */ body.order-dark .order-footer { position: relative; z-index: 1; max-width: 880px; margin: 2rem auto 1rem; padding: 1.5rem 1.25rem 0; border-top: 1px solid rgba(176,176,182,.14); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } body.order-dark .order-footer__brand { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #d2ddc2; } body.order-dark .order-footer__mark { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--glow-accent), var(--glow-accent-3)); box-shadow: 0 6px 16px -6px rgba(141,198,63,.8); } body.order-dark .order-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } body.order-dark .order-footer__links a { color: #a1a1a4; font-size: 13px; text-decoration: none; transition: color .18s ease; } body.order-dark .order-footer__links a:hover { color: var(--glow-accent-2); } body.order-dark .order-footer__copy { font-size: 11px; color: #76767c; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { body.order-dark *, body.order-dark *::before, body.order-dark *::after { animation: none !important; transition: none !important; } body.order-dark [data-glow-in] { opacity: 1; transform: none; } }