/* ========================================================================= cookiehub-theme.css König Photographie CI-Styling für CookieHub Cookie-Banner. Wird zentral hier gehostet und auf beiden Origins eingebunden: - www.koenig-photographie.de (Webflow Custom Code → Site Head Embed) - studio.koenig-photographie.de (Astro Layout ) Eingebunden via: Hardlink-Setup: Edits im Workspace-Repo wirken sofort live (no-cache). FARBSYSTEM (König CI): koenig-text: #2e2a26 koenig-beige: #f6f5f2 gold: #c9a96e (primary) gold-dark: #b89456 (hover) ========================================================================= */ /* 1. Container / Dialog */ html .ch2-dialog, html body .ch2-dialog { background: rgba(246, 245, 242, 0.75) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border: 1px solid rgba(201, 169, 110, 0.25) !important; border-radius: 12px !important; box-shadow: 0 24px 60px rgba(46, 42, 38, 0.15) !important; width: 460px !important; max-width: calc(100vw - 32px) !important; font-family: 'Montserrat', system-ui, sans-serif !important; padding: 14px 18px 10px !important; right: auto !important; left: 20px !important; bottom: 20px !important; } .ch2-dialog-content { padding: 0 !important; } /* Font auf alle Dialog-Kinder forcieren (sonst erben Buttons/Texte nicht) */ .ch2-dialog, .ch2-dialog *, .ch2-settings-dialog, .ch2-settings-dialog *, .ch2-container, .ch2-container * { font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important; } /* 2. Typografie */ #ch2-dialog-title { font-family: 'Montserrat', system-ui, sans-serif !important; color: #2e2a26 !important; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0 !important; line-height: 1.3 !important; margin: 0 0 6px 0 !important; } #ch2-dialog-title strong { font-weight: 500 !important; } #ch2-dialog-description { font-family: 'Montserrat', system-ui, sans-serif !important; color: rgba(46, 42, 38, 0.7) !important; font-weight: 300 !important; font-size: 12px !important; line-height: 1.5 !important; margin: 0 0 10px 0 !important; } html .ch2-learn-more, html body .ch2-learn-more, html .ch2-dialog-content .ch2-learn-more { color: rgba(46, 42, 38, 0.6) !important; font-weight: 400 !important; font-size: 12px !important; text-decoration: underline !important; text-underline-offset: 3px !important; display: inline-block !important; margin: 0 auto 0 0 !important; } html .ch2-learn-more:hover { color: #c9a96e !important; } html[data-theme="dark"] .ch2-learn-more, html[data-theme="dark"] body .ch2-learn-more, html[data-theme="dark"] .ch2-dialog-content .ch2-learn-more { color: rgba(245, 245, 245, 0.55) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } html[data-theme="dark"] .ch2-learn-more:hover { color: #c9a96e !important; } /* Wrapper-

