/* ============================================================
   Cookie-Banner (CCM19) im KINARVEX-Design
   CCM19 bleibt die Technik (Einwilligung, Nachweis, Blockieren) –
   hier wird nur das Aussehen überschrieben. Texte kommen aus dem
   CCM19-Dashboard. Selektoren mit „html body“ + !important, weil
   CCM19 sein eigenes CSS (app.css) nachlädt.
   Farben: nur Schwarz, Olive #4B5439, Weiß + Transparenzen.
   ============================================================ */
html body .ccm-root{
  --ck-bg: rgba(0,0,0,.78);
  --ck-border: rgba(255,255,255,.12);
  --ck-ink: #fff;
  --ck-dim: rgba(255,255,255,.66);
  --ck-faint: rgba(255,255,255,.42);
  --ck-olive: #4B5439;
  --ck-olive-light: color-mix(in srgb, #4B5439 70%, #fff);
  --ck-accept-bg: #fff;
  --ck-accept-ink: #000;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  color: var(--ck-ink) !important;
}
html[data-theme="light"] body .ccm-root{
  --ck-bg: rgba(255,255,255,.86);
  --ck-border: rgba(0,0,0,.1);
  --ck-ink: #000;
  --ck-dim: rgba(0,0,0,.66);
  --ck-faint: rgba(0,0,0,.45);
  --ck-olive-light: #4B5439;
  --ck-accept-bg: #000;
  --ck-accept-ink: #fff;
}

/* ---------- Karte: schwebendes Glas unten mittig, Seite bleibt sichtbar ---------- */
html body .ccm-root .ccm-widget .ccm-modal-inner{
  top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  width: min(620px, calc(100% - 32px)) !important; max-width: none !important;
  height: auto !important; max-height: calc(100% - 40px) !important;
  background: var(--ck-bg) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--ck-border) !important; border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow: hidden !important;
  transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1) !important;
}
/* dezenter Olive-Schimmer oben links */
html body .ccm-root .ccm-widget .ccm-modal-inner::before{
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(75,84,57,.45), transparent 60%);
}
html body .ccm-root .ccm-widget .ccm-modal-inner > *{ position: relative; z-index: 1; }

html body .ccm-root .ccm-modal--header,
html body .ccm-root .ccm-modal--body,
html body .ccm-root .ccm-modal--footer{ background: transparent !important; border: 0 !important; }

/* Kopf: kleines Logo links, Sprache + Schließen rechts */
html body .ccm-root .ccm-widget .ccm-modal--header{
  display: flex !important; align-items: center !important; gap: 12px;
  padding: 22px 26px 0 !important;
}
html body .ccm-root .ccm-widget--logo{ display: flex !important; padding: 0 !important; margin-right: auto; justify-content: flex-start !important; }
html body .ccm-root .ccm-widget--logo img{ height: 22px !important; width: auto !important; }
html[data-theme="light"] body .ccm-root .ccm-widget--logo img{ filter: invert(1); }
html body .ccm-root .ccm-widget--language-switch{ position: static !important; font-size: 12px !important; opacity: .8; }
html body .ccm-root .ccm-widget--language-switch select{ background: transparent !important; color: var(--ck-dim) !important; border: 0 !important; font: inherit !important; }
html body .ccm-root .ccm-widget--language-switch img{ display: none !important; }
html body .ccm-root .ccm-widget .ccm-dismiss-button{
  position: static !important; width: 32px !important; height: 32px !important; padding: 0 !important;
  font-size: 15px !important; color: var(--ck-ink) !important; opacity: .55 !important; border-radius: 50% !important;
}
html body .ccm-root .ccm-widget .ccm-dismiss-button:hover{ opacity: 1 !important; color: var(--ck-ink) !important; }

/* Text */
html body .ccm-root .ccm-widget .ccm-modal--body{ padding: 14px 26px 0 !important; overflow: visible !important; }
html body .ccm-root .ccm-widget--text{ max-height: 40vh; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: var(--ck-border) transparent; }
html body .ccm-root .ccm-widget--text::after,
html body .ccm-root .cover-scrollbar::before{ display: none !important; }
html body .ccm-root .ccm-widget--title{
  font-size: 1.2rem !important; font-weight: 800 !important; letter-spacing: -.01em; line-height: 1.25 !important;
  color: var(--ck-ink) !important; margin: 0 0 8px !important;
}
html body .ccm-root .ccm-widget--introduction,
html body .ccm-root .ccm-widget--introduction .ccm--p{
  font-size: .875rem !important; line-height: 1.6 !important; font-weight: 400 !important; color: var(--ck-dim) !important;
}

