/* ==== Küstenglück Cookie Banner – Bottom, black/white ================== */
:root{
  --cc-bg:#000;            /* Panel */
  --cc-text:#fff;          /* Text */
  --cc-btn-bg:#fff;        /* Primärbutton Füllung */
  --cc-btn-text:#000;      /* Primärbutton Text */
  --cc-btn-outline:#fff;   /* Button-Rand / Outline */
  --cc-link:#fff;          /* Links */
}

.hd-cc-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  backdrop-filter:saturate(100%) blur(2px);
  z-index:99998;display:none;
  height: 100vh;
}

/* ↓ unten mittig andocken (wie Honig) */
.hd-cc{
  position:fixed;left:50%;bottom:16px;transform:translate(-50%,12px);
  width:min(880px,calc(100vw - 24px));z-index:99999;
  background:var(--cc-bg);color:var(--cc-text);
  border:1px solid #222;box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;
}

body.hd-cc-locked { overflow: hidden; }

/* Ein-/Ausblenden (gleiche Klassennamen wie im JS: .show / .hide) */
.hd-cc.show{max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation:hdRise .28s cubic-bezier(.2,.75,.25,1) forwards}
.hd-cc.hide{animation:hdSink .22s ease forwards}
@keyframes hdRise{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0);pointer-events:auto}}
@keyframes hdSink{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,12px);pointer-events:none}}

.hd-cc-inner{padding:18px 18px 14px;display:grid;gap:12px}
.hd-cc-title{
  font-family:"Playfair Display SC",serif;font-weight:700;text-transform:uppercase;
  font-size:1.35rem;margin:0
}
.hd-cc-text{font-family:"Roboto",system-ui,sans-serif;font-size:.95rem;line-height:1.45;margin:0; color: #cccccc; padding-bottom: .5rem;}
.hd-cc-link{color:var(--cc-link);text-decoration:underline}

.hd-cc-actions{display:flex;gap:10px;flex-wrap:wrap}
.hd-cc-btn{
  appearance:none;border:1px solid var(--cc-btn-outline);background:transparent;color:var(--cc-text);
  padding:.65rem 1.1rem;cursor:pointer;border-radius:0;font-family:"Playfair Display SC",serif;
  text-transform:uppercase;font-weight:600;transition:transform .08s ease
}
.hd-cc-btn:hover{transform:translateY(-1px)}
.hd-cc-btn.primary{background:var(--cc-btn-bg);border-color:var(--cc-btn-bg);color:var(--cc-btn-text)}

/* Kleine Pfeil-Animation wie bei Honig */
.hd-cc-btn[data-anim="arrow"]{position:relative;padding-right:1.9rem}
.hd-cc-btn[data-anim="arrow"]::after{
  content:"›";position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  transition:transform .18s ease
}
.hd-cc-btn[data-anim="arrow"]:hover::after{transform:translate(4px,-50%)}

/* Pref-Bereich + Gruppen */
.hd-cc-pref{display:none;border-top:1px solid #222;padding-top:10px}
.hd-cc-group{
  display:grid;grid-template-columns:auto 120px;align-items:start;gap:8px;
  padding:8px 0;border-bottom:1px dashed #2a2a2a
}
.hd-cc-group:last-child{border-bottom:none}
.hd-cc-group h4{margin:0;font-size:1rem;text-transform:uppercase;font-family:"Playfair Display SC",serif}
.hd-cc-group p{margin:0;font-size:.9rem;color:#cfcfcf;font-family:"Roboto",system-ui,sans-serif}
.hd-cc-toggle{display:flex;justify-content:flex-end;align-items:center;height:100%}

/* Switch dunkel → hell bei Aktiv */
.hd-cc-switch{position:relative;width:46px;height:26px;background:#333;border:1px solid #555;cursor:pointer}
.hd-cc-switch input{appearance:none;position:absolute;inset:0;margin:0;opacity:0}
.hd-cc-switch i{
  position:absolute;left:2px;top:2px;width:22px;height:22px;background:#aaa;transition:.22s
}
.hd-cc-switch input:checked + i{left:22px;background:#fff}

/* Reopen-Button (falls aktiv) */
.hd-cc-revoke{
  position:fixed;right:12px;bottom:12px;background:#111;color:#ddd;border:1px solid #222;
  padding:.45rem .7rem;cursor:pointer;z-index:99990;display:none;text-transform:uppercase;
  font-family:"Playfair Display SC",serif
}

@media (max-width:520px){
  .hd-cc-inner{padding:14px}
  .hd-cc-actions{gap:8px}
  .hd-cc-btn{flex:1}
}