/* A11y Script Blocker – Frontend CSS
   Farben & Stile: Astra-Theme / klimaschutz-fuer-alle.at */

/* ── Platzhalter ──────────────────────────────────────────────────────────── */
.asb-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--ast-global-color-0, #e6ece3);
  border: 1px solid #c8d4c4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  container-type: inline-size;
}

.asb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem 2rem;
  text-align: center;
  width: 100%;
}

.asb-icon { color: var(--ast-global-color-3, #303c2e); line-height: 0; }

.asb-bold {
  margin: 0;
  font-weight: 900;
  font-size: .9rem;
  line-height: 1.2;
  color: var(--ast-global-color-3, #303c2e);
}

.asb-notice {
  margin: 0;
  font-size: .83333rem;
  line-height: 1.6;
  color: var(--lt-color-gray-600, #5e636e);
  max-width: 48ch;
}

.asb-priv-link {
  font-size: .78rem;
  color: var(--ast-global-color-3, #303c2e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.asb-priv-link:hover { color: var(--ast-global-color-1, #a22a48); }
.asb-priv-link:focus-visible {
  outline: 3px solid var(--ast-global-color-3, #303c2e);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Accept-Button (Astra CTA-Stil) ──────────────────────────────────────── */
.asb-accept-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 1em 2em;
  background-color: var(--ast-global-color-1, #a22a48);
  border: 4px solid var(--ast-global-color-1, #a22a48);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: .83333rem;
  font-weight: 900;
  line-height: 1.2em;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  box-shadow: 0 0 0 #00000026;
  transition: box-shadow .2s ease;
}
.asb-accept-btn:hover {
  background-color: var(--ast-global-color-2, #881351);
  border-color: var(--ast-global-color-2, #881351);
  box-shadow: 0 0 8px #00000040;
}
.asb-accept-btn:focus-visible {
  outline: 3px solid var(--ast-global-color-3, #303c2e);
  outline-offset: 3px;
}
.asb-accept-btn[aria-busy="true"] {
  opacity: .75;
  cursor: wait;
  pointer-events: none;
}
.asb-accept-btn[aria-busy="true"]::before {
  content: '';
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: asb-spin .7s linear infinite;
}
@keyframes asb-spin { to { transform: rotate(360deg); } }

/* ── Geladenes Video + Widerruf ───────────────────────────────────────────── */
.asb-loaded-wrap { width: 100%; }

.asb-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.asb-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  animation: asb-fade .4s ease;
}
@keyframes asb-fade { from { opacity: 0 } to { opacity: 1 } }

.asb-revoke-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--lt-color-gray-600, #5e636e);
}

.asb-revoke-btn {
  color: var(--ast-global-color-3, #303c2e);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .78rem;
}
.asb-revoke-btn:hover { color: var(--ast-global-color-1, #a22a48); }
.asb-revoke-btn:focus-visible {
  outline: 3px solid var(--ast-global-color-3, #303c2e);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── SR Live-Region ───────────────────────────────────────────────────────── */
.asb-sr-live {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .asb-accept-btn,
  .asb-iframe-wrap iframe { transition: none; animation: none; }
  .asb-accept-btn[aria-busy="true"]::before { animation: none; content: '…'; border: none; }
}