/* ==========================================================================
   Square Security - visual polish
   Motion, hover states and typography limits.

   TWO RULES THIS FILE FOLLOWS
   ---------------------------
   1. Nothing is hidden unless JavaScript has run. The `.sq-reveal` class is
      added by polish.js, never present in the markup, so if the script fails
      to load every element renders normally instead of being stuck invisible.
   2. Every movement collapses under prefers-reduced-motion, matching the
      guard the theme already applies to `.animated`.
   ========================================================================== */

:root {
  --sq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sq-reveal-duration: 420ms;
  --sq-hover-duration: 180ms;
}

/* --------------------------------------------------------------------------
   1. Scroll reveal
   -------------------------------------------------------------------------- */

.sq-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--sq-reveal-duration) var(--sq-ease),
    transform var(--sq-reveal-duration) var(--sq-ease);
  /* Promote only while animating; cleared by the script afterwards. */
  will-change: opacity, transform;
}

.sq-reveal.sq-in {
  opacity: 1;
  transform: none;
}

/* Once revealed the script removes .sq-reveal entirely, so nothing is left
   holding a compositor layer. */

/* --------------------------------------------------------------------------
   2. Service cards
   -------------------------------------------------------------------------- */

.sc_icons_item {
  transition:
    transform var(--sq-hover-duration) var(--sq-ease),
    box-shadow var(--sq-hover-duration) var(--sq-ease);
}

.sc_icons_item:hover {
  transform: translateY(-3px);
}

/* The theme hides each card's "Mehr erfahren" label and only reveals it on
   hover. That is a hidden affordance - a visitor cannot see there is
   anything to click.

   OPACITY IS NOT THE MECHANISM. Earlier versions of this file set
   `opacity: 1` on the label and reported the problem solved; it was not.
   The label stayed invisible because the theme hides it three other ways at
   once, all on the inner `.link_text` span:

     text-indent: -110px;      slides the text out of the link's box
     visibility: hidden;
     margin-right: 0;          closes the gap to the arrow

   The -110px indent is also why the span measured 0 px wide: an
   inline-block shrinks to `text-indent + text width`, and -110 + 76 clamps
   to zero. Undoing the indent restores the width on its own; no width rule
   is needed.

   Read out of the live cascade, not guessed. The theme's rule has exactly
   the same selector as this one and loads afterwards, so !important is what
   decides it - measured: without !important nothing changed at all.

   The label is now permanent rather than hover-only, which also removes the
   layout jump as it expanded, and the gap to the arrow is 10 px instead of
   the theme's cramped 6. */
.sc_icons .sc_icons_item .sc_icons_item_more_link,
.sc_icons .sc_icons_item .sc_icons_item_more_link .link_text {
  opacity: 1 !important;
  transition: color var(--sq-hover-duration) var(--sq-ease);
}

.sc_icons .sc_icons_item .sc_icons_item_more_link .link_text {
  visibility: visible !important;
  text-indent: 0 !important;
  margin-right: 10px !important;
}

.sc_icons_item_more_link .sc_icons_item_more_link_text,
.sc_icons_item_more_link span {
  transition: transform var(--sq-hover-duration) var(--sq-ease);
}

.sc_icons_item:hover .sc_icons_item_more_link::after,
.sc_icons_item_more_link:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   3. Buttons and links - consistent easing
   -------------------------------------------------------------------------- */

.sc_button,
.elementor-button,
.wpcf7-submit,
.sc_layouts_row .sc_button {
  transition:
    background-color var(--sq-hover-duration) var(--sq-ease),
    border-color var(--sq-hover-duration) var(--sq-ease),
    color var(--sq-hover-duration) var(--sq-ease),
    transform var(--sq-hover-duration) var(--sq-ease);
}

.sc_button:hover,
.elementor-button:hover,
.wpcf7-submit:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   4. Images - subtle lift, no zoom
   -------------------------------------------------------------------------- */

.elementor-widget-image img {
  transition: transform var(--sq-hover-duration) var(--sq-ease);
}

/* --------------------------------------------------------------------------
   5. Sticky header
   -------------------------------------------------------------------------- */

.sq-scrolled .sc_layouts_row_fixed_on,
.sq-scrolled .sc_layouts_row_delimiter {
  box-shadow: 0 2px 16px rgba(20, 20, 20, 0.14);
}

/* --------------------------------------------------------------------------
   6. Typography limits
   The live site centres long German prose inside components meant for a
   single sentence, producing 80+ characters per line. Cap the measure and
   left-align anything long enough to be a paragraph.
   -------------------------------------------------------------------------- */

