/*
 * BSFZ-Siegel — the research-certification card, fixed bottom right.
 *
 * At rest it is the seal alone — no box, no padding, no text. On hover (or
 * focus) the card materialises around it and the title and paragraph fade in.
 * Structure and the shrink-on-hover move are
 * lifted from the Uiverse card the brief pointed at; the palette is the site's
 * own (--w7-dark-blue #000411, --w7-mediumgrey #5e5e5e, the white card and
 * large radius used everywhere else) rather than Uiverse's greenyellow, which
 * belongs to nothing else on this site.
 *
 * Injected into every page as a block before </body>. The Webflow export has
 * no shared layout, so "on every page" means the markup is repeated 50 times —
 * but the styling is defined once, here, so changing it is one file.
 *
 * ── Where it sits ─────────────────────────────────────────────────────────
 *
 * Three things already occupy the screen edges:
 *
 *   the contact bar (WhatsApp / social)   right edge, vertically centred
 *   the cookie-script button              bottom LEFT
 *   the cookie consent banner             bottom, full width, on first visit
 *
 * Bottom right is the free corner. The z-index stays deliberately low, well
 * under the range cookie-script uses, so the consent banner always covers this
 * rather than the other way round: a seal sitting on top of a consent dialogue
 * is both bad manners and the thing that makes consent tooling non-compliant.
 *
 * ── Why hover is not the only trigger ─────────────────────────────────────
 *
 * A touch screen has no hover, and a hover-only reveal simply never fires
 * there — the paragraph would be unreachable on every phone. `:focus-within`
 * plus `tabindex="0"` on the card means a tap opens it too, and so does Tab.
 * The text is in the DOM either way, so screen readers and crawlers always see
 * the certification claim regardless of whether the box has been opened.
 */

/*
 * The old contact sidebar is hidden and this takes its place.
 *
 * `.sidebar` is the WhatsApp / community / Instagram rail — fixed to the right
 * edge at `inset: 40% 0 auto auto`, and present on only 8 of the 50 pages.
 * It is hidden rather than deleted: the markup stays in the export, so
 * restoring it is deleting this one rule, and re-exporting Webflow will not
 * fight a change that was never made to the HTML.
 *
 * No !important. This stylesheet is injected after every other one, so at
 * equal specificity it already wins — reaching for !important here would only
 * make the next override harder.
 */
.sidebar {
  display: none;
}

