/* ══════════════════════════════════════════ RocketApps Shared Design System Dual-Theme: rocketapps (dark) + recipeai (warm) Theme wird via gesetzt ══════════════════════════════════════════ */ /* ── Theme: RocketApps (Dark + Coral) ── */ [data-theme="rocketapps"] { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-deep: #0f3460; --accent: #FF6B6B; --accent-hover: #EE5A5A; --text-primary: #ffffff; --text-secondary: rgba(255,255,255,0.6); --text-muted: rgba(255,255,255,0.45); --card-bg: rgba(255,255,255,0.05); --card-border: rgba(255,255,255,0.08); --card-hover-bg: rgba(255,255,255,0.14); --nav-bg: rgba(0,0,0,0.25); --nav-border: rgba(255,255,255,0.08); --footer-border: rgba(255,255,255,0.08); --footer-link: rgba(255,255,255,0.5); --footer-link-hover: rgba(255,255,255,0.85); --footer-copyright: rgba(255,255,255,0.3); --status-live: #16a34a; --gradient-header: linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%); /* Content card (Kontaktseite etc.) */ --content-bg: #ffffff; --content-text: #333333; --content-text-muted: #666666; --content-h2: #FF6B6B; --content-border: #e2e8f0; --content-info-bg: #fff0f0; --content-info-border: #FF6B6B; --content-warn-bg: #fff8e1; --content-warn-border: #ffc107; --step-bg: #f8fafc; --step-border: #eee; --input-border: #d1d5db; --input-focus-border: #FF6B6B; --input-focus-shadow: rgba(255,107,107,0.12); } /* ── Theme: RecipeAI (Warm + Sage Green) ── */ [data-theme="recipeai"] { --bg-primary: #FAFAF9; --bg-secondary: #FFFFFF; --bg-deep: #F5F5F4; --accent: #4A7C59; --accent-hover: #3a6347; --accent-light: #6B9B7A; --accent-secondary: #EA580C; --text-primary: #1C1917; --text-secondary: #57534E; --text-muted: #78716C; --card-bg: #FFFFFF; --card-border: #E7E5E4; --card-hover-bg: #F5F5F4; --nav-bg: #FFFFFF; --nav-border: #E7E5E4; --footer-border: #E7E5E4; --footer-link: #78716C; --footer-link-hover: #1C1917; --footer-copyright: #A8A29E; --status-live: #16a34a; --gradient-header: linear-gradient(135deg, #4A7C59 0%, #6B9B7A 100%); /* Content card (Legal-Seiten) */ --content-bg: #ffffff; --content-text: #1C1917; --content-text-muted: #666666; --content-h2: #4A7C59; --content-border: #E7E5E4; --content-info-bg: #f0f7f2; --content-info-border: #4A7C59; --content-warn-bg: #fff8e1; --content-warn-border: #ffc107; --step-bg: #f8fafc; --step-border: #E7E5E4; --input-border: #d1d5db; --input-focus-border: #4A7C59; --input-focus-shadow: rgba(74,124,89,0.12); } /* ── Reset ── */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ── Body ── */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; min-height: 100vh; line-height: 1.6; } [data-theme="rocketapps"] body { background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 40%, var(--bg-deep) 100%); color: var(--text-primary); } [data-theme="recipeai"] body { background: var(--bg-primary); color: var(--text-primary); } /* ── Navigation Bar ── */ .site-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--nav-border); position: sticky; top: 0; z-index: 100; } .site-nav .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1.1rem; } .site-nav .brand span { font-size: 1.3rem; } .site-nav .brand img { vertical-align: middle; } .site-nav .nav-links { display: flex; gap: 20px; align-items: center; } .site-nav .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: color 0.2s; } .site-nav .nav-links a:hover { color: var(--text-primary); } .site-nav .nav-links a.active { color: var(--accent); } /* ── Footer ── */ .site-footer { padding: 28px 24px; text-align: center; border-top: 1px solid var(--footer-border); margin-top: auto; } .site-footer .footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; } .site-footer .footer-links a { color: var(--footer-link); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; } .site-footer .footer-links a:hover { color: var(--footer-link-hover); } .site-footer .copyright { color: var(--footer-copyright); font-size: 0.8rem; } /* ── Content Card (für Legal / Content Seiten) ── */ .content-wrap { max-width: 800px; margin: 32px auto; padding: 0 20px 40px; } .content-card { background: var(--content-bg); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.12); } .content-card .card-header { background: var(--gradient-header); padding: 28px 32px; text-align: center; } .content-card .card-header h1 { color: white; font-size: 1.5rem; margin: 0; font-weight: 700; } .content-card .card-header .subtitle { color: rgba(255,255,255,0.85); font-size: 0.9rem; margin-top: 4px; } .content-card .card-body { padding: 32px; color: var(--content-text); line-height: 1.75; } .content-card .card-body h2 { color: var(--content-h2); font-size: 1.2rem; margin-top: 28px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--step-border); } .content-card .card-body h3 { color: #444; font-size: 1rem; margin-top: 18px; margin-bottom: 6px; } .content-card .card-body p { margin: 8px 0; } .content-card .card-body a { color: var(--accent); } .content-card .card-body ul { padding-left: 20px; margin: 8px 0; } .content-card .card-body li { margin-bottom: 4px; } .content-card .card-body .info-box { background: var(--content-info-bg); padding: 14px 18px; border-radius: 8px; border-left: 4px solid var(--content-info-border); margin: 16px 0; } .content-card .card-body .warn-box { background: var(--content-warn-bg); padding: 14px 18px; border-radius: 8px; border-left: 4px solid var(--content-warn-border); margin: 16px 0; } .content-card .card-body .contact-block { background: var(--step-bg); padding: 20px; border-radius: 10px; margin: 16px 0; } .content-card .card-body .contact-block p { margin: 4px 0; } .content-card .card-body .last-updated { color: #999; font-size: 0.85rem; } .content-card .card-body .page-footer { text-align: center; color: #bbb; font-size: 0.8rem; margin-top: 28px; } /* ── Forms ── */ .content-card .card-body label { display: block; font-weight: 600; margin-top: 16px; margin-bottom: 4px; color: #444; font-size: 0.9rem; } .content-card .card-body input, .content-card .card-body select, .content-card .card-body textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; font-size: 0.95rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; transition: border-color 0.2s, box-shadow 0.2s; } .content-card .card-body input:focus, .content-card .card-body select:focus, .content-card .card-body textarea:focus { outline: none; border-color: var(--input-focus-border); box-shadow: 0 0 0 3px var(--input-focus-shadow); } .content-card .card-body textarea { resize: vertical; min-height: 120px; } .btn-primary { display: block; width: 100%; padding: 13px; margin-top: 20px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .msg { padding: 12px 16px; border-radius: 8px; margin-top: 16px; display: none; font-size: 0.9rem; } .msg.success { display: block; background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; } .msg.error { display: block; background: #fbe9e7; color: #c62828; border: 1px solid #ffcdd2; } .required { color: #c62828; } /* ── Steps List ── */ .steps { counter-reset: step; list-style: none; padding: 0; } .steps li { counter-increment: step; padding: 14px 14px 14px 56px; margin: 10px 0; background: var(--step-bg); border-radius: 10px; position: relative; border: 1px solid var(--step-border); } .steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; } /* ── Responsive ── */ @media (max-width: 600px) { .site-nav { padding: 12px 16px; } .site-nav .nav-links { gap: 12px; } .site-nav .nav-links a { font-size: 0.8rem; } .content-wrap { margin: 16px auto; padding: 0 12px 24px; } .content-card .card-body { padding: 20px; } .content-card .card-header { padding: 20px 24px; } .site-footer .footer-links { gap: 12px; } }