/* ---------- Buttons: gleich groß, nebeneinander. Akzeptieren gefüllt (Hauptaktion),
   Ablehnen als gut lesbarer Rahmen-Button – gleichwertig erreichbar (rechtlich wichtig) ---------- */
html body .ccm-root .ccm-widget--buttons{
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0 !important; padding: 0 !important;
}
html body .ccm-root .ccm-widget--buttons button,
html body .ccm-root .ccm-widget--buttons .button{
  order: 0; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 0 18px !important;
  border-radius: 100px !important; font: inherit !important; font-size: .9375rem !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important; outline-offset: 3px !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .25s ease, box-shadow .25s ease !important;
}
html body .ccm-root .ccm-widget--buttons .ccm--button-primary{
  order: 2; background: var(--ck-accept-bg) !important; color: var(--ck-accept-ink) !important; border: 1px solid var(--ck-accept-bg) !important;
  box-shadow: 0 8px 24px rgba(75,84,57,.35) !important;
}
html body .ccm-root .ccm-widget--buttons .ccm--button-primary:hover,
html body .ccm-root .ccm-widget--buttons .ccm--button-primary:focus-visible{
  background: var(--ck-olive) !important; color: #fff !important; border-color: var(--ck-olive) !important; transform: translateY(-1px);
}
html body .ccm-root .ccm-widget--buttons .ccm--decline-cookies{
  order: 1; background: transparent !important; color: var(--ck-ink) !important; border: 1px solid var(--ck-border) !important;
}
html body .ccm-root .ccm-widget--buttons .ccm--decline-cookies:hover,
html body .ccm-root .ccm-widget--buttons .ccm--decline-cookies:focus-visible{ border-color: var(--ck-olive-light) !important; background: transparent !important; color: var(--ck-ink) !important; }

/* Fuß: Links klein, „powered by“ zurückhaltend */
html body .ccm-root .ccm-widget .ccm-modal--footer{
  display: flex !important; flex-flow: row wrap !important; justify-content: space-between !important; align-items: center !important;
  gap: 8px 16px; padding: 16px 26px 20px !important;
}
html body .ccm-root .ccm-widget .ccm-modal--footer > *{ margin: 0 !important; }
html body .ccm-root .ccm-link-container{ font-size: 12px !important; }
html body .ccm-root .ccm-link-container a:link,
html body .ccm-root .ccm-link-container a:visited{ color: var(--ck-dim) !important; text-decoration: none !important; }
html body .ccm-root .ccm-link-container a:hover{ color: var(--ck-ink) !important; }
html body .ccm-root .ccm-link-container > a::before{ background: var(--ck-border) !important; }
html body .ccm-root .ccm-powered-by a:link,
html body .ccm-root .ccm-powered-by a:visited{ font-size: 11px !important; color: var(--ck-faint) !important; }