um learn-more hat 24px margin-bottom - zu viel */ .ch2-dialog-content > p, .ch2-dialog-content p:last-of-type { margin-bottom: 4px !important; } /* 3. Buttons */ .ch2-dialog-actions { gap: 8px !important; margin-top: 8px !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; } .ch2-dialog-actions .ch2-btn, .ch2-dialog-actions button { flex: 0 0 auto !important; width: auto !important; } /* Primary - "Alle akzeptieren" - Gold Solid */ html .ch2-allow-all-btn, html body .ch2-allow-all-btn { background: #c9a96e !important; color: #ffffff !important; border: 1px solid #c9a96e !important; border-radius: 4px !important; padding: 12px 22px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; font-size: 11px !important; white-space: nowrap !important; cursor: pointer !important; box-shadow: 0 0 24px rgba(201, 169, 110, 0.25) !important; transition: background 0.3s ease, box-shadow 0.3s ease !important; } .ch2-allow-all-btn:hover, .ch2-dialog .ch2-allow-all-btn:hover { background: #b89456 !important; border-color: #b89456 !important; } /* Secondary - "Alle ablehnen" - Outline */ html .ch2-deny-all-btn, html body .ch2-deny-all-btn, html .ch2-deny-all-btn.ch2-btn-primary { background: transparent !important; color: rgba(46, 42, 38, 0.65) !important; border: 1px solid rgba(46, 42, 38, 0.18) !important; border-radius: 4px !important; padding: 12px 22px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; font-size: 11px !important; white-space: nowrap !important; cursor: pointer !important; transition: border-color 0.3s ease, color 0.3s ease !important; } .ch2-deny-all-btn:hover, .ch2-btn-secondary:hover { border-color: #2e2a26 !important; color: #000000 !important; } /* Transparent - "Einstellungen" - Plain Link */ html .ch2-open-settings-btn, html body .ch2-open-settings-btn, html .ch2-open-settings-btn.ch2-btn-transparent, .ch2-btn-transparent { color: rgba(46, 42, 38, 0.6) !important; background: transparent !important; border: none !important; text-transform: none !important; letter-spacing: 0.01em !important; font-size: 12px !important; font-weight: 400 !important; padding: 8px 6px !important; text-decoration: underline !important; text-underline-offset: 3px !important; cursor: pointer !important; transition: color 0.3s ease !important; } .ch2-open-settings-btn:hover, .ch2-btn-transparent:hover { color: #c9a96e !important; } /* 4. Settings-Dialog (Detail-Ansicht) */ .ch2-settings-dialog { background: #f6f5f2 !important; border: 1px solid rgba(201, 169, 110, 0.25) !important; border-radius: 12px !important; box-shadow: 0 24px 60px rgba(46, 42, 38, 0.15) !important; font-family: 'Montserrat', system-ui, sans-serif !important; } .ch2-settings-title { color: #2e2a26 !important; font-weight: 300 !important; font-size: 20px !important; } .ch2-settings-description { color: rgba(46, 42, 38, 0.75) !important; font-weight: 300 !important; font-size: 14px !important; line-height: 1.6 !important; } .ch2-catlbl, [class*="ch2-catlbl-"] { color: #2e2a26 !important; font-weight: 500 !important; font-size: 14px !important; } .ch2-catdesc, [class*="ch2-catdesc-"] { color: rgba(46, 42, 38, 0.7) !important; font-weight: 300 !important; font-size: 13px !important; line-height: 1.5 !important; } .ch2-switch[data-value="true"], .ch2-switch.ch2-switch-value { background: #c9a96e !important; } .ch2-settings-tab[aria-selected="true"] { color: #c9a96e !important; border-bottom-color: #c9a96e !important; } /* 5. CookieHub-Branding (Free Plan) - dezent halten */ .ch2-dialog-branding, .ch2-dialog-branding-link { display: none !important; } .ch2-dialog-branding-link:hover { opacity: 0.7 !important; } /* 6. Mobile-Anpassungen */ @media (max-width: 480px) { .ch2-dialog { max-width: calc(100vw - 24px) !important; margin: 12px !important; padding: 20px 22px !important; } #ch2-dialog-title { font-size: 16px !important; } #ch2-dialog-description { font-size: 13px !important; } .ch2-dialog-actions { flex-direction: column !important; gap: 8px !important; } .ch2-allow-all-btn, .ch2-deny-all-btn, .ch2-btn-primary, .ch2-btn-secondary { width: 100% !important; padding: 14px 20px !important; } } /* DARK THEME OVERRIDES - aktiv wenn */ [data-theme="dark"] .ch2-dialog, html[data-theme="dark"] .ch2-dialog, html[data-theme="dark"] body .ch2-dialog { background: rgba(20, 18, 16, 0.78) !important; border: 1px solid rgba(201, 169, 110, 0.35) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important; } [data-theme="dark"] #ch2-dialog-title, [data-theme="dark"] #ch2-dialog-title strong, html[data-theme="dark"] body #ch2-dialog-title strong, html[data-theme="dark"] .ch2-dialog-content p strong { color: #c9a96e !important; } [data-theme="dark"] #ch2-dialog-description { color: rgba(245, 245, 245, 0.55) !important; } html[data-theme="dark"] body .ch2-deny-all-btn, html[data-theme="dark"] body .ch2-deny-all-btn.ch2-btn-primary, html[data-theme="dark"] body .ch2-deny-all-btn.ch2-btn-secondary { color: rgba(245, 245, 245, 0.72) !important; border: 1px solid rgba(245, 245, 245, 0.22) !important; } [data-theme="dark"] .ch2-deny-all-btn:hover { border-color: rgba(245, 245, 245, 0.6) !important; color: #ffffff !important; } html[data-theme="dark"] body .ch2-open-settings-btn, html[data-theme="dark"] body .ch2-open-settings-btn.ch2-btn-transparent { color: rgba(245, 245, 245, 0.6) !important; } [data-theme="dark"] .ch2-open-settings-btn:hover { color: #c9a96e !important; } /* Settings-Klon neben "Mehr erfahren" (Light-Default) */ html .koenig-learnmore-clone, html body .koenig-learnmore-clone { color: rgba(46, 42, 38, 0.6) !important; font-family: 'Montserrat', system-ui, sans-serif !important; font-weight: 400 !important; font-size: 12px !important; text-decoration: underline !important; text-underline-offset: 3px !important; cursor: pointer !important; margin: 0 auto 0 0 !important; padding: 0 !important; background: transparent !important; border: none !important; display: inline !important; } html .koenig-learnmore-clone:hover { color: #c9a96e !important; } .koenig-learnmore-sep { color: rgba(46, 42, 38, 0.4) !important; margin: 0 6px !important; } /* Settings-Klon im Dark-Theme */ html[data-theme="dark"] .koenig-learnmore-clone, html[data-theme="dark"] body .koenig-learnmore-clone { color: rgba(245, 245, 245, 0.55) !important; } html[data-theme="dark"] .koenig-learnmore-clone:hover { color: #c9a96e !important; } html[data-theme="dark"] .koenig-learnmore-sep { color: rgba(245, 245, 245, 0.35) !important; }