/*
 * consent.css — the two places where the consent tool shows through (AP4, phase 2).
 *
 * The plugin brings its own look: rounded corners, a drop shadow, a stock photograph behind
 * every blocked video and white lettering on a half-transparent black panel. None of that is
 * this site, which has no rounding anywhere (`--wi-radius` is 0), no shadows and no photographs
 * it did not take itself. What the visitor sees instead is the same surface and the same button
 * as the placeholder in front of the map (map-consent.css) — the two stand for the same thing
 * and should look as though they do.
 *
 * Two classes in every selector, and for the blocked-content container the SAME class twice:
 * the plugin writes its placeholder image into a stylesheet it appends at runtime, with
 * `!important` on a single-class selector. Repeating the class is what makes these rules win
 * without piling another `!important` on top of everything (the specificity rule from
 * AI/architecture/divi-fallstricke.md, section 2).
 */

/* ------------------------------------------------------------------ *
 * Where a blocked video was
 * ------------------------------------------------------------------ */

.cmplz-blocked-content-container.cmplz-blocked-content-container {
  border-radius: var(--wi-radius);
  box-shadow: none;
  /* The plugin fades the placeholder in over 600ms. Everything else on this site is simply
   * there. */
  animation: none;
  background-color: var(--wi-color-surface-muted);
  /* The stock photograph. It is served from this site and is no third-party request — it is
   * simply somebody else's picture of somebody else's office. */
  background-image: none !important;
}

/*
 * The placeholder keeps the size of the video it stands in for.
 *
 * Measured on dev on 2026-09-16 at a window of 1280px: the video renders 625 x 352, the
 * untouched placeholder 625 x 450 — because the plugin derives the height from the aspect ratio
 * of its own placeholder image, which is not the aspect ratio of the video. That is 98px of
 * layout that moves the moment consent is given, on every article carrying one.
 *
 * The rule is tied to Divi's video module rather than to the container alone: 16:9 is true of
 * the embeds in these articles, not of every conceivable blocked embedding.
 */
.et_pb_video_box.cmplz-blocked-content-container {
  height: auto;
  aspect-ratio: 16 / 9;
}

/*
 * And the iframe is taken out of the flow while it is one.
 *
 * Without this the rule above does nothing: `aspect-ratio` on a box with `height: auto` yields a
 * PREFERRED height, and the blocked iframe — still in the document, carrying the `height="608"`
 * of the embed and merely `visibility: hidden` — is taller than that and wins. Measured: 608px
 * with the aspect ratio applied and the iframe in flow, 352px with it out of flow.
 *
 * The container is already `position: relative` (the plugin sets it), and both rules stop
 * applying the moment consent is given: the tool takes `cmplz-blocked-content-container` off the
 * element, and with it the only selector either rule has.
 */
.et_pb_video_box.cmplz-blocked-content-container > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cmplz-blocked-content-container .cmplz-blocked-content-notice {
  /* The plugin caps the notice at 300px, which was room enough for four words. */
  max-width: 34em;
  padding: 12px 28px;
  border: var(--wi-border-width-button) solid currentColor;
  border-radius: var(--wi-radius);
  background-color: var(--wi-color-surface);
  color: var(--wi-color-ink);
  font-family: var(--wi-font-sans), sans-serif;
  font-size: var(--wi-font-size-body-narrow);
  line-height: 1.5;
  cursor: pointer;
}

.cmplz-blocked-content-container .cmplz-blocked-content-notice:hover,
.cmplz-blocked-content-container .cmplz-blocked-content-notice:focus-visible {
  border-color: var(--wi-color-accent);
  color: var(--wi-color-accent);
}

/* ------------------------------------------------------------------ *
 * The way back, in the legal line of the footer
 * ------------------------------------------------------------------ */

/*
 * A button that reads as the links beside it. It sits in the same list as "Imprint" and "Data
 * protection" and gets the vertical rule between the entries from footer.css; what it does not
 * get from anywhere is the browser's button chrome, hence the reset.
 */
.wi-footer .wi-consent-revoke {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wi-color-accent-hover);
  font-family: inherit;
  font-size: var(--wi-font-size-body);
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

.wi-footer .wi-consent-revoke:hover,
.wi-footer .wi-consent-revoke:focus-visible {
  text-decoration: underline;
}

@media only screen and (max-width: 1600px) {
  .wi-footer .wi-consent-revoke {
    font-size: var(--wi-font-size-body-medium);
  }
}