/* ====================================================================
 * IT SECURITY LANDING PAGE - THE TWO REFERENCE CARDS (.ccsecp-refs)
 *
 * The section shows Melitta and Oldenburgische Landesbank side by side.
 * Until round 15 both cards were a logo, a paragraph and a row of chips on
 * a flat panel. Nothing on them moved, nothing was shown, and next to the
 * reference cards of the home page they read as a placeholder.
 *
 * The round gives each card a picture band across its top, a status badge
 * next to the logo, the blue rim and spotlight the rest of the site uses,
 * and an orange accent on the chips. What the Elementor settings can carry
 * stays in the Elementor settings: the fill, the frame, the radius and the
 * type of every card are set on the elements themselves. Four things they
 * cannot carry live here.
 *
 *   1. The band bleeds past the padding of its own card. That is a
 *      negative margin computed from the card padding, and the padding is
 *      not the same on desktop and on small screens.
 *   2. Only the two upper corners of the band are round, and the picture
 *      is laid whole onto a stage of a fixed height. Elementor writes one
 *      radius for all four corners, has no per side control, and no field
 *      for object-fit.
 *   3. Both pictures are device mockups that have to be shown complete.
 *      The ground they sit on is written here, because it has to match the
 *      ground inside the OLB file to the level so that its edges do not
 *      show as a rectangle.
 *   4. The chips are drawn by the page level custom css of the landing
 *      page. Overriding them from an element needs a selector with more
 *      weight than the page rule, which no Elementor field produces.
 *
 * Scope. Every rule below starts at .ccsecp-refs, the section wrapper of
 * this one block. The classes it reaches into (.ccsec-ref, .ccsec-logo,
 * .ccchips, .ccstep) also exist on the home page and on the German copy of
 * this page, and none of them may be touched from here.
 *
 * Borrowed on purpose: .ccref-badge and .ccfx-dot are the badge and the
 * pulsing dot of the home page reference cards, defined in ccfx-v3.css.
 * The badge markup here carries the same two classes, so the pill and its
 * green signal come across without a second copy of either rule.
 * ==================================================================== */


/* --------------------------------------------------------------------
 * The card
 *
 * position and z-index are held here rather than left to the effect
 * engine. mm-rb sets position on .mmrb-glowcard at runtime, but the band
 * and the badge depend on the card being a positioning parent before any
 * script has run, otherwise the first paint puts the band at the top of
 * the page.
 *
 * No overflow is set. The rim of the glow card sits as its own span 36px
 * outside the card, and a clip here would cut exactly that span away. The
 * band is clipped inside its own box instead, further down.
 * -------------------------------------------------------------------- */
.ccsecp-refs .ccsec-ref {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  /* Reach of the rim box. The engine ships 36px, which is meant for cards
   * that sit well inside their page. These two do not: the grid runs to
   * the inner edge of the section, and the section keeps 20px of padding
   * to the boxed width. 36px therefore hangs 16px past the page and gives
   * the document a horizontal scrollbar of a few pixels on a 1440 screen.
   *
   * 20px is the largest value that cannot do that at any width, because
   * it is exactly the padding the aura is allowed to grow into. Nothing
   * is lost visually: the ring itself is drawn on the card border, and
   * the bloom around it is a box shadow that paints past the box anyway. */
  --gc-pad: 20px;
  /* Grid items default to min-width: auto and will not shrink below the
   * widest thing inside them. One long word, or the alt text of a picture
   * that fails to load, would then push the card past its column and give
   * the page a horizontal scrollbar. */
  min-width: 0;
}

/* The chips sit at the bottom edge of the taller of the two cards, so the
 * two chip rows line up even when one text runs a line longer. */
.ccsecp-refs .ccsec-ref > .ccchips {
  margin-top: auto;
}


