/*
 * consent.css
 * -----------
 * Styling for the cookie/consent banner and its settings dialog.
 * Requires assets/css/tokens.css for the colour variables.
 *
 * Loaded on every page (index, impressum, datenschutz) since consent has to
 * be obtainable — and withdrawable — from anywhere on the site.
 */

/* --- Banner --- */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  background:var(--paper);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 28px rgba(51,68,63,0.10);
  padding:22px 24px;
  font-family:'Work Sans', sans-serif;
  transform:translateY(110%);
  transition:transform 0.35s ease;
}
.cc-banner.is-visible{transform:translateY(0);}

.cc-banner-inner{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.cc-text{flex:1 1 420px; min-width:0;}
.cc-title{
  font-family:'Fraunces', serif; font-weight:450; font-size:1.05rem;
  color:var(--ink); margin-bottom:6px; letter-spacing:-0.01em;
}
.cc-body{font-size:0.9rem; color:var(--text); line-height:1.6;}
.cc-body a{color:var(--sage-deep); text-decoration:underline;}

.cc-actions{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; flex-shrink:0;
}

/* Buttons. Accept and Reject are deliberately the same size and weight —
   GDPR requires that refusing is no harder than agreeing. */
.cc-btn{
  font-family:'Work Sans', sans-serif; font-size:0.86rem; font-weight:500;
  padding:11px 22px; border-radius:100px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:opacity 0.2s ease, background 0.2s ease;
}
.cc-btn:hover{opacity:0.85;}
.cc-btn-accept{background:var(--sage-deep); color:#fff;}
.cc-btn-reject{background:var(--paper); color:var(--ink); border-color:var(--ink);}
.cc-btn-settings{
  background:none; border:none; color:var(--text);
  text-decoration:underline; padding:11px 6px; font-size:0.84rem;
}

/* --- Settings dialog --- */
.cc-overlay{
  position:fixed; inset:0; z-index:9100;
  background:rgba(51,68,63,0.45);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.cc-overlay.is-open{display:flex;}

.cc-modal{
  background:var(--cream); border-radius:14px;
  max-width:560px; width:100%; max-height:85vh; overflow-y:auto;
  padding:30px 30px 26px;
  font-family:'Work Sans', sans-serif;
}
.cc-modal h2{
  font-family:'Fraunces', serif; font-weight:450; font-size:1.3rem;
  color:var(--ink); margin-bottom:10px; letter-spacing:-0.01em;
}
.cc-modal-intro{font-size:0.9rem; color:var(--text); margin-bottom:22px; line-height:1.6;}
.cc-modal-intro a{color:var(--sage-deep); text-decoration:underline;}

.cc-group{
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; margin-bottom:12px;
}
.cc-group-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:6px;
}
.cc-group-title{font-weight:600; font-size:0.94rem; color:var(--ink);}
.cc-group-desc{font-size:0.85rem; color:var(--text); line-height:1.55;}
.cc-group-detail{
  font-size:0.78rem; color:#7e8f88; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--line);
}

/* Toggle switch */
.cc-switch{position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0;}
.cc-switch input{opacity:0; width:0; height:0;}
.cc-slider{
  position:absolute; inset:0; cursor:pointer;
  background:#c9d2cc; border-radius:100px; transition:background 0.2s ease;
}
.cc-slider::before{
  content:""; position:absolute; height:18px; width:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform 0.2s ease;
}
.cc-switch input:checked + .cc-slider{background:var(--sage-deep);}
.cc-switch input:checked + .cc-slider::before{transform:translateX(20px);}
.cc-switch input:disabled + .cc-slider{opacity:0.55; cursor:not-allowed;}
.cc-switch input:focus-visible + .cc-slider{outline:2px solid var(--clay); outline-offset:2px;}

.cc-modal-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;
}

/* Small floating re-open button, shown once a choice has been made so the
   visitor can always change their mind (GDPR: consent must be withdrawable). */
.cc-reopen{
  position:fixed; left:18px; bottom:18px; z-index:8000;
  background:var(--paper); border:1px solid var(--line);
  border-radius:100px; padding:8px 14px;
  font-family:'Work Sans', sans-serif; font-size:0.76rem; color:var(--text);
  cursor:pointer; box-shadow:0 2px 10px rgba(51,68,63,0.10);
  display:none;
}
.cc-reopen.is-visible{display:block;}
.cc-reopen:hover{color:var(--ink);}

@media (max-width:720px){
  .cc-banner{padding:18px 18px 20px;}
  .cc-banner-inner{gap:16px;}
  .cc-actions{width:100%;}
  .cc-btn-accept, .cc-btn-reject{flex:1 1 auto; text-align:center;}
  .cc-modal{padding:24px 20px 20px;}
  .cc-reopen{left:12px; bottom:12px;}
}