/* ---------- Einstellungen (zweite Ebene) im selben Stil ---------- */
html body .ccm-root .ccm-control-panel .ccm-modal-inner{
  width: min(680px, calc(100% - 32px)) !important; border-radius: 24px !important; overflow: hidden !important;
  background: var(--ck-bg) !important; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid var(--ck-border) !important; box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
}
html body .ccm-root .ccm-control-panel .ccm-modal--title{ font-size: 1.15rem !important; font-weight: 800 !important; color: var(--ck-ink) !important; }
html body .ccm-root .ccm-control-panel,
html body .ccm-root .ccm-control-panel .ccm-control-panel--purpose--description{ color: var(--ck-dim) !important; }
html body .ccm-root .ccm-control-panel button,
html body .ccm-root .ccm-control-panel .button{
  border-radius: 100px !important; font: inherit !important; font-weight: 600 !important; font-size: .875rem !important;
  background: transparent !important; color: var(--ck-ink) !important; border: 1px solid var(--ck-border) !important; min-height: 40px !important;
}
html body .ccm-root .ccm-control-panel .ccm--small{ min-height: 30px !important; font-size: .75rem !important; }
html body .ccm-root .ccm-control-panel .ccm--button-primary{ background: var(--ck-accept-bg) !important; color: var(--ck-accept-ink) !important; border-color: var(--ck-accept-bg) !important; }
html body .ccm-root .ccm-control-panel .ccm-info-button{ min-height: 0 !important; border-radius: 50% !important; }
html body .ccm-root .ccm-control-panel .ccm--tree-node-toggle{ border: 0 !important; min-height: 0 !important; }
html body .ccm-root .ccm-control-panel input.ccm-checkbox-type--switch:checked + label::before{ background-color: var(--ck-olive-light) !important; }
html body .ccm-root .ccm-link-container-sub-footer{ background: transparent !important; border-top: 1px solid var(--ck-border) !important; }

@media (max-width: 560px){
  html body .ccm-root .ccm-widget .ccm-modal-inner{ bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; width: calc(100% - 24px) !important; border-radius: 20px !important; }
  html body .ccm-root .ccm-widget .ccm-modal--header{ padding: 18px 20px 0 !important; }
  html body .ccm-root .ccm-widget .ccm-modal--body{ padding: 12px 20px 0 !important; }
  html body .ccm-root .ccm-widget .ccm-modal--footer{ padding: 14px 20px 16px !important; justify-content: center !important; }
  html body .ccm-root .ccm-widget--title{ font-size: 1.05rem !important; }
  html body .ccm-root .ccm-widget--buttons button{ font-size: .875rem !important; padding: 0 10px !important; white-space: nowrap !important; }
  html body .ccm-root .ccm-widget--text{ max-height: 30vh; }
}
@media (prefers-reduced-motion: reduce){
  html body .ccm-root .ccm-widget .ccm-modal-inner{ transition: none !important; }
}

/* ---------- Kekssymbol (öffnet die Einstellungen wieder): Olive, abgerundet, eigenes Icon ---------- */
html body .ccm-root .ccm-settings-summoner--link{
  border-radius: 14px !important; overflow: hidden;
  background: #4B5439 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.9 12.6A9 9 0 1 1 11.4 3.1a3 3 0 0 0 3.6 3.6 3 3 0 0 0 3.6 3.6 3 3 0 0 0 2.3 2.3Z'/%3E%3Ccircle cx='8.5' cy='10' r='.9' fill='%23fff'/%3E%3Ccircle cx='9.5' cy='15.5' r='.9' fill='%23fff'/%3E%3Ccircle cx='14.5' cy='14.5' r='.9' fill='%23fff'/%3E%3C/svg%3E") center / 24px no-repeat !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
  transition: background-color .2s ease, transform .25s ease !important;
}
html body .ccm-root .ccm-settings-summoner--link:hover,
html body .ccm-root .ccm-settings-summoner--link:focus-visible{
  background-color: color-mix(in srgb, #4B5439 82%, #fff) !important; transform: translateY(-2px);
}
html body .ccm-root .ccm-settings-summoner--icon{ display: none !important; }

/* Position: unten links, leicht transparent. Unter 768 px sitzt dort die „Kostenlos testen“-Pille –
   dann rückt das Symbol darüber. Ab 768 px ist „Kostenlos testen“ ein Reiter links mittig. */
html body .ccm-root .ccm-settings-summoner{
  left: 20px !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important; inset-inline-start: 20px !important;
  width: 44px !important; height: 44px !important;
  opacity: .55; transition: opacity .25s ease;
}
html body .ccm-root .ccm-settings-summoner:hover,
html body .ccm-root .ccm-settings-summoner:focus-within{ opacity: 1; }
@media (max-width: 767px){
  html body:has(#floatCta) .ccm-root .ccm-settings-summoner{ bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important; }
}
@media (max-width: 560px){
  html body .ccm-root .ccm-settings-summoner{ left: 14px !important; inset-inline-start: 14px !important; }
  html body:has(#floatCta) .ccm-root .ccm-settings-summoner{ bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important; }
}