/* ═══════════════════════════════════════════════════
   jens-richter.com — Cookie Consent
   DSGVO-konform, kategorienbasiert, elegant
   @copyright (C) jens-richter.com
   ═══════════════════════════════════════════════════ */

/* ─── Overlay ────────────────────────────────────── */
.cc-overlay{position:fixed;inset:0;background:rgba(5,5,5,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:99990;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.cc-overlay.visible{opacity:1;visibility:visible;transition:opacity .5s,visibility 0s 0s}

/* ─── Banner ─────────────────────────────────────── */
.cc-banner{position:fixed;bottom:0;left:0;right:0;z-index:99991;background:#0c0b09;border-top:1px solid rgba(255,255,255,.06);padding:0;transform:translateY(100%);transition:transform .6s cubic-bezier(.16,1,.3,1);max-height:90vh;overflow-y:auto}
.cc-banner.visible{transform:translateY(0)}

.cc-inner{max-width:900px;margin:0 auto;padding:2rem clamp(1.5rem,4vw,3rem)}

.cc-brand{font-family:'Instrument Serif',Georgia,serif;font-size:1.1rem;color:#b8935a;margin-bottom:.3rem}

.cc-text{font-family:'Outfit',system-ui,sans-serif;font-size:.88rem;color:#9b9688;line-height:1.65;margin-bottom:1.5rem;max-width:620px}
.cc-text a{color:#b8935a;text-decoration:underline;text-underline-offset:2px}
.cc-text a:hover{color:#d4cfc5}

/* ─── Category toggles ───────────────────────────── */
.cc-categories{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}

.cc-cat{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:#111110;border:1px solid rgba(255,255,255,.04);transition:border-color .3s}
.cc-cat:hover{border-color:rgba(255,255,255,.08)}

.cc-cat-info{flex:1;margin-right:1rem}
.cc-cat-name{font-family:'Outfit',system-ui,sans-serif;font-size:.82rem;font-weight:500;color:#d4cfc5;letter-spacing:.03em}
.cc-cat-desc{font-family:'Outfit',system-ui,sans-serif;font-size:.72rem;color:#5c584f;margin-top:.15rem;line-height:1.4}

.cc-cat-badge{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;padding:.2em .6em;border:1px solid;margin-left:.5rem}
.cc-cat-badge.required{color:#5c584f;border-color:#3a3732}
.cc-cat-badge.optional{color:#8a6e42;border-color:rgba(138,110,66,.3)}

/* ─── Toggle switch ──────────────────────────────── */
.cc-switch{position:relative;width:38px;height:20px;flex-shrink:0}
.cc-switch input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;z-index:2}
.cc-switch-track{position:absolute;inset:0;background:#3a3732;border-radius:10px;transition:background .3s}
.cc-switch input:checked+.cc-switch-track{background:#8a6e42}
.cc-switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#d4cfc5;border-radius:50%;transition:transform .3s,background .3s;pointer-events:none}
.cc-switch input:checked~.cc-switch-thumb{transform:translateX(18px);background:#b8935a}
.cc-switch input:disabled+.cc-switch-track{background:#2a2926}
.cc-switch input:disabled~.cc-switch-thumb{background:#5c584f}

/* ─── Buttons ────────────────────────────────────── */
.cc-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

.cc-btn{font-family:'Outfit',system-ui,sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:.9em 2em;border:1px solid;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);background:transparent;display:inline-block}

.cc-btn-accept{color:#08080a;background:#b8935a;border-color:#b8935a}
.cc-btn-accept:hover{background:#d4cfc5;border-color:#d4cfc5}

.cc-btn-save{color:#b8935a;border-color:#8a6e42}
.cc-btn-save:hover{background:#b8935a;color:#08080a}

.cc-btn-reject{color:#5c584f;border-color:#3a3732}
.cc-btn-reject:hover{color:#9b9688;border-color:#5c584f}

.cc-btn-settings{color:#5c584f;border-color:transparent;padding:.9em 1em;font-size:.65rem}
.cc-btn-settings:hover{color:#9b9688}

/* ─── Settings link (footer) ─────────────────────── */
.cc-settings-trigger{cursor:pointer;color:#5c584f;font-size:.7rem;transition:color .3s}
.cc-settings-trigger:hover{color:#b8935a}

/* ─── Detail panel (collapsed by default) ────────── */
.cc-details{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.cc-details.open{max-height:600px}

/* ─── Responsive ─────────────────────────────────── */
@media(max-width:600px){
    .cc-actions{flex-direction:column}
    .cc-btn{width:100%;text-align:center}
    .cc-cat{flex-direction:column;align-items:flex-start;gap:.5rem}
}