/* Full Service Suite – Cookie-Hinweis · Frontend * Gegen Theme-Styles abgeschottet. Neutrale Graupalette für die „Chrome“, * Akzentfarbe ausschließlich über die Design-Tokens (--eeecc-accent …). */ .eeecc, .eeecc *, .eeecc-embed, .eeecc-embed * { box-sizing: border-box; } /* Zustände am */ html.eeecc-locked { overflow: hidden; } html.eeecc-locked body::before { content: ""; position: fixed; inset: 0; z-index: 99998; background: rgba(17, 24, 39, .55); } /* ---------- Banner-Grundgerüst ---------- */ .eeecc-banner { position: fixed; z-index: 99999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--eeecc-ink, #232a18); } .eeecc-banner[hidden] { display: none; } .eeecc-banner-card { background: var(--eeecc-bg, #fff); border: 1px solid #e5e7eb; border-radius: var(--eeecc-radius, 14px); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); padding: 22px 24px; max-width: 440px; } .eeecc-banner-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--eeecc-ink, #232a18); } .eeecc-banner-text { margin: 0 0 12px; color: var(--eeecc-ink, #232a18); } .eeecc-banner-links { margin: 0 0 6px; font-size: .9rem; } .eeecc-banner .eeecc-banner-links a { color: var(--eeecc-accent-dk, #7d9c09) !important; text-decoration: underline !important; box-shadow: none !important; } /* Layout: Box unten rechts/links */ .eeecc-layout-box.eeecc-pos-right { right: 20px; bottom: 20px; } .eeecc-layout-box.eeecc-pos-left { left: 20px; bottom: 20px; } /* Layout: Leiste unten über volle Breite */ .eeecc-layout-bar { left: 0; right: 0; bottom: 0; } .eeecc-layout-bar .eeecc-banner-card { max-width: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; } .eeecc-layout-bar .eeecc-banner-head, .eeecc-layout-bar .eeecc-banner-body { flex: 1 1 320px; } .eeecc-layout-bar .eeecc-banner-actions { flex: 0 0 auto; } /* Layout: zentriertes Modal */ .eeecc-layout-center { inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; } .eeecc-layout-center::before { content: ""; position: fixed; inset: 0; background: rgba(17, 24, 39, .55); } .eeecc-layout-center .eeecc-banner-card { position: relative; max-width: 520px; max-height: 86vh; overflow: auto; } /* ---------- Aktionen / Buttons ---------- */ .eeecc-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; } /* Gegen Theme-Styles abgeschottet: feste Optik, damit z. B. rote Theme-Buttons nicht durchschlagen. Farbe der Primär-Buttons kommt aus den Design-Tokens. */ .eeecc-banner .eeecc-btn { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.1; border-radius: 8px !important; padding: 10px 16px !important; border: 1px solid transparent !important; margin: 0; text-transform: none !important; letter-spacing: normal; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; width: auto; min-width: 0; height: auto; transition: background .15s ease; } .eeecc-banner .eeecc-btn-accept, .eeecc-banner .eeecc-btn-save { background: var(--eeecc-accent, #9cc20b) !important; color: var(--eeecc-on-accent, #1d2a08) !important; border-color: var(--eeecc-accent-dk, #7d9c09) !important; } .eeecc-banner .eeecc-btn-accept { margin-left: auto; } .eeecc-banner .eeecc-btn-accept:hover, .eeecc-banner .eeecc-btn-accept:focus, .eeecc-banner .eeecc-btn-save:hover, .eeecc-banner .eeecc-btn-save:focus { background: var(--eeecc-accent-dk, #7d9c09) !important; color: var(--eeecc-on-accent, #1d2a08) !important; } /* Sekundär-Buttons: neutrales Grau (markenunabhängig, nie grünlich). */ .eeecc-banner .eeecc-btn-deny, .eeecc-banner .eeecc-btn-settings { background: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important; } .eeecc-banner .eeecc-btn-deny:hover, .eeecc-banner .eeecc-btn-deny:focus, .eeecc-banner .eeecc-btn-settings:hover, .eeecc-banner .eeecc-btn-settings:focus { background: #e5e7eb !important; color: #374151 !important; } .eeecc-banner .eeecc-btn:focus-visible { outline: 2px solid var(--eeecc-accent-dk, #7d9c09); outline-offset: 2px; } .eeecc-layout-bar .eeecc-btn-accept { margin-left: 0; } /* ---------- Kategorien-Panel ---------- */ .eeecc-settings { margin-top: 8px; border-top: 1px solid #e5e7eb; padding-top: 12px; } .eeecc-settings[hidden] { display: none; } .eeecc-settings-intro { margin: 0 0 10px; font-size: .9rem; color: #6b7280; } .eeecc-cat { display: block; padding: 10px 12px; margin-bottom: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; } .eeecc-cat-main { display: flex; align-items: center; gap: 8px; font-weight: 600; } .eeecc-cat-cb { width: 16px; height: 16px; accent-color: var(--eeecc-accent, #9cc20b); } .eeecc-cat-label em { font-weight: 400; color: #9ca3af; font-style: normal; font-size: .85em; } .eeecc-cat-desc { display: block; margin: 4px 0 0 24px; font-size: .85rem; color: #6b7280; } /* ---------- Platzhalter für blockierte Einbindungen ---------- */ .eeecc-embed { position: relative; background: #f3f4f6; border: 1px dashed #d1d5db; border-radius: 10px; overflow: hidden; color: #374151; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .eeecc-embed-inner { position: relative; } .eeecc-embed[data-eeecc-embed] .eeecc-embed-inner { width: 100%; } .eeecc-embed-box { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 28px 22px; min-height: 180px; } .eeecc-embed[data-eeecc-embed] .eeecc-embed-box { position: absolute; inset: 0; } .eeecc-embed-icon { width: 38px; height: 38px; border-radius: 50%; background: #e5e7eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / 22px no-repeat; } .eeecc-embed-title { font-weight: 700; font-size: 1rem; color: #1f2937; } .eeecc-embed-text { font-size: .88rem; max-width: 42ch; color: #4b5563; } .eeecc-embed-provider { font-size: .8rem; color: #9ca3af; } .eeecc-embed .eeecc-embed-load { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.1; margin-top: 4px; background: var(--eeecc-accent, #9cc20b) !important; color: var(--eeecc-on-accent, #1d2a08) !important; border: 1px solid var(--eeecc-accent-dk, #7d9c09) !important; border-radius: 8px !important; padding: 9px 16px !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; text-transform: none !important; width: auto; height: auto; } .eeecc-embed .eeecc-embed-load:hover, .eeecc-embed .eeecc-embed-load:focus { background: var(--eeecc-accent-dk, #7d9c09) !important; color: var(--eeecc-on-accent, #1d2a08) !important; } .eeecc-embed-always { font-size: .78rem; color: #6b7280; display: flex; align-items: center; gap: 6px; margin-top: 4px; } .eeecc-embed-always input { accent-color: var(--eeecc-accent, #9cc20b); } .eeecc-embed.is-loading .eeecc-embed-load { opacity: .6; pointer-events: none; } /* Geladenes iframe formatfüllend */ .eeecc-embed[data-eeecc-embed] iframe, .eeecc-loaded iframe { max-width: 100%; } /* Mobil */ @media (max-width: 520px) { .eeecc-layout-box { left: 12px; right: 12px; bottom: 12px; } .eeecc-layout-box .eeecc-banner-card { max-width: none; } .eeecc-banner .eeecc-btn-accept { margin-left: 0; } .eeecc-banner-actions { gap: 6px; } }