/* --------------------------------------------------------------------
 * The picture band
 *
 * Full width of the card, flush against the frame. The card carries
 * 28px/26px of padding on desktop and 22px/20px below 768px, and the band
 * has to cancel exactly that much on three sides. calc on the width
 * instead of align-self: stretch, because the widget arrives with
 * width: 100% from Elementor and a stretch would leave the right edge
 * short by the width of the left offset.
 *
 * The radius is one pixel under the 16px of the card: the band sits
 * inside the 1px frame, so its arc has to run a pixel tighter to stay
 * concentric with it.
 *
 * Five classes on the selector, and that is the minimum. Elementor caps
 * every widget in a container with
 *
 *   .elementor.elementor .e-con > .elementor-widget { max-width: 100% }
 *
 * which counts four classes. A shorter selector sets the width to
 * 100% + 52px and then has it clipped straight back to the content box,
 * which leaves the band short by the padding on the right and is exactly
 * the state this rule looked to be in at first.
 * -------------------------------------------------------------------- */
.elementor .ccsecp-refs .ccsec-ref > .elementor-widget.ccsec-refimg {
  width: calc(100% + 52px);
  max-width: none;
  margin: -28px -26px 20px -26px;
}

/* The stage the two mockups stand on.
 *
 * Both pictures are a monitor with a phone beside it, and both are shown
 * whole rather than cropped, so neither of them fills the band: the band is
 * about 674px wide and 252px high, the pictures are around 4:3. Roughly a
 * quarter of the band on each side is therefore ground, and that ground is
 * this gradient.
 *
 * The two values are read off the OLB file. It is a photograph on an opaque
 * ground and cannot be made transparent, so the band has to carry the same
 * ground: measured at its border the file runs rgb(0,6,22) along the top
 * edge and rgb(1,7,25) along the bottom edge, and those are the two stops
 * below. The picture then stands on a surface of its own colour and its
 * left and right edge cannot be made out.
 *
 * The Melitta file is a mockup on a transparent ground and shows the same
 * stage through its corners, which is what makes the two cards read as a
 * pair. Deliberately not the card blue #181F32: the deep ground is what
 * lets the two bright screens carry the band. */
.ccsecp-refs .ccsec-refimg > .elementor-widget-container {
  position: relative;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(180deg, #000616 0%, #010719 100%);
  /* the band is the only thing in this box; the line box of an inline
     image would otherwise add a few pixels under it */
  line-height: 0;
}

/* contain, not cover. Round 15 cropped both pictures to a 200px strip,
 * which cut the monitor and the phone away and left the shop screenshot
 * alone on the card - a picture of a website, not a piece of work shown on
 * a device. Laid whole, the mockup is what the band shows.
 *
 * The height is what decides how large the devices are: both files are
 * about four to three and the band is about 674 to 260, so the picture is
 * always limited by the height and never by the width. 260px of band make
 * the Melitta mockup 331px wide and the OLB mockup 345px - close enough
 * that the two monitors come out the same size on the two cards, which is
 * the point of the pair. */
.ccsecp-refs .ccsec-refimg img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center center;
}

/* The lower edge of the band fades into the card instead of ending on a
 * hard line, so the stage reads as part of the card and not as a strip
 * laid on top of it.
 *
 * The ramp runs across the whole width of the band and therefore lies over
 * the picture and over the ground beside it in equal measure. That is what
 * keeps it harmless: it lightens both by the same amount, so the edge of
 * the OLB photograph stays invisible inside it.
 *
 * Every side of the box is written out. Elementor ships defaults for the
 * pseudo elements of its own boxes, and a rule that only names two sides
 * inherits the rest of them. */
.ccsecp-refs .ccsec-refimg > .elementor-widget-container::after {
  content: "";
  position: absolute;
  border: 0;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 68px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(24, 31, 50, 0) 0%,
    rgba(24, 31, 50, 0.55) 62%,
    rgba(24, 31, 50, 0.92) 100%);
}

/* .ccsec-refimg-m and .ccsec-refimg-o carry no rules of their own any
 * more. Round 15 needed one crop per picture, because each file had to be
 * pushed and widened until the wanted strip of it lay across the band.
 * With both mockups shown whole there is nothing left to place: they are
 * centred on the same stage at the same height, which is the point of the
 * pair. The two classes stay on the widgets so a later round can address
 * one card without touching the other. */


