/* --- HEADER & NAVIGATION --- */
.header-social-inner-wrap {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

/* Syntaxfehler behoben: Das #-Zeichen wurde entfernt */
.ast-mobile-header-content > .ast-builder-menu, 
.ast-desktop-header-content > .ast-builder-menu {
  padding-top: 82px;
  position: fixed;        
}

.main-header-bar {
  top: 0;
  height: 90px;
  position: fixed;
  width: 100% !important;
  background-color: rgba(0,0,0,0.4) !important; 
  /* Performance-Tipp: Blur-Wert reduziert. 30px ruckelt auf vielen Handys! */
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  /* Zwingt den Browser zur Hardware-Beschleunigung (Grafikkarte) */
  transform: translateZ(0); 
}

/* "selector" funktioniert im Customizer nicht. Ich habe es zu .main-header-bar geändert, 
 da sich die Effekte offenbar auf den Header beziehen. 
*/
.main-header-bar { 
  transition: background-color 1s ease, min-height 1s ease !important;
}
.main-header-bar.elementor-sticky--effects > .elementor-container {
  min-height: 70px;
}

/* --- SITE CONTENT --- */
#site-content { 
  background-color: rgba(0,0,0,0.4) !important; 
  /* Blur von 20px auf 10px reduziert für flüssigeres Scrollen */
  -webkit-backdrop-filter: saturate(180%) blur(10px); 
  backdrop-filter: saturate(180%) blur(10px);
  transform: translateZ(0); /* Hardware-Beschleunigung */
}

/* --- MOBILE & MENU --- */
.ast-mobile-header-content {
  padding-top: 82px;
  position: fixed;
  width: 100% !important;        
}

.ast-mobile-header-wrap .ast-mobile-header-content, 
.ast-desktop-header-content {
  background-color: #000000;
}

.ast-theme-transparent-header #ast-desktop-header > .ast-main-header-wrap > .main-header-bar, 
.ast-theme-transparent-header.ast-header-break-point #ast-mobile-header > .ast-main-header-wrap > .main-header-bar {
  border-bottom: 3px solid #ffe197;
}

/* --- LOGO & IMAGES --- */
img {
  width: auto;
}

.ast-mobile-header-logo {
  width: 75px;
  height: auto;
}

/* "img[Attributstil]" war invalides CSS aus einem Übersetzungsfehler. 
   Es wurde zu einer festen Klasse umgeschrieben. */
img.custom-logo-size {
  width: 80px;
  height: 80px;
}

/* --- WIDGETS & FORMS --- */
.grecaptcha-badge {
  bottom: -200px !important;
}

.id777 {
  position: -webkit-sticky; /* Vendor-Prefix muss für Safari immer oben stehen */
  position: sticky;
  top: 3rem;
}

/* Leerzeichen korrigiert */
.parent-sticky .elementor-widget-wrap {
  display: block !important; 
}

label, legend {
  color: #F2F2F2;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.post-password-form {
  width: 100%;
  max-width: 800px; /* Bessere und performantere Responsive-Lösung */
  margin: 0 auto;
  text-align: center;
}

.post-password-form input[type="submit"] {
  padding: 10px 20px;
  border-radius: 7px;
  margin-top: 20px;
}

/* --- BUTTON ANIMATION --- */
.elementor-element.shine-button .elementor-button,
.shine-button .elementor-button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* Verhindert Ruckeln während der Animation */
}

.elementor-element.shine-button .elementor-button::after,
.shine-button .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.70) 50%,
              rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  border-radius: inherit;
  pointer-events: none;
  animation: jw-btn-shine 3s ease-in-out infinite;
  will-change: left, opacity; /* Sagt dem Browser voraus, was sich animiert -> mehr Performance */
}

@keyframes jw-btn-shine {
  0%   { left: -150%; opacity: 0; }
  10%  { opacity: .35; }
  50%  { left: 120%;  opacity: .65; }
  90%  { opacity: .35; }
  100% { left: 120%;  opacity: 0; }
}