/* ELBRUS Cookie Banner – premium, readable, design-aligned */ :root{ --cc-z: 220; --cc-bg: rgba(8, 10, 18, .78); --cc-bg2: rgba(10, 12, 22, .86); --cc-panel: rgba(255,255,255,.045); --cc-stroke: rgba(255,255,255,.12); /* Premium gold (less yellow, more metallic) */ --cc-stroke2: rgba(201,162,77,.30); --cc-text: #EAF0FF; --cc-muted: rgba(234,240,255,.72); --cc-radius: 18px; --cc-shadow: 0 18px 70px rgba(0,0,0,.70); } /* Root wrapper (append to ) */ .ccRoot{ position: fixed; inset: 0; z-index: var(--cc-z); pointer-events: none; /* keep site look (serif), but guarantee readability */ font-family: ui-serif, Georgia, "Times New Roman", serif; color: var(--cc-text); } .ccRoot, .ccRoot *{ box-sizing: border-box; } .ccBackdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .18s ease; pointer-events: none; } .ccRoot.cc-showBackdrop .ccBackdrop{ opacity: 1; pointer-events: auto; } /* --- Bottom banner --- */ .ccBar{ pointer-events: auto; position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom) + var(--cc-stickyOffset, 0px)); max-width: 980px; margin: 0 auto; background: linear-gradient(180deg, var(--cc-bg), var(--cc-bg2)); border: 1px solid var(--cc-stroke); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 14px 14px 12px; opacity: 0; transform: translateY(16px); transition: opacity .22s ease, transform .22s ease; } .ccRoot.cc-visible .ccBar{ opacity: 1; transform: translateY(0); } .ccRoot.cc-hidden .ccBar{ opacity: 0; transform: translateY(16px); pointer-events:none; } .ccBar::before{ content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, rgba(201,162,77,0), rgba(201,162,77,.36), rgba(90,167,255,.26), rgba(201,162,77,.20), rgba(201,162,77,0) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.9; } .ccBarInner{ display: grid; grid-template-columns: 42px 1fr auto; align-items: start; gap: 12px; } .ccIcon{ width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); box-shadow: 0 12px 28px rgba(0,0,0,.45); color: var(--cc-text); } .ccIcon svg{ width: 20px; height: 20px; opacity: .92; } .ccText a{ color: rgba(201,162,77,.92); text-decoration: none; border-bottom: 1px solid rgba(201,162,77,.25); } .ccText a:hover{ border-bottom-color: rgba(201,162,77,.55); } .ccTitle{ font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; } .ccDesc{ margin: 0; font-size: 13px; line-height: 1.45; color: var(--cc-muted); } .ccActions{ display:flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; padding-top: 2px; } .ccBtn{ appearance: none; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--cc-text); border-radius: 14px; padding: 10px 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select: none; } .ccBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.085); border-color: rgba(201,162,77,.24); } .ccBtn:active{ transform: translateY(0); } .ccPrimary{ border-color: rgba(201,162,77,.34); background: linear-gradient(180deg, rgba(201,162,77,.18), rgba(90,167,255,.08)); } .ccPrimary:hover{ border-color: rgba(201,162,77,.55); } .ccSecondary{ background: rgba(255,255,255,.04); } .ccGhost{ background: rgba(255,255,255,.02); } /* Plain-text action (e.g. "Nur Auswahl speichern") */ .ccLink{ background: transparent; border-color: transparent; padding: 10px 4px; border-radius: 12px; color: rgba(234,240,255,.80); text-decoration: none; } .ccLink:hover{ transform: none; background: transparent; border-color: transparent; color: rgba(201,162,77,.95); text-decoration: underline; text-underline-offset: 4px; } .ccLink:active{ transform: none; } /* --- Modal --- */ .ccModal{ /* Important: when the modal is not open it must NOT block the page. Enable pointer-events only while .cc-modalOpen is active. */ pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.985); width: min(540px, calc(100% - 24px)); /* Prefer no scrolling: content is compact and fits on one screen */ max-height: none; overflow: hidden; border-radius: 22px; border: 1px solid var(--cc-stroke); background: linear-gradient(180deg, rgba(8,10,18,.90), rgba(10,12,22,.92)); box-shadow: var(--cc-shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transition: opacity .18s ease, transform .18s ease; outline: none; /* premium scrollbar fallback (only if overflow becomes necessary) */ scrollbar-width: thin; scrollbar-color: rgba(234,240,255,.25) rgba(255,255,255,.06); } .ccModal::-webkit-scrollbar{ width: 10px; height: 10px; } .ccModal::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; } .ccModal::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(234,240,255,.22), rgba(201,162,77,.22)); border: 2px solid rgba(255,255,255,.06); border-radius: 999px; } .ccRoot.cc-modalOpen .ccModal{ opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } .ccModalCard{ padding: 0; display:flex; flex-direction:column; } /* Prevent dismiss feedback (when user tries to close without choosing) */ .ccModalCard.ccShake{ animation: ccShake .32s ease; } @keyframes ccShake{ 0%{ transform: translateX(0); } 20%{ transform: translateX(-8px); } 40%{ transform: translateX(8px); } 60%{ transform: translateX(-6px); } 80%{ transform: translateX(6px); } 100%{ transform: translateX(0); } } .ccModalHeader{ position: sticky; top: 0; z-index: 1; padding: 12px 16px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: linear-gradient(180deg, rgba(8,10,18,.98), rgba(8,10,18,.70)); border-bottom: 1px solid rgba(255,255,255,.10); } .ccModalTitle{ font-size: 16px; letter-spacing: .03em; margin: 0; } .ccModalSub{ margin-top: 6px; font-size: 12.5px; color: var(--cc-muted); line-height: 1.4; } .ccIconBtn{ appearance: none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--cc-text); border-radius: 14px; padding: 8px 10px; cursor: pointer; } .ccIconBtn:hover{ border-color: rgba(201,162,77,.26); background: rgba(255,255,255,.08); } .ccIconBtn svg{ width: 18px; height: 18px; } .ccRows{ padding: 12px 16px 0; display: grid; gap: 10px; } .ccRow{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 18px; padding: 12px; display:flex; align-items: center; justify-content: space-between; gap: 12px; } .ccRowLeft{ min-width: 0; } .ccRowTitle{ font-size: 14px; font-weight: 800; letter-spacing: .01em; } .ccRowDesc{ margin-top: 6px; font-size: 12.5px; color: var(--cc-muted); line-height: 1.45; } .ccPill{ display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-weight: 800; font-size: 12px; letter-spacing: .02em; } /* Toggle switch (input + span.ccSwitch) */ .ccRowRight{ flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; } .ccChk{ position: absolute; opacity: 0; pointer-events: none; } .ccSwitch{ width: 46px; height: 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.10); position: relative; cursor: pointer; transition: background .14s ease, border-color .14s ease; } .ccSwitch::after{ content:""; width: 20px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.90); position: absolute; top: 2.5px; left: 3px; box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .14s ease; } /* when checked, input is inside .ccRowRight before .ccSwitch */ .ccRowRight .ccChk:checked + .ccSwitch{ background: rgba(201,162,77,.22); border-color: rgba(201,162,77,.40); } .ccRowRight .ccChk:checked + .ccSwitch::after{ transform: translateX(19px); } .ccDetails{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 18px; padding: 10px 12px; } .ccDetails summary{ cursor: pointer; font-weight: 800; font-size: 13px; color: var(--cc-text); list-style: none; } .ccDetails summary::-webkit-details-marker{ display:none; } .ccDetailsBody{ padding-top: 10px; color: var(--cc-muted); font-size: 12.5px; line-height: 1.55; } .ccDetailsBody b{ color: var(--cc-text); } .ccModalActions{ padding: 12px 16px 10px; display:flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .ccModalActionsSplit{ justify-content: space-between; } .ccModalActionsSplit{ justify-content: space-between; } .ccFineprint{ padding: 0 16px 10px; font-size: 12px; color: rgba(234,240,255,.62); } .ccFineprint a{ color: rgba(201,162,77,.92); text-decoration:none; border-bottom: 1px solid rgba(201,162,77,.22); } .ccFineprint a:hover{ border-bottom-color: rgba(201,162,77,.55); } /* Floating reopen button */ /* Mobile: banner becomes stacked + modal as bottom sheet */ @media (max-width: 820px){ .ccBarInner{ grid-template-columns: 42px 1fr; } .ccActions{ grid-column: 1 / -1; justify-content: stretch; } .ccBtn{ flex: 1; } } @media (max-width: 720px){ .ccModal{ left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom) + var(--cc-stickyOffset, 0px)); transform: translate(0, 12px); width: auto; max-height: min(78vh, 740px); } .ccRoot.cc-modalOpen .ccModal{ transform: translate(0, 0); } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ .ccBar, .ccModal, .ccBackdrop{ transition: none !important; } .ccBtn{ transition: none !important; } } /* Compact note inside settings */ .ccNote{ margin-top: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: rgba(234,240,255,.70); font-size: 12.5px; line-height: 1.45; } /* Small "recommended" tag */ .ccTag{ display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.92); border: 1px solid rgba(201,162,77,.35); background: rgba(201,162,77,.10); } /* If viewport is short, allow internal scrolling as a fallback */ @media (max-height: 720px){ .ccModal{ max-height: min(86vh, 720px); overflow: auto; } } /* Close (X) removed */ .ccIconBtn{ display:none !important; } /* --- Modal wrapper padding --- NOTE: The settings modal root is a
. The site-wide rule `section{padding:...}` adds large vertical padding to it. Reduce ONLY the top/bottom padding to 1/3. */ .ccModal{ padding-top: calc(44px / 3) !important; padding-bottom: calc(44px / 3) !important; } @media (max-width:980px){ .ccModal{ padding-top: calc(34px / 3) !important; padding-bottom: calc(34px / 3) !important; } } /* Business Pro: Inklusive block (premium highlight) */ .pro-includes-block{ margin-top: 14px; padding: 10px 12px 8px; border-radius: 12px; /* Less yellow, more premium gold */ border: 1px solid rgba(201, 162, 77, 0.30); background: linear-gradient(180deg, rgba(230, 200, 122, 0.10) 0%, rgba(201, 162, 77, 0.05) 45%, rgba(168, 131, 60, 0.03) 100% ); box-shadow: 0 8px 22px rgba(0,0,0,0.16) inset; } .pro-includes-label{ /* iOS-like label look */ font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; /* Metallic gold text */ background: linear-gradient(135deg, #E6C87A 0%, #C9A24D 38%, #A8833C 72%, #EAD9A3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .pro-includes-list{ list-style: none; margin: 0; padding: 0; } .pro-includes-list li{ display: flex; align-items: center; gap: 9px; padding: 4px 0; color: inherit; font-size: 13px; opacity: 0.96; } .pro-includes-list li:before{ content: "•"; color: rgba(201, 162, 77, 0.92); font-size: 16px; line-height: 1; margin-top: -2px; }