/* --------------------------------------------------------------------
 * Logo row with the badge
 *
 * The row is a flex container from its Elementor settings. Only the two
 * children need a correction: Elementor hands every widget the full width
 * of its parent, which would push the badge onto a second line.
 * -------------------------------------------------------------------- */
.ccsecp-refs .ccsec-refhead > .elementor-widget {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

/* The badge is a pill and must never be stretched by the row. Its fill,
 * frame and pulse come from .ccref-badge in ccfx-v3.css. */
.ccsecp-refs .ccref-badge > .elementor-widget-container {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}


/* --------------------------------------------------------------------
 * The chips
 *
 * The page level custom css draws them silver on a white hair line. Here
 * they carry the orange of the page instead, so the three terms under
 * each reference read as the subject of the block rather than as neutral
 * labels. Three classes, because the page rule that is being corrected
 * has two and would otherwise win on source order alone.
 *
 * Each chip breathes, and the three of a row do it one after the other.
 * The rhythm is the 2.4s of the status badge above them, so the card has
 * one pulse and not two, and the offset of a quarter second per chip is
 * what turns three pills beating together into a row that runs left to
 * right. The step is small on purpose: a whole second of offset reads as
 * three separate signals.
 *
 * Only the shadow moves, never the frame or the fill. A ring that grows
 * out of the pill and fades is visible against the dark card without
 * changing anything about the chip itself, so the row keeps its weight in
 * the text block underneath the paragraph.
 * -------------------------------------------------------------------- */
.ccsecp-refs .ccsec-ref .ccstep {
  border-color: rgba(255, 142, 43, 0.35);
  background: rgba(255, 142, 43, 0.07);
  color: #ffb765;
  animation: ccsecp-chip-pulse 2.4s ease-in-out infinite;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* nth-of-type, not nth-child: the chips are the only em elements in the
 * heading, and counting the type keeps the stagger intact should a text
 * node or a br ever land between them. */
.ccsecp-refs .ccsec-ref .ccstep:nth-of-type(2) { animation-delay: 0.25s; }
.ccsecp-refs .ccsec-ref .ccstep:nth-of-type(3) { animation-delay: 0.5s; }

@keyframes ccsecp-chip-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 142, 43, 0.20), 0 0 0 rgba(255, 142, 43, 0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 142, 43, 0), 0 0 12px rgba(255, 142, 43, 0.28);
  }
}

/* The pointer stops the breathing on that one chip and puts a steady rim
 * and a wider glow on it instead.
 *
 * animation: none is not decoration here, it is what makes the hover
 * visible at all. A running animation writes box-shadow on every frame
 * from the keyframes above, and an animated value outranks a plain
 * declaration in the cascade no matter how specific the selector is - the
 * hover shadow would simply never be painted while the pulse runs. */
.ccsecp-refs .ccsec-ref .ccstep:hover {
  animation: none;
  border-color: rgba(255, 142, 43, 0.85);
  background: rgba(255, 142, 43, 0.14);
  box-shadow:
    0 0 14px rgba(255, 142, 43, 0.34),
    0 0 0 1px rgba(255, 142, 43, 0.22);
}


/* --------------------------------------------------------------------
 * The closing line under the cards
 *
 * Same words, quieter setting: a hair line above it separates the pointer
 * to the other pages from the two references, and the type is a touch
 * smaller and wider spaced than the card text so it reads as a footnote
 * to the block instead of a third paragraph.
 *
 * The margin is what keeps that hair line from being mistaken for part of
 * the cards, and it is the fix for the stray line under them.
 *
 * The section container runs on a gap of 0, so before this margin the
 * closing line began exactly where the card grid ended: measured on the
 * page, the cards ended at y 1068 and the hair line was drawn at y 1068.
 * Standing still the two fell on top of each other and the line could not
 * be seen at all. But the cards tilt to the pointer, and a tilt moves
 * their lower edge - measured, the bottom of the card travelled 8.4px
 * down at the strongest angle. The hair line stayed where it was, and a
 * straight 820px rule appeared inside the moving card. That is the line
 * that looked wrong, and it only ever appeared while a card was moving.
 *
 * 34px is the distance that ends it. A tilt cannot carry the lower edge
 * of a card further than about 9px at the angles the engine allows
 * (6.5 degrees on a card of this size), so a third of the gap is the most
 * the card can ever eat into, the rule never meets a card edge again, and
 * the separation is now wide enough to read as one - which is what it was
 * always meant to be.
 * -------------------------------------------------------------------- */
