/** * CTA Widget Styles für Ghost Theme * * Optional im Ghost Theme einbinden (z.B. in default.hbs im ): * * * Oder direkt ins Theme-CSS kopieren */ /* ===== CTA Container Base ===== */ .cta-container { margin: 2rem auto; width: 100%; max-width: 1400px; padding: 0 4vw; box-sizing: border-box; } /* ===== CTA Widget Base ===== */ .cta-widget { padding: 1.5rem; border-radius: 8px; background: #f8f9fa; transition: all 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .cta-title { margin: 0 0 0.5rem 0; font-size: 1.5rem; font-weight: 700; color: #15171A; line-height: 1.3; letter-spacing: -0.015em; } .cta-description { margin: 0 0 1rem 0; color: #3d3d3d; line-height: 1.6; font-size: 1rem; } /* ===== Theme Variants ===== */ /* Default Theme */ .cta-theme-default { background: #f8f9fa; border: 1px solid #e9ecef; } /* Card Theme */ .cta-theme-card { background: white; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .cta-theme-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Banner Theme */ .cta-theme-banner { background: var(--ghost-accent-color, #3eb0ef); color: white; border: none; } .cta-theme-banner .cta-title, .cta-theme-banner .cta-description { color: white; } .cta-theme-banner .kg-btn { background: white; color: var(--ghost-accent-color, #3eb0ef); } .cta-theme-banner .kg-btn:hover { background: rgba(255, 255, 255, 0.9); } /* Sidebar Theme */ .cta-theme-sidebar { position: sticky; top: 20px; background: white; border: 1px solid #e0e0e0; padding: 1.25rem; } /* Inline Theme */ .cta-theme-inline { background: transparent; border-left: 4px solid var(--ghost-accent-color, #3eb0ef); padding-left: 1rem; padding-right: 0; } /* Transparent Theme - Komplett durchsichtig, nur Content sichtbar */ .cta-theme-transparent { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; } .cta-theme-transparent .cta-title, .cta-theme-transparent .cta-description { display: none !important; } .cta-theme-transparent::before, .cta-theme-transparent::after { display: none !important; } /* ===== Image CTA ===== */ .cta-image-link { display: block; transition: transform 0.2s ease; text-decoration: none; } .cta-image-link:hover { transform: scale(1.02); } .cta-image { max-width: 100%; height: auto; border-radius: 4px; display: block; } /* ===== HTML Content ===== */ .cta-html-content { line-height: 1.6; } .cta-html-content img { max-width: 100%; height: auto; } .cta-html-content a { color: var(--ghost-accent-color, #3eb0ef); text-decoration: underline; } .cta-html-content a:hover { opacity: 0.85; text-decoration: none; } /* ===== Form Styles ===== */ .cta-form { margin-top: 1rem; } /* Horizontales Form-Layout (verwendbar in Custom-HTML) */ .cta-newsletter-form, .cta-horizontal-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch; } .cta-input { flex: 1; min-width: 200px; padding: 0.875rem 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; font-size: 0.9375rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; transition: all 0.15s ease-in-out; background: #fff; color: #15171A; line-height: 1.4; } .cta-input:focus { outline: none; border-color: var(--ghost-accent-color, #3eb0ef); box-shadow: 0 0 0 3px rgba(var(--ghost-accent-color-rgb, 62, 176, 239), 0.12); } .cta-input::placeholder { color: rgba(0, 0, 0, 0.4); } /* ===== Ghost Native Button Support ===== */ /* Wir verwenden jetzt Ghost's .kg-btn und .kg-btn-accent Klassen */ /* Diese passen sich automatisch an deine Theme-Akzentfarbe an */ /* Fallback für ältere Ghost-Versionen oder falls .kg-btn nicht verfügbar */ .kg-btn { padding: 0.875rem 1.75rem; background: var(--ghost-accent-color, #3eb0ef); color: #fff; border: none; border-radius: 5px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-block; text-align: center; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; letter-spacing: 0.2px; line-height: 1.4; } .kg-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .kg-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .kg-btn-accent { background: var(--ghost-accent-color, #3eb0ef); } /* ===== Modal Styles ===== */ .cta-modal-backdrop { background-color: rgba(0, 0, 0, 0.25) !important; /* Sehr leicht transparent (25%) */ backdrop-filter: blur(4px) !important; /* Minimaler Blur für maximale Lesbarkeit */ -webkit-backdrop-filter: blur(4px) !important; /* Safari Support */ animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .cta-modal-close { width: 32px; height: 32px; border: none; background: rgba(0, 0, 0, 0.5); color: white; font-size: 24px; line-height: 1; border-radius: 50%; cursor: pointer; transition: background 0.2s ease; padding: 0; display: flex; align-items: center; justify-content: center; } .cta-modal-close:hover { background: rgba(0, 0, 0, 0.7); } /* ===== Floating Position ===== */ #cta-container-floating { margin: 0; padding: 0; /* Kein Padding für Floating */ max-width: none; /* Keine max-width für Floating */ } #cta-container-floating .cta-widget { max-width: 350px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); animation: slideInUp 0.3s ease; } @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===== Modal Position ===== */ #cta-container-modal .cta-widget { background: white; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); animation: zoomIn 0.3s ease; position: relative; padding-top: 3rem; } @keyframes zoomIn { from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* ===== Responsive Design ===== */ @media (max-width: 768px) { .cta-widget { padding: 1rem; } .cta-title { font-size: 1.25rem; } .cta-description { font-size: 0.95rem; } .cta-newsletter-form, .cta-horizontal-form { flex-direction: column; } .cta-input { width: 100%; min-width: 0; } .cta-button { width: 100%; } /* Floating CTA auf Mobile kleiner */ #cta-container-floating .cta-widget { max-width: calc(100vw - 40px); font-size: 0.9rem; } /* Modal auf Mobile */ #cta-container-modal .cta-widget { max-width: 95%; max-height: 90vh; } } @media (max-width: 480px) { .cta-container { margin: 1rem auto; padding: 0 5vw; /* Etwas mehr Padding auf sehr kleinen Bildschirmen */ } .cta-widget { padding: 0.875rem; } .cta-title { font-size: 1.125rem; } /* Floating CTA auf sehr kleinen Bildschirmen */ #cta-container-floating { left: 10px; right: 10px; bottom: 10px; } #cta-container-floating .cta-widget { max-width: 100%; } } /* ===== Placement-spezifische Anpassungen ===== */ /* Sidebar */ #cta-container-sidebar { width: 100%; margin-bottom: 2rem; padding: 0; /* Kein Padding für Sidebar */ } /* Sidebar-CTAs: Optional sticky innerhalb der Theme-Sidebar */ #cta-container-sidebar .cta-widget { position: sticky; top: 20px; } /* Mobile: Normal im Flow */ @media (max-width: 768px) { #cta-container-sidebar .cta-widget { position: static; } } /* Footer */ #cta-container-footer { margin: 0 0 2rem 0; } /* Hero - Großer Bereich oben */ #cta-container-hero, #cta-container-content-top, #cta-container-content-bottom { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 4vw; padding-right: 4vw; box-sizing: border-box; } #cta-container-hero { margin-top: 3em; margin-bottom: 3rem; } #cta-container-hero .cta-widget { text-align: center; padding: 2rem; } #cta-container-hero .cta-title { font-size: 2rem; } #cta-container-hero .cta-description { font-size: 1.125rem; } #cta-container-content-top { margin-bottom: 2rem; } #cta-container-content-bottom { margin-top: 2rem; margin-bottom: 2rem; } /* Modal - Eigene Zentrierung */ #cta-container-modal { padding: 0; /* Kein Padding für Modal */ max-width: none; /* Keine max-width für Modal */ } /* ===== Accessibility ===== */ .kg-btn:focus, .cta-input:focus { outline: 2px solid var(--ghost-accent-color, #3eb0ef); outline-offset: 2px; } .cta-modal-close:focus { outline: 2px solid white; outline-offset: 2px; } /* ===== Print Styles ===== */ @media print { .cta-container, .cta-widget, #cta-container-floating, #cta-container-modal, .cta-modal-backdrop { display: none !important; } } /* ===== Dark Mode Support (optional) ===== */ @media (prefers-color-scheme: dark) { .cta-theme-default, .cta-theme-card { background: #1a1a1a; border-color: #333; color: #e0e0e0; } .cta-theme-default .cta-title, .cta-theme-card .cta-title { color: #fff; } .cta-theme-default .cta-description, .cta-theme-card .cta-description { color: #ccc; } .cta-input { background: #2a2a2a; border-color: #444; color: #e0e0e0; } .cta-input::placeholder { color: #666; } #cta-container-modal .cta-widget { background: #1a1a1a; } }