/* ════════════════════════════════════════════════════════════════════════
   COOKIE-/EINWILLIGUNGS-BANNER — abby's food & friends
   Gestaltung passend zur Website (Tokens aus der jeweiligen Seite).
   Fallback-Werte, falls die Datei einmal ohne die Seiten-Tokens läuft.
   ════════════════════════════════════════════════════════════════════════ */

.cc,
.cc *{box-sizing:border-box}

/* ─── Abdunklung dahinter ─────────────────────────────────────────────── */
.cc__backdrop{
  position:fixed;inset:0;z-index:9998;
  background:rgba(22,51,44,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease;
}
.cc--sichtbar .cc__backdrop{opacity:1}

/* ─── Dialog ──────────────────────────────────────────────────────────── */
.cc__box{
  position:fixed;z-index:9999;
  left:50%;bottom:1.25rem;transform:translate(-50%,1.5rem);
  width:min(680px,calc(100vw - 2rem));
  max-height:calc(100vh - 2.5rem);overflow-y:auto;
  background:var(--paper,#F4EEE1);color:var(--ink,#16332C);
  border:1.5px solid var(--ink,#16332C);border-radius:22px;
  box-shadow:22px 30px 60px -34px rgba(22,51,44,.45);
  padding:1.9rem 1.9rem 1.6rem;
  opacity:0;transition:opacity .3s ease,transform .3s ease;
}
.cc--sichtbar .cc__box{opacity:1;transform:translate(-50%,0)}

.cc__eyebrow{
  font-family:"Space Mono",monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sea,#5E8C7C);
  margin:0 0 .55rem;
}
.cc__titel{
  font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.1;
  font-size:clamp(1.45rem,3.2vw,1.9rem);margin:0 0 .7rem;
}
.cc__text{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:.92rem;line-height:1.6;margin:0 0 1.15rem;
  color:var(--ink-soft,#2E4C43);
}
.cc__text a{color:var(--ink,#16332C);text-underline-offset:3px}
.cc__text a:hover{color:var(--plum,#7A2C48)}

/* ─── Kategorien ──────────────────────────────────────────────────────── */
.cc__kategorien{margin:0 0 1.25rem;display:none}
.cc--detail .cc__kategorien{display:block}

.cc__kat{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.85rem 0;border-top:1px solid var(--line,rgba(22,51,44,.18));
}
.cc__kat:last-child{border-bottom:1px solid var(--line,rgba(22,51,44,.18))}
.cc__kat input{
  margin:.2rem 0 0;width:1.1rem;height:1.1rem;flex:none;
  accent-color:var(--ink,#16332C);cursor:pointer;
}
.cc__kat input:disabled{cursor:not-allowed;opacity:.55}
.cc__kat label{cursor:pointer}
.cc__kat input:disabled + label{cursor:default}
.cc__kat b{
  display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-weight:600;font-size:.92rem;margin-bottom:.15rem;
}
.cc__kat span{
  display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:.82rem;line-height:1.5;color:var(--ink-soft,#2E4C43);
}
.cc__pflicht{
  font-family:"Space Mono",monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sea,#5E8C7C);
  margin-left:.5rem;
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
/* Ablehnen und Akzeptieren sind bewusst optisch gleichwertig —
   Voraussetzung für eine wirksame Einwilligung (EuGH/BGH, § 25 TDDDG). */
.cc__aktionen{display:flex;flex-wrap:wrap;gap:.7rem}
.cc__btn{
  font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.92rem;line-height:1;
  padding:.85em 1.5em;border-radius:100px;
  border:1.5px solid var(--ink,#16332C);
  background:var(--ink,#16332C);color:var(--paper,#F4EEE1);
  cursor:pointer;flex:1 1 200px;text-align:center;
  transition:transform .18s,background .2s,color .2s,border-color .2s;
}
.cc__btn:hover{
  background:var(--plum,#7A2C48);border-color:var(--plum,#7A2C48);
  transform:translateY(-2px);
}
.cc__btn:focus-visible{outline:2px solid var(--honey,#E0A03A);outline-offset:3px}

.cc__mehr{
  display:block;width:100%;margin-top:.95rem;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sea,#5E8C7C);
  text-align:center;text-decoration:underline;text-underline-offset:4px;
}
.cc__mehr:hover{color:var(--ink,#16332C)}

.cc__meta{
  margin:1.1rem 0 0;text-align:center;
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.06em;
  color:var(--sea,#5E8C7C);
}
.cc__meta a{color:inherit}

/* ─── Platzhalter für gesperrte externe Inhalte ───────────────────────── */
.cc-sperre{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;text-align:center;min-height:230px;padding:2rem 1.5rem;
  background:var(--paper-2,#ECE2CD);
  border:1.5px dashed var(--line,rgba(22,51,44,.18));border-radius:18px;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
}
.cc-sperre p{margin:0;font-size:.88rem;line-height:1.55;max-width:46ch;color:var(--ink-soft,#2E4C43)}
.cc-sperre .cc__btn{flex:0 0 auto}

/* ─── Fußzeilen-Link zum Widerruf ─────────────────────────────────────── */
/* Sitzt in der Fußzeile zwischen den Links und soll exakt so aussehen. */
.cc-widerruf{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:inherit;line-height:inherit;
  color:rgba(244,238,225,.85);text-decoration:none;
}
.cc-widerruf:hover{color:var(--honey,#E0A03A)}
.cc-widerruf:focus-visible{outline:2px solid var(--honey,#E0A03A);outline-offset:3px;border-radius:3px}

/* ─── Kleine Bildschirme ──────────────────────────────────────────────── */
@media (max-width:560px){
  .cc__box{padding:1.5rem 1.25rem 1.25rem;border-radius:18px;bottom:.6rem}
  .cc__btn{flex:1 1 100%}
}

/* ─── Bewegung reduzieren ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cc__box,.cc__backdrop,.cc__btn{transition:none}
  .cc__box{transform:translate(-50%,0)}
}