/* ==========================================================================
 * consent.css — banner styling for alophon.de
 * Scoped under [data-cc-root] / .cc-* so it cannot collide with site CSS.
 * Theme tokens match the ALO "Satoshi / violet" brand.
 * Honors prefers-reduced-motion and prefers-color-scheme.
 * ======================================================================== */

[data-cc-root]{
  --cc-font:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cc-title-font:"Satoshi",-apple-system,sans-serif;
  --cc-surface:#ffffff;
  --cc-surface-2:#faf8ff;
  --cc-fg:#0d0c12;
  --cc-muted:#5a5668;
  --cc-line:rgba(13,12,18,.10);
  --cc-accent:#6b46ff;          /* violet */
  --cc-accent-2:#7a57ff;
  --cc-accent-fg:#ffffff;
  --cc-btn-radius:999px;
  --cc-card-radius:18px;
  --cc-shadow:0 24px 70px -18px rgba(13,12,18,.34),0 2px 10px rgba(107,70,255,.10);
  --cc-focus:#6b46ff;
  --cc-switch-line:rgba(13,12,18,.5);   /* >=3:1 track border for 1.4.11 */
  --cc-ease:cubic-bezier(.22,.72,.28,1);
}

html.cc-open{}

/* ---- Container: full-width band pinned to the bottom edge (carries surface) ---- */
.cc-wrap{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;
  font-family:var(--cc-font);color:var(--cc-fg);
  background:var(--cc-surface);border-top:1px solid var(--cc-line);
  box-shadow:0 -12px 40px -14px rgba(0,0,0,.30);
  max-height:min(88vh,560px);overflow-y:auto;
  transform:translateY(100%);animation:cc-rise .32s var(--cc-ease) forwards;}

/* No dark overlay — the site stays visible/clickable. */
.cc-scrim{display:none;}

/* ---- Content: centered, max-width, transparent (surface is on .cc-wrap) ---- */
.cc-banner{position:relative;width:100%;max-width:1080px;margin:0 auto;
  background:transparent;color:var(--cc-fg);border:0;border-radius:0;box-shadow:none;
  padding:clamp(14px,2.4vw,20px) clamp(16px,4vw,30px);
  display:flex;flex-direction:column;gap:8px;}
.cc-banner:focus{outline:none;}

.cc-title{font-family:var(--cc-title-font);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(16px,2vw,19px);line-height:1.15;margin:0;}
.cc-body{font-size:13.5px;line-height:1.55;color:var(--cc-muted);margin:0;max-width:92ch;}
.cc-link{color:var(--cc-accent);font-weight:600;text-underline-offset:2px;}
.cc-link:hover{text-decoration:none;}

/* ---- Categories: compact horizontal row in the bottom bar ---- */
.cc-cats{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 24px;
  border-top:1px solid var(--cc-line);padding:10px 0 2px;margin:2px 0;}
.cc-cat{flex:1 1 210px;min-width:180px;padding:0;border:0;}
.cc-cat__head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.cc-cat__name{font-weight:700;font-size:15px;letter-spacing:-.01em;}
.cc-cat__desc{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--cc-muted);max-width:none;}
.cc-cat__badge{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--cc-accent);background:var(--cc-surface-2);border:1px solid rgba(107,70,255,.22);
  border-radius:999px;padding:3px 10px;white-space:nowrap;}

/* ---- Toggle switch ---- */
.cc-switch{position:relative;display:inline-flex;flex-shrink:0;cursor:pointer;}
.cc-switch__input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer;}
.cc-switch__track{width:44px;height:24px;border-radius:999px;background:#d6cff0;
  border:1px solid var(--cc-switch-line);transition:background .2s var(--cc-ease);display:block;}
.cc-switch__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(13,12,18,.3);transition:transform .2s var(--cc-ease);}
.cc-switch__input:checked ~ .cc-switch__track{background:var(--cc-accent);}
.cc-switch__input:checked ~ .cc-switch__track .cc-switch__thumb,
.cc-switch__input:checked + .cc-switch__track .cc-switch__thumb{transform:translateX(20px);}
.cc-switch__input:focus-visible ~ .cc-switch__track{outline:2px solid var(--cc-focus);outline-offset:2px;}

/* ---- Actions: three EQUAL buttons (right-aligned on desktop) ---- */
.cc-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:2px;}
@media (min-width:560px){.cc-actions{grid-template-columns:1fr 1fr 1fr;}}
@media (min-width:860px){.cc-actions{grid-template-columns:repeat(3,minmax(120px,auto));justify-content:end;}}
.cc-btn{appearance:none;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;
  padding:12px 16px;border-radius:var(--cc-btn-radius);cursor:pointer;
  background:var(--cc-surface);color:var(--cc-fg);border:1.5px solid var(--cc-fg);
  transition:background .18s var(--cc-ease),color .18s var(--cc-ease),border-color .18s var(--cc-ease);text-align:center;}
.cc-btn:hover{background:var(--cc-fg);color:var(--cc-surface);}
.cc-btn:focus-visible{outline:2px solid var(--cc-focus);outline-offset:2px;}

/* ---- Animations ---- */
@keyframes cc-fade{to{opacity:1;}}
@keyframes cc-rise{to{transform:translateY(0);opacity:1;}}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .cc-wrap{animation:none;transform:none;}
  .cc-switch__track,.cc-switch__thumb,.cc-btn{transition:none;}
}

/* ---- Windows High Contrast / forced-colors: keep switch states distinct ---- */
@media (forced-colors:active){
  .cc-switch__track{border:1px solid CanvasText;background:Canvas;}
  .cc-switch__input:checked ~ .cc-switch__track{background:Highlight;}
  .cc-switch__thumb{background:CanvasText;}
  .cc-btn{border:1px solid CanvasText;}
}

/* ---- Dark scheme ---- */
@media (prefers-color-scheme:dark){
  [data-cc-root]{
    --cc-surface:#14121c;--cc-surface-2:#1b1826;
    --cc-fg:#ececf2;--cc-muted:#a29fb2;
    --cc-line:rgba(236,236,242,.16);
    --cc-accent:#9b82ff;--cc-accent-fg:#14121c;--cc-focus:#9b82ff;
    --cc-switch-line:rgba(236,236,242,.55);
    --cc-shadow:0 24px 70px -18px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.4);
  }
  .cc-switch__track{background:#3b3550;}
  .cc-cat__badge{background:#1b1826;}
  .cc-btn{border-color:var(--cc-fg);}
  .cc-btn:hover{background:var(--cc-fg);color:#14121c;}
}