/* ══════════════════════════════════════════════════════ DATEI: css/lead-modal.css PFAD auf dem Server: /css/lead-modal.css In index.html einbinden (im ): ══════════════════════════════════════════════════════ */ :root { --lm-bg: #0a0f1e; --lm-surface: #111827; --lm-surface2: #1a2236; --lm-border: rgba(255,255,255,0.08); --lm-focus: rgba(99,179,237,0.6); --lm-accent: #3b82f6; --lm-accent2: #1d4ed8; --lm-success: #10b981; --lm-error: #ef4444; --lm-text: #f1f5f9; --lm-muted: #94a3b8; --lm-overlay: rgba(0,0,0,0.78); --lm-font: 'DM Sans','Helvetica Neue',sans-serif; } #lead-overlay { position: fixed; inset: 0; z-index: 99999; background: var(--lm-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } #lead-overlay.open { opacity: 1; pointer-events: all; } #lead-card { background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: 16px; padding: 40px 36px 32px; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; position: relative; transform: translateY(28px) scale(0.97); transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); font-family: var(--lm-font); } #lead-overlay.open #lead-card { transform: translateY(0) scale(1); } #lead-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: var(--lm-surface2); border-radius: 50%; color: var(--lm-muted); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } #lead-close:hover { background: var(--lm-border); color: var(--lm-text); } .lm-icon { width: 52px; height: 52px; background: linear-gradient(135deg,#1e3a8a,#3b82f6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(59,130,246,0.3); } .lm-title { font-size: 20px; font-weight: 700; color: var(--lm-text); margin: 0 0 8px; letter-spacing: -0.3px; } .lm-sub { font-size: 14px; color: var(--lm-muted); margin: 0 0 26px; line-height: 1.6; } #lead-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #fca5a5; margin-bottom: 16px; display: none; line-height: 1.5; } #lead-error.show { display: block; } .lm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .lm-field { display: flex; flex-direction: column; gap: 6px; } .lm-field.full { grid-column: 1 / -1; } .lm-label { font-size: 11px; font-weight: 700; color: var(--lm-muted); letter-spacing: 0.7px; text-transform: uppercase; } .lm-label .req { color: var(--lm-accent); margin-left: 2px; } .lm-label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; font-size: 11px; } .lm-input { background: var(--lm-bg); border: 1px solid var(--lm-border); border-radius: 10px; padding: 11px 14px; font-size: 15px; color: var(--lm-text); font-family: var(--lm-font); outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; } .lm-input::placeholder { color: rgba(148,163,184,0.35); } .lm-input:focus { border-color: var(--lm-focus); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } .lm-input.err { border-color: var(--lm-error); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); } .lm-ferr { font-size: 12px; color: var(--lm-error); display: none; } .lm-ferr.show { display: block; } .lm-consent { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15); border-radius: 10px; padding: 14px; margin: 18px 0 16px; } .lm-crow { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .lm-check { width: 18px; height: 18px; min-width: 18px; border: 2px solid var(--lm-focus); border-radius: 5px; background: var(--lm-bg); margin-top: 1px; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 0.15s; position: relative; } .lm-check:checked { background: var(--lm-accent); border-color: var(--lm-accent); } .lm-check:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg); } .lm-ctext { font-size: 13px; color: var(--lm-muted); line-height: 1.55; } .lm-ctext a { color: var(--lm-accent); text-decoration: none; } .lm-ctext a:hover { text-decoration: underline; } .lm-cerr { font-size: 12px; color: var(--lm-error); margin-top: 8px; display: none; } .lm-cerr.show { display: block; } .lm-privacy { font-size: 12px; color: var(--lm-muted); line-height: 1.6; margin-bottom: 20px; padding: 10px 12px; background: var(--lm-surface2); border-radius: 8px; border-left: 3px solid rgba(59,130,246,0.3); } .lm-privacy strong { color: #cbd5e1; } .lm-btn { width: 100%; padding: 14px 20px; background: linear-gradient(135deg,var(--lm-accent),var(--lm-accent2)); border: none; border-radius: 10px; color: white; font-size: 15px; font-weight: 600; font-family: var(--lm-font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 16px rgba(59,130,246,0.35); transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s; letter-spacing: -0.2px; } .lm-btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(59,130,246,0.4); } .lm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .lm-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .lm-btn.loading .lm-blabel { display: none; } .lm-btn.loading .lm-spinner { display: block; } /* Success */ #lead-success { display: none; text-align: center; padding: 16px 0 8px; animation: fadein 0.4s ease; } @keyframes fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .lm-sring { width: 68px; height: 68px; background: rgba(16,185,129,0.1); border: 2px solid rgba(16,185,129,0.35); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 20px; } .lm-stitle { font-size: 20px; font-weight: 700; color: var(--lm-text); margin: 0 0 10px; } .lm-stext { font-size: 14px; color: var(--lm-muted); line-height: 1.65; margin: 0 0 20px; } .lm-doi { background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.2); border-radius: 10px; padding: 13px 16px; font-size: 13px; color: var(--lm-muted); margin-bottom: 24px; text-align: left; line-height: 1.55; } .lm-doi strong { color: var(--lm-success); } .lm-action { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: linear-gradient(135deg,var(--lm-success),#059669); border: none; border-radius: 10px; color: white; font-size: 15px; font-weight: 600; font-family: var(--lm-font); cursor: pointer; box-shadow: 0 4px 16px rgba(16,185,129,0.3); transition: opacity 0.15s, transform 0.12s; } .lm-action:hover { opacity: 0.9; transform: translateY(-1px); } /* Mobile */ @media (max-width: 520px) { #lead-overlay { align-items: flex-end; padding: 0; } #lead-card { padding: 28px 20px 32px; border-radius: 20px 20px 0 0; max-width: 100%; max-height: 90vh; border-bottom: none; transform: translateY(100%); } #lead-overlay.open #lead-card { transform: translateY(0); } .lm-grid { grid-template-columns: 1fr; } .lm-field.full { grid-column: 1; } }