.ccsecp-refs .ccsecp-src {
  position: relative;
  margin-top: 34px;
  padding-top: 26px;
}

.ccsecp-refs .ccsecp-src > .elementor-widget-container {
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 0.01em;
  color: #FFFFFF6B;
}

/* The links of the closing line. The page custom css names them as
   "selector .ccsecp-src a", which loses to Elementor's own
   .elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] > a
   (0,3,1) - the brighter grey never showed, only the hover did. Naming the
   title element as well outranks it, same cure the rules section uses. */
.ccsec.ccsecp-refs .ccsecp-src .elementor-heading-title a {
  color: #FFFFFFB0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s ease;
}
.ccsec.ccsecp-refs .ccsecp-src .elementor-heading-title a:hover,
.ccsec.ccsecp-refs .ccsecp-src .elementor-heading-title a:focus {
  color: #FF8E2B;
}

.ccsecp-refs .ccsecp-src::before {
  content: "";
  position: absolute;
  border: 0;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0) 100%);
}


/* --------------------------------------------------------------------
 * Narrow screens
 *
 * The two cards drop to one column at 1024px rather than at the 767px the
 * page css uses for the rest of its grids. With a picture band on top, a
 * logo and a badge in one row and three chips underneath, half of a
 * tablet width leaves the content column around 300px wide: the badge
 * wraps under the logo and the chips break into three lines. One full
 * width card carries all of it in one piece.
 *
 * Three classes again, because the page rule setting the two column grid
 * has two and sits in the same cascade.
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ccsec.ccsecp-refs .ccsec-refs {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* ccfx-v3.css pulls the rim box onto the card for every glow card below
   * 1024px, for the same reason as above. That rule names one class and
   * would lose against the two of the card rule further up, so the value
   * is repeated here rather than left to it. */
  .ccsecp-refs .ccsec-ref {
    --gc-pad: 0px;
  }
  /* One card per row down here, so the card is as wide as the section.
   * A 236px stage keeps the mockup at the same size as on the wide screen
   * while the card around it has grown, which is what makes the band read
   * as a band and not as a picture with a frame. */
  .ccsecp-refs .ccsec-refimg img {
    height: 236px;
  }
}

@media (max-width: 767px) {
  /* card padding is 22px/20px down here, so the bleed changes with it */
  .elementor .ccsecp-refs .ccsec-ref > .elementor-widget.ccsec-refimg {
    width: calc(100% + 40px);
    margin: -22px -20px 16px -20px;
  }
  /* On the phone the card is around 350px wide, so a 180px stage puts the
   * mockup at about 230px: large enough to be read as a monitor with a
   * phone beside it, small enough to leave the band a band. */
  .ccsecp-refs .ccsec-refimg img {
    height: 180px;
  }
  .ccsecp-refs .ccsec-refimg > .elementor-widget-container::after {
    height: 52px;
  }
  .ccsecp-refs .ccsecp-src {
    /* the cards do not tilt on a touch screen, so the gap only has to be
     * the visual separation, not the clearance for a moving edge */
    margin-top: 24px;
    padding-top: 20px;
  }
  .ccsecp-refs .ccsecp-src > .elementor-widget-container {
    font-size: 13px;
    line-height: 20px;
  }
}


/* --------------------------------------------------------------------
 * Reduced motion
 *
 * The pulse of the badge and its dot are already stopped in ccfx-v3.css.
 * What is left here is the chips: the breathing stops, the hover stops
 * moving, and both keep the resting look. The rim still warms up on
 * hover, it just does so at once - reduced motion is about movement, not
 * about taking the answer to the pointer away.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccsecp-refs .ccsec-ref .ccstep {
    animation: none;
    transition: none;
  }
}