/* semco CARE — Einwilligungsabfrage
   Beide Schaltflächen sind bewusst gleich groß und gleich auffällig:
   Ablehnen darf nicht schwerer sein als Zustimmen. */

.cc{
  position:fixed;
  inset:auto 0 0 0;
  z-index:2000;
  padding:clamp(12px,2.5vw,22px);
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.cc[hidden]{display:none}

.cc__card{
  pointer-events:auto;
  width:min(680px,100%);
  background:var(--c-card,#fff);
  color:var(--c-ink,#1E2419);
  border:1px solid var(--c-line,#E7E1D4);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(31,61,11,.18), 0 2px 8px rgba(31,61,11,.08);
  padding:clamp(18px,3vw,26px);
  font-family:var(--f,system-ui,sans-serif);
}

.cc__title{
  margin:0 0 .5rem;
  font-size:1.15rem;
  line-height:1.3;
  color:var(--c-ink,#1E2419);
}
/* Der Fokus wandert beim Oeffnen auf die Ueberschrift, damit Screenreader die
   Abfrage ansagen. Sichtbar darf der Ring dort nicht sein - die Ueberschrift ist
   kein Bedienelement. Die Schaltflaechen behalten ihren Fokusring. */
.cc__title:focus,
.cc__title:focus-visible{outline:none}

.cc__text{
  margin:0 0 1.1rem;
  font-size:.95rem;
  line-height:1.55;
  color:var(--c-body,#55604E);
}

.cc__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cc__btn{
  flex:1 1 200px;
  min-height:48px;
  padding:.72rem 1.1rem;
  border-radius:999px;
  border:2px solid transparent;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cc__btn:hover{transform:translateY(-1px)}
.cc__btn:active{transform:translateY(0)}
.cc__btn:focus-visible{outline:3px solid var(--c-green-dark,#1F3D0B); outline-offset:2px}

.cc__btn--yes{
  background:var(--grad-lime,linear-gradient(135deg,#A6DC2C,#8FCA14 55%,#76AF00));
  color:var(--c-on-lime,#1F3D0B);
  box-shadow:0 4px 14px rgba(118,175,0,.32);
}
.cc__btn--no{
  background:var(--c-bg-2,#F3EFE6);
  color:var(--c-ink,#1E2419);
  border-color:var(--c-green-dark,#1F3D0B);
}
.cc__btn--no:hover{background:var(--c-bg,#FBF8F2)}

.cc__legal{
  margin:.95rem 0 0;
  font-size:.83rem;
  color:var(--c-muted,#6E7866);
}
.cc__legal a{color:inherit;text-decoration:underline}
.cc__legal a:hover{color:var(--c-green,#3F7A16)}

/* Auslöser im Seitenfuß — sieht aus wie die übrigen Rechtslinks */
.ft__menu button[data-consent-open]{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-decoration:none;
}
.ft__menu button[data-consent-open]:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .cc__btn{transition:none}
  .cc__btn:hover{transform:none}
}

@media (max-width:520px){
  .cc__btn{flex:1 1 100%}
}