/* ============================================================ assets/order-dark.css Dark-Mode fuer public/order-form.php (Checkout im Landing-Look). Wird NUR aktiv, wenn gesetzt ist. Admin-Panel (admin/*.php) bleibt hell. Konzept: Slate-dunkler Backdrop mit Grid + Glow-Blobs (wie experten-place.eu), die Formular-Cards sind helle Inseln fuer klaren Lese-/Schreib-Kontrast. ============================================================ */ /* ── Palette ───────────────────────────────────────────────────── */ body.order-dark { --slate-ink: #0d0d0f; --slate-surface: #1d1d20; --slate-surface-2: #242428; --slate-deep: #1c3a0e; /* Brand-Navy */ --slate-accent: #5e9e2b; /* heller Navy fuer Dark-Kontrast */ --slate-accent-mid: #8fb56a; --slate-accent-light:#c9c9cc; --slate-text: #e2e2e4; --slate-text-dim: #85858a; --slate-text-faint: #515156; --slate-border: rgba(150,150,156,.16); --slate-border-md: rgba(150,150,156,.30); /* Brand-Tokens ueberschreiben admin.css-Cascade */ --c-bg: var(--slate-ink); --c-surface: var(--slate-surface); --c-border: var(--slate-border); --c-border-md: var(--slate-border-md); --c-text: var(--slate-text); --c-text-muted: var(--slate-text-dim); --c-text-faint: var(--slate-text-faint); --c-accent: var(--slate-accent); --c-accent-bg: rgba(94,158,43,.18); --c-accent-hover:#74b833; --c-secondary: var(--slate-accent-mid); --c-secondary-bg:rgba(143,181,106,.08); --c-green-bg: rgba(26,140,78,.14); --c-amber-bg: rgba(200,130,0,.15); --c-red-bg: rgba(192,57,43,.15); } body.order-dark { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--slate-text); background: var(--slate-ink); background-image: radial-gradient(ellipse 120% 80% at 20% -20%, rgba(28,58,14,.55) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 100% 100%, rgba(34,34,38,.9) 0%, var(--slate-ink) 55%), linear-gradient(180deg, #151517 0%, var(--slate-ink) 45%, #070709 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } /* ── Grid Backdrop (Landing-Look) ──────────────────────────────── */ body.order-dark::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(165,165,172,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(165,165,172,.05) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* ── Glow Blobs ────────────────────────────────────────────────── */ body.order-dark::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle 380px at 8% 12%, rgba(94,158,43,.25) 0%, transparent 60%), radial-gradient(circle 300px at 92% 85%, rgba(143,181,106,.18) 0%, transparent 60%), radial-gradient(circle 220px at 55% 45%, rgba(206,206,210,.08) 0%, transparent 60%); filter: blur(30px); } body.order-dark .order-shell, body.order-dark .order-container { position: relative; z-index: 1; } /* ── Hero / Header ─────────────────────────────────────────────── */ body.order-dark .order-header__eyebrow { font-family: 'DM Mono', 'Courier New', monospace; color: var(--slate-text-dim); background: rgba(143,181,106,.1); border: 1px solid rgba(143,181,106,.25); border-radius: 20px; padding: 4px 14px; display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } body.order-dark .order-header h1 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; color: #ffffff; letter-spacing: -.01em; } body.order-dark .order-header p { color: var(--slate-text-dim); } /* ── Step-Bar ──────────────────────────────────────────────────── */ body.order-dark .step-bar__dot { background: rgba(34,34,38,.8); border: 1px solid rgba(150,150,156,.3); color: var(--slate-text-dim); } body.order-dark .step-bar__item.is-active .step-bar__dot { background: var(--slate-accent); border-color: #74b833; color: #ffffff; } body.order-dark .step-bar__item.is-done .step-bar__dot { background: rgba(94,158,43,.28); border-color: var(--slate-accent); color: var(--slate-text); } body.order-dark .step-bar__line { background: rgba(150,150,156,.2); } body.order-dark .step-bar__item span { color: var(--slate-text-dim); } body.order-dark .step-bar__item.is-active span, body.order-dark .step-bar__item.is-done span { color: var(--slate-text); } /* ============================================================ FORMULAR-CARDS: HELL (Light-Insel ueber dunklem Backdrop) mit subtilem 3D-Shine ============================================================ */ body.order-dark .order-card, body.order-dark .order-card--flush { position: relative; overflow: hidden; background: linear-gradient(168deg, #ffffff 0%, #f6f6f5 48%, #f0f0ef 100%); border: 1px solid #d9d9d7; color: #1d1d20; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25); } body.order-dark .order-card::before { /* Oberer Lichtschleier auf der Haupt-Card */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, transparent 100%); pointer-events: none; z-index: 0; } body.order-dark .order-card > * { position: relative; z-index: 1; } body.order-dark .order-card, body.order-dark .order-card .field label, body.order-dark .order-card label { color: #1d1d20; } body.order-dark .order-card .order-section-title { color: var(--slate-accent); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid #e6e6e4; padding-bottom: .3rem; margin-bottom: .75rem; } /* Inputs */ body.order-dark .order-card .field label { color: #66666a; font-weight: 500; } 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: #ffffff; border: 1px solid #d9d9d7; color: #1d1d20; caret-color: var(--slate-accent); } body.order-dark .order-card .field input::placeholder, body.order-dark .order-card .field textarea::placeholder, body.order-dark .order-card input::placeholder, body.order-dark .order-card textarea::placeholder { color: #a3a3a3; } 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(--slate-accent); outline: none; box-shadow: 0 0 0 3px rgba(94,158,43,.14); } body.order-dark .order-card .field input[readonly] { background: #f0f0ef; color: #66666a; } /* Buttons in Cards */ body.order-dark .order-card .button { background: var(--slate-accent); color: #ffffff; border: 1px solid var(--slate-accent); } body.order-dark .order-card .button:hover { background: #74b833; border-color: #74b833; color: #ffffff; } body.order-dark .order-card .button--secondary { background: #ffffff; color: var(--slate-accent); border: 1px solid #d9d9d7; } body.order-dark .order-card .button--secondary:hover { background: #f0f0ef; border-color: #c7c7c5; color: var(--slate-accent); } /* Lead-Typ Buttons (Light-Shine) */ body.order-dark .order-card .lt-btn { position: relative; background: linear-gradient(168deg, #ffffff 0%, #f6f6f5 55%, #f0f0ef 100%); border: 1px solid #d9d9d7; color: #66666a; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0,0,0,.03), 0 2px 6px rgba(28,58,14,.06); transition: border-color .2s, box-shadow .2s, transform .2s, color .2s; } body.order-dark .order-card .lt-btn:hover { transform: translateY(-1px); border-color: #c7c7c5; color: #1d1d20; box-shadow: inset 0 1px 0 #ffffff, 0 4px 12px rgba(28,58,14,.1); } body.order-dark .order-card .lt-btn.is-active { background: linear-gradient(168deg, rgba(94,158,43,.16) 0%, rgba(94,158,43,.08) 55%, rgba(94,158,43,.04) 100%); border-color: var(--slate-accent); color: var(--slate-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(94,158,43,.15); } /* ============================================================ Paket-Karten (DUNKEL, wie Landing – 3D-Shine) Layout/Styling identisch zu index.php .pkg-card ============================================================ */ body.order-dark .order-card .pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } body.order-dark .order-card .pkg-card { position: relative; overflow: hidden; background: linear-gradient(168deg, rgba(40,40,46,.95) 0%, #1d1d20 48%, #161618 100%); border: 1px solid rgba(150,150,156,.28); border-radius: 20px; padding: 2rem; box-shadow: inset 0 1px 0 rgba(206,206,210,.22), inset 0 -1px 0 rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); transition: border-color .3s, box-shadow .3s, transform .25s; cursor: pointer; color: #e2e2e4; } body.order-dark .order-card .pkg-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 48%; background: linear-gradient(180deg, rgba(206,206,210,.08) 0%, transparent 100%); pointer-events: none; border-radius: 20px 20px 0 0; } body.order-dark .order-card .pkg-card::after { content: ''; position: absolute; top: -40%; right: -30%; width: 55%; height: 80%; background: linear-gradient(125deg, rgba(206,206,210,.06), transparent 55%); pointer-events: none; } body.order-dark .order-card .pkg-card > * { position: relative; z-index: 1; } body.order-dark .order-card .pkg-card:hover { transform: translateY(-3px); border-color: rgba(165,165,172,.5); box-shadow: inset 0 1px 0 rgba(206,206,210,.28), inset 0 -1px 0 rgba(0,0,0,.35), 0 10px 28px rgba(28,58,14,.25); } body.order-dark .order-card .pkg-card--featured { border-color: rgba(94,158,43,.45); background: linear-gradient(168deg, rgba(28,58,14,.55) 0%, rgba(40,40,46,.9) 48%, #161618 100%); } body.order-dark .order-card .pkg-card--featured:hover { border-color: rgba(94,158,43,.7); box-shadow: inset 0 1px 0 rgba(206,206,210,.28), inset 0 -1px 0 rgba(0,0,0,.35), 0 10px 32px rgba(94,158,43,.3); } body.order-dark .order-card .pkg-card.is-active { border-color: rgba(94,158,43,.85); box-shadow: inset 0 1px 0 rgba(206,206,210,.32), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(94,158,43,.4), 0 12px 36px rgba(94,158,43,.35); } /* Badge */ body.order-dark .order-card .pkg-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: 3px 9px; margin-bottom: 1.5rem; } body.order-dark .order-card .pkg-badge--navy { color: #909094; background: rgba(28,58,14,.4); border: 1px solid rgba(28,58,14,.6); } body.order-dark .order-card .pkg-badge--gray { color: #85858a; background: rgba(150,150,156,.09); border: 1px solid rgba(150,150,156,.2); } body.order-dark .order-card .pkg-badge-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } /* Name / Preis / Beschreibung */ body.order-dark .order-card .pkg-name { font-family: 'Instrument Serif', serif; font-size: 1.4rem; font-weight: 400; color: #ffffff; margin-bottom: .3rem; } body.order-dark .order-card .pkg-price { font-family: 'Instrument Serif', serif; font-size: 3rem; font-weight: 400; color: #ffffff; letter-spacing: -.03em; line-height: 1; margin-bottom: .25rem; } body.order-dark .order-card .pkg-price sup { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.1rem; font-weight: 500; vertical-align: super; letter-spacing: 0; color: #909094; } body.order-dark .order-card .pkg-price sub { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: .9rem; font-weight: 400; color: #85858a; vertical-align: baseline; } body.order-dark .order-card .pkg-desc { font-size: .875rem; color: #85858a; margin-bottom: 1.75rem; line-height: 1.65; } /* Feature-Liste mit Check-Icons (wie Landing) */ body.order-dark .order-card .pkg-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; } body.order-dark .order-card .pkg-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: #85858a; } body.order-dark .order-card .pkg-features li.ok { color: #e2e2e4; } body.order-dark .order-card .feat-check { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } body.order-dark .order-card .feat-check--ok { background: rgba(28,58,14,.55); border: 1px solid rgba(28,58,14,.7); color: #909094; } body.order-dark .order-card .feat-check--no { background: rgba(150,150,156,.08); border: 1px solid rgba(150,150,156,.2); color: transparent; } body.order-dark .order-card .pkg-card__tag { background: var(--slate-accent); color: #ffffff; } body.order-dark .order-card .pkg-card__tag--gray { background: #f0f0ef; color: #66666a; } body.order-dark .order-card .pkg-card__name { color: #1d1d20; font-family: 'Instrument Serif', serif; font-size: 18px; font-weight: 400; } body.order-dark .order-card .pkg-card__price { color: #1c3a0e; font-family: 'Instrument Serif', serif; font-weight: 400; } body.order-dark .order-card .pkg-card__price small { color: #66666a; } body.order-dark .order-card .pkg-card__desc { color: #66666a; } body.order-dark .order-card .pkg-card__features { color: #66666a; } body.order-dark .order-card .pkg-card__features li { color: #66666a; } body.order-dark .order-card .pkg-card__features li.ok { color: #1d1d20; } body.order-dark .order-card .pkg-card__features li::before { color: var(--slate-accent); } body.order-dark .order-card .pkg-card__features li:not(.ok)::before { color: #a3a3a3; } /* Mengen / Quantity */ body.order-dark .order-card .qty-block { background: #ffffff; border: 1px solid #d9d9d7; } body.order-dark .order-card .qty-row { border-bottom: 1px solid #e6e6e4; } body.order-dark .order-card .qty-row__sub { color: #66666a; } body.order-dark .order-card .qty-stepper__btn { background: #f0f0ef; border: 1px solid #d9d9d7; color: #1d1d20; } body.order-dark .order-card .qty-stepper__btn:hover:not(:disabled) { background: var(--slate-accent); border-color: var(--slate-accent); color: #ffffff; } body.order-dark .order-card .qty-stepper__input { background: #ffffff; border: 1px solid #d9d9d7; color: #1d1d20; } body.order-dark .order-card .qty-totbar { color: #1d1d20; border-top: 1px solid #e6e6e4; } body.order-dark .order-card .qty-min-warn { background: rgba(200,130,0,.1); border-color: rgba(200,130,0,.4); color: #8a5a00; } /* Region / Pay-Methoden (Light-Shine) */ body.order-dark .order-card .region-btn { position: relative; background: linear-gradient(168deg, #ffffff 0%, #f6f6f5 55%, #f0f0ef 100%); border: 1px solid #d9d9d7; color: #66666a; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0,0,0,.03), 0 2px 6px rgba(28,58,14,.06); transition: border-color .2s, box-shadow .2s, transform .2s, color .2s; } body.order-dark .order-card .region-btn:hover { transform: translateY(-1px); border-color: #c7c7c5; color: #1d1d20; box-shadow: inset 0 1px 0 #ffffff, 0 4px 12px rgba(28,58,14,.1); } body.order-dark .order-card .region-btn.is-active { background: linear-gradient(168deg, rgba(94,158,43,.16) 0%, rgba(94,158,43,.08) 55%, rgba(94,158,43,.04) 100%); border-color: var(--slate-accent); color: var(--slate-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(94,158,43,.15); } body.order-dark .order-card .pay-hint { color: #66666a; } /* Summary Zusammenfassung */ body.order-dark .order-card .summary-row { border-bottom: 1px solid #e6e6e4; color: #1d1d20; } body.order-dark .order-card .summary-row__label { color: #66666a; } body.order-dark .order-card .summary-row--total { border-top: 1px solid #c7c7c5; border-bottom: none; color: #1c3a0e; font-family: 'Instrument Serif', serif; } /* Pay-Box */ body.order-dark .order-card .pay-box { background: rgba(94,158,43,.06); border: 1px solid rgba(94,158,43,.22); color: #1d1d20; } body.order-dark .order-card .pay-box strong { color: #1c3a0e; } body.order-dark .order-card .pay-box__next { color: #66666a; } /* AGB-Checkbox-Zeile */ body.order-dark .order-card .check-row { color: #1d1d20; } body.order-dark .order-card .check-row a { color: var(--slate-accent); text-decoration: underline; } body.order-dark .order-card .check-row a:hover { color: #3c6b1c; } /* Fehler-/Alert-Boxen */ body.order-dark .order-card .alert--error { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.3); color: #c0392b; } body.order-dark .order-card .alert--error p { color: #c0392b; } body.order-dark .order-card .field-error { color: #c0392b; } body.order-dark .order-card .field--error input, body.order-dark .order-card .field--error select { border-color: #c0392b; } /* form-actions Footer */ body.order-dark .order-card .form-actions { border-top: 1px solid #e6e6e4; padding-top: 1rem; } /* RE-Chip (Bestellnummer) */ body.order-dark .order-card .re-chip { background: rgba(94,158,43,.14); border: 1px solid rgba(94,158,43,.28); color: var(--slate-accent); font-family: 'DM Mono', monospace; font-size: 12px; padding: 3px 10px; border-radius: 5px; letter-spacing: .02em; } /* Badges fuer Status */ body.order-dark .order-card .badge--gray { background: #f0f0ef; color: #66666a; } body.order-dark .order-card .badge--green { background: rgba(26,140,78,.15); color: #1a8c4e; } body.order-dark .order-card .badge--amber { background: rgba(200,130,0,.15); color: #8a5a00; } body.order-dark .order-card .badge--red { background: rgba(192,57,43,.12); color: #c0392b; } body.order-dark .order-card .badge--blue { background: rgba(94,158,43,.14); color: var(--slate-accent); } /* Payment-Status-Seite (Schritt 4) */ body.order-dark .payment-status .summary-row { text-align: left; } body.order-dark .order-card .payment-status__icon--ok { background: #1a8c4e; color: #fff; } body.order-dark .order-card .payment-status__icon--wait { background: #c88200; color: #fff; } body.order-dark .order-card .payment-status__icon--fail { background: #c0392b; color: #fff; } body.order-dark .order-card .payment-status__icon--warn { background: #c88200; color: #fff; } /* Progress Bar */ body.order-dark .order-card .prog-bar { background: #f0f0ef; border: 1px solid #d9d9d7; } body.order-dark .order-card .prog-fill { background: var(--slate-accent); } body.order-dark .order-card .prog-fill--partial { background: #c88200; } body.order-dark .order-card .prog-fill--zero { background: #c7c7c5; } /* Avatar / Firmen-Initialen-Kreis */ body.order-dark .order-card .av { background: #f0f0ef; border: 1px solid #d9d9d7; color: #1d1d20; }