.bsfz-siegel {
  position: fixed;
  /* The sidebar's own anchor: right edge, vertically centred. */
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;

  box-sizing: border-box;
  /* Collapsed, the box IS the logo: no padding, no chrome. Every card
     property below is transparent until the card is actually wanted, so what
     sits on the page at rest is a seal rather than a panel with a seal in it. */
  width: 96px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: none;
  /* Clips the title and paragraph while they are collapsed. */
  overflow: hidden;

  /* The site's own stack (--w7-font). Set explicitly rather than inherited:
     this block sits outside the Webflow wrapper. */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  text-align: center;
  color: #000411;

  transition: width 0.3s ease, padding 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover / focus: the card materialises around the seal. */
.bsfz-siegel:hover,
.bsfz-siegel:focus-within {
  width: 288px;
  padding: 16px;
  background: #fff;
  border-color: #e3e4de;
  box-shadow: 0 2px 4px rgba(0, 4, 17, 0.07), 0 16px 40px rgba(0, 4, 17, 0.12);
}

/* Remove the focus ring only because :focus-within already gives an unmistakable
   visual response — the card opens. Keyboard users are not left guessing. */
.bsfz-siegel:focus {
  outline: none;
}

.bsfz-siegel__logo {
  display: block;
  width: 96px;
  height: 96px;
  /* No bottom margin at rest — there is nothing under it to clear. */
  margin: 0 auto;
  transition: width 0.3s ease, height 0.3s ease, margin-bottom 0.3s ease;
}

/* The Uiverse move: the image gives up room so the card grows less than the
   text needs. */
.bsfz-siegel:hover .bsfz-siegel__logo,
.bsfz-siegel:focus-within .bsfz-siegel__logo {
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
}

.bsfz-siegel__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bsfz-siegel:hover .bsfz-siegel__title,
.bsfz-siegel:focus-within .bsfz-siegel__title {
  opacity: 1;
  transition: opacity 0.3s ease 0.12s;
}

/*
 * The reveal.
 *
 * grid-template-rows 0fr -> 1fr animates to the paragraph's real height, so
 * there is no invented max-height to guess at and no easing artefact when the
 * guess is too large. The inner element carries the overflow clip.
 */
.bsfz-siegel__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.bsfz-siegel:hover .bsfz-siegel__reveal,
.bsfz-siegel:focus-within .bsfz-siegel__reveal {
  grid-template-rows: 1fr;
}

.bsfz-siegel__reveal > * {
  overflow: hidden;
}

.bsfz-siegel__text {
  margin: 0;
  padding-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #5e5e5e;
  /* Left, unlike the seal and the title above it: this runs to five lines, and
     centred body copy makes every line start in a different place. */
  text-align: left;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bsfz-siegel:hover .bsfz-siegel__text,
.bsfz-siegel:focus-within .bsfz-siegel__text {
  opacity: 1;
  transition: opacity 0.3s ease 0.12s;
}

/*
 * "Beauftragt durch: Bundesministerium für Forschung, Technologie und
 * Raumfahrt" — the ministry the paragraph above names, closing the card.
 *
 * The asset carries its own edge-to-edge white background (a full-bleed
 * <rect> across the viewBox). That is exactly why it belongs in here rather
 * than on the hero, where it landed as a hard white rectangle on a pastel
 * gradient: the opened card is already white, so the two whites meet and the
 * mark simply sits on the card. The file is left untouched — it is a federal
 * ministry mark, and the white field is part of how it is licensed to be
 * shown.
 */
.bsfz-siegel__ministry {
  display: block;
  width: 148px;
  height: auto;
  max-width: 100%;
  margin: 14px auto 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bsfz-siegel:hover .bsfz-siegel__ministry,
.bsfz-siegel:focus-within .bsfz-siegel__ministry {
  opacity: 1;
  transition: opacity 0.3s ease 0.18s;
}

/* Narrow screens: back to the bottom corner.
 *
 * Vertically centred is right on a desktop and wrong on a phone, where a fixed
 * card at mid-height sits over the content being read rather than beside it.
 *
 * The 66px right offset this used to carry is gone with the sidebar it existed
 * to dodge — nothing occupies the right edge any more, so 14px is enough. */
@media (max-width: 700px) {
  .bsfz-siegel {
    right: 14px;
    top: auto;
    bottom: 14px;
    transform: none;
    width: 72px;
    padding: 0;
  }

  .bsfz-siegel:hover,
  .bsfz-siegel:focus-within {
    width: min(248px, calc(100vw - 28px));
    padding: 12px;
  }

  .bsfz-siegel__logo {
    width: 72px;
    height: 72px;
  }

  .bsfz-siegel:hover .bsfz-siegel__logo,
  .bsfz-siegel:focus-within .bsfz-siegel__logo {
    width: 60px;
    height: 60px;
  }

  .bsfz-siegel__title {
    font-size: 11.5px;
  }
}

/* Someone who has asked for less motion gets the reveal, without the travel. */
@media (prefers-reduced-motion: reduce) {
  .bsfz-siegel,
  .bsfz-siegel__logo,
  .bsfz-siegel__reveal,
  .bsfz-siegel__title,
  .bsfz-siegel__text,
  .bsfz-siegel__ministry {
    transition: none;
  }
}

/* A fixed overlay otherwise repeats on every sheet of a printout. */
@media print {
  .bsfz-siegel {
    display: none;
  }
}