/* ============================================================
   consent.css — Cookie-/Consent-Banner „Bestes vom Elbdeich"
   Scrapbook-Look: Papier, Tape, Fraunces/Caveat, Rot/Apricot/Gold.
   Greift auf die :root-Variablen der Seite zurück; setzt Fallbacks,
   falls die Datei einmal isoliert geladen wird.
   ============================================================ */

:root{
  --cc-nacht:var(--nacht,#100F14);
  --cc-papier:var(--papier,#F4ECDC);
  --cc-papier-d:var(--papier-dunkel,#E9DEC8);
  --cc-rot:var(--rot,#C03A2B);
  --cc-rot-hell:var(--rot-hell,#E2502F);
  --cc-apricot:var(--apricot,#E89B66);
  --cc-gold:var(--gold,#E8B45A);
  --cc-moos:var(--moos,#5C6B4A);
  --cc-tinte:var(--tinte,#221F1B);
  --cc-tinte-soft:var(--tinte-soft,#5A5246);
  --cc-kreide:var(--kreide,#F7F1E4);
  --cc-f-display:var(--f-display,'Fraunces',Georgia,serif);
  --cc-f-body:var(--f-body,'Instrument Sans',system-ui,sans-serif);
  --cc-f-hand:var(--f-hand,'Caveat',cursive);
  --cc-ease:var(--ease,cubic-bezier(.22,.7,.25,1));
}

/* ---------- Banner ---------- */
.cc-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:flex;justify-content:center;
  padding:clamp(.75rem,2.5vw,1.5rem);
  font-family:var(--cc-f-body);
  pointer-events:none;
}
.cc-banner[hidden]{display:none}
.cc-banner__karte{
  pointer-events:auto;
  position:relative;
  width:min(540px,100%);
  background:var(--cc-papier);
  color:var(--cc-tinte);
  border-radius:16px;
  padding:1.5rem 1.6rem 1.4rem;
  box-shadow:0 26px 60px -24px rgba(16,15,20,.7), 0 2px 0 rgba(34,31,27,.06);
  transform:rotate(-.5deg);
  animation:cc-rein .5s var(--cc-ease) both;
  line-height:1.55;
}
@keyframes cc-rein{from{opacity:0;transform:translateY(26px) rotate(-.5deg)}to{opacity:1;transform:translateY(0) rotate(-.5deg)}}

/* Klebeband oben */
.cc-banner__karte::before{
  content:"";position:absolute;top:-13px;left:50%;
  width:128px;height:26px;transform:translateX(-50%) rotate(-1.5deg);
  background:linear-gradient(135deg,rgba(232,180,90,.55),rgba(232,155,102,.5));
  border:1px dashed rgba(34,31,27,.22);
  box-shadow:0 2px 8px rgba(16,15,20,.18);
}

.cc-banner__titel{
  font-family:var(--cc-f-display);
  font-weight:600;font-size:1.18rem;letter-spacing:.01em;
  display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem;
}
.cc-banner__titel svg{width:22px;height:22px;flex:none;color:var(--cc-rot)}
.cc-banner__text{font-size:.92rem;color:var(--cc-tinte-soft);margin-bottom:.5rem}
.cc-banner__hand{font-family:var(--cc-f-hand);font-size:1.12rem;color:var(--cc-rot);
  display:inline-block;margin-bottom:.85rem;line-height:1.1}
.cc-banner__links{font-size:.82rem;margin-bottom:1rem}
.cc-banner__links a{color:var(--cc-rot);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.cc-banner__links a:hover{color:var(--cc-rot-hell)}

.cc-banner__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- Buttons (Pillen wie .knopf) ---------- */
.cc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--cc-f-body);font-weight:600;font-size:.9rem;letter-spacing:.01em;
  padding:.78rem 1.4rem;border-radius:999px;border:none;cursor:pointer;
  transition:transform .3s var(--cc-ease),box-shadow .3s var(--cc-ease),
             background .3s var(--cc-ease),border-color .3s var(--cc-ease),color .3s var(--cc-ease);
}
.cc-btn:active{transform:translateY(1px) scale(.99)}
.cc-btn:focus-visible{outline:3px solid var(--cc-gold);outline-offset:3px}

.cc-btn--voll{background:var(--cc-rot);color:var(--cc-kreide);
  box-shadow:0 10px 26px -12px rgba(192,58,43,.7);flex:1 1 auto}
.cc-btn--voll:hover{background:var(--cc-rot-hell);box-shadow:0 14px 32px -12px rgba(226,80,47,.75)}

.cc-btn--leer{background:transparent;color:var(--cc-tinte);
  border:1.5px solid rgba(34,31,27,.3)}
.cc-btn--leer:hover{border-color:var(--cc-tinte)}

.cc-btn--text{background:transparent;color:var(--cc-rot);padding:.78rem .9rem}
.cc-btn--text:hover{background:rgba(192,58,43,.08)}

.cc-btn--moos{background:var(--cc-moos);color:var(--cc-kreide);
  box-shadow:0 10px 26px -12px rgba(92,107,74,.7)}
.cc-btn--moos:hover{filter:brightness(1.08)}

/* ---------- Overlay + Modal ---------- */
.cc-overlay{position:fixed;inset:0;z-index:1001;background:rgba(16,15,20,.7);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity .28s var(--cc-ease)}
.cc-overlay[hidden]{display:none}
.cc-overlay.cc-auf{opacity:1}

.cc-modal{position:fixed;inset:0;z-index:1002;display:grid;place-items:center;
  padding:clamp(1rem,4vw,2.5rem);pointer-events:none}
.cc-modal[hidden]{display:none}
.cc-modal__karte{
  pointer-events:auto;position:relative;
  width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--cc-papier);color:var(--cc-tinte);
  border-radius:18px;padding:1.7rem 1.7rem 1.5rem;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:scale(.96) rotate(-.4deg);opacity:0;
  transition:transform .3s var(--cc-ease),opacity .3s var(--cc-ease)}
.cc-modal.cc-auf .cc-modal__karte{transform:scale(1) rotate(-.4deg);opacity:1}

.cc-modal__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.4rem}
.cc-modal__titel{font-family:var(--cc-f-display);font-weight:600;font-size:1.5rem;line-height:1.1}
.cc-modal__hand{font-family:var(--cc-f-hand);color:var(--cc-rot);font-size:1.15rem;display:block;margin-bottom:1.1rem}
.cc-modal__zu{width:38px;height:38px;flex:none;border-radius:50%;border:1.5px solid rgba(34,31,27,.25);
  background:transparent;color:var(--cc-tinte);display:grid;place-items:center;cursor:pointer;
  transition:background .25s,border-color .25s}
.cc-modal__zu:hover{background:rgba(34,31,27,.07);border-color:var(--cc-tinte)}
.cc-modal__zu svg{width:16px;height:16px}

/* ---------- Kategorien ---------- */
.cc-kat{border:1px solid rgba(34,31,27,.16);border-radius:12px;padding:1rem 1.05rem;margin-bottom:.75rem;
  background:rgba(255,255,255,.28)}
.cc-kat__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.4rem}
.cc-kat__name{font-family:var(--cc-f-display);font-weight:600;font-size:1.02rem}
.cc-kat__text{font-size:.85rem;color:var(--cc-tinte-soft);line-height:1.5}
.cc-kat__badge{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--cc-moos);
  background:rgba(92,107,74,.14);padding:.22rem .6rem;border-radius:999px;white-space:nowrap}

/* Toggle */
.cc-toggle{position:relative;width:46px;height:26px;flex:none}
.cc-toggle input{position:absolute;opacity:0;width:0;height:0}
.cc-toggle__bahn{position:absolute;inset:0;border-radius:999px;background:rgba(34,31,27,.28);
  cursor:pointer;transition:background .25s var(--cc-ease)}
.cc-toggle__bahn::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--cc-papier);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--cc-ease)}
.cc-toggle input:checked + .cc-toggle__bahn{background:var(--cc-rot)}
.cc-toggle input:checked + .cc-toggle__bahn::before{transform:translateX(20px)}
.cc-toggle input:focus-visible + .cc-toggle__bahn{outline:3px solid var(--cc-gold);outline-offset:2px}

.cc-modal__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;padding-top:1rem;
  border-top:1px dashed rgba(34,31,27,.2)}
.cc-modal__knoepfe .cc-btn{flex:1 1 150px}
.cc-modal__fuss{text-align:center;margin-top:.9rem;font-size:.78rem}
.cc-modal__fuss a{color:var(--cc-tinte-soft);text-decoration:underline;text-underline-offset:2px}
.cc-modal__fuss a:hover{color:var(--cc-rot)}

/* ---------- Platzhalter für blockierte Medien ---------- */
.cc-embed{position:relative}
.cc-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cc-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.7rem;padding:1.5rem;
  background:linear-gradient(160deg,var(--cc-nacht),#1A1820);
  color:var(--cc-kreide);font-family:var(--cc-f-body)}
.cc-ph__icon{width:46px;height:46px;color:var(--cc-apricot);opacity:.9}
.cc-ph__titel{font-family:var(--cc-f-display);font-weight:600;font-size:1.1rem}
.cc-ph__text{font-size:.86rem;color:var(--cc-kreide);opacity:.72;max-width:34ch;line-height:1.5}
.cc-ph__btn{margin-top:.3rem;background:var(--cc-apricot);color:var(--cc-nacht);
  display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.88rem;font-family:var(--cc-f-body);
  padding:.7rem 1.3rem;border-radius:999px;border:none;cursor:pointer;
  transition:transform .3s var(--cc-ease),filter .3s var(--cc-ease)}
.cc-ph__btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cc-ph__btn:focus-visible{outline:3px solid var(--cc-gold);outline-offset:3px}
.cc-ph__klein{font-size:.74rem;opacity:.6}
.cc-ph__klein a{color:var(--cc-apricot);text-decoration:underline;text-underline-offset:2px}

/* Footer-Link „Cookie-Einstellungen" — neutral wie Impressum/Datenschutz */
.cc-open{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:none;transition:color .3s}
.cc-open:hover{color:var(--cc-gold)}
.cc-open:focus-visible{outline:3px solid var(--cc-gold);outline-offset:3px;border-radius:3px}

/* ---------- Mobil ---------- */
@media(max-width:560px){
  .cc-banner__karte{transform:none;animation:cc-rein-m .5s var(--cc-ease) both}
  @keyframes cc-rein-m{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
  .cc-banner__knoepfe{flex-direction:column}
  .cc-btn--voll,.cc-btn--leer,.cc-btn--text{flex:1 1 100%;width:100%}
  .cc-modal__knoepfe{flex-direction:column}
  .cc-modal__knoepfe .cc-btn{flex:1 1 100%}
}

/* ---------- Reduzierte Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  .cc-banner__karte,.cc-modal__karte,.cc-overlay{animation:none!important;transition:none!important}
}