/* =====================================================================
   EINWILLIGUNGSBANNER
   Sitzt unten, nimmt wenig Platz und blockiert die Seite nicht — man
   soll lesen koennen, worueber man entscheidet.
   ===================================================================== */

.cbanner{
  position:fixed;z-index:200;
  left:0;right:0;bottom:0;
  padding:clamp(12px,2vw,20px);
  display:flex;justify-content:center;
  pointer-events:none;
  opacity:0;translate:0 16px;
  transition:opacity .35s var(--ease),translate .45s var(--ease);
}
.cbanner.ist-da{opacity:1;translate:0 0}
.cbanner.ist-da .cbanner__karte{pointer-events:auto}

.cbanner__karte{
  width:min(100%,620px);
  padding:clamp(18px,2.4vw,24px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid rgba(var(--accent-rgb),.32);
  box-shadow:0 30px 64px -34px rgba(20,18,15,.5);
}

.cbanner__titel{
  margin:0 0 8px;font-family:var(--font-display);font-weight:600;
  font-size:17px;letter-spacing:-.015em;color:var(--ink);
}
.cbanner__text{
  margin:0 0 16px;color:var(--ink-soft);font-size:14.5px;line-height:1.55;
}
.cbanner__text a{
  color:var(--accent-ink);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;
}
.cbanner__text a:hover{color:var(--ink)}

/* Beide Schaltflaechen sind gleich gross und gleich gut zu treffen —
   die Ablehnung darf nicht schwerer zu finden sein als die Zustimmung. */
.cbanner__knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.cknopf{
  flex:1 1 180px;
  appearance:none;-webkit-appearance:none;
  font-family:inherit;font-size:14.5px;font-weight:500;line-height:1;
  letter-spacing:-.005em;
  padding:14px 20px;border-radius:var(--r-pill);
  cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),
             color .35s var(--ease),box-shadow .35s var(--ease);
}
.cknopf--ja{
  border:1px solid var(--accent);
  background:var(--accent);color:var(--btn-ink);
  box-shadow:0 8px 24px -14px rgba(var(--accent-rgb),.9);
}
.cknopf--ja:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.cknopf--nein{
  border:1px solid rgba(var(--accent-rgb),.5);
  background:transparent;color:var(--accent-ink);
}
.cknopf--nein:hover{background:rgba(var(--accent-rgb),.1);
  border-color:rgba(var(--accent-rgb),.8)}
.cknopf:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}

@media(max-width:420px){
  .cbanner__knoepfe{flex-direction:column}
  .cknopf{flex:none;width:100%}
}

@media(prefers-reduced-motion:reduce){
  .cbanner{transition:none}
}

/* --- Schaltflaeche im Fuss, die aussieht wie ein Link --------------- */
.foot__knopf{
  appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;
  font:inherit;font-size:14.5px;color:var(--ink-soft);cursor:pointer;
  transition:color .3s var(--ease);
}
.foot__knopf:hover{color:var(--ink)}
.foot__knopf:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:4px}