/*
Theme Name: Hello Elementor BDG
Theme URI: https://bdg-solutions.de
Description: Child theme of Hello Elementor for the BDG Solutions site. Carries only the motion/effect CSS that free Elementor cannot express (marquees, scroll reveal, sticky CTA bar, phase auto-cycle, hero float). All layout, spacing, typography and color remain editable in Elementor.
Author: BDG Solutions
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-bdg
*/

/* ============================================================
   BDG effect layer
   Every class here is applied via Elementor's Advanced > CSS Classes
   field, so sections stay fully editable in the Elementor UI.
   Values are ported 1:1 from the prototype's css/style.css.
   ============================================================ */

/* ---------- Scroll reveal (prototype: .reveal / .reveal.in) ---------- */
.bdg-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

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

/* ---------- Hero entrance (prototype: heroIn) ---------- */
@keyframes bdgHeroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.bdg-hero-copy > .elementor-element {
  animation: bdgHeroIn 0.7s ease backwards;
}

.bdg-hero-copy > .elementor-element:nth-child(1) { animation-delay: 0.05s; }
.bdg-hero-copy > .elementor-element:nth-child(2) { animation-delay: 0.15s; }
.bdg-hero-copy > .elementor-element:nth-child(3) { animation-delay: 0.25s; }
.bdg-hero-copy > .elementor-element:nth-child(4) { animation-delay: 0.35s; }
.bdg-hero-copy > .elementor-element:nth-child(5) { animation-delay: 0.45s; }
.bdg-hero-copy > .elementor-element:nth-child(6) { animation-delay: 0.55s; }

.bdg-hero-visual {
  animation: bdgHeroIn 0.8s ease 0.2s backwards;
}

/* ---------- Marquee (prototype: .marquee 28s / .syslogos 55s) ---------- */
.bdg-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bdg-marquee .e-con-inner,
.bdg-marquee > .elementor-widget-container {
  display: flex;
  width: max-content;
  /* Elementor caps .e-con-inner at --content-width; without this the track is
     clipped to the container and translateX(-50%) shifts half the viewport
     instead of half the track, so the loop visibly jumps once per cycle. */
  max-width: none;
  flex-wrap: nowrap;
  animation: bdgMarquee 28s linear infinite;
}

.bdg-marquee-slow .e-con-inner,
.bdg-marquee-slow > .elementor-widget-container {
  animation-duration: 55s;
}

.bdg-marquee:hover .e-con-inner,
.bdg-marquee:hover > .elementor-widget-container {
  animation-play-state: paused;
}

@keyframes bdgMarquee {
  to { transform: translateX(-50%); }
}

/* ---------- Sticky CTA bar (prototype: #stickyCta) ---------- */
.bdg-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  transform: translateY(110%);
  transition: transform 0.3s ease;
}

.bdg-sticky-cta.visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bdg-sticky-cta { transition: none; }
}

/* ---------- Six-phase stack (prototype: .phase-row / phaseProgress) ---------- */
.bdg-phase-progress {
  height: 3px;
  width: 0;
  background: var(--e-global-color-bdgred, #e30039);
}

.bdg-phase-row.active .bdg-phase-progress {
  animation: bdgPhaseProgress 3.2s linear forwards;
}

@keyframes bdgPhaseProgress {
  to { width: 100%; }
}

/* Body of a phase row is collapsed until its row is active */
.bdg-phase-row .bdg-phase-body {
  display: none;
}

.bdg-phase-row.active .bdg-phase-body {
  display: block;
}

/* ---------- Flow arrow pulse (prototype: .flow-arrow / arrowPulse) ---------- */
.bdg-flow-arrow {
  animation: bdgArrowPulse 1.6s ease-in-out infinite;
}

.bdg-flow-arrow-d1 { animation-delay: 0.4s; }
.bdg-flow-arrow-d2 { animation-delay: 0.8s; }

@keyframes bdgArrowPulse {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 1;    transform: translateX(5px); }
}

@media (max-width: 960px) {
  .bdg-flow-arrow {
    transform: rotate(90deg);
  }
  @keyframes bdgArrowPulse {
    0%, 100% { opacity: 0.35; transform: rotate(90deg) translateX(0); }
    50%      { opacity: 1;    transform: rotate(90deg) translateX(5px); }
  }
}

/* ---------- Float (prototype: .float-a / .float-b) ---------- */
.bdg-float-a { animation: bdgFloaty 4.5s ease-in-out infinite; }
.bdg-float-b { animation: bdgFloaty 5.5s ease-in-out infinite reverse; }

@keyframes bdgFloaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Sticky header (prototype: .site-header) ---------- */
.bdg-sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- Reduced motion: mirrors the prototype exactly ---------- */
@media (prefers-reduced-motion: reduce) {
  .bdg-reveal { opacity: 1; transform: none; transition: none; }
  .bdg-hero-copy > .elementor-element,
  .bdg-hero-visual { animation: none; }
  .bdg-marquee .e-con-inner,
  .bdg-marquee > .elementor-widget-container { animation: none; }
  .bdg-flow-arrow { animation: none; }
  .bdg-float-a, .bdg-float-b { animation: none; }
  .bdg-phase-row.active .bdg-phase-progress { animation: none; width: 100%; }
  html { scroll-behavior: auto; }
}

