/* semco ONE — Einwilligungsabfrage
   Nutzt die Farb-Token der Seite, deshalb passt sie sich hellen und dunklen
   Seiten automatisch an. Beide Schaltflaechen sind bewusst gleich gross und
   gleich auffaellig: Ablehnen darf nicht schwerer sein als Zustimmen. */

.cc{
  position:fixed;
  inset:auto 0 0 0;
  z-index:9000;
  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(--card,#fff);
  color:var(--navy,#12152D);
  border:1px solid var(--line,#E5E8F2);
  border-radius:var(--radius-md,18px);
  box-shadow:var(--shadow-soft,0 20px 60px -24px rgba(18,21,45,.14));
  padding:clamp(18px,3vw,26px);
}

.cc__title{
  margin:0 0 .5rem;
  font-size:1.12rem;
  font-weight:600;
  line-height:1.3;
  color:var(--navy,#12152D);
}
/* Der Fokus wandert beim Oeffnen auf die Ueberschrift, damit Screenreader die
   Abfrage ansagen. Sichtbar gehoert der Ring dort nicht hin. */
.cc__title:focus,
.cc__title:focus-visible{outline:none}

.cc__text{
  margin:0 0 1.1rem;
  font-size:.93rem;
  line-height:1.6;
  color:var(--text-soft,#4A5170);
}

.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:1.5px solid transparent;
  font-family:inherit;
  font-size:.97rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:transform .14s var(--ease-out,ease), box-shadow .14s ease, background .14s ease;
}
.cc__btn:hover{transform:translateY(-2px)}
.cc__btn:active{transform:translateY(0)}
.cc__btn:focus-visible{outline:3px solid var(--blau,#0D71EA); outline-offset:2px}

.cc__btn--yes{
  background:linear-gradient(100deg,var(--blau,#0D71EA),#3f8ef0);
  color:#fff;
  box-shadow:0 14px 30px -14px rgba(13,113,234,.45);
}
.cc__btn--no{
  background:var(--surface-1,#F5F7FC);
  color:var(--navy,#12152D);
  border-color:var(--line,#E5E8F2);
}
.cc__btn--no:hover{border-color:var(--navy,#12152D)}

.cc__legal{
  margin:.95rem 0 0;
  font-size:.82rem;
  color:var(--mute,#676E90);
}
.cc__legal a{color:inherit;text-decoration:underline}
.cc__legal a:hover{color:var(--blau,#0D71EA)}

/* Ausloeser im Seitenfuss — sieht aus wie die uebrigen Rechtslinks */
.footer-links button[data-consent-open]{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.footer-links 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%}
}