/* =================================================================== * Consentry — Banner Styles * Vendor-neutral, theme-agnostic. Variablen erlauben Branding per Theme. * ================================================================ */ :root { --cnsy-ink: #111614; --cnsy-ink-soft: #4a504c; --cnsy-ink-muted: #7a8079; --cnsy-surface: #ffffff; --cnsy-surface-soft: #f7f4ed; --cnsy-border: #e4e1d8; --cnsy-brand: #6d9820; --cnsy-brand-dark: #4d6e16; --cnsy-brand-soft: #e1ecc8; --cnsy-radius: 14px; --cnsy-radius-sm: 8px; --cnsy-shadow: 0 24px 64px rgba(14, 17, 19, 0.18); --cnsy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html.consentry-open { overflow: hidden; } #consentry-root { font-family: var(--cnsy-font); color: var(--cnsy-ink); font-size: 15px; line-height: 1.55; } #consentry-root *, #consentry-root *::before, #consentry-root *::after { box-sizing: border-box; } .consentry-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(14, 17, 19, 0.55); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: cnsy-fade-in 220ms ease; /* GPU-Compositing — verhindert Repaint des darunter liegenden DOMs beim Scroll. */ will-change: opacity; transform: translateZ(0); } @media (min-width: 720px) { .consentry-overlay { align-items: center; padding: 2rem; } } @keyframes cnsy-fade-in { from { opacity: 0; } to { opacity: 1; } } .consentry-card { background: var(--cnsy-surface); color: var(--cnsy-ink); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; border-radius: var(--cnsy-radius) var(--cnsy-radius) 0 0; box-shadow: var(--cnsy-shadow); padding: 1.5rem; animation: cnsy-slide-up 280ms cubic-bezier(0.22, 1, 0.36, 1); /* Eigenständiger Scroll-Container — verhindert Scroll-Chaining auf beim Reach-End. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* GPU-Compositing-Layer für flüssiges Scrollen + smooth slide-up. */ transform: translateZ(0); contain: content; } @media (min-width: 720px) { .consentry-card { border-radius: var(--cnsy-radius); padding: 2rem; } } .consentry-card--panel { max-width: 760px; } @keyframes cnsy-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Marken-Header mit Logo — full-bleed Streifen oben mit dezentem Brand-Ton */ .consentry-brand { margin: -1.5rem -1.5rem 1.5rem; padding: 1.5rem; background: var(--cnsy-brand-soft); border-bottom: 1px solid var(--cnsy-border); display: flex; justify-content: center; align-items: center; border-radius: var(--cnsy-radius) var(--cnsy-radius) 0 0; } @media (min-width: 720px) { .consentry-brand { margin: -2rem -2rem 1.75rem; padding: 1.75rem; } } /* !important + ID-Specificity, damit fremde Theme-img-Regeln das Logo nicht aufblähen. */ #consentry-root .consentry-brand__logo { height: 60px !important; width: auto !important; max-width: 200px !important; max-height: 60px !important; min-height: 0 !important; object-fit: contain !important; display: block !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .consentry-card__head { font-family: var(--cnsy-font); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.875rem; color: var(--cnsy-ink); } .consentry-card__body { margin: 0 0 1.5rem; color: var(--cnsy-ink-soft); font-size: 0.9375rem; } /* Kategorie-Übersicht auf Layer 1 */ .consentry-card__cats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } @media (min-width: 560px) { .consentry-card__cats { grid-template-columns: repeat(4, 1fr); } } .consentry-cat-chip { background: var(--cnsy-surface-soft); border: 1px solid var(--cnsy-border); border-radius: var(--cnsy-radius-sm); padding: 0.5rem 0.625rem; display: flex; flex-direction: column; gap: 0.125rem; } .consentry-cat-chip__name { font-size: 0.8125rem; font-weight: 600; color: var(--cnsy-ink); } .consentry-cat-chip__meta { font-size: 0.6875rem; color: var(--cnsy-ink-muted); } .consentry-cat-chip.is-required .consentry-cat-chip__meta { color: var(--cnsy-brand-dark); font-weight: 600; } .consentry-card__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; } .consentry-card__actions .consentry-btn { flex: 1 1 100%; } @media (min-width: 560px) { /* Zwei gleichwertige Buttons: exakt gleiche Breite (50/50). */ .consentry-card__actions .consentry-btn { flex: 1 1 0; } } /* "Einstellungen" als dezenter dritter Weg, zentriert unter den Hauptbuttons. */ .consentry-card__settings-row { display: flex; justify-content: center; margin-top: 0.75rem; } .consentry-card__settings-row .consentry-btn { min-height: 0; padding: 0.375rem 1rem; font-size: 0.875rem; } .consentry-card__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cnsy-border); font-size: 0.8125rem; } /* Trennpunkt zwischen den Links (wie bei klassischen CMP-Bannern) */ .consentry-card__links a:not(:last-child)::after { content: "·"; margin-left: 1.25rem; color: var(--cnsy-ink-muted); font-weight: 400; text-decoration: none; display: inline-block; } .consentry-card__links a { color: var(--cnsy-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cnsy-border); text-underline-offset: 3px; } .consentry-card__links a:hover { color: var(--cnsy-brand-dark); text-decoration-color: var(--cnsy-brand-dark); } /* ---------- Buttons ---------- */ .consentry-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; border-radius: var(--cnsy-radius-sm); border: 1px solid transparent; font-family: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease; min-height: 44px; } .consentry-btn:active { transform: scale(0.98); } /* Gleichwertige Buttons (DSGVO: kein Nudging) — identischer Stil für "Alle akzeptieren" und "Nur essenzielle". Dezent, neutral, gleiche Gewichtung. */ .consentry-btn--equal { background: var(--cnsy-surface); color: var(--cnsy-ink); border-color: var(--cnsy-ink); } .consentry-btn--equal:hover { background: var(--cnsy-surface-soft); border-color: var(--cnsy-ink); } .consentry-btn--primary { background: var(--cnsy-brand); color: #fff; } .consentry-btn--primary:hover { background: var(--cnsy-brand-dark); } .consentry-btn--secondary { background: transparent; color: var(--cnsy-ink); border-color: var(--cnsy-border); } .consentry-btn--secondary:hover { border-color: var(--cnsy-ink); } .consentry-btn--ghost { background: transparent; color: var(--cnsy-ink-muted); } .consentry-btn--ghost:hover { color: var(--cnsy-ink); background: var(--cnsy-surface-soft); } .consentry-btn--close { width: 36px; height: 36px; padding: 0; min-height: 36px; background: transparent; color: var(--cnsy-ink-muted); font-size: 1.5rem; line-height: 1; border: 0; } .consentry-btn--close:hover { color: var(--cnsy-ink); } /* ---------- Panel ---------- */ .consentry-panel__head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1rem; } .consentry-panel__head h2 { margin: 0; font-size: 1.25rem; font-weight: 600; } .consentry-panel__intro { margin: 0 0 1.5rem; color: var(--cnsy-ink-soft); font-size: 0.9375rem; } .consentry-panel__cats { display: flex; flex-direction: column; gap: 0.625rem; } .consentry-cat { background: var(--cnsy-surface-soft); border: 1px solid var(--cnsy-border); border-radius: var(--cnsy-radius-sm); overflow: hidden; } .consentry-cat__head { list-style: none; display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.125rem; cursor: pointer; } .consentry-cat__head::-webkit-details-marker { display: none; } .consentry-cat[open] .consentry-cat__head { border-bottom: 1px solid var(--cnsy-border); } .consentry-cat__toggle { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; width: 38px; height: 22px; cursor: pointer; } .consentry-cat__toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; } .consentry-cat__toggle input:disabled { cursor: not-allowed; } .consentry-cat__slider { position: absolute; inset: 0; background: #cfd3cc; border-radius: 999px; transition: background 160ms ease; } .consentry-cat__slider::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .consentry-cat__toggle input:checked ~ .consentry-cat__slider { background: var(--cnsy-brand); } .consentry-cat__toggle input:checked ~ .consentry-cat__slider::after { transform: translateX(16px); } .consentry-cat__toggle input:disabled ~ .consentry-cat__slider { background: var(--cnsy-brand-dark); opacity: 0.7; } .consentry-cat__labels { flex: 1; } .consentry-cat__label { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--cnsy-ink); } .consentry-cat__desc { display: block; color: var(--cnsy-ink-soft); font-size: 0.8125rem; margin-top: 0.25rem; } /* ---------- Service-Liste ---------- */ .consentry-svc-list { list-style: none; margin: 0; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 1rem; background: var(--cnsy-surface); } .consentry-svc { border: 1px solid var(--cnsy-border); border-radius: var(--cnsy-radius-sm); padding: 0.875rem 1rem; } .consentry-svc__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.375rem; } .consentry-svc__name { font-size: 0.9375rem; font-weight: 600; } .consentry-svc__provider { font-size: 0.75rem; color: var(--cnsy-ink-muted); } .consentry-svc__purpose { margin: 0 0 0.625rem; font-size: 0.8125rem; color: var(--cnsy-ink-soft); line-height: 1.5; } .consentry-svc__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; margin: 0 0 0.5rem; font-size: 0.75rem; } .consentry-svc__meta dt { color: var(--cnsy-ink-muted); font-weight: 600; } .consentry-svc__meta dd { margin: 0; color: var(--cnsy-ink-soft); word-break: break-word; } .consentry-svc__privacy { display: inline-block; font-size: 0.75rem; color: var(--cnsy-brand-dark); text-decoration: none; border-bottom: 1px solid var(--cnsy-brand-soft); } .consentry-svc__privacy:hover { border-bottom-color: var(--cnsy-brand-dark); } .consentry-panel__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cnsy-border); } .consentry-panel__actions .consentry-btn { flex: 1 1 100%; } @media (min-width: 560px) { .consentry-panel__actions .consentry-btn { flex: 1 1 auto; } } /* ---------- Click-to-Load Embed-Placeholder ---------- */ .consentry-embed { display: flex; align-items: center; justify-content: center; min-height: 200px; background: var(--cnsy-surface-soft); border: 1px dashed var(--cnsy-border); border-radius: var(--cnsy-radius-sm); padding: 1.5rem; font-family: var(--cnsy-font); color: var(--cnsy-ink); } .consentry-embed__inner { max-width: 480px; text-align: center; } .consentry-embed__title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; } .consentry-embed__message { margin: 0 0 1rem; font-size: 0.875rem; color: var(--cnsy-ink-soft); line-height: 1.5; } .consentry-embed__accept { display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; background: var(--cnsy-brand); color: #fff; border: 0; border-radius: var(--cnsy-radius-sm); font-weight: 600; font-size: 0.875rem; cursor: pointer; font-family: inherit; } .consentry-embed__accept:hover { background: var(--cnsy-brand-dark); } .consentry-embed__legal { margin: 0.75rem 0 0; font-size: 0.75rem; } .consentry-embed__legal a { color: var(--cnsy-ink-muted); text-decoration: underline; } /* ---------- Services-Tabelle (Shortcode) ---------- */ .consentry-services-table { overflow-x: auto; margin: 1.5rem 0; } .consentry-services-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .consentry-services-table th, .consentry-services-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--cnsy-border); text-align: left; vertical-align: top; } .consentry-services-table thead th { background: var(--cnsy-surface-soft); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cnsy-ink-muted); } /* ---------- Floating-Widerruf-Button ---------- */ .consentry-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 999000; width: 44px; height: 44px; border-radius: 50%; background: var(--cnsy-surface); border: 1px solid var(--cnsy-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.25rem; color: var(--cnsy-ink); } .consentry-fab:hover { background: var(--cnsy-surface-soft); }