/* ---------- XPRO dropdown panel: prototype .submenu ---------- */
.bdg-sticky-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu{background:rgba(9,13,22,0.98);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:10px;box-shadow:0 22px 50px rgba(0,0,0,0.45);gap:2px;}
.bdg-sticky-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a{border-radius:8px;}
/* non-link section label inside the dropdown (prototype .sub-label) */
.bdg-sticky-header .xpro-elementor-dropdown-menu li.sub-label > a{font-family:'Poppins',sans-serif!important;font-size:10.5px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:1.5px!important;color:rgba(255,255,255,0.4)!important;padding:8px 14px 4px!important;pointer-events:none;background:transparent!important;border-radius:0!important;}

/* ---------- Footer grid: prototype collapses 4 cols -> 2 at 960 ---------- */
@media (max-width:960px){.bdg-footer-col{flex-grow:0!important;flex-basis:calc(50% - 20px)!important;width:auto!important;}}
@media (max-width:600px){.bdg-footer-col{flex-basis:100%!important;}}

/* ---------- Link colour reset ----------
   The prototype has no global <a> colour: every link takes its colour from the
   component it sits in. Hello Elementor ships a default #cc3366, which would
   otherwise override the Elementor colour controls on every link widget. ---------- */
.elementor a{color:inherit;}

/* ---------- Top-level nav spacing ----------
   Prototype uses .main-nav ul{gap:30px} with no padding/margin on the links.
   XPRO has no gap control, so the 30px lives here; padding and margin are
   zeroed in the widget itself. ---------- */
.bdg-sticky-header .xpro-elementor-horizontal-navbar-nav{gap:30px;}
@media (max-width:960px){.bdg-sticky-header .xpro-elementor-horizontal-navbar-nav{gap:0;}}

/* ---------- Mobile nav panel (<=960) ----------
   Prototype: .main-nav.open is a full-width panel below the 74px header.
   XPRO defaults to a 400px right-hand off-canvas drawer; these rules restyle
   XPRO's own panel rather than replacing its toggle behaviour. ---------- */