.sq-longform {
  max-width: 68ch;
  text-align: left;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   7. Reduced motion
   The script does not even create the observer when this matches, so these
   rules are a second line of defence rather than the only one.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sq-reveal,
  .sq-reveal.sq-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .sc_icons_item,
  .sc_button,
  .elementor-button,
  .wpcf7-submit,
  .elementor-widget-image img {
    transition: none !important;
  }

  .sc_icons_item:hover,
  .sc_button:hover,
  .elementor-button:hover,
  .wpcf7-submit:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. /leistungen/ (page 20057) - image strip as a 2x2 grid

   Four image widgets sat as consecutive full-width siblings: 4 x 1320x576,
   2,304 px of stacked photography with nothing to break it up. All four are
   1024x576 (16:9) originals, so a two-column grid crops nothing.

   Elementor's own `.elementor-widget-wrap` is already `display:flex;
   flex-wrap:wrap`, so halving the widgets is enough - no wrapper element and
   no DOM manipulation from JavaScript.

   The gutter is applied by element id because the four are siblings in a
   mixed list of widget types, so :nth-child() would re-target itself the
   moment anything is inserted above them. If these widgets are ever
   reordered in Elementor the gutter lands on the wrong side - a cosmetic
   degradation, never a broken layout.

   Two columns only from 768 px up. Below that the photographs are already
   narrow and halving them again would make the people in them unreadable,
   so the grid falls back to the single column the page shipped with.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-widget-image {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    margin-bottom: 30px;
  }

  /* left column */
  .page-id-20057 .elementor-element-0079e2b,
  .page-id-20057 .elementor-element-505d2e4 {
    padding-right: 15px;
  }

  /* right column */
  .page-id-20057 .elementor-element-7c26aa0,
  .page-id-20057 .elementor-element-0f81813 {
    padding-left: 15px;
  }
}

.page-id-20057 .elementor-element-fd516c6 .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

/* Breathing room around the grid. The photographs butt straight up against
   the card text above and below them, which is what makes the block read as
   a dump of images rather than a gallery.

   Stacked (below 768 px) only the first and last widget take the margin -
   applying it to "the first row" there would put a gap in the middle of the
   stack, because the four are a single column at that width.

   The bottom margins carry the full `.elementor-element-fd516c6
   .elementor-widget-wrap >` prefix deliberately. The two-column rule above
   sets `margin-bottom: 30px` on every image widget through a four-class
   selector; a shorter selector here loses on specificity and silently does
   nothing. Measured: the first attempt left a 30 px gap where 72 was
   intended. */

.page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-0079e2b {
  margin-top: 40px;
}

.page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-0f81813 {
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-0079e2b,
  .page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-7c26aa0 {
    margin-top: 64px;
  }

  .page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-505d2e4,
  .page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-0f81813 {
    margin-bottom: 72px;
  }
}

/* --------------------------------------------------------------------------
   9. Service cards - make them read as cards

   White panels on a #f8f8f8 section with no border, no radius and no shadow
   read as plain blocks of text rather than as cards. A hairline plus a very
   soft shadow is enough; the hover lift from section 2 then has something to
   lift.
   -------------------------------------------------------------------------- */

.sc_icons .sc_icons_item {
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05);
}

.sc_icons .sc_icons_item:hover {
  box-shadow: 0 12px 30px rgba(20, 20, 20, 0.10);
}

/* One of the three card widgets on /leistungen/ carries `sc_align_center`,
   so a 537-character paragraph was being centred - ragged on both edges and
   visibly different from the two widgets either side of it. Align every card
   on the page the same way. */
.page-id-20057 .sc_icons.sc_align_center .sc_icons_item,
.page-id-20057 .sc_icons.sc_align_center .sc_icons_item_title,
.page-id-20057 .sc_icons.sc_align_center .sc_icons_item_description {
  text-align: left;
}

/* --------------------------------------------------------------------------
   10. Long-form section below the cards

   `h3` inherits the theme's 35 px heading scale, which is heavier than the
   section's own title and competes with it four times over. Step it down and
   give each one an accent rule so the block scans as a sequence of topics.
   Accent colour is the theme's own button colour, read from the live page.

   The four topics - Oktoberfest, Über Uns, Unsere Erfahrung, Unsere Kunden -
   are wrapped one per `.sq-lf-item` in the widget's own markup, so they can
   be laid out two across instead of running down one 700 px column for
   1,140 px. The wrapper divs were added to the Elementor text widget, not
   injected from JavaScript, so the grouping survives with the stylesheet
   switched off: it simply stacks.

   Two columns from 900 px up. The column has to stay wide enough for a
   readable measure - at 1100 px total each column is roughly 60 characters,
   which is comfortable; narrower than that and the paragraphs start to
   fragment.

   `align-items: start` matters here: the Oktoberfest topic has three
   paragraphs and the others have one, so without it the short cells would
   stretch and their accent rules would no longer line up with the text.
   -------------------------------------------------------------------------- */

.sq-longform h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-block: 0 0.7em;
  padding-top: 0.8em;
  border-top: 2px solid rgba(247, 152, 29, 0.9);
}

.sq-longform p {
  margin-block-end: 1.1em;
}

.sq-lf-item > :last-child {
  margin-block-end: 0;
}

/* Stacked: the gap between topics is the item's own margin. */
.sq-lf-item + .sq-lf-item {
  margin-block-start: 2.6em;
}

/* The grid is deliberately the full width of the Elementor container rather
   than a narrower reading measure, so its two columns sit on exactly the
   same left edges as the two service cards directly above it:

     cards   x = 100, 775   width 645   gap 30
     topics  x = 100, 775   width 645   gap 30

   At 1100 px it was inset by 110 px on each side and the mismatch was
   obvious. That costs some readability - roughly 72 characters per line
   instead of 60 - but it matches the measure the cards above already use,
   so the page reads as one grid instead of two. */

@media (min-width: 900px) {
  .sq-longform {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 30px;
    align-items: start;
  }

  /* Gridded: `gap` owns the spacing, so the stacking margin comes back off. */
  .sq-lf-item + .sq-lf-item {
    margin-block-start: 0;
  }
}

/* --------------------------------------------------------------------------
   11. Dead vertical space before the footer

   125 px of spacer widgets close the page content and the footer opens with
   another 80 px of its own - 205 px of empty white between the last sentence
   and the first footer heading.

   These are Elementor spacer widgets, but their height does NOT come from
   Elementor's `--spacer-size`; the theme's own `sc_height_huge` /
   `sc_height_medium` classes set it on `.elementor-spacer-inner`. Overriding
   the custom property was measured on the live page and changed nothing, so
   the height is set on both elements instead. No !important needed - the
   page-id prefix carries the specificity.
   -------------------------------------------------------------------------- */

.page-id-20057 .elementor-element-2bf3247 .elementor-spacer,
.page-id-20057 .elementor-element-2bf3247 .elementor-spacer-inner {
  height: 0;
}

.page-id-20057 .elementor-element-8cc700f .elementor-spacer,
.page-id-20057 .elementor-element-8cc700f .elementor-spacer-inner {
  height: 40px;
}

.footer_wrap .elementor-element-e842674 .elementor-spacer,
.footer_wrap .elementor-element-e842674 .elementor-spacer-inner {
  height: 48px;
}

/* --------------------------------------------------------------------------
   12. Footer

   Three even columns already, but every heading, link and paragraph sits at
   the same weight and size, so nothing establishes a hierarchy. Column
   headings become small caps; the link list gets a hover state it did not
   have; the logo is given room.
   -------------------------------------------------------------------------- */

.footer_wrap .sc_item_title.sc_title_title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

.footer_wrap ul.custom_links_list a {
  transition: color var(--sq-hover-duration) var(--sq-ease);
}

.footer_wrap ul.custom_links_list a:hover {
  color: #fff;
}

.footer_wrap a:not(.sc_button) {
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .footer_wrap .elementor-widget-image img {
    max-width: 260px;
  }
}

/* --------------------------------------------------------------------------
   13. /leistungen/ - the "Bunnycow" featured card

   It is the only full-width card on the page and it sat flush against the
   three-card row beneath it: measured gap 0 px, so the two widgets read as
   one block with a seam through it.

   Full `.elementor-widget-wrap >` prefix for the same reason as the image
   margins above - a shorter selector loses to Elementor's own widget
   spacing rule.
   -------------------------------------------------------------------------- */

.page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-988c35c {
  margin-bottom: 40px;
}

/* The long-form grid opened flush against the card row above it - measured
   gap 0 px - which put the first accent rule directly under the cards'
   bottom edge and made the two blocks look like one. */

.page-id-20057 .elementor-element-fd516c6 .elementor-widget-wrap > .elementor-element-090b424 {
  margin-top: 56px;
}

/* --------------------------------------------------------------------------
   14. Homepage service cards - the card had no padding at all

   Measured on the live page: `padding: 0px` on all four sides, with the
   icon flush to the top edge, the title flush to the left, and "Read more"
   sitting exactly 0 px above the bottom edge.

   That is invisible while the card background is transparent, which is why
   it went unnoticed - but the theme paints a white panel with a shadow on
   hover, and the moment that panel appears the text is jammed into its
   corners. The soft resting shadow added in section 9 made it visible even
   before hover.

   Scoped to the homepage widget on purpose. The /leistungen/ cards are the
   same component but already carry their own padding (57.6 / 36 / 21.6), so
   a site-wide rule would double it there.

   Card width is unaffected - the component is border-box, measured - so
   this costs height (361 -> 450 px) and nothing else. All four stay equal.
   -------------------------------------------------------------------------- */

.page-id-20465 .elementor-element-ea629f9 .sc_icons_item {
  padding: 32px 28px 30px;
}