@media (max-width:960px){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{display:none!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:none!important;height:100%!important;max-height:100%!important;background:#0d1322!important;border-bottom:0!important;padding:90px 24px 32px!important;text-align:left!important;transform:none!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:99!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet.active{display:block!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav{flex-direction:column!important;align-items:flex-start!important;gap:16px!important;padding-top:0!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a{padding:0!important;min-height:0!important;border-bottom:0!important;background:transparent!important;color:rgba(255,255,255,0.85)!important;}
  /* submenus stay expanded and indented, no panel chrome */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:6px 0 0 16px!important;min-width:0!important;width:auto!important;max-width:none!important;}
  .bdg-sticky-header .xpro-elementor-dropdown-menu > li > a{background:transparent!important;padding:0!important;}
  .bdg-sticky-header .xpro-dropdown-menu-toggle{display:none!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-overlay,.bdg-sticky-header .xpro-elementor-horizontal-menu-close{display:none!important;}
}

/* ---------- Nav breakpoint guard (961-1024) ----------
   The prototype switches to the mobile nav at 960px. XPRO hardcodes its
   responsive-tablet media query at 1024px in the plugin stylesheet, which
   we must not edit. These rules hand the 961-1024 band back to the desktop
   presentation so the effective switch lands exactly on 960. Pure CSS: it
   re-evaluates on any viewport change with no JS and no hydration flash.
   ---------- */
@media (min-width:961px) and (max-width:1024px){
  .bdg-sticky-header .xpro-elementor-horizontal-navbar-wrapper{position:static!important;height:auto!important;width:auto!important;max-width:none!important;background:none!important;padding:0!important;transform:none!important;overflow:visible!important;z-index:auto!important;text-align:initial!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav{flex-direction:row!important;align-items:center!important;padding-top:0!important;gap:30px!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li{width:auto!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li > a{width:auto!important;min-height:0!important;padding:0!important;margin:0!important;border-bottom:0!important;justify-content:center!important;}
  .bdg-sticky-header .xpro-elementor-dropdown-menu{position:absolute!important;width:270px!important;min-width:270px!important;max-width:none!important;display:block!important;opacity:0;visibility:hidden;}
  .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li:hover > .xpro-elementor-dropdown-menu{opacity:1;visibility:visible;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-toggler-wrapper,.bdg-sticky-header .xpro-elementor-horizontal-menu-overlay,.bdg-sticky-header .xpro-elementor-horizontal-menu-close{display:none!important;}
}

/* admin-bar-panel-offset: keep the fixed mobile panel below the WP admin bar */
@media (max-width:960px){body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{top:106px!important;}}
@media (max-width:782px){body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{top:120px!important;}}

/* ---------- Anwendungsfaelle accordion 720px rule ----------
   Prototype collapses .acc-fields to one column and hides the head chips at
   720px. Elementor's only breakpoint slot between 600 and 960 is taken by the
   820px .path-grid rule, so this one lives here. ---------- */
@media (max-width:720px){
  #anwendungsfaelle .bdg-acc-fields{grid-template-columns:1fr!important;flex-direction:column!important;}
  /* status chips sit as bare <span> children of the accordion title text */
  #anwendungsfaelle .e-n-accordion-item-title-text > span{display:none!important;}
}

/* ============================================================
   Prototype effects Elementor's panel cannot express
   ============================================================ */

/* Hero starfield - .hero::before in the prototype. Eight radial gradients,
   verbatim positions/sizes/opacities. Scoped to the hero container (#top). */
#top{position:relative;overflow:hidden;}
#top::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:radial-gradient(1.5px 1.5px at 8% 22%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 14%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 82%, rgba(255,255,255,0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 68% 8%, rgba(255,255,255,0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 30%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 45%, rgba(255,255,255,0.25) 50%, transparent 51%);
}
/* prototype lifts .hero-grid above the starfield with position:relative */
#top > .e-con-inner{position:relative;z-index:1;}

/* Button hover lift - prototype .btn{transition:transform .15s ease,...} + .btn:hover{transform:translateY(-2px)} */
.elementor a.elementor-button,.xpro-theme-builder-header a.elementor-button{transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;}
.elementor a.elementor-button:hover,.xpro-theme-builder-header a.elementor-button:hover{transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){.elementor a.elementor-button:hover,.xpro-theme-builder-header a.elementor-button:hover{transform:none;}}

/* Hello Elementor gives <p> a 14.4px bottom margin. The prototype's paragraphs
   carry no trailing margin - spacing is set per widget in Elementor - so the
   inherited margin was adding ~14px to every text block on the page. */
.elementor-widget-text-editor p:last-child,
.elementor-icon-box-description,
.elementor-widget-icon-box p:last-child{margin-bottom:0;}

/* path-card icon chip - prototype .path-card .icon-chip is a 52x52 grid box.
   Elementor's image widget will not take a fixed box width here, so the chip
   geometry is declared the same way the prototype declares it. */
#einstiegsmodelle .elementor-widget-image{width:52px;height:52px;display:grid;place-items:center;padding:0!important;}
#einstiegsmodelle .elementor-widget-image img{width:24px;height:24px;}

/* eyebrow rule - prototype .eyebrow is an inline-flex with a 26x2px red bar
   before the text and a 10px gap. Elementor has no ::before control. */
.bdg-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;}
.bdg-eyebrow .elementor-heading-title::before{content:"";width:26px;height:2px;background:#E30039;display:inline-block;flex:none;}

}

/* ============================================================
   Card + row hover micro-interactions (prototype)
   Elementor cannot express parent-hover -> child effects, so these are
   opt-in helper classes. NOTHING existing is modified - these rules only
   apply to elements that carry the new classes.
   Sources: style.css .shop-card:hover (2803), .b-tile:hover (966),
   .result-row:hover (792), .icon-chip hover group (658), .hero-contact a (406).
   ============================================================ */
.bdg-hover-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.bdg-hover-card:hover{transform:translateY(-4px);border-color:rgba(227,0,57,0.45)!important;box-shadow:0 14px 34px rgba(11,17,32,0.08);}
.bdg-hover-row{transition:transform .2s ease,background .2s ease;}
.bdg-hover-row:hover{transform:translateX(8px);}
.bdg-hover-card .elementor-icon,.bdg-hover-row .elementor-icon{transition:background-color .2s ease,color .2s ease,transform .2s ease;}
.bdg-hover-card:hover .elementor-icon,.bdg-hover-row:hover .elementor-icon{background-color:#E30039;color:#fff;transform:scale(1.08) rotate(-4deg);}
.bdg-hover-card:hover .elementor-icon svg,.bdg-hover-row:hover .elementor-icon svg{stroke:#fff;fill:none;}
.bdg-hover-card-inv:hover .elementor-icon{background-color:rgba(255,255,255,0.16);color:#fff;}
.bdg-hero-contact .elementor-icon-box-title,.bdg-hero-contact .elementor-icon-box-title a,.bdg-hero-contact .elementor-icon{transition:color .15s ease;}
.bdg-hero-contact .elementor-widget-icon-box:hover .elementor-icon-box-title,.bdg-hero-contact .elementor-widget-icon-box:hover .elementor-icon-box-title a,.bdg-hero-contact a:hover .elementor-icon-box-title{color:#FFFFFF!important;}
.bdg-hero-contact .elementor-widget-icon-box:hover .elementor-icon,.bdg-hero-contact a:hover .elementor-icon{color:#FFFFFF!important;}
.bdg-hero-contact .elementor-widget-icon-box:hover .elementor-icon svg{stroke:#FFFFFF;}
@media (prefers-reduced-motion:reduce){.bdg-hover-card:hover,.bdg-hover-row:hover{transform:none;}.bdg-hover-card:hover .elementor-icon,.bdg-hover-row:hover .elementor-icon{transform:none;}}

/* ============================================================
   Page 128 (EDI) scoped corrections - every selector is prefixed
   with .elementor-128 so nothing outside this page is affected.
   These two have no Elementor panel control.
   ============================================================ */

/* .stat-item .value .suffix { color: var(--bdg-red) } - Elementor's counter
   paints prefix/suffix with number_color and exposes no separate control. */
.elementor-128 .elementor-counter-number-suffix{color:#E30039;}

/* .btn-outline-light is a single <a> in the prototype, so the whole button
   is hoverable and shows a pointer. The icon-box only links its title, so a
   stretched pseudo-link restores full-area hover + cursor. */
.elementor-128 .bdg-edi-cta{position:relative;cursor:pointer;transition:transform .15s ease,border-color .15s ease;}
.elementor-128 .bdg-edi-cta,.elementor-128 .bdg-edi-cta *{cursor:pointer;}
.elementor-128 .bdg-edi-cta .elementor-icon-box-title a::after{content:"";position:absolute;inset:0;z-index:2;}
.elementor-128 .bdg-edi-cta:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.55);}
@media (prefers-reduced-motion:reduce){.elementor-128 .bdg-edi-cta:hover{transform:none;}}

/* ---------- Page-scoped: e-commerce-multichannel (page 126 hover states) ----------
   Hover/interaction states copied verbatim from css/style.css. Elementor exposes no
   control for parent-hover-child effects, transform lifts, or per-state border colour
   on a container, so they live here. Scoped to .elementor-126 only. ---------- */

/* .shop-card - Shopsysteme ("das zu Ihnen passt") */
.elementor-126 .bdg-shop-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.elementor-126 .bdg-shop-card:hover{transform:translateY(-4px);border-color:rgba(227,0,57,0.45);box-shadow:0 14px 34px rgba(11,17,32,0.08);}
.elementor-126 .bdg-shop-card img{transition:transform .2s ease;}
.elementor-126 .bdg-shop-card:hover img{transform:scale(1.12);}

/* .channel-chip - Multichannel ("ohne Kontrollverlust") */
.elementor-126 .bdg-channel-chip{transition:transform .15s ease,border-color .15s ease;}
.elementor-126 .bdg-channel-chip:hover{transform:translateY(-3px);border-color:rgba(227,0,57,0.5);}

/* .b-tile - Bento ("bei BDG umfasst"), incl. the icon chip filling on CARD hover */
.elementor-126 .bdg-b-tile{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.elementor-126 .bdg-b-tile:hover{transform:translateY(-4px);border-color:rgba(227,0,57,0.45);box-shadow:0 14px 34px rgba(11,17,32,0.08);}
.elementor-126 .bdg-b-tile .elementor-icon{transition:background .2s ease,color .2s ease,transform .2s ease;}
.elementor-126 .bdg-b-tile:hover .elementor-icon{background-color:#E30039;color:#fff;transform:scale(1.08) rotate(-4deg);}

/* .mini-step - Phasen-Strip ("ein Plan") */
.elementor-126 .bdg-mini-step{transition:transform .18s ease,border-color .18s ease;}
.elementor-126 .bdg-mini-step:hover{transform:translateY(-4px);border-color:rgba(227,0,57,0.45);}

/* Hero buttons - .btn lift plus .btn-outline-light border. The shared rule already
   covers .elementor-button; this also catches the outline CTA if it is not a button widget. */
.elementor-126 #top .elementor-button,.elementor-126 #top .elementor-icon-box-wrapper{transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;}
.elementor-126 #top .elementor-button:hover{transform:translateY(-2px);}
.elementor-126 #top a:hover .elementor-icon-box-wrapper,.elementor-126 #top .elementor-icon-box-wrapper:hover{transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){.elementor-126 .bdg-shop-card:hover,.elementor-126 .bdg-channel-chip:hover,.elementor-126 .bdg-b-tile:hover,.elementor-126 .bdg-mini-step:hover,.elementor-126 #top .elementor-button:hover{transform:none;}}
@media (prefers-reduced-motion:reduce){}
body.page-id-131 .bdg-btn-lift{transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;}
body.page-id-131 .bdg-btn-lift:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.55)!important;}
@media (prefers-reduced-motion:reduce){}

/* ============================================================
   AI & Automation (page 129 hover) - scoped to .elementor-129 only.
   Card-level hover states the Elementor panel cannot express.
   Values verbatim from css/style.css.
   ============================================================ */
.elementor-129 .bdg-herocontact a{color:rgba(255,255,255,0.8);transition:color .15s ease;}
.elementor-129 .bdg-herocontact a:hover,.elementor-129 .bdg-herocontact a:focus-visible{color:#fff;}

.elementor-129 .bdg-btile{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.elementor-129 .bdg-btile:hover{transform:translateY(-4px);border-color:rgba(227,0,57,0.45);box-shadow:0 14px 34px rgba(11,17,32,0.08);}
.elementor-129 .bdg-btile .elementor-icon{transition:background-color .2s ease,color .2s ease,transform .2s ease;}
.elementor-129 .bdg-btile:hover .elementor-icon{background-color:#E30039;color:#fff;transform:scale(1.08) rotate(-4deg);}
.elementor-129 .bdg-btile:hover .elementor-icon svg{fill:#fff;stroke:#fff;}
.elementor-129 .bdg-btile-red:hover .elementor-icon,.elementor-129 .bdg-btile-dark:hover .elementor-icon{background-color:#fff;color:#E30039;}
.elementor-129 .bdg-btile-red:hover .elementor-icon svg,.elementor-129 .bdg-btile-dark:hover .elementor-icon svg{fill:#E30039;stroke:#E30039;}

.elementor-129 .bdg-ministep{transition:transform .18s ease,border-color .18s ease;}
.elementor-129 .bdg-ministep:hover{transform:translateY(-4px);border-color:rgba(227,0,57,0.45);}
@media (prefers-reduced-motion:reduce){.elementor-129 .bdg-btile:hover,.elementor-129 .bdg-ministep:hover{transform:none;}.elementor-129 .bdg-btile:hover .elementor-icon{transform:none;}}

/* ============================================================
   page-id-127 hover pass - Integrationen, EDI & Entwicklung
   Scoped to this page only. Card box hovers (translateY/border/shadow) are set
   natively on the containers; these rules cover the descendant effects and the
   inline hero-contact anchors, which Elementor's panel cannot express.
   ============================================================ */
.page-id-127 .elementor-element-bdint010 a,
.page-id-127 .elementor-element-bdint011 a{transition:color .15s ease;cursor:pointer;}
.page-id-127 .elementor-element-bdint010 a:hover,
.page-id-127 .elementor-element-bdint010 a:focus-visible,
.page-id-127 .elementor-element-bdint011 a:hover,
.page-id-127 .elementor-element-bdint011 a:focus-visible{color:#fff!important;}
/* .b-tile icon-chip: transition + hover fill, driven by CARD hover */
.page-id-127 .elementor-element-bdint093 .elementor-icon,
.page-id-127 .elementor-element-bdint098 .elementor-icon,
.page-id-127 .elementor-element-bdint103 .elementor-icon,
.page-id-127 .elementor-element-bdint108 .elementor-icon,
.page-id-127 .elementor-element-bdint113 .elementor-icon{transition:background-color .2s ease,color .2s ease,transform .2s ease;}
.page-id-127 .elementor-element-bdint093:hover .elementor-icon,
.page-id-127 .elementor-element-bdint103:hover .elementor-icon,
.page-id-127 .elementor-element-bdint113:hover .elementor-icon{background-color:#E30039!important;color:#fff!important;transform:scale(1.08) rotate(-4deg);}
/* tile-red / tile-dark invert on hover */
.page-id-127 .elementor-element-bdint098:hover .elementor-icon,
.page-id-127 .elementor-element-bdint108:hover .elementor-icon{background-color:#fff!important;color:#E30039!important;transform:scale(1.08) rotate(-4deg);}
/* .shop-card logo scales on card hover */
.page-id-127 .elementor-element-bdint045 img,
.page-id-127 .elementor-element-bdint055 img{transition:transform .18s ease;}
.page-id-127 .elementor-element-bdint045:hover img,
.page-id-127 .elementor-element-bdint055:hover img{transform:scale(1.12);}

/* page-id-127 card lift - .bdg-reveal sets transform/transition directly and loads
   after Elementor, so it swallowed the container hover lift and forced the 0.65s
   reveal timing. In the prototype .shop-card/.b-tile/.mini-step are declared after
   .reveal and win, giving 0.18s. Same ordering reproduced here. */
.page-id-127 .elementor-element-bdint045,
.page-id-127 .elementor-element-bdint055,
.page-id-127 .elementor-element-bdint093,
.page-id-127 .elementor-element-bdint098,
.page-id-127 .elementor-element-bdint103,
.page-id-127 .elementor-element-bdint108,
.page-id-127 .elementor-element-bdint113,
.page-id-127 .elementor-element-bdint124,
.page-id-127 .elementor-element-bdint127,
.page-id-127 .elementor-element-bdint130,
.page-id-127 .elementor-element-bdint133,
.page-id-127 .elementor-element-bdint136,
.page-id-127 .elementor-element-bdint139{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.page-id-127 .elementor-element-bdint045:hover,
.page-id-127 .elementor-element-bdint055:hover,
.page-id-127 .elementor-element-bdint093:hover,
.page-id-127 .elementor-element-bdint098:hover,
.page-id-127 .elementor-element-bdint103:hover,
.page-id-127 .elementor-element-bdint108:hover,
.page-id-127 .elementor-element-bdint113:hover,
.page-id-127 .elementor-element-bdint124:hover,
.page-id-127 .elementor-element-bdint127:hover,
.page-id-127 .elementor-element-bdint130:hover,
.page-id-127 .elementor-element-bdint133:hover,
.page-id-127 .elementor-element-bdint136:hover,
.page-id-127 .elementor-element-bdint139:hover{transform:translateY(-4px);}

/* ---------- page 133 (Xentral) card hovers ----------
   Every selector is prefixed with .elementor-133, so these rules cannot reach
   any other page. Reproduces the prototype's icon-chip micro-interaction,
   which Elementor cannot express (parent hover -> child style).
   ---------- */
/* .icon-chip{transition:background .2s ease,color .2s ease,transform .2s ease} */
.elementor-133 .elementor-icon{transition:background-color .2s ease,color .2s ease,transform .2s ease;}

/* .icon-card:hover .icon-chip / .path-card:hover .icon-chip -> red fill, white glyph */
.elementor-133 .elementor-element-bdxen046:hover .elementor-icon,
.elementor-133 .elementor-element-bdxen055:hover .elementor-icon,
.elementor-133 .elementor-element-bdxen064:hover .elementor-icon{background-color:#E30039;color:#FFFFFF;transform:scale(1.08) rotate(-4deg);}

/* .b-tile.tile-dark:hover .icon-chip / .tile-red:hover -> white chip, red glyph */
.elementor-133 .elementor-element-bdxen076:hover .elementor-icon,
.elementor-133 .elementor-element-bdxen079:hover .elementor-icon,
.elementor-133 .elementor-element-bdxen082:hover .elementor-icon,
.elementor-133 .elementor-element-bdxen085:hover .elementor-icon{background-color:#FFFFFF;color:#E30039;transform:scale(1.08) rotate(-4deg);}

/* card transitions: .model-card / .b-tile / .mini-step are all .18s ease */
.elementor-133 .elementor-element-bdxen046,
.elementor-133 .elementor-element-bdxen055,
.elementor-133 .elementor-element-bdxen064,
.elementor-133 .elementor-element-bdxen076,
.elementor-133 .elementor-element-bdxen079,
.elementor-133 .elementor-element-bdxen082,
.elementor-133 .elementor-element-bdxen085,
.elementor-133 .elementor-element-bdxen104,
.elementor-133 .elementor-element-bdxen108,
.elementor-133 .elementor-element-bdxen112,
.elementor-133 .elementor-element-bdxen116,
.elementor-133 .elementor-element-bdxen120,
.elementor-133 .elementor-element-bdxen124{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}

/* ---------- page 126 tile variants + hero CTA ----------
   The bento icon chips are stroke icons using currentColor, so only `color` may be
   set - forcing `fill` filled the line art solid. The red and dark tiles also invert
   on hover (white chip, red icon) per .b-tile.tile-red/.tile-dark:hover .icon-chip. */
.elementor-126 .bdg-b-tile .elementor-icon svg{fill:none;stroke:currentColor;}
/* red tile: chip rgba(255,255,255,.16)/#fff -> hover #fff/red */
.elementor-126 .bdg-tile-red .elementor-icon{background-color:rgba(255,255,255,0.16);color:#fff;}
.elementor-126 .bdg-tile-red:hover .elementor-icon{background-color:#fff;color:#E30039;}
/* dark tile: chip rgba(227,0,57,.2)/red -> hover #fff/red */
.elementor-126 .bdg-tile-dark .elementor-icon{background-color:rgba(227,0,57,0.2);color:#E30039;}
.elementor-126 .bdg-tile-dark:hover .elementor-icon{background-color:#fff;color:#E30039;}

/* Hero secondary CTA is an icon-box, so only the title text was a link. Stretch the
   link across the whole box so the entire container is hoverable and clickable. */
.elementor-126 .bdg-hero-cta2{position:relative;cursor:pointer;transition:transform .15s ease,border-color .15s ease;}
.elementor-126 .bdg-hero-cta2 a::after{content:"";position:absolute;inset:0;z-index:1;}
.elementor-126 .bdg-hero-cta2:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.55);}
.elementor-126 .bdg-hero-cta2 *{cursor:pointer;}
@media (prefers-reduced-motion:reduce){.elementor-126 .bdg-hero-cta2:hover{transform:none;}}

/* ---------- Page 128 chip fills on card hover ----------
   Prototype: .b-tile:hover .icon-chip { background:var(--bdg-red); color:#fff;
   transform:scale(1.08) rotate(-4deg) }
/* .b-tile.tile-red / .tile-dark invert on hover: white chip, red glyph (transform still applies) */
.elementor-128 .bdg-tile-red:hover .elementor-icon,.elementor-128 .bdg-tile-dark:hover .elementor-icon{background-color:#FFFFFF!important;color:#E30039!important;}
@media (prefers-reduced-motion:reduce){}

/* ---------- Mobile menu: full-screen overlay + scroll lock ----------
   Panel covers the whole viewport; the sticky header stays above it (z-index)
   so the logo and the toggle remain visible and tappable. 90px top padding
   clears the 74px header. Body scroll is locked by bdg-effects.js, which also
   restores the previous scroll position on close. ---------- */
body.bdg-menu-open{overflow:hidden!important;}
/* header must sit above the overlay so the close toggle stays reachable */
.bdg-sticky-header{z-index:100;}
@media (max-width:960px){body.bdg-menu-open .bdg-sticky-header{position:fixed;top:0;left:0;right:0;}}

/* ============================================================
   Card hover system - three variants (white / red / dark)
   Prototype: .icon-card / .b-tile / .path-card / .result-row hover lifts the
   card and fills its icon chip; .b-tile.tile-red / .tile-dark invert it.
   Elementor cannot express a parent-hover -> child-change rule, so it lives
   here. Cards carry bdg-card (+ -red / -dark) on the container holding the
   icon-box, so hovering ANYWHERE on the card drives the icon.
   !important is required: Elementor's per-element selectors
   (.elementor-125 .elementor-element.elementor-element-XXX .elementor-icon)
   out-specify any class-based rule.
   ============================================================ */
.bdg-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;cursor:pointer;}
.bdg-card,.bdg-card *{cursor:pointer;}
.bdg-card .elementor-icon{transition:background-color .2s ease,color .2s ease,transform .2s ease;}

/* lift - all three variants (prototype translateY(-4px), .18s ease) */
.bdg-card:hover{transform:translateY(-4px);}

/* chip motion - all three variants (prototype scale(1.08) rotate(-4deg), .2s ease) */
.bdg-card:hover .elementor-icon{transform:scale(1.08) rotate(-4deg);}

/* WHITE / light cards: chip fills red, glyph turns white */
.bdg-card:hover{border-color:rgba(227,0,57,0.45)!important;box-shadow:0 14px 34px rgba(15,21,34,0.08)!important;}
.bdg-card:hover .elementor-icon{background-color:#E30039!important;color:#FFFFFF!important;}
.bdg-card:hover .elementor-icon svg{color:#FFFFFF!important;}

/* RED cards: chip turns white, glyph turns red */
.bdg-card.bdg-card-red:hover{border-color:rgba(227,0,57,0.55)!important;box-shadow:0 18px 44px rgba(0,0,0,0.35)!important;}
.bdg-card.bdg-card-red:hover .elementor-icon{background-color:#FFFFFF!important;color:#E30039!important;}
.bdg-card.bdg-card-red:hover .elementor-icon svg{color:#E30039!important;}

/* DARK cards: chip turns white, glyph turns red */
.bdg-card.bdg-card-dark:hover{border-color:rgba(227,0,57,0.55)!important;box-shadow:0 18px 44px rgba(0,0,0,0.35)!important;}
.bdg-card.bdg-card-dark:hover .elementor-icon{background-color:#FFFFFF!important;color:#E30039!important;}
.bdg-card.bdg-card-dark:hover .elementor-icon svg{color:#E30039!important;}

@media (prefers-reduced-motion:reduce){
  .bdg-card:hover{transform:none;}
  .bdg-card:hover .elementor-icon{transform:none;}
}

/* menu list fill - the nav inside the overlay keeps its natural height so the
   panel scrolls only when the items are taller than the viewport. */
@media (max-width:960px){.bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar{height:auto;}}

/* backdrop-filter containing block ----------------------------------------
   .bdg-sticky-header uses backdrop-filter:blur(12px). A backdrop-filter makes
   the element a containing block for position:fixed descendants, so the
   full-screen menu panel was sizing against the 74px header instead of the
   viewport. The blur is pointless while an opaque overlay is covering the
   page, so it is dropped for the duration. -------------------------------- */
body.bdg-menu-open .bdg-sticky-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* stat suffix - prototype .stat-item .value .suffix is red; Elementor paints
   prefix/suffix with number_color and exposes no separate control. */
.elementor-widget-counter .elementor-counter-number-suffix{color:#E30039;}
/* keep the counter row from ever forcing horizontal overflow on narrow screens */
.elementor-widget-counter .elementor-counter-number-wrapper{min-width:0;flex-wrap:wrap;justify-content:center;}

/* ============================================================
   MOBILE MENU USABILITY PASS
   Panel sits below the 74px header so the hamburger stays clickable.
   Only the panel scrolls; the page behind is locked by bdg-effects.js.
   ============================================================ */
@media (max-width:960px){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{top:74px!important;bottom:0!important;height:auto!important;max-height:none!important;padding:14px 24px 40px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;z-index:99!important;display:none!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet.active{display:flex!important;flex-direction:column!important;}
  /* close button: visible, 48x48 tap target, pinned top-right of the panel */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-close{display:inline-flex!important;align-items:center;justify-content:center;position:sticky!important;top:0;align-self:flex-end;flex:none;width:48px!important;height:48px!important;min-width:48px;font-size:20px!important;line-height:1;color:#fff!important;background:rgba(255,255,255,0.10)!important;border:1px solid rgba(255,255,255,0.18)!important;border-radius:50%!important;margin:0 0 6px!important;cursor:pointer;z-index:3;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-close:hover{background:rgba(227,0,57,0.85)!important;border-color:rgba(227,0,57,0.9)!important;}
  /* top-level items: larger type, real tap targets, full contrast */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav{flex-direction:column!important;align-items:stretch!important;gap:0!important;padding-top:4px!important;width:100%!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li{width:100%!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a,
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a,
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.current-menu-parent > a{font-size:17px!important;line-height:1.45!important;font-weight:600!important;padding:14px 0!important;min-height:0!important;color:#FFFFFF!important;background:transparent!important;border-bottom:1px solid rgba(255,255,255,0.10)!important;}
  /* submenu: indented, readable, never wider than the panel */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:2px 0 10px 14px!important;min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu > li{width:100%!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu > li > a,
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu > li.current-menu-item > a{font-size:15px!important;line-height:1.45!important;font-weight:500!important;padding:11px 0!important;min-height:0!important;color:rgba(255,255,255,0.86)!important;background:transparent!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;white-space:normal!important;word-break:break-word;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu > li > a:hover{color:#FFFFFF!important;}
  /* section label inside the dropdown */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu li.sub-label > a{font-family:'Poppins',sans-serif!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:1.5px!important;color:rgba(255,255,255,0.45)!important;padding:14px 0 6px!important;border-bottom:0!important;pointer-events:none;}
  /* caret toggles are not needed - submenus render expanded */
  .bdg-sticky-header .xpro-dropdown-menu-toggle{display:none!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-overlay{display:none!important;}
}
/* page-scroll lock while the menu is open (scroll position restored by JS) */
body.bdg-menu-open{position:fixed!important;left:0!important;right:0!important;width:100%!important;overflow:hidden!important;}

/* ---------- circular icon containers ----------
   Prototype .compare-item .mark (22x22) and .gov-step .num (40x40) are fixed-size
   circles using display:grid; place-items:center. As Elementor heading widgets they
   are block-level and collapse to their text width, so the geometry and centring are
   declared here exactly as the source declares them. Colours stay in Elementor. */
.bdg-mark{flex:none!important;width:22px!important;height:22px!important;min-width:22px;border-radius:50%;display:grid!important;place-items:center;padding:0!important;overflow:hidden;}
.bdg-mark .elementor-heading-title{font-size:12px;line-height:1;margin:0;}
.bdg-govnum{flex:none!important;width:40px!important;height:40px!important;min-width:40px;border-radius:50%;display:grid!important;place-items:center;padding:0!important;overflow:hidden;}
.bdg-govnum .elementor-heading-title{font-size:16px;line-height:1;margin:0;}

/* ============================================================
   MOBILE MENU ACCORDION PASS
   Panel covers the full viewport (no gap under the header) and the
   submenus collapse. Header keeps z-index 100 so it paints over the
   panel and the hamburger stays usable.
   ============================================================ */
@media (max-width:960px){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;max-height:100%!important;padding:88px 20px 48px!important;}
  body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{padding-top:120px!important;}
  /* close button floats clear of the header and never scrolls away */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-close{position:fixed!important;top:86px!important;right:20px!important;margin:0!important;align-self:auto!important;z-index:101!important;}
  body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-close{top:118px!important;}
  /* parent row: text left, arrow right, whole row is the tap target */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > a{cursor:pointer;}
  /* arrow: 44px tap area, rotates to show state */
  .bdg-sticky-header .xpro-dropdown-menu-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;min-width:44px!important;margin:-10px -10px -10px 0!important;flex:none!important;color:rgba(255,255,255,0.75)!important;transition:transform .3s ease,color .2s ease!important;position:static!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.bdg-open > a > .xpro-dropdown-menu-toggle{transform:rotate(180deg)!important;color:#E30039!important;}
  /* collapsible submenu - JS drives max-height for a smooth, exact slide */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:0 0 0 14px!important;margin:0!important;max-height:0;overflow:hidden!important;transition:max-height .32s ease!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.bdg-open > .xpro-elementor-dropdown-menu{padding-bottom:8px!important;}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{transition:none!important;}
  .bdg-sticky-header .xpro-dropdown-menu-toggle{transition:none!important;}
}

/* accordion height + arrow state - driven by a custom property so the value
   always wins over the !important collapse rule, and with a specific enough
   selector for the arrow rotation. */
@media (max-width:960px){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{max-height:var(--bdg-sub-h, 0px)!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li.bdg-open > a .xpro-dropdown-menu-toggle,
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li.bdg-open > a .xpro-dropdown-menu-toggle{transform:rotate(180deg)!important;color:#E30039!important;}
}

/* ============================================================
   MOBILE MENU CLOSE-BUTTON CLEARANCE
   Close button occupies 86px-134px (48px tall). Content previously
   began at the 88px padding edge and ran underneath it. Only the
   panel's internal padding changes - the panel itself still covers
   the full viewport (inset:0), so no gap appears at the top.
   Safe-area insets are added for notched devices.
   ============================================================ */
@media (max-width:960px){
  :root{--bdg-menu-close-top:86px;--bdg-menu-close-size:48px;--bdg-menu-content-gap:18px;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{
    padding-top:calc(var(--bdg-menu-close-top) + var(--bdg-menu-close-size) + var(--bdg-menu-content-gap) + env(safe-area-inset-top, 0px))!important;
    padding-right:calc(20px + env(safe-area-inset-right, 0px))!important;
    padding-left:calc(20px + env(safe-area-inset-left, 0px))!important;
    padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px))!important;
  }
  .bdg-sticky-header .xpro-elementor-horizontal-menu-close{
    top:calc(var(--bdg-menu-close-top) + env(safe-area-inset-top, 0px))!important;
    right:calc(20px + env(safe-area-inset-right, 0px))!important;
  }
  /* the first item needs no extra margin - the padding above already clears the button */
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav{padding-top:0!important;margin-top:0!important;}
  /* admin bar pushes the header down by 32px (46px on small screens) */
  body.admin-bar{--bdg-menu-close-top:118px;}
}
@media (max-width:782px){body.admin-bar{--bdg-menu-close-top:132px;}}

/* ---------- CLEARANCE FALLBACK ----------
   env() nested in calc() invalidated the whole declaration in some engines,
   so the padding silently fell back to 88px. Plain values first; the
   safe-area upgrade is applied only where env() is genuinely supported.
   Close button spans 86-134px, so content starts at 152px (18px clear).
   ---------- */
@media (max-width:960px){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{padding-top:152px!important;padding-right:20px!important;padding-bottom:48px!important;padding-left:20px!important;}
  body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{padding-top:184px!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-close{top:86px!important;right:20px!important;}
  body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-close{top:118px!important;}
}
@media (max-width:782px){body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-close{top:132px!important;}body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{padding-top:198px!important;}}
@supports (padding-top: env(safe-area-inset-top)){
  @media (max-width:960px){
    .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{padding-top:calc(152px + env(safe-area-inset-top))!important;padding-right:calc(20px + env(safe-area-inset-right))!important;padding-bottom:calc(48px + env(safe-area-inset-bottom))!important;padding-left:calc(20px + env(safe-area-inset-left))!important;}
    .bdg-sticky-header .xpro-elementor-horizontal-menu-close{top:calc(86px + env(safe-area-inset-top))!important;right:calc(20px + env(safe-area-inset-right))!important;}
  }
}

/* ---------- ACCORDION HEIGHT GUARD ----------
   Neutralise any inline height/display jQuery may set on the submenu so the
   max-height accordion stays authoritative. ---------- */
@media (max-width:960px){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{height:auto!important;display:block!important;}
}

/* ---------- ACCORDION V3 ----------
   max-height needed a measured pixel value, and every route for supplying
   it (inline style, custom property) was defeated or read back as 0.
   A plain display toggle has nothing to measure, so it cannot silently
   collapse; the fade/slide needs no height. ---------- */
@media (max-width:960px){
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{display:none!important;max-height:none!important;height:auto!important;overflow:visible!important;transition:none!important;}
  .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.bdg-open > .xpro-elementor-dropdown-menu{display:block!important;animation:bdgSubIn .24s ease both;}
}
@keyframes bdgSubIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.bdg-open > .xpro-elementor-dropdown-menu{animation:none!important;}}

/* ============================================================
   Startseite (125): Loesungs-Zeilen mit Bild statt Icon-Chip
   Prototyp css/style.css .portfolio-bottom .icon-card ->
   .row-thumb / .row-main (Commit e94e4ca).
   Breite (210px), Mindesthoehe (148/170px) und object-fit stehen in
   Elementor. Hier nur, was Elementor nicht ausdruecken kann: das Bild
   randlos ueber die volle Kartenhoehe, der Zoom am KARTEN-Hover und die
   Lesebreite des Fliesstextes.
   ============================================================ */
.bdg-row-thumb{position:relative;align-self:stretch;overflow:hidden;}

/* Bild aus dem Fluss nehmen, damit es die Kartenhoehe fuellt statt sie zu setzen */
.bdg-row-thumb > .elementor-widget-image{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:0;}
.bdg-row-thumb .elementor-widget-image .elementor-widget-container{height:100%;}

/* !important schlaegt Elementors .elementor-125 .elementor-element-bdgpoNN img{height:148px} */
.bdg-row-thumb img{display:block;width:100%!important;height:100%!important;object-fit:cover;transition:transform .35s ease;}

/* Prototyp: .portfolio-bottom .icon-card:hover .row-thumb img{transform:scale(1.06)} */
.bdg-card:hover .bdg-row-thumb img{transform:scale(1.06);}

/* Prototyp: .portfolio-bottom .icon-card p{max-width:46ch} */
.bdg-row-main p{max-width:46ch;}

@media (prefers-reduced-motion:reduce){
  .bdg-row-thumb img{transition:none;}
  .bdg-card:hover .bdg-row-thumb img{